v2.0 with React-based frontend (#233)

* Correct path to static dir * Add UI build to makefile * Fix docker build * describe now works * Installed page - revision view - implement url consistent state logic (#403) * refactor * refactor * Fix/responsive and small stylings (#404) * add user defined (#405) * Fix/modal loading button (#406) * add repo to url (#407) * Fix/resources table badges (#408) * filters is now good * fix * test results fix * fix * fixes - error modal, uninstall modals, typees * fixes * bug fix * Helm dashboard v2 (#402) * missing config (#409) * fixes * fixes * Fix/minor responsiveness (#410) * installed release page * default helm icon * guard * refactor * refactor * refactor * key * refactor * fixes * fixes to install * install, add, upgrade, reconfigure now works * latest ver fix * Revision page ui fixes (#411) * link color * Add-repository-link (#412) * empty badge fix * diff fix in install repo * removed console.log * unique key in helathstatus * Cosmetics * Goreleaser upgraded * Another way to fix it * refactor * refactor * chart install fix (#413) * more maintailable * loading, empty space and default namespace * typed * loading diff state is shared * modal height fix * upgrade and add repo connected * add repo suggestion data connected to modal * removed console.log * Chart install fix (#414) * refactor: fix text align uninstall * install modal values big fix * refactor * no changes in diff msg * refactor * sorted versions * typography changes * refactor * refactor * refactor * migrate to sb 7 (#416) * Chart install fix (#415) * Add troubleshoot in komodor (#417) * status style * fix * fixes * delete now reload the page correclty * navigate after add repo fix * Chart install fix (#419) * refactor * refactor * Fix revision age (#420) * refactor * fixed redirects and nav links selected ui (#421) * test modal ui fixes * arrows fix * loading ui (#422) * test dialog now shows errors * fixed rollback diff, redirect after rollback, and debouncing before refetching chart values after changing user defined values (#423) * everything is working besides install chart * install chart should work now * no need for this anymore * styling and naming * improvements * navigation fix * flow fixes * top bar pixel perfect * onClose is optional * ts optional * pixel perfect - clusters, box shadow, error modal * installed page pixel perfect * fixes * need to fix this naming * rollback logic is now good * buttons now similiar to the old app * pass release instead of release date (#426) * repository page style fixes * rounded input * colors like in the old app * more rounding * colors * colors * Cosmetics * drop-shadow cause the dropdown to swallowed * smaller text * fixes (#428) * fixes * describe fix * Fix/lint (#431) * style fixes * fix * describe panel style fixes * diff when repo is available * diff style fixes * fixes to install dialog * specific version should be latests revision * refactor * fixes * fixes * cause troubles * Fixes (#434) * fix * dont fetch if repo not available * tag should not be visible * custom-shdaow fixes * space and shadow like in the old app * refactor (#435) * describe display logic aligned with the old app * style fix * action button style fix * selected revision default logic fix * font fix * style fixes * shutdown button fix * latest revision is now consistent in dev and prod * namespace should be empty on install * fix for current version on install * sorting fix * checkmark should be displayed in options - install * state jump fix * local charts (#436) * Several more fixes (#438) * api docs (#439) * html remove diff2html dep (#437) * Refactor * refactor * Adding storybook for StatusLabel component (#441) * refactor (#442) * we need the css * add prettier (#440) * add prettier * refactor * refactor * Fix reconfigure issue (#443) * first diff fetch fix * missing dep in hooks (#444) * namespace should be from query * triggering diff rerender by listening to loading * missing uservalues * no need for auto retry * we should work against latest revision * refactor * Fix build merge * refactor * refactor * fix * refactor * refactor * age tooltip * prettier fix * fix bug (#447) * Add eslint now (#449) * repo install chart now works as expected * release modal and eslint working good now * we should fetch when return to the initial value * Tailwind theme reorganized (#446) * install release code is like reading a story ! * namespace is not needed for chart values * install repo chart is now like reading a story :) * Fix/filternamesapce (#451) * not needed dep * prettier fix * namespace fix * add debounce (#452) * namespace filter fix * now namespace filter behaves like in the old app * more linter rules and configurations * intial value should be empty * no need to keep filters on cluster change * we don't want to keep tab state between pages * button should be disabled when loading * prettier fix * initial value we're not presented * navigation fix * namespace should always be empty * supporting pre selected namespaces * lint adjustments * Refactor stories fodler (#450) * refactor * refactor * if no user values, use the release values * Adding layer to base style (#456) * Extract duplicate type to types file (#453) * Refactor callApi into direct usage of apiService (#454) * Remove scanners from backend * Give some room for multiple HealthStatus (#458) * refactor: add dynamic api docs (#460) * remove scanners from openapi * was loading forever * fix * Extract defined values from the Modals (#461) * refactor (#462) * fix chart with no repo diff flow * naming fix * crypto UUID not available through https * revert * Update analytics.js with UUID fallback * Cosmetics * repo fetch fix * not need to depened on versions * forgot to push * revert * was causing infinite loop * COsmetics --------- Co-authored-by: Nir Parisian <nir.parisian@gmail.com> Co-authored-by: dav-sap <davidsaper@gmail.com> Co-authored-by: chad11111 <chad1111@tutanota.com> Co-authored-by: IdanSchiller <58664272+IdanSchiller@users.noreply.github.com> Co-authored-by: dav-sap <16819417+dav-sap@users.noreply.github.com> Co-authored-by: rotembm12 <46103618+rotembm12@users.noreply.github.com> Co-authored-by: naorzr <naorzruk@gmail.com> Co-authored-by: Gary Gensler <127234894+chad11111@users.noreply.github.com> Co-authored-by: Tamir Abutbul <1tamir198@gmail.com> Co-authored-by: Nir Parisian <nir2002@users.noreply.github.com>
2026-03-21 18:58:03 +00:00 · 2023-09-26 09:21:04 +01:00
parent 227966b2f1
commit e4240ed107
178 changed files with 39336 additions and 4050 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -2,4 +2,5 @@ Dockerfile
 *.md
 bin
 .idea
+.git
 dashboard/node_modules
--- a/.github/labeler.yml
+++ b/.github/labeler.yml
@@ -44,6 +44,9 @@ docker:
 helm-charts:
  - charts/*

+helm-dashboard-v2:
+  - dashboard/*
+
 github-actions:
  - .github/ISSUE_TEMPLATE/*
  - .github/labeler.yml
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -3,10 +3,11 @@ name: Build
 on:
  push:
    branches:
-    - main
+      - main
+      - helm-dashboard-v2
  pull_request:
    branches:
-    - "*"
+      - "*"

 concurrency:
  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
@@ -18,6 +19,24 @@ jobs:
    steps:
      - name: Checkout
        uses: actions/checkout@v3
+
+      # Node part
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v2.5.2
+        with:
+          cache: 'npm'
+          cache-dependency-path: dashboard/package-lock.json
+      - name: NPM install
+        run: npm i
+        working-directory: ./dashboard
+      - name: lint project
+        run: npm run lint  
+        working-directory: ./dashboard
+      - name: NPM build
+        run: npm run build
+        working-directory: ./dashboard
+
+      # Golang part
      - name: Set up Go
        uses: actions/setup-go@v3
        with:
@@ -46,14 +65,6 @@ jobs:
          name: binaries
          path: dist/
          retention-days: 1
-      - name: golangci-lint
-        uses: golangci/golangci-lint-action@v3.3.1
-        with:
-          # version: latest
-          # skip-go-installation: true
-          skip-pkg-cache: true
-          skip-build-cache: true
-          # args: --timeout=15m

  image:
    runs-on: ubuntu-latest
@@ -90,13 +101,37 @@ jobs:
          build-args: VER=0.0.0-dev
          platforms: linux/amd64,linux/arm64

-  helm_check:
+  static_and_lint:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
        with:
          fetch-depth: 0
+
+      - name: make dir for frontend results # don't delete this step, it will break goreleaser
+        run: mkdir pkg/frontend/dist && touch pkg/frontend/dist/.gitkeep
+      - name: golangci-lint
+        uses: golangci/golangci-lint-action@v3.3.1
+        with:
+          # version: latest
+          # skip-go-installation: true
+          skip-pkg-cache: true
+          skip-build-cache: true
+          args: --timeout=5m
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v3
+        with:
+          cache: 'npm'
+          cache-dependency-path: ./dashboard/package-lock.json
+      - name: NPM install
+        run: npm i
+        working-directory: ./dashboard
+      - name: NPM lint
+        run: npm run lint
+        working-directory: ./dashboard
+
      - name: Helm Template Check For Sanity
        uses: igabaydulin/helm-check-action@0.1.4
        env:
--- a/.gitignore
+++ b/.gitignore
@@ -26,6 +26,8 @@ go.work
 /bin
 /.idea/

+/node_modules
 .DS_Store
 .vscode/
 /pkg/dashboard/objects/testdata/hello-world-0.1.0.tgz
+/pkg/frontend/dist/*
--- a/.goreleaser.yml
+++ b/.goreleaser.yml
@@ -11,6 +11,9 @@ builds:
    goarch:
      - amd64
      - arm64
+    ignore:
+      - goos: windows
+        goarch: arm64
    env:
      - CGO_ENABLED=0
 archives:
--- a/29
+++ b/29
@@ -1,3 +1,12 @@
+# Stage - frontend
+FROM node:latest as frontend
+
+WORKDIR /build
+
+COPY dashboard ./
+
+RUN npm i && npm run build
+
 # Stage - builder
 FROM --platform=${BUILDPLATFORM:-linux/amd64} golang as builder

@@ -10,6 +19,9 @@ ENV GOOS=${TARGETOS:-linux}
 ENV GOARCH=${TARGETARCH:-amd64}
 ENV CGO_ENABLED=0

+ARG VER=0.0.0
+ENV VERSION=${VER}
+
 WORKDIR /build

 COPY go.mod ./
@@ -17,14 +29,13 @@ COPY go.sum ./
 COPY main.go ./
 RUN go mod download

-ARG VER=0.0.0
-ENV VERSION=${VER}
-
 ADD . src

+COPY --from=frontend /pkg/frontend/dist ./src/pkg/frontend/dist/
+
 WORKDIR /build/src

-RUN make build
+RUN make build_go

 # Stage - runner
 FROM --platform=${TARGETPLATFORM:-linux/amd64} alpine
@@ -34,16 +45,6 @@ ARG BUILDPLATFORM

 EXPOSE 8080

-# Python
-RUN apk add --update --no-cache python3 curl && python3 -m ensurepip && pip3 install --upgrade pip setuptools
-
-# Trivy
-RUN curl -sfL https://raw.githubusercontent.com/aquasecurity/trivy/main/contrib/install.sh | sh -s -- -b /usr/local/bin v0.18.3
-RUN trivy --version
-
-# Checkov scanner
-RUN (pip3 install checkov packaging==21.3 && checkov --version) || echo Failed to install optional Checkov
-
 COPY --from=builder /build/src/bin/dashboard /bin/helm-dashboard

 ENTRYPOINT ["/bin/helm-dashboard", "--no-browser", "--bind=0.0.0.0", "--port=8080"]
--- a/FEATURES.md
+++ b/FEATURES.md
@@ -1,12 +1,30 @@
-# Shutting down the app
-To close Helm-dashboard, click on the button in the rightmost corner of the screen. Once you click on it, your Helm-dashboard will be shut down.
+# Helm Dashboard Features Overview
+
+## General Layout and Navigation
+
+### Shutting down the app
+
+If you run the tool locally, you can shutdown the running process. This is useful when you can't find the console where
+you started it, or when it was started without console.
+
+To close Helm-dashboard, click on the button in the rightmost corner of the screen. Once you click on it, your
+Helm-dashboard will be shut down.

 ![Shutdown_screenshot](images/screenshot_shut_down.png)

-# Multicluster
-If you want to switch to a different cluster, simply click on the corresponding cluster as shown in the figure. [Click here](https://kubernetes.io/docs/tasks/access-application-cluster/configure-access-multiple-clusters/) to learn how to access multiple clusters.
+## Releases Management Section
+
+### Switching Clusters
+
+When started as local binary, the tool reads the list of available cluster connections from kubectl config file. Those
+connections are displayed on the left side of the screen.
+
 ![Multicluster_screenshot](images/screenshot_multicluster.png)

+If you want to switch to a different cluster, simply click on the corresponding cluster as shown in the
+figure. You
+can [read here](https://kubernetes.io/docs/tasks/access-application-cluster/configure-access-multiple-clusters/) to
+learn on how to configure access to multiple clusters.
 # Reset Cache
 The "Reset Cache" feature in Helm Dashboard clears the cached data and fetches the latest information from the backend or data source. It ensures that the dashboard displays up-to-date data and reflects any recent changes or updates.
 ![Detail1](images/screenshot_reset_cache.png)
@@ -18,26 +36,15 @@ Essentially, a repository is a location where charts are gathered and can be sha
 You can add the repository by clicking on 'Add Repository', as shown in the figure.
 ![Repository](images/screenshot_repository.png)

-After completing that step, enter the following data: the repository name and its URL. You can also add the username and password, although this is optional.
-![Repository2](images/screenshot_repository2.png)
+## Installed Releases List

-Updating means refreshing your repository. You can update your repository as shown in the figure.
-![Repository4](images/screenshot_repository4.png)
-
-If you want to remove your repository from the Helm dashboard, click on the 'Remove' button as shown in the figure.
-![Repository5](images/screenshot_repository5.png)
-
-Use the filter option to find the desired chart quicker from the list of charts.
-![Repository6](images/screenshot_repository6.png)
-
-If you want to install a particular chart, simply hover the pointer over the chart name and an 'Install' button will appear, as shown in the figure.
-![Repository7](images/screenshot_repository7.png)
-
-# Installed Releases list
-A release is an instance of your selected chart running on your Kubernetes Cluster. That means every time that you install a Helm chart there, it creates a new release or instance that coexists with other releases without conflict. You can filter releases based on namespaces or search for release names 
+A release is an installation of your Helm chart deployed in your Kubernetes Cluster. That means every time that you
+install or upgrade a Helm chart, it creates a new release revision that coexists with other releases. You
+can filter releases based on namespaces or search for release names
 ![Releases](images/screenshot_release.png)

-The squares represent k8s resources installed by the release. Hover over each square to view a tooltip with details. Yellow indicates "pending," green signifies a healthy state, and red indicates an unhealthy state.
+The squares represent k8s resources installed by the release. Hover over each square to view a tooltip with details.
+Yellow indicates "pending," green signifies a healthy state, and red indicates an unhealthy state.
 ![Releases1](images/screenshot_release1.png)

 It indicates the version of chart that corresponds to this release.
@@ -45,18 +52,23 @@ It indicates the version of chart that corresponds to this release.

 A revision is linked to a release to track the number of updates/changes that release encounters.
 ![Releases3](images/screenshot_release3.png)
- 
-Namespaces are a way to organize clusters into virtual sub-clusters — they can be helpful when different teams or projects share a Kubernetes cluster. Any number of namespaces are supported within a cluster, each logically separated from others but with the ability to communicate with each other.
+
+Namespaces are a way to organize clusters into virtual sub-clusters — they can be helpful when different teams or
+projects share a Kubernetes cluster. Any number of namespaces are supported within a cluster, each logically separated
+from others but with the ability to communicate with each other.
 ![Releases4](images/screenshot_release4.png)

-Updated" refers to the amount of time that has passed since the last revision of the release. Whenever you install or upgrade the release, a new revision is created. You can think of it as the "age" of the latest revision.
+Updated" refers to the amount of time that has passed since the last revision of the release. Whenever you install or
+upgrade the release, a new revision is created. You can think of it as the "age" of the latest revision.
 ![Releases5](images/screenshot_release5.png)

 Indication of upgrade possible/repo suggested.
 ![Release6](images/screenshot_upgrade_available.png)

-# Release details
-This indicates the status of the deployed release, and 'Age' represents the amount of time that has passed since the creation of the revision until now.
+## Release details
+
+This indicates the status of the deployed release, and 'Age' represents the amount of time that has passed since the
+creation of the revision until now.
 ![Detail](images/screenshot_release_detail.png)

 You can use the Upgrade/Downgrade button to switch to different release versions, as shown in the figure.
@@ -121,3 +133,77 @@ Diff with Specific Version: Similar to the previous point, the ability to view a



+### Execute Helm tests
+
+For all the release(s) (installed helm charts), you can execute helm tests for that release. For the tests to execute
+successfully, you need to have existing tests for that helm chart.
+
+You can execute `helm test` for the specific release as below:
+![](images/screenshot_run_test.png)
+
+The result of executed `helm test` for the release will be displayed as below:
+![](images/screenshot_run_test_result.png)
+
+### Scanner Integrations
+
+Upon startup, Helm Dashboard detects the presence of [Trivy](https://github.com/aquasecurity/trivy)
+and [Checkov](https://github.com/bridgecrewio/checkov) scanners. When available, these scanners are offered on k8s
+resources page, as well as install/upgrade preview page.
+
+You can request scanning of the specific k8s resource in your cluster:
+![](images/screenshot_scan_resource.png)
+
+If you want to validate the k8s manifest prior to installing/reconfiguring a Helm chart, look for "Scan for Problems"
+button at the bottom of the dialog:
+![](images/screenshot_scan_manifest.png)
+
+## Repository Section
+
+Essentially, a repository is a location where charts are gathered and can be shared over network. If you want to learn
+more about Helm chart
+repositories, [click here](https://helm.sh/docs/topics/chart_repository/).
+
+You can access the repository management area of Helm Dashboard in the main navigation section, as depicted in the
+figure.
+
+![Repository3](images/screenshot_repository3.png)
+
+You can add the repository by clicking on 'Add Repository' button on the left, as shown in the figure.
+![Repository](images/screenshot_repository.png)
+
+After completing that step, enter the following data: the repository name and its URL. You can also add the username and
+password, although this is optional.
+![Repository2](images/screenshot_repository2.png)
+
+Updating means refreshing your repository. You can update your repository as shown in the figure.
+![Repository4](images/screenshot_repository4.png)
+
+If you want to remove your repository from the Helm dashboard, click on the 'Remove' button as shown in the figure.
+![Repository5](images/screenshot_repository5.png)
+
+Use the filter option to find the desired chart quicker from the list of charts.
+![Repository6](images/screenshot_repository6.png)
+
+If you want to install a particular chart, simply hover the pointer over the chart name and an 'Install' button will
+appear, as shown in the figure.
+![Repository7](images/screenshot_repository7.png)
+
+# Support for Local Charts
+
+Local Helm chart is a directory with specially named files and a `Chart.yaml` file, which you can install via Helm,
+without the need to publish the chart into Helm repository. Chart developers might want to experiment with the chart
+locally, before uploading into public repository. Also, a proprietary application might only use non-published chart as
+an approach to deploy the software.
+
+For all the above use-cases, you may use Helm Dashboard UI, specifying the location of your local chart folders via
+special `--local-chart` command-line parameter. The parameter might be specified multiple times, for example:
+
+```shell
+helm-dashboard --local-chart=/opt/charts/my-private-app --local-chart=/home/dev/sources/app/chart
+```
+
+When _valid_ local chart sources specified, the repository list would contain a surrogate `[local]` entry, with those
+charts listed inside. All the chart operations are normal: installing, reconfiguring and upgrading.
+
+![](images/screenshot_local_charts.png)
+
--- a/13
+++ b/13
@@ -1,5 +1,5 @@
 DATE    ?= $(shell date +%FT%T%z)
-VERSION ?= $(git describe --tags --always --dirty --match=v* 2> /dev/null || \
+VERSION ?= $(shell git describe --tags --always --dirty --match=v* 2> /dev/null || \
 			cat $(CURDIR)/.version 2> /dev/null || echo "v0")

 .PHONY: test
@@ -13,12 +13,19 @@ test: ; $(info $(M) start unit testing...) @
 pull: ; $(info $(M) Pulling source...) @
 	@git pull

-.PHONY: build
-build: $(BIN) ; $(info $(M) Building executable...) @ ## Build program binary
+.PHONY: build_go
+build_go: $(BIN) ; $(info $(M) Building GO...) @ ## Build program binary
 	go build \
 		-ldflags '-X main.version=$(VERSION) -X main.buildDate=$(DATE)' \
 		-o bin/dashboard .

+.PHONY: build_ui
+build_ui: $(BIN) ; $(info $(M) Building UI...) @ ## Build program binary
+	cd dashboard && npm i && npm run build && cd ..
+
+.PHONY: build
+build: build_ui build_go ; $(info $(M) Building executable...) @ ## Build program binary
+
 .PHONY: debug
 debug: ; $(info $(M) Running dashboard in debug mode...) @
 	@DEBUG=1 ./bin/dashboard
--- a/README.md
+++ b/README.md
@@ -33,6 +33,8 @@ Key capabilities of the tool:
 - Can be used locally, or installed into Kubernetes cluster
 - Does not require Helm or Kubectl installed

+All the features of the tool can be discovered via our [features overview page](FEATURES.md).
+
 ## Setup

 ### Standalone Binary
@@ -94,45 +96,6 @@ If you want to increase the logging verbosity and see all the debug info, use th

 The official helm chart is [available here](https://github.com/komodorio/helm-charts/blob/master/charts/helm-dashboard)

-## Selected Features
-
-### Support for Local Charts
-
-Local Helm chart is a directory with specially named files and a `Chart.yaml` file, which you can install via Helm, without the need to publish the chart into Helm repository. Chart developers might want to experiment with the chart locally, before uploading into public repository. Also, a proprietary application might only use non-published chart as an approach to deploy the software.
-
-For all the above use-cases, you may use Helm Dashboard UI, specifying the location of your local chart folders via special `--local-chart` command-line parameter. The parameter might be specified multiple times, for example:
-
-```shell
-helm-dashboard --local-chart=/opt/charts/my-private-app --local-chart=/home/dev/sources/app/chart
-```
-
-When _valid_ local chart sources specified, the repository list would contain a surrogate `[local]` entry, with those charts listed inside. All the chart operations are normal: installing, reconfiguring and upgrading. 
-
-![](images/screenshot_local_charts.png)
-
-### Execute Helm tests
-
-For all the release(s) (installed helm charts), you can execute helm tests for that release. For the tests to execute successfully, you need to have existing tests for that helm chart.
-
-You can execute `helm test` for the specific release as below:
-![](images/screenshot_run_test.png)
-
-The result of executed `helm test` for the release will be displayed as below:
-![](images/screenshot_run_test_result.png)
-
-### Scanner Integrations
-
-Upon startup, Helm Dashboard detects the presence of [Trivy](https://github.com/aquasecurity/trivy)
-and [Checkov](https://github.com/bridgecrewio/checkov) scanners. When available, these scanners are offered on k8s
-resources page, as well as install/upgrade preview page.
-
-You can request scanning of the specific k8s resource in your cluster:
-![](images/screenshot_scan_resource.png)
-
-If you want to validate the k8s manifest prior to installing/reconfiguring a Helm chart, look for "Scan for Problems"
-button at the bottom of the dialog:
-![](images/screenshot_scan_manifest.png)
-
 ## Support Channels

 We have two main channels for supporting the Helm Dashboard
--- a/charts/helm-dashboard/templates/deployment.yaml
+++ b/charts/helm-dashboard/templates/deployment.yaml
@@ -60,11 +60,11 @@ spec:
          livenessProbe:
            httpGet:
              path: /status
-              port: http
+              port: 8080
          readinessProbe:
            httpGet:
              path: /status
-              port: http
+              port: 8080
          resources:
            {{- toYaml .Values.resources | nindent 12 }}
          volumeMounts:
--- a/ci/build-ui.sh
+++ b/ci/build-ui.sh
@@ -0,0 +1,10 @@
+#!/bin/bash -e
+
+WORKING_DIRECTORY="$PWD"
+
+cd "$WORKING_DIRECTORY/dashboard"
+
+npm i
+npm run build
+
+cp -a "$WORKING_DIRECTORY/dashboard/static/" "$WORKING_DIRECTORY/pkg/dashboard/static/"
--- a/dashboard/.env
+++ b/dashboard/.env
@@ -0,0 +1 @@
+VITE_SERVER_PORT=8080
--- a/dashboard/.eslintrc.cjs
+++ b/dashboard/.eslintrc.cjs
@@ -0,0 +1,44 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: ["enpitech", "plugin:@typescript-eslint/recommended"],
+  globals: {
+    heap: "writable",
+    DD_RUM: "writable",
+  },
+  overrides: [
+    {
+      env: {
+        node: true,
+      },
+      files: [".eslintrc.{js,cjs}"],
+      parserOptions: {
+        sourceType: "script",
+      },
+    },
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+  },
+  plugins: ["@typescript-eslint", "react"],
+  rules: {
+    // please don't make an error occur here we use console.error
+    "no-console": ["error", { allow: ["error"] }],
+    "no-alert": "error",
+    "no-debugger": "error",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      { vars: "all", args: "after-used", ignoreRestSiblings: true },
+    ],
+    "react/react-in-jsx-scope": "off", // Vite does not require you to import React into each component file
+    "linebreak-style": ["error", "unix"],
+    quotes: ["error", "double"],
+    semi: ["error", "always"],
+    "@typescript-eslint/no-explicit-any": "warn",
+  },
+};
--- a/dashboard/.gitignore
+++ b/dashboard/.gitignore
@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+static
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+/storybook-static
--- a/dashboard/.npmrc
+++ b/dashboard/.npmrc
@@ -0,0 +1 @@
+legacy-peer-deps=true
--- a/dashboard/.prettierignore
+++ b/dashboard/.prettierignore
@@ -0,0 +1,3 @@
+# Ignore artifacts:
+build
+coverage
--- a/dashboard/.prettierrc.yaml
+++ b/dashboard/.prettierrc.yaml
@@ -0,0 +1,4 @@
+trailingComma: "es5"
+tabWidth: 2
+semi: true
+singleQuote: false
--- a/dashboard/.storybook/main.cjs
+++ b/dashboard/.storybook/main.cjs
@@ -0,0 +1,32 @@
+module.exports = {
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: "@storybook/react",
+  core: {
+    builder: "@storybook/builder-vite",
+  },
+  webpackFinal: async (config) => {
+    config.module.rules.push({
+      test: /\.css$/,
+      use: [
+        {
+          loader: "postcss-loader",
+          options: {
+            postcssOptions: {
+              plugins: [require("tailwindcss"), require("autoprefixer")],
+            },
+          },
+        },
+      ],
+      include: path.resolve(__dirname, "../"),
+    });
+    return config;
+  },
+  features: {
+    storyStoreV7: true,
+  },
+};
--- a/dashboard/.storybook/main.ts
+++ b/dashboard/.storybook/main.ts
@@ -0,0 +1,25 @@
+// .storybook/main.ts
+
+import type { StorybookViteConfig } from "@storybook/builder-vite";
+import path from "path";
+const config: StorybookViteConfig = {
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-styling",
+    {
+      name: "@storybook/addon-styling",
+    },
+    "@storybook/addon-mdx-gfm",
+  ],
+  core: {},
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: true,
+  },
+};
+export default config;
--- a/dashboard/.storybook/preview-body.html
+++ b/dashboard/.storybook/preview-body.html
@@ -0,0 +1 @@
+<div id="portal"></div>
--- a/dashboard/.storybook/preview-head.html
+++ b/dashboard/.storybook/preview-head.html
@@ -0,0 +1,3 @@
+<script>
+  window.global = window;
+</script>
--- a/dashboard/.storybook/preview.cjs
+++ b/dashboard/.storybook/preview.cjs
@@ -0,0 +1,12 @@
+import "../src/index.css";
+import "tailwindcss/tailwind.css";
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};
--- a/dashboard/.storybook/preview.js
+++ b/dashboard/.storybook/preview.js
@@ -0,0 +1,12 @@
+import "tailwindcss/tailwind.css";
+import "../src/index.css";
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};
--- a/dashboard/README.md
+++ b/dashboard/README.md
@@ -0,0 +1,124 @@
+# Helm dashboard V2
+
+Welcome to our new project, upgrading helm dashbord, we call it, Helm Dashboard version... 2! 🤩
+
+Helm dashboard V2 is an open source effort to modernize the helm-dashboard.
+Our goals are to create a version which is more:
+
+1. Maintable
+2. Extendable
+3. Contributor friendly
+
+## What is helm?
+
+First thing first, if you are new here please check out these resources to see what helm is all about
+[Video](https://www.youtube.com/watch?v=fy8SHvNZGeE)
+[Article](https://kruschecompany.com/helm-kubernetes/)
+
+# Legacy dashboard vs dashboard V2
+
+The legacy dashboard found [here](https://github.com/komodorio/helm-dashboard/tree/main/pkg/dashboard/static) is a static webapp and was written vanilla css, jquery, javascript and html. If you inspect the code abit you may notice that its relitvly hard to extend and maintain such a project.
+
+Our goal with dashboard V2 is to improve the ability to maintain and extend our dashboard app. To achive this we are using a more modern frontend stack.
+
+- Vite, as our build tool.
+- React will be used to make this project more inviting for developers to contribute too.
+- TypeScript and ESLint will keep the project safe, please keep them clean.
+- Tailwind will be used for styling.
+- React-Query will be used to fetch data from the backend.
+- Storybook is utilized to develop a component library.
+
+Please follow through the file structure to understand how things are structured and should be used.
+
+# Contribution guide
+
+## Running legacy dashboard
+
+The legacy dashboard is great for refrence and checking that you have implemented the UI correctly.
+
+1. Install [helm](https://helm.sh/docs/intro/install/) and [kubectl](https://kubernetes.io/docs/tasks/tools/).
+2. `git clone https://github.com/komodorio/helm-dashboard.git`.
+3. `go build -o bin/dashboard .`
+4. `bin/dashboard`
+
+The UI should now be running on http://localhost:8080/
+If you're having issues with that please follow the main README in the main folder.
+If you still having troubles please contact us on our [Slack community channel](https://join.slack.com/t/komodorkommunity/shared_invite/zt-1lz4cme86-2zIKTRtTFnzL_UNxaUS9yw)
+
+## Setting up your development environment
+
+1. First you should fork this repositroy.
+2. Clone your new repository using `git clone <https_or_ssh_url>`.
+3. Make sure to checkout branch `helm-dashboard-v2`.
+   - `git fetch`
+   - `git checkout helm-dashboard-v2`
+
+## Running dashboard V2
+
+1. Make sure you cloned the project correctly. This is explained in this [stage](https://github.com/komodorio/helm-dashboard/blob/helm-dashboard-v2/dashboard/README.md#setting-up-your-development-environment).
+2. go to `helm-dashboard-v2/dashboard` in your local project.
+3. inorder to install dependncies and start the development server
+   - `npm i`
+   - `npm run dev`
+4. with the default integration the dashboard should run on http://localhost:5173/
+
+## Setting up a local cluster with ease
+
+1. Install [Docker](https://docs.docker.com/engine/install/ubuntu/)
+2. Install [Minikube](https://minikube.sigs.k8s.io/docs/start/)
+3. Start your cluster `minikube start`
+
+You should now be able to follow the [Helm tutorial](https://helm.sh/docs/intro/quickstart/) and interact with Helm normally.
+
+## Choosing a task
+
+If you are completely new to the project its recommended to look for tasks labled: `good first issue`.
+These tasks should be simple enough for a begginer or for someone looking to learn the code base.
+
+You are also free to reachout to us on [Slack](https://join.slack.com/t/komodorkommunity/shared_invite/zt-1lz4cme86-2zIKTRtTFnzL_UNxaUS9yw), we can help you find a task that suits your perfectly.
+
+## Opening a pull request
+
+Inorder to open a pull request with your changes. \
+
+1.  make sure you are synced with `helm-dashboard-v2` and that all conflicts are resolved. \
+2.  commit your changes and push to your fork. \
+3.  then navigate to https://github.com/komodorio/helm-dashboard and open a pull request. Make sure you are merging from your branch to `helm-dashboard-v2`. \
+4.  you should now tag a main developer (@chad11111
+    for example) and get your pull request reviewed.
+
+# Component library
+
+We created a components library to have a consistent design system throughout the project. Please rely on these components.
+Additional information and examples on how to use them are available when you run Storybook, which shows them in an interactive way and in different scenarios.
+
+Once you run it, you'll be able to see pre-made scenarios, documentation, and play with the component properties.
+
+To run Storybook, make sure that all the dependencies are installed and run:
+
+```shell
+npm run storybook
+```
+
+Refer to the [official documentation](https://storybook.js.org/docs/react/get-started/install) for more information.
+
+# Helpers
+
+- Icons: https://react-icons.github.io/react-icons/
+- Tailwind: https://tailwindcss.com/docs
+- Typescript: https://www.typescriptlang.org/docs/handbook/intro.html
+- React-query: https://react-query.tanstack.com/overview
+
+# Coding Conventions
+
+- Use only functional components
+- Please prefer async/await over .then
+- wrap every function with try/catch unless you want to display the error to the user
+  in such case we have a general error handler in the app.tsx file which will display the error to the user in a modal
+- Please use the component library we created, it will help us keep a consistent design system
+- Please use the react-query library to fetch data from the backend
+- Prefer use fetch API over axios, if you see axios in the code, replace it with fetch.
+- Use <Outlet> for inner routes
+- User query params in the url for filters or any other state that can be represented
+- Hooks:
+  - useCustomSearchParams - for search params
--- a/dashboard/index.html
+++ b/dashboard/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/assets/logo.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Helm Dashboard</title>
+    <script src="/assets/analytics.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/styles/github.min.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/lightfair.min.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+    <div id="portal"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/dashboard/package-lock.json
+++ b/dashboard/package-lock.json
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -0,0 +1,83 @@
+{
+  "name": "dashboard",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "",
+  "main": "index.js",
+  "dependencies": {
+    "@tanstack/react-query": "^4.35.3",
+    "@types/luxon": "^3.3.0",
+    "@types/marked": "^5.0.0",
+    "compare-versions": "^6.0.0-rc.2",
+    "diff2html": "^3.4.35",
+    "eslint-config-enpitech": "^1.0.9",
+    "flowbite": "^1.6.6",
+    "flowbite-react": "^0.4.9",
+    "highlight.js": "^11.8.0",
+    "html-react-parser": "^4.0.0",
+    "luxon": "^3.3.0",
+    "marked": "^5.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.10",
+    "react-icons": "^4.8.0",
+    "react-modern-drawer": "^1.2.0",
+    "react-router-dom": "^6.9.0",
+    "react-select": "^5.7.4",
+    "swagger-ui-react": "^5.1.1",
+    "uuid": "^9.0.1",
+    "vite-plugin-static-copy": "^0.17.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.21.0",
+    "@storybook/addon-actions": "^7.0.24",
+    "@storybook/addon-essentials": "^7.0.24",
+    "@storybook/addon-interactions": "^7.0.24",
+    "@storybook/addon-links": "^7.0.24",
+    "@storybook/addon-mdx-gfm": "7.0.24",
+    "@storybook/addon-styling": "^1.3.2",
+    "@storybook/react": "^7.0.24",
+    "@storybook/react-vite": "7.0.24",
+    "@storybook/testing-library": "^0.2.0",
+    "@tailwindcss/line-clamp": "^0.4.4",
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
+    "@types/swagger-ui-react": "^4.18.0",
+    "@types/uuid": "^9.0.4",
+    "@typescript-eslint/eslint-plugin": "^6.2.1",
+    "@typescript-eslint/parser": "^6.2.1",
+    "@vitejs/plugin-react": "^3.1.0",
+    "autoprefixer": "^10.4.14",
+    "eslint": "^8.46.0",
+    "eslint-config-prettier": "^8.7.0",
+    "eslint-plugin-react": "^7.33.1",
+    "eslint-plugin-storybook": "^0.6.12",
+    "lint-staged": "^13.2.3",
+    "postcss": "^8.4.24",
+    "prettier": "2.8.4",
+    "react-icons": "^4.8.0",
+    "storybook": "7.0.24",
+    "tailwindcss": "^3.3.2",
+    "typescript": "^4.9.5",
+    "vite": "^4.1.0",
+    "vite-plugin-html-config": "^1.0.11"
+  },
+  "lint-staged": {
+    "**/*": "prettier --write --ignore-unknown"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "lint": "npx eslint src/",
+    "lint:fix": "npm run lint -- --fix",
+    "prettier": "npx prettier src/ --check",
+    "prettier:fix": "npm run prettier -- --write"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "Apache-2.0"
+}
--- a/dashboard/postcss.config.cjs
+++ b/dashboard/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
--- a/dashboard/public/analytics.js
+++ b/dashboard/public/analytics.js
@@ -0,0 +1,167 @@
+const xhr = new XMLHttpRequest();
+const TRACK_EVENT_TYPE = "track";
+const IDENTIFY_EVENT_TYPE = "identify";
+const BASE_ANALYTIC_MSG = {
+  method: "POST",
+  mode: "cors",
+  cache: "no-cache",
+  headers: {
+    "Content-Type": "application/json",
+    "api-key": "komodor.analytics@admin.com"
+  },
+  redirect: "follow",
+  referrerPolicy: "no-referrer"
+};
+xhr.onload = function() {
+  if (xhr.readyState === XMLHttpRequest.DONE) {
+    const status = JSON.parse(xhr.responseText);
+    const version = status.CurVer;
+    if (status.Analytics) {
+      enableDD(version);
+      enableHeap(version, status.ClusterMode);
+      enableSegmentBackend(version, status.ClusterMode);
+    } else {
+      console.log("Analytics is disabled in this session");
+    }
+  }
+};
+xhr.open("GET", "/status", true);
+xhr.send(null);
+
+function enableDD(version) {
+  (function(h, o, u, n, d) {
+    h = h[d] = h[d] || {
+      q: [],
+      onReady: function(c) {
+        h.q.push(c);
+      }
+    };
+    d = o.createElement(u);
+    d.async = true;
+    d.src = n;
+    n = o.getElementsByTagName(u)[0];
+    n.parentNode.insertBefore(d, n);
+  })(
+    window,
+    document,
+    "script",
+    "https://www.datadoghq-browser-agent.com/datadog-rum-v4.js",
+    "DD_RUM"
+  );
+  DD_RUM.onReady(function() {
+    DD_RUM.init({
+      clientToken: "pub16d64cd1c00cf073ce85af914333bf72",
+      applicationId: "e75439e5-e1b3-46ba-a9e9-a2e58579a2e2",
+      site: "datadoghq.com",
+      service: "helm-dashboard",
+      version: version,
+      trackInteractions: true,
+      trackResources: true,
+      trackLongTasks: true,
+      defaultPrivacyLevel: "mask",
+      sessionReplaySampleRate: 0
+    });
+  });
+}
+
+function enableHeap(version, inCluster) {
+  (window.heap = window.heap || []),
+    (heap.load = function(e, t) {
+      (window.heap.appid = e), (window.heap.config = t = t || {});
+      let r = document.createElement("script");
+      (r.type = "text/javascript"),
+        (r.async = !0),
+        (r.src = "https://cdn.heapanalytics.com/js/heap-" + e + ".js");
+      let a = document.getElementsByTagName("script")[0];
+      a.parentNode.insertBefore(r, a);
+      for (
+        let n = function(e) {
+            return function() {
+              heap.push([e].concat(Array.prototype.slice.call(arguments, 0)));
+            };
+          },
+          p = [
+            "addEventProperties",
+            "addUserProperties",
+            "clearEventProperties",
+            "identify",
+            "resetIdentity",
+            "removeEventProperty",
+            "setEventProperties",
+            "track",
+            "unsetEventProperty"
+          ],
+          o = 0;
+        o < p.length;
+        o++
+      )
+        heap[p[o]] = n(p[o]);
+    });
+  heap.load("4249623943");
+  window.heap.addEventProperties({
+    version: version,
+    installationMode: inCluster ? "cluster" : "local"
+  });
+}
+
+function sendStats(name, prop) {
+  if (window.heap) {
+    window.heap.track(name, prop);
+  }
+}
+
+function enableSegmentBackend(version, ClusterMode) {
+  sendToSegmentThroughAPI(
+    "helm dashboard loaded",
+    { version, installationMode: ClusterMode ? "cluster" : "local" },
+    TRACK_EVENT_TYPE
+  );
+}
+
+function sendToSegmentThroughAPI(eventName, properties, segmentCallType) {
+  const userId = getUserId();
+  try {
+    sendData(properties, segmentCallType, userId, eventName);
+  } catch (e) {
+    console.log("failed sending data to segment", e);
+  }
+}
+
+function sendData(data, eventType, userId, eventName) {
+  const body = createBody(eventType, userId, data, eventName);
+  return fetch(`https://api.komodor.com/analytics/segment/${eventType}`, {
+    ...BASE_ANALYTIC_MSG,
+    body: JSON.stringify(body)
+  });
+}
+
+function createBody(segmentCallType, userId, params, eventName) {
+  const data = { userId: userId };
+  if (segmentCallType === IDENTIFY_EVENT_TYPE) {
+    data["traits"] = params;
+  } else if (segmentCallType === TRACK_EVENT_TYPE) {
+    if (!eventName) {
+      throw new Error("no eventName parameter on segment track call");
+    }
+    data["properties"] = params;
+    data["eventName"] = eventName;
+  }
+  return data;
+}
+
+const getUserId = (() => {
+  let userId = null;
+  return () => {
+    if (!userId) {
+      userId = crypto.randomUUID ? crypto.randomUUID() : uuid();
+    }
+    return userId;
+  };
+})();
+
+function uuid() {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
+    let r = Math.random() * 16 | 0, v = c === "x" ? r : (r & 0x3 | 0x8);
+    return v.toString(16);
+  });
+}
--- a/pkg/dashboard/static/logo.svg
+++ b/pkg/dashboard/static/logo.svg
--- a/dashboard/public/openapi.json
+++ b/dashboard/public/openapi.json
@@ -0,0 +1,681 @@
+{
+    "openapi": "3.0.3",
+    "info": {
+      "title": "Helm Dashboard API",
+      "version": ""
+    },
+    "tags": [
+      {
+        "name": "Releases"
+      },
+      {
+        "name": "Repositories"
+      },
+      {
+        "name": "K8s"
+      },
+      {
+        "name": "Miscellaneous"
+      }
+    ],
+    "paths": {
+      "/api/helm/releases": {
+        "get": {
+          "tags": [
+            "Releases"
+          ],
+          "description": "Get list of installed releases",
+          "responses": {
+            "200": {
+              "description": "Returns list of installed releases"
+            }
+          }
+        }
+      },
+      "/api/helm/releases/{ns}": {
+        "parameters": [
+          {
+            "name": "ns",
+            "in": "path",
+            "description": "Name of kubernetes namespace, use '[empty]' if you want to use k8s context default"
+          }
+        ],
+        "post": {
+          "tags": [
+            "Releases"
+          ],
+          "description": "Install new release",
+          "requestBody": {
+            "content": {
+              "multipart/form-data": {
+                "schema": {
+                  "type": "object",
+                  "properties": {
+                    "name": {
+                      "type": "string",
+                      "required": true
+                    },
+                    "chart": {
+                      "type": "string",
+                      "required": true
+                    },
+                    "version": {
+                      "type": "string"
+                    },
+                    "values": {
+                      "type": "string",
+                      "description": "Text of values.yaml to use"
+                    },
+                    "preview": {
+                      "type": "boolean"
+                    }
+                  }
+                }
+              }
+            }
+          },
+          "responses": {
+            "200": {
+              "description": "In case preview=true, the preview diff is generated",
+              "content": {
+                "text/plain": {}
+              }
+            },
+            "202": {
+              "description": "In case preview=false, the actial install is performed and resulting release object is returned",
+              "content": {
+                "application/json": {}
+              }
+            }
+          }
+        }
+      },
+      "/api/helm/releases/{ns}/{name}": {
+        "parameters": [
+          {
+            "name": "ns",
+            "in": "path",
+            "description": "Name of kubernetes namespace"
+          },
+          {
+            "name": "name",
+            "in": "path",
+            "description": "Name of Helm release"
+          }
+        ],
+        "post": {
+          "tags": [
+            "Releases"
+          ],
+          "description": "Upgrade/reconfigure existing release",
+          "requestBody": {
+            "content": {
+              "multipart/form-data": {
+                "schema": {
+                  "type": "object",
+                  "properties": {
+                    "name": {
+                      "type": "string",
+                      "required": true
+                    },
+                    "chart": {
+                      "type": "string",
+                      "required": true
+                    },
+                    "version": {
+                      "type": "string"
+                    },
+                    "values": {
+                      "type": "string",
+                      "description": "Text of values.yaml to use"
+                    },
+                    "preview": {
+                      "type": "boolean"
+                    }
+                  }
+                }
+              }
+            }
+          },
+          "responses": {
+            "200": {
+              "description": "In case preview=true, the preview diff is generated",
+              "content": {
+                "text/plain": {}
+              }
+            },
+            "202": {
+              "description": "In case preview=false, the actial install is performed and resulting release object is returned",
+              "content": {
+                "application/json": {}
+              }
+            }
+          }
+        }
+      },
+      "/api/helm/releases/{ns}/{name}/history": {
+        "parameters": [
+          {
+            "name": "ns",
+            "in": "path",
+            "description": "Name of kubernetes namespace"
+          },
+          {
+            "name": "name",
+            "in": "path",
+            "description": "Name of Helm release"
+          }
+        ],
+        "get": {
+          "tags": [
+            "Releases"
+          ],
+          "description": "Get revision history for release",
+          "responses": {
+            "200": {
+              "description": "List of release revisions"
+            }
+          }
+        }
+      },
+      "/api/helm/releases/{ns}/{name}/manifest": {
+        "parameters": [
+          {
+            "name": "ns",
+            "in": "path",
+            "description": "Name of kubernetes namespace"
+          },
+          {
+            "name": "name",
+            "in": "path",
+            "description": "Name of Helm release"
+          },
+          {
+            "name": "revision",
+            "in": "query",
+            "description": "Revision to get data from"
+          },
+          {
+            "name": "revisionDiff",
+            "in": "query",
+            "description": "Revision to diff against"
+          }
+        ],
+        "get": {
+          "tags": [
+            "Releases"
+          ],
+          "description": "Get manifest for release",
+          "responses": {
+            "200": {
+              "description": "Manifest text, or diff if revisionDiff is specified"
+            }
+          }
+        }
+      },
+      "/api/helm/releases/{ns}/{name}/values": {
+        "parameters": [
+          {
+            "name": "ns",
+            "in": "path",
+            "description": "Name of kubernetes namespace"
+          },
+          {
+            "name": "name",
+            "in": "path",
+            "description": "Name of Helm release"
+          },
+          {
+            "name": "revision",
+            "in": "query",
+            "description": "Revision to get data from"
+          },
+          {
+            "name": "revisionDiff",
+            "in": "query",
+            "description": "Revision to diff against"
+          },
+          {
+            "name": "userDefined",
+            "in": "query",
+            "description": "If set, only user-defined values will be listed"
+          }
+        ],
+        "get": {
+          "tags": [
+            "Releases"
+          ],
+          "description": "Get values for release",
+          "responses": {
+            "200": {
+              "description": "Values YAML text, or diff if revisionDiff is specified"
+            }
+          }
+        }
+      },
+      "/api/helm/releases/{ns}/{name}/notes": {
+        "parameters": [
+          {
+            "name": "ns",
+            "in": "path",
+            "description": "Name of kubernetes namespace"
+          },
+          {
+            "name": "name",
+            "in": "path",
+            "description": "Name of Helm release"
+          },
+          {
+            "name": "revision",
+            "in": "query",
+            "description": "Revision to get data from"
+          },
+          {
+            "name": "revisionDiff",
+            "in": "query",
+            "description": "Revision to diff against"
+          }
+        ],
+        "get": {
+          "tags": [
+            "Releases"
+          ],
+          "description": "Get textual notes for release",
+          "responses": {
+            "200": {
+              "description": "Notes text, or diff if revisionDiff is specified"
+            }
+          }
+        }
+      },
+      "/api/helm/releases/{ns}/{name}/resources": {
+        "parameters": [
+          {
+            "name": "ns",
+            "in": "path",
+            "description": "Name of kubernetes namespace"
+          },
+          {
+            "name": "name",
+            "in": "path",
+            "description": "Name of Helm release"
+          },
+          {
+            "name": "health",
+            "in": "query",
+            "description": "Flag to query k8s health status of resources"
+          }
+        ],
+        "get": {
+          "tags": [
+            "Releases"
+          ],
+          "description": "List of installed k8s resources for this release",
+          "responses": {
+            "200": {
+              "description": "Structured list of resources",
+              "content": {
+                "application/json": {}
+              }
+            }
+          }
+        }
+      },
+      "/api/helm/releases/{ns}/{name}/rollback": {
+        "parameters": [
+          {
+            "name": "ns",
+            "in": "path",
+            "description": "Name of kubernetes namespace"
+          },
+          {
+            "name": "name",
+            "in": "path",
+            "description": "Name of Helm release"
+          }
+        ],
+        "post": {
+          "tags": [
+            "Releases"
+          ],
+          "description": "Rollback the release to a previous revision",
+          "requestBody": {
+            "content": {
+              "application/x-www-form-urlencoded": {
+                "schema": {
+                  "type": "object",
+                  "properties": {
+                    "revision": {
+                      "type": "integer"
+                    }
+                  }
+                }
+              }
+            }
+          },
+          "responses": {
+            "202": {
+              "description": "Rolled back successfully"
+            }
+          }
+        }
+      },
+      "/api/helm/releases/{ns}/{name}/test": {
+        "parameters": [
+          {
+            "name": "ns",
+            "in": "path",
+            "description": "Name of kubernetes namespace"
+          },
+          {
+            "name": "name",
+            "in": "path",
+            "description": "Name of Helm release"
+          }
+        ],
+        "post": {
+          "tags": [
+            "Releases"
+          ],
+          "description": "Run the tests on a release",
+          "responses": {
+            "200": {
+              "description": "Logs of a test run"
+            }
+          }
+        }
+      },
+      "/api/helm/repositories": {
+        "get": {
+          "tags": [
+            "Repositories"
+          ],
+          "description": "Get list of Helm repositories",
+          "responses": {
+            "200": {
+              "description": "Returns list of Helm repositories"
+            }
+          }
+        },
+        "post": {
+          "tags": [
+            "Repositories"
+          ],
+          "description": "Adds new repository",
+          "requestBody": {
+            "content": {
+              "application/x-www-form-urlencoded": {
+                "schema": {
+                  "type": "object",
+                  "properties": {
+                    "name": {
+                      "type": "string"
+                    },
+                    "url": {
+                      "type": "string"
+                    }
+                  },
+                  "required": [
+                    "name",
+                    "url"
+                  ]
+                }
+              }
+            }
+          },
+          "responses": {
+            "204": {
+              "description": "Empty response in case repository were added"
+            }
+          }
+        }
+      },
+      "/api/helm/repositories/{repo}": {
+        "parameters": [
+          {
+            "name": "repo",
+            "in": "path",
+            "description": "Name of Helm repository"
+          }
+        ],
+        "get": {
+          "tags": [
+            "Repositories"
+          ],
+          "description": "Get list of charts in repository",
+          "responses": {
+            "200": {
+              "description": "Returns list of charts"
+            }
+          }
+        },
+        "post": {
+          "tags": [
+            "Repositories"
+          ],
+          "description": "Update repository from remote",
+          "responses": {
+            "204": {
+              "description": "Empty response"
+            }
+          }
+        },
+        "delete": {
+          "tags": [
+            "Repositories"
+          ],
+          "description": "Remove repository",
+          "responses": {
+            "204": {
+              "description": "Empty response"
+            }
+          }
+        }
+      },
+      "/api/helm/repositories/latestver": {
+        "parameters": [
+          {
+            "name": "name",
+            "in": "query",
+            "description": "Name of Helm chart to search for",
+            "required": true
+          }
+        ],
+        "description": "Find the latest available version of specified chart through all the repositories",
+        "get": {
+          "tags": [
+            "Repositories"
+          ],
+          "responses": {
+            "200": {
+              "description": "The object with latest available version is returned"
+            },
+            "204": {
+              "description": "In case no matching repository found, the response is empty with status 204"
+            }
+          }
+        }
+      },
+      "/api/helm/repositories/versions": {
+        "parameters": [
+          {
+            "name": "name",
+            "in": "query",
+            "description": "Name of Helm chart to search for",
+            "required": true
+          }
+        ],
+        "get": {
+          "description": "Get the list of versions for specified chart across the repositories",
+          "tags": [
+            "Repositories"
+          ],
+          "responses": {
+            "200": {
+              "description": "The list if chart versions is returned"
+            }
+          }
+        }
+      },
+      "/api/helm/repositories/values": {
+        "parameters": [
+          {
+            "name": "chart",
+            "in": "query",
+            "description": "Name of Helm chart to search for, in format of <repository>/<chart-name>",
+            "required": true
+          },
+          {
+            "name": "version",
+            "in": "query",
+            "description": "Version of Helm chart to get values from",
+            "required": true
+          }
+        ],
+        "get": {
+          "description": "Get the original values.yaml file for the chart",
+          "tags": [
+            "Repositories"
+          ],
+          "responses": {
+            "200": {
+              "description": "The content of values.yaml"
+            }
+          }
+        }
+      },
+      "/api/k8s/contexts": {
+        "get": {
+          "tags": [
+            "K8s"
+          ],
+          "description": "Get list of kubectl contexts configured locally",
+          "responses": {
+            "200": {
+              "description": "Returns list of contexts"
+            }
+          }
+        }
+      },
+      "/api/k8s/{kind}/get": {
+        "parameters": [
+          {
+            "name": "kind",
+            "in": "path",
+            "description": "Kind of kubernetes resource"
+          },
+          {
+            "name": "name",
+            "in": "query",
+            "description": "Name of kubernetes resource",
+            "required": true
+          },
+          {
+            "name": "namespace",
+            "in": "query",
+            "description": "Namespace of kubernetes resource",
+            "required": true
+          }
+        ],
+        "get": {
+          "tags": [
+            "K8s"
+          ],
+          "responses": {
+            "200": {
+              "description": "Returns resources information"
+            }
+          }
+        }
+      },
+      "/api/k8s/{kind}/list": {
+        "parameters": [
+          {
+            "name": "kind",
+            "in": "path",
+            "description": "Kind of kubernetes resource",
+            "schema": {
+              "enum": [
+                "namespaces"
+              ]
+            }
+          }
+        ],
+        "get": {
+          "tags": [
+            "K8s"
+          ],
+          "responses": {
+            "200": {
+              "description": "Returns list of resources"
+            }
+          }
+        }
+      },
+      "/api/k8s/{kind}/describe": {
+        "parameters": [
+          {
+            "name": "kind",
+            "in": "path",
+            "description": "Kind of kubernetes resource"
+          },
+          {
+            "name": "name",
+            "in": "query",
+            "description": "Name of kubernetes resource",
+            "required": true
+          },
+          {
+            "name": "namespace",
+            "in": "query",
+            "description": "Namespace of kubernetes resource",
+            "required": true
+          }
+        ],
+        "get": {
+          "tags": [
+            "K8s"
+          ],
+          "responses": {
+            "200": {
+              "content": {
+                "text/plain": {}
+              },
+              "description": "Returns describe text"
+            }
+          }
+        }
+      },
+      "/": {
+        "delete": {
+          "tags": [
+            "Miscellaneous"
+          ],
+          "description": "Shuts down the Helm Dashboard application",
+          "responses": {
+            "202": {
+              "description": "Shutdown command has been accepted"
+            }
+          }
+        }
+      },
+      "/status": {
+        "get": {
+          "tags": [
+            "Miscellaneous"
+          ],
+          "description": "Gets application status",
+          "responses": {
+            "200": {
+              "description": "Returns JSON with some options",
+              "headers": {
+                "X-Application-Name": {
+                  "description": "A string to self-identify the application"
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
--- a/dashboard/src/API/apiService.ts
+++ b/dashboard/src/API/apiService.ts
@@ -0,0 +1,155 @@
+import {
+  Chart,
+  ChartVersion,
+  Release,
+  ReleaseHealthStatus,
+  ReleaseRevision,
+  Repository,
+} from "../data/types";
+import { type QueryFunctionContext } from "@tanstack/react-query";
+interface ClustersResponse {
+  AuthInfo: string;
+  Cluster: string;
+  IsCurrent: boolean;
+  Name: string;
+  Namespace: string;
+}
+class ApiService {
+  currentCluster = "";
+  constructor(protected readonly isMockMode: boolean = false) {}
+
+  setCluster = (cluster: string) => {
+    this.currentCluster = cluster;
+  };
+
+  public async fetchWithDefaults<T>(
+    url: string,
+    options?: RequestInit
+  ): Promise<T> {
+    let response;
+
+    if (this.currentCluster) {
+      const headers = new Headers(options?.headers);
+      if (!headers.has("X-Kubecontext")) {
+        headers.set("X-Kubecontext", this.currentCluster);
+      }
+      response = await fetch(url, { ...options, headers });
+    } else {
+      response = await fetch(url, options);
+    }
+
+    if (!response.ok) {
+      const error = await response.text();
+      throw new Error(error);
+    }
+
+    let data;
+    if (!response.headers.get("Content-Type")) {
+      return {} as T;
+    } else if (response.headers.get("Content-Type")?.includes("text/plain")) {
+      data = await response.text();
+    } else {
+      data = await response.json();
+    }
+    return data;
+  }
+
+  getToolVersion = async () => {
+    const response = await fetch("/status");
+    const data = await response.json();
+    return data;
+  };
+
+  getRepositoryLatestVersion = async (repositoryName: string) => {
+    const data = await this.fetchWithDefaults(
+      `/api/helm/repositories/latestver?name=${repositoryName}`
+    );
+    return data;
+  };
+
+  getInstalledReleases = async () => {
+    const data = await this.fetchWithDefaults("/api/helm/releases");
+    return data;
+  };
+
+  getClusters = async () => {
+    const response = await fetch("/api/k8s/contexts");
+    const data = (await response.json()) as ClustersResponse[];
+    return data;
+  };
+
+  getNamespaces = async () => {
+    const data = await this.fetchWithDefaults("/api/k8s/namespaces/list");
+    return data;
+  };
+
+  getRepositories = async () => {
+    const data = await this.fetchWithDefaults("/api/helm/repositories");
+    return data;
+  };
+
+  getRepositoryCharts = async ({
+    queryKey,
+  }: QueryFunctionContext<Chart[], Repository>) => {
+    const [, repository] = queryKey;
+    const data = await this.fetchWithDefaults(
+      `/api/helm/repositories/${repository}`
+    );
+    return data;
+  };
+
+  getChartVersions = async ({
+    queryKey,
+  }: QueryFunctionContext<ChartVersion[], Chart>) => {
+    const [, chart] = queryKey;
+
+    const data = await this.fetchWithDefaults(
+      `/api/helm/repositories/versions?name=${chart.name}`
+    );
+    return data;
+  };
+
+  getResourceStatus = async ({
+    release,
+  }: {
+    release: Release;
+  }): Promise<ReleaseHealthStatus[] | null> => {
+    if (!release) return null;
+
+    const data = await this.fetchWithDefaults(
+      `/api/helm/releases/${release.namespace}/${release.name}/resources?health=true`
+    );
+    return data;
+  };
+
+  getReleasesHistory = async ({
+    queryKey,
+  }: QueryFunctionContext<Release[], Release>): Promise<ReleaseRevision[]> => {
+    const [, params] = queryKey;
+
+    if (!params.namespace || !params.chart) return [];
+
+    const data = await this.fetchWithDefaults(
+      `/api/helm/releases/${params.namespace}/${params.chart}/history`
+    );
+
+    return data;
+  };
+
+  getValues = async ({ queryKey }: any) => {
+    const [, params] = queryKey;
+    const { namespace, chart, version } = params;
+
+    if (!namespace || !chart || !chart.name || version === undefined)
+      return Promise.reject(new Error("missing parameters"));
+
+    const url = `/api/helm/repositories/values?chart=${namespace}/${chart.name}&version=${version}`;
+    const data = await this.fetchWithDefaults(url);
+
+    return data;
+  };
+}
+
+const apiService = new ApiService();
+
+export default apiService;
--- a/dashboard/src/API/interfaces.ts
+++ b/dashboard/src/API/interfaces.ts
@@ -0,0 +1,97 @@
+export interface HelmRepository {
+  name: string;
+  url: string;
+}
+
+export interface ChartVersion {
+  name: string;
+  version: string;
+}
+
+export interface K8sContext {
+  name: string;
+}
+
+export interface K8sResource {
+  kind: string;
+  name: string;
+  namespace: string;
+}
+
+export interface Scanner {
+  id: string;
+  name: string;
+  type: string;
+}
+
+export interface ScanResult {
+  scannerType: string;
+  result: any;
+}
+
+export interface ScannersList {
+  scanners: Scanner[];
+}
+
+export interface ScanResults {
+  [scannerType: string]: ScanResult;
+}
+
+export interface ApplicationStatus {
+  Analytics: boolean;
+  CacheHitRatio: number;
+  ClusterMode: boolean;
+  CurVer: string;
+  LatestVer: string;
+}
+
+export interface KubectlContexts {
+  contexts: string[];
+}
+
+export interface K8sResourceList {
+  items: K8sResource[];
+}
+
+export type HelmRepositories = Repository[];
+
+export interface ChartList {
+  charts: Chart[];
+}
+
+export interface LatestChartVersion {
+  name: string;
+  version: string;
+  app_version: string;
+  description: string;
+  installed_namespace: string;
+  installed_name: string;
+  repository: string;
+  urls: string[];
+  isSuggestedRepo: boolean;
+}
+
+export interface ChartVersions {
+  versions: string[];
+}
+
+export interface ValuesYamlText {
+  content: string;
+}
+
+export interface Repository {
+  name: string;
+  url: string;
+}
+
+export interface Chart {
+  name: string;
+  repo: string;
+  version: string;
+  appVersion: string;
+  description: string;
+  created: string;
+  digest: string;
+  urls: string[];
+  icon: string;
+}
--- a/dashboard/src/API/k8s.ts
+++ b/dashboard/src/API/k8s.ts
@@ -0,0 +1,65 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { type UseQueryOptions, useQuery } from "@tanstack/react-query";
+import { K8sResource, K8sResourceList, KubectlContexts } from "./interfaces";
+import apiService from "./apiService";
+
+// Get list of kubectl contexts configured locally
+function useGetKubectlContexts(options?: UseQueryOptions<KubectlContexts>) {
+  return useQuery<KubectlContexts>(
+    ["k8s", "contexts"],
+    () => apiService.fetchWithDefaults<KubectlContexts>("/api/k8s/contexts"),
+    options
+  );
+}
+
+// Get resources information
+function useGetK8sResource(
+  kind: string,
+  name: string,
+  namespace: string,
+  options?: UseQueryOptions<K8sResource>
+) {
+  return useQuery<K8sResource>(
+    ["k8s", kind, "get", name, namespace],
+    () =>
+      apiService.fetchWithDefaults<K8sResource>(
+        `/api/k8s/${kind}/get?name=${name}&namespace=${namespace}`
+      ),
+    options
+  );
+}
+
+// Get list of resources
+function useGetK8sResourceList(
+  kind: string,
+  options?: UseQueryOptions<K8sResourceList>
+) {
+  return useQuery<K8sResourceList>(
+    ["k8s", kind, "list"],
+    () =>
+      apiService.fetchWithDefaults<K8sResourceList>(`/api/k8s/${kind}/list`),
+    options
+  );
+}
+
+// Get describe text for kubernetes resource
+function useGetK8sResourceDescribe(
+  kind: string,
+  name: string,
+  namespace: string,
+  options?: UseQueryOptions<string>
+) {
+  return useQuery<string>(
+    ["k8s", kind, "describe", name, namespace],
+    () =>
+      apiService.fetchWithDefaults<string>(
+        `/api/k8s/${kind}/describe?name=${name}&namespace=${namespace}`,
+        {
+          headers: {
+            Accept: "text/plain",
+          },
+        }
+      ),
+    options
+  );
+}
--- a/dashboard/src/API/other.ts
+++ b/dashboard/src/API/other.ts
@@ -0,0 +1,34 @@
+import {
+  type UseMutationOptions,
+  type UseQueryOptions,
+  useMutation,
+  useQuery,
+} from "@tanstack/react-query";
+import { ApplicationStatus } from "./interfaces";
+import apiService from "./apiService";
+
+// Shuts down the Helm Dashboard application
+export function useShutdownHelmDashboard(
+  options?: UseMutationOptions<void, Error>
+) {
+  return useMutation<void, Error>(
+    () =>
+      apiService.fetchWithDefaults("/", {
+        method: "DELETE",
+      }),
+    options
+  );
+}
+
+// Gets application status
+export function useGetApplicationStatus(
+  options?: UseQueryOptions<ApplicationStatus>
+) {
+  return useQuery<ApplicationStatus>(
+    ["status"],
+    () => apiService.fetchWithDefaults<ApplicationStatus>("/status"),
+    {
+      ...options,
+    }
+  );
+}
--- a/dashboard/src/API/releases.ts
+++ b/dashboard/src/API/releases.ts
@@ -0,0 +1,333 @@
+import {
+  useQuery,
+  type UseQueryOptions,
+  useMutation,
+  type UseMutationOptions,
+} from "@tanstack/react-query";
+import { ChartVersion, Release } from "../data/types";
+import { LatestChartVersion } from "./interfaces";
+import apiService from "./apiService";
+import { getVersionManifestFormData } from "./shared";
+export const HD_RESOURCE_CONDITION_TYPE = "hdHealth"; // it's our custom condition type, only one exists
+
+export function useGetInstalledReleases(
+  context: string,
+  options?: UseQueryOptions<Release[]>
+) {
+  return useQuery<Release[]>(
+    ["installedReleases", context],
+    () =>
+      apiService.fetchWithDefaults<Release[]>("/api/helm/releases", {
+        headers: {
+          "X-Kubecontext": context,
+        },
+      }),
+    options
+  );
+}
+
+export function useGetReleaseManifest({
+  namespace,
+  chartName,
+  options,
+}: {
+  namespace: string;
+  chartName: string;
+  options?: UseQueryOptions<any>;
+}) {
+  return useQuery<any>(
+    ["manifest", namespace, chartName],
+    () =>
+      apiService.fetchWithDefaults<any>(
+        `/api/helm/releases/${namespace}/${chartName}/manifests`
+      ),
+    options
+  );
+}
+
+// List of installed k8s resources for this release
+export function useGetResources(
+  ns: string,
+  name: string,
+  options?: UseQueryOptions<StructuredResources[]>
+) {
+  const { data, ...rest } = useQuery<StructuredResources[]>(
+    ["resources", ns, name],
+    () =>
+      apiService.fetchWithDefaults<StructuredResources[]>(
+        `/api/helm/releases/${ns}/${name}/resources?health=true`
+      ),
+    options
+  );
+
+  return {
+    data: data
+      ?.map((resource) => ({
+        ...resource,
+        status: {
+          ...resource.status,
+          conditions: resource.status.conditions.filter(
+            (c) => c.type === HD_RESOURCE_CONDITION_TYPE
+          ),
+        },
+      }))
+      .sort((a, b) => {
+        const interestingResources = ["STATEFULSET", "DEAMONSET", "DEPLOYMENT"];
+        return (
+          interestingResources.indexOf(b.kind.toUpperCase()) -
+          interestingResources.indexOf(a.kind.toUpperCase())
+        );
+      }),
+    ...rest,
+  };
+}
+
+export function useGetResourceDescription(
+  type: string,
+  ns: string,
+  name: string,
+  options?: UseQueryOptions<string>
+) {
+  return useQuery<string>(
+    ["describe", type, ns, name],
+    () =>
+      apiService.fetchWithDefaults<string>(
+        `/api/k8s/${type}/describe?name=${name}&namespace=${ns}`,
+        {
+          headers: { "Content-Type": "text/plain; charset=utf-8" },
+        }
+      ),
+    options
+  );
+}
+export function useGetLatestVersion(
+  chartName: string,
+  options?: UseQueryOptions<ChartVersion[]>
+) {
+  return useQuery<ChartVersion[]>(
+    ["latestver", chartName],
+    () =>
+      apiService.fetchWithDefaults<ChartVersion[]>(
+        `/api/helm/repositories/latestver?name=${chartName}`
+      ),
+    options
+  );
+}
+export function useGetVersions(
+  chartName: string,
+  options?: UseQueryOptions<LatestChartVersion[]>
+) {
+  return useQuery<LatestChartVersion[]>(
+    ["versions", chartName],
+    () =>
+      apiService.fetchWithDefaults<LatestChartVersion[]>(
+        `/api/helm/repositories/versions?name=${chartName}`
+      ),
+    options
+  );
+}
+
+export function useGetReleaseInfoByType(
+  params: ReleaseInfoParams,
+  additionalParams = "",
+  options?: UseQueryOptions<string>
+) {
+  const { chart, namespace, tab, revision } = params;
+  return useQuery<string>(
+    [tab, namespace, chart, revision, additionalParams],
+    () =>
+      apiService.fetchWithDefaults<string>(
+        `/api/helm/releases/${namespace}/${chart}/${tab}?revision=${revision}${additionalParams}`,
+        {
+          headers: { "Content-Type": "text/plain; charset=utf-8" },
+        }
+      ),
+    options
+  );
+}
+
+export function useGetDiff(
+  formData: FormData,
+  options?: UseQueryOptions<string>
+) {
+  return useQuery<string>(
+    ["diff", formData],
+    () => {
+      return apiService.fetchWithDefaults<string>("/diff", {
+        body: formData,
+
+        method: "POST",
+      });
+    },
+    options
+  );
+}
+
+// Rollback the release to a previous revision
+export function useRollbackRelease(
+  options?: UseMutationOptions<
+    void,
+    unknown,
+    { ns: string; name: string; revision: number }
+  >
+) {
+  return useMutation<
+    void,
+    unknown,
+    { ns: string; name: string; revision: number }
+  >(({ ns, name, revision }) => {
+    const formData = new FormData();
+    formData.append("revision", revision.toString());
+
+    return apiService.fetchWithDefaults<void>(
+      `/api/helm/releases/${ns}/${name}/rollback`,
+      {
+        method: "POST",
+        body: formData,
+      }
+    );
+  }, options);
+}
+
+// Run the tests on a release
+export function useTestRelease(
+  options?: UseMutationOptions<void, unknown, { ns: string; name: string }>
+) {
+  return useMutation<void, unknown, { ns: string; name: string }>(
+    ({ ns, name }) => {
+      return apiService.fetchWithDefaults<void>(
+        `/api/helm/releases/${ns}/${name}/test`,
+        {
+          method: "POST",
+        }
+      );
+    },
+    options
+  );
+}
+
+export function useChartReleaseValues({
+  namespace = "default",
+  release,
+  userDefinedValue,
+  revision,
+  options,
+  version,
+}: {
+  namespace?: string;
+  release: string;
+  userDefinedValue?: string;
+  revision?: number;
+  version?: string;
+  options?: UseQueryOptions<any>;
+}) {
+  return useQuery<any>(
+    ["values", namespace, release, userDefinedValue, version],
+    () =>
+      apiService.fetchWithDefaults<any>(
+        `/api/helm/releases/${namespace}/${release}/values?${"userDefined=true"}${
+          revision ? `&revision=${revision}` : ""
+        }`,
+        {
+          headers: { "Content-Type": "text/plain; charset=utf-8" },
+        }
+      ),
+    options
+  );
+}
+
+export const useVersionData = ({
+  version,
+  userValues,
+  chartAddress,
+  releaseValues,
+  namespace,
+  releaseName,
+  isInstallRepoChart = false,
+  options,
+}: {
+  version: string;
+  userValues: string;
+  chartAddress: string;
+  releaseValues: string;
+  namespace: string;
+  releaseName: string;
+  isInstallRepoChart?: boolean;
+  options?: UseQueryOptions<any>;
+}) => {
+  return useQuery(
+    [
+      version,
+      userValues,
+      chartAddress,
+      releaseValues,
+      namespace,
+      releaseName,
+      isInstallRepoChart,
+    ],
+    async () => {
+      const formData = getVersionManifestFormData({
+        version,
+        userValues,
+        chart: chartAddress,
+        releaseValues,
+        releaseName,
+      });
+
+      const fetchUrl = isInstallRepoChart
+        ? `/api/helm/releases/${namespace || "default"}`
+        : `/api/helm/releases/${
+            namespace ? namespace : "[empty]"
+          }${`/${releaseName}`}`;
+
+      const data = await apiService.fetchWithDefaults(fetchUrl, {
+        method: "post",
+        body: formData,
+      });
+
+      return data;
+    },
+
+    options
+  );
+};
+
+// Request objects
+interface ReleaseInfoParams {
+  chart?: string;
+  tab: string;
+  namespace?: string;
+  revision?: string;
+}
+
+export interface StructuredResources {
+  kind: string;
+  apiVersion: string;
+  metadata: Metadata;
+  spec: Spec;
+  status: Status;
+}
+
+export interface Metadata {
+  name: string;
+  namespace: string;
+  creationTimestamp: any;
+  labels: any;
+}
+
+export interface Spec {
+  [key: string]: any;
+}
+
+export interface Status {
+  conditions: Condition[];
+}
+
+export interface Condition {
+  type: string;
+  status: string;
+  lastProbeTime: any;
+  lastTransitionTime: any;
+  reason: string;
+  message: string;
+}
--- a/dashboard/src/API/repositories.ts
+++ b/dashboard/src/API/repositories.ts
@@ -0,0 +1,72 @@
+import {
+  type UseMutationOptions,
+  type UseQueryOptions,
+  useMutation,
+  useQuery,
+} from "@tanstack/react-query";
+import { HelmRepositories } from "./interfaces";
+import apiService from "./apiService";
+
+// Get list of Helm repositories
+export function useGetRepositories(
+  options?: UseQueryOptions<HelmRepositories>
+) {
+  return useQuery<HelmRepositories>(
+    ["helm", "repositories"],
+    () =>
+      apiService.fetchWithDefaults<HelmRepositories>("/api/helm/repositories"),
+    options
+  );
+}
+
+// Update repository from remote
+export function useUpdateRepo(
+  repo: string,
+  options?: UseMutationOptions<void, unknown, void>
+) {
+  return useMutation<void, unknown, void>(() => {
+    return apiService.fetchWithDefaults<void>(
+      `/api/helm/repositories/${repo}`,
+      {
+        method: "POST",
+      }
+    );
+  }, options);
+}
+
+// Remove repository
+export function useDeleteRepo(
+  repo: string,
+  options?: UseMutationOptions<void, unknown, void>
+) {
+  return useMutation<void, unknown, void>(() => {
+    return apiService.fetchWithDefaults<void>(
+      `/api/helm/repositories/${repo}`,
+      {
+        method: "DELETE",
+      }
+    );
+  }, options);
+}
+
+export function useChartRepoValues({
+  version,
+  chart,
+}: {
+  version: string;
+  chart: string;
+}) {
+  return useQuery<any>(
+    ["helm", "repositories", "values", chart, version],
+    () =>
+      apiService.fetchWithDefaults<any>(
+        `/api/helm/repositories/values?chart=${chart}&version=${version}`,
+        {
+          headers: { "Content-Type": "text/plain; charset=utf-8" },
+        }
+      ),
+    {
+      enabled: Boolean(version) && Boolean(chart),
+    }
+  );
+}
--- a/dashboard/src/API/scanners.ts
+++ b/dashboard/src/API/scanners.ts
@@ -0,0 +1,54 @@
+/** DO NOT DELETE THESE FUNCTIONS - we left this until we support scan ops again */
+
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import {
+  type UseMutationOptions,
+  type UseQueryOptions,
+  useMutation,
+  useQuery,
+} from "@tanstack/react-query";
+import { ScanResult, ScanResults, ScannersList } from "./interfaces";
+import apiService from "./apiService";
+
+// Get list of discovered scanners
+function useGetDiscoveredScanners(options?: UseQueryOptions<ScannersList>) {
+  return useQuery<ScannersList>(
+    ["scanners"],
+    () => apiService.fetchWithDefaults<ScannersList>("/api/scanners"),
+    options
+  );
+}
+
+// Scan manifests using all applicable scanners
+function useScanManifests(
+  manifest: string,
+  options?: UseMutationOptions<ScanResults, Error, string>
+) {
+  const formData = new FormData();
+  formData.append("manifest", manifest);
+  return useMutation<ScanResults, Error, string>(
+    () =>
+      apiService.fetchWithDefaults<ScanResults>("/api/scanners/manifests", {
+        method: "POST",
+        body: formData,
+      }),
+    options
+  );
+}
+
+// Scan specified k8s resource in cluster
+function useScanK8sResource(
+  kind: string,
+  namespace: string,
+  name: string,
+  options?: UseQueryOptions<ScanResults>
+) {
+  return useQuery<ScanResults>(
+    ["scanners", "resource", kind, namespace, name],
+    () =>
+      apiService.fetchWithDefaults<ScanResults>(
+        `/api/scanners/resource/${kind}?namespace=${namespace}&name=${name}`
+      ),
+    options
+  );
+}
--- a/dashboard/src/API/shared.ts
+++ b/dashboard/src/API/shared.ts
@@ -0,0 +1,64 @@
+import { useQuery } from "@tanstack/react-query";
+import apiService from "./apiService";
+
+export const getVersionManifestFormData = ({
+  version,
+  userValues,
+  chart,
+  releaseValues,
+  releaseName,
+}: {
+  version: string;
+  userValues?: string;
+  chart: string;
+  releaseValues?: string;
+  releaseName?: string;
+}) => {
+  const formData = new FormData();
+  // preview needs to come first, for some reason it has a meaning at the backend
+  formData.append("preview", "true");
+  formData.append("chart", chart);
+  formData.append("version", version);
+  formData.append(
+    "values",
+    userValues ? userValues : releaseValues ? releaseValues : ""
+  );
+  if (releaseName) {
+    formData.append("name", releaseName);
+  }
+
+  return formData;
+};
+
+export const useDiffData = ({
+  selectedRepo,
+  versionsError,
+  currentVerManifest,
+  selectedVerData,
+  chart,
+}: {
+  selectedRepo: string;
+  versionsError: string;
+  currentVerManifest: string;
+  selectedVerData: any;
+  chart: string;
+}) => {
+  return useQuery(
+    [selectedRepo, versionsError, chart, currentVerManifest, selectedVerData],
+    async () => {
+      const formData = new FormData();
+      formData.append("a", currentVerManifest);
+      formData.append("b", selectedVerData.manifest);
+
+      const diff = await apiService.fetchWithDefaults("/diff", {
+        method: "post",
+        body: formData,
+      });
+
+      return diff;
+    },
+    {
+      enabled: Boolean(selectedVerData),
+    }
+  );
+};
--- a/dashboard/src/App.css
+++ b/dashboard/src/App.css
@@ -0,0 +1,96 @@
+.app-header {
+  display: flex;
+  justify-content: space-between;
+  margin: 5px;
+  padding: 10px;
+}
+.header-left {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  flex: 0.6;
+}
+.header-items {
+  display: flex;
+  flex: 0.8;
+  justify-content: space-evenly;
+}
+.header-right {
+  display: flex;
+  align-items: center;
+  flex: 0.2;
+  justify-content: space-around;
+}
+.redirect {
+  display: flex;
+  flex: 0.8;
+}
+.redirect > img {
+  margin-right: 5px;
+}
+.signout-btn {
+  display: flex;
+  align-items: center;
+}
+.signout-btn:hover {
+  cursor: pointer;
+}
+.signout-btn > span {
+  font-weight: bolder;
+  font-size: x-large;
+  color: gray;
+}
+.card {
+  display: flex;
+  height: 100vh;
+}
+.card-left {
+  flex: 0.2;
+  margin-top: 5px;
+  margin-left: 4px;
+  margin-right: 4px;
+}
+.card-left > h2,
+form {
+  margin-bottom: 10px;
+}
+.btn {
+  margin-bottom: 10px;
+}
+.card-right {
+  flex: 0.8;
+  margin-top: 5px;
+  margin-left: 4px;
+  margin-right: 1px;
+}
+.card-right-header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+.card-right-header-right-btn {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+.content-header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+.title {
+  flex: 0.2;
+}
+.description {
+  flex: 0.6;
+}
+.version {
+  flex: 0.2;
+}
+.charts {
+  display: flex;
+  justify-content: space-between;
+}
+.charts > h3 {
+  flex: 0.2;
+}
--- a/dashboard/src/App.tsx
+++ b/dashboard/src/App.tsx
@@ -0,0 +1,85 @@
+import Header from "./layout/Header";
+import { HashRouter, Outlet, Route, Routes, useParams } from "react-router-dom";
+import "./index.css";
+import Installed from "./pages/Installed";
+import RepositoryPage from "./pages/Repository";
+import Revision from "./pages/Revision";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useState } from "react";
+import { ErrorAlert, ErrorModalContext } from "./context/ErrorModalContext";
+import GlobalErrorModal from "./components/modal/GlobalErrorModal";
+import { AppContextProvider } from "./context/AppContext";
+import apiService from "./API/apiService";
+import DocsPage from "./pages/DocsPage";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      retry: false,
+    },
+  },
+});
+
+const PageLayout = () => {
+  return (
+    <div className="flex flex-col h-screen">
+      <Header />
+      <div className="bg-body-background bg-no-repeat bg-[url('./assets/body-background.svg')] flex-1">
+        <Outlet />
+      </div>
+    </div>
+  );
+};
+
+const SyncContext: React.FC = () => {
+  const { context } = useParams();
+  if (context) {
+    apiService.setCluster(context);
+  }
+
+  return <Outlet />;
+};
+
+export default function App() {
+  const [shouldShowErrorModal, setShowErrorModal] = useState<
+    ErrorAlert | undefined
+  >(undefined);
+  const value = { shouldShowErrorModal, setShowErrorModal };
+
+  return (
+    <AppContextProvider>
+      <ErrorModalContext.Provider value={value}>
+        <QueryClientProvider client={queryClient}>
+          <HashRouter>
+            <Routes>
+              <Route path="docs/" element={<DocsPage />} />
+              <Route path="*" element={<PageLayout />}>
+                <Route path=":context/*" element={<SyncContext />}>
+                  <Route path="installed/?" element={<Installed />} />
+                  <Route
+                    path=":namespace/:chart/installed/revision/:revision"
+                    element={<Revision />}
+                  />
+                  <Route path="repository/" element={<RepositoryPage />} />
+                  <Route
+                    path="repository/:selectedRepo?"
+                    element={<RepositoryPage />}
+                  />
+                  <Route path="*" element={<Installed />} />
+                </Route>
+                <Route path="*" element={<Installed />} />
+              </Route>
+            </Routes>
+            <GlobalErrorModal
+              isOpen={!!shouldShowErrorModal}
+              onClose={() => setShowErrorModal(undefined)}
+              titleText={shouldShowErrorModal?.title || ""}
+              contentText={shouldShowErrorModal?.msg || ""}
+            />
+          </HashRouter>
+        </QueryClientProvider>
+      </ErrorModalContext.Provider>
+    </AppContextProvider>
+  );
+}
--- a/dashboard/src/assets/arrow-down-icon.svg
+++ b/dashboard/src/assets/arrow-down-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512.02 319.26"><path d="M5.9 48.96 48.97 5.89c7.86-7.86 20.73-7.84 28.56 0l178.48 178.48L434.5 5.89c7.86-7.86 20.74-7.82 28.56 0l43.07 43.07c7.83 7.84 7.83 20.72 0 28.56l-192.41 192.4-.36.37-43.07 43.07c-7.83 7.82-20.7 7.86-28.56 0l-43.07-43.07-.36-.37L5.9 77.52c-7.87-7.86-7.87-20.7 0-28.56z"/></svg>
--- a/dashboard/src/assets/body-background.svg
+++ b/dashboard/src/assets/body-background.svg
--- a/dashboard/src/assets/close.png
+++ b/dashboard/src/assets/close.png
--- a/dashboard/src/assets/code-brackets.svg
+++ b/dashboard/src/assets/code-brackets.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/code-brackets</title><g id="illustration/code-brackets" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#87E6E5" d="M11.4139325,12 C11.7605938,12 12,12.5059743 12,13.3779712 L12,17.4951758 L6.43502246,23.3839989 C5.85499251,23.9978337 5.85499251,25.0021663 6.43502246,25.6160011 L12,31.5048242 L12,35.6220288 C12,36.4939606 11.7605228,37 11.4139325,37 C11.2725831,37 11.1134406,36.9158987 10.9453839,36.7379973 L0.435022463,25.6160011 C-0.145007488,25.0021663 -0.145007488,23.9978337 0.435022463,23.3839989 L10.9453839,12.2620027 C11.1134051,12.0841663 11.2725831,12 11.4139325,12 Z M36.5860675,12 C36.7274169,12 36.8865594,12.0841013 37.0546161,12.2620027 L47.5649775,23.3839989 C48.1450075,23.9978337 48.1450075,25.0021663 47.5649775,25.6160011 L37.0546161,36.7379973 C36.8865949,36.9158337 36.7274169,37 36.5860675,37 C36.2394062,37 36,36.4940257 36,35.6220288 L36,31.5048242 L41.5649775,25.6160011 C42.1450075,25.0021663 42.1450075,23.9978337 41.5649775,23.3839989 L36,17.4951758 L36,13.3779712 C36,12.5060394 36.2394772,12 36.5860675,12 Z"/><rect id="Rectangle-7-Copy-5" width="35.57" height="4" x="5.009" y="22.662" fill="#A0DB77" rx="2" transform="translate(22.793959, 24.662305) rotate(-75.000000) translate(-22.793959, -24.662305)"/></g></svg>
--- a/dashboard/src/assets/colors.svg
+++ b/dashboard/src/assets/colors.svg
--- a/dashboard/src/assets/comments.svg
+++ b/dashboard/src/assets/comments.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/comments</title><g id="illustration/comments" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Path" fill="#96D07C" d="M2.52730803,17.9196415 C2.44329744,17.9745167 2.36370847,18.000488 2.29303375,18.000488 C2.1197031,18.000488 2,17.8443588 2,17.5752855 L2,4 C2,1.790861 3.790861,3.23296945e-13 6,3.23296945e-13 L33.9995117,3.23296945e-13 C36.2086507,3.23296945e-13 37.9995117,1.790861 37.9995117,4 L37.9995117,9.999512 C37.9995117,12.208651 36.2086507,13.999512 33.9995117,13.999512 L8,13.999512 C7.83499225,13.999512 7.6723181,13.9895206 7.51254954,13.9701099 L2.52730803,17.9196415 Z"/><path id="Path" fill="#73E1E0" d="M7.51066,44.9703679 L2.52730803,47.9186655 C2.44329744,47.9735407 2.36370847,47.999512 2.29303375,47.999512 C2.1197031,47.999512 2,47.8433828 2,47.5743095 L2,35 C2,32.790861 3.790861,31 6,31 L26,31 C28.209139,31 30,32.790861 30,35 L30,41 C30,43.209139 28.209139,45 26,45 L8,45 C7.8343417,45 7.67103544,44.9899297 7.51066,44.9703679 Z"/><path id="Path" fill="#FFD476" d="M46,19.5 L46,33.0747975 C46,33.3438708 45.8802969,33.5 45.7069663,33.5 C45.6362915,33.5 45.5567026,33.4740287 45.472692,33.4191535 L40.4887103,29.4704446 C40.3285371,29.489956 40.1654415,29.5 40,29.5 L18,29.5 C15.790861,29.5 14,27.709139 14,25.5 L14,19.5 C14,17.290861 15.790861,15.5 18,15.5 L42,15.5 C44.209139,15.5 46,17.290861 46,19.5 Z"/></g></svg>
--- a/dashboard/src/assets/direction.svg
+++ b/dashboard/src/assets/direction.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/direction</title><g id="illustration/direction" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#FFD476" d="M23.4917015,33.6030641 L2.93840258,31.4321033 C2.38917316,31.3740904 1.99096346,30.8818233 2.04897631,30.3325939 C2.0747515,30.0885705 2.18934861,29.8625419 2.37095722,29.6975265 L34.2609105,0.721285325 C34.6696614,0.349881049 35.3021022,0.38015648 35.6735064,0.788907393 C35.9232621,1.06377731 36.0001133,1.45442096 35.8730901,1.80341447 L24.5364357,32.9506164 C24.3793473,33.3822133 23.9484565,33.6513092 23.4917015,33.6030641 L23.4917015,33.6030641 Z"/><path id="Combined-Shape-Copy" fill="#FFC445" d="M24.3163597,33.2881029 C24.0306575,33.0138462 23.9337246,32.5968232 24.069176,32.2246735 L35.091923,1.9399251 C35.2266075,1.56988243 35.5659249,1.31333613 35.9586669,1.28460955 C36.5094802,1.24432106 36.9886628,1.65818318 37.0289513,2.20899647 L40.2437557,46.1609256 C40.2644355,46.4436546 40.1641446,46.7218752 39.9678293,46.9263833 C39.5853672,47.3248067 38.9523344,47.3377458 38.5539111,46.9552837 L24.3163597,33.2881029 L24.3163597,33.2881029 Z"/></g></svg>
--- a/dashboard/src/assets/flow.svg
+++ b/dashboard/src/assets/flow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/flow</title><g id="illustration/flow" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#79C9FC" fill-rule="nonzero" d="M30,29 C32.7614237,29 35,26.7614237 35,24 C35,14.6111593 27.3888407,7 18,7 C8.61115925,7 1,14.6111593 1,24 C1,33.3888407 8.61115925,41 18,41 C19.3333404,41 20.6447683,40.8466238 21.9154603,40.5471706 C19.5096374,39.3319645 17.5510566,37.8612875 16.0456579,36.1314815 C14.1063138,33.9030427 12.769443,31.0725999 12.0293806,27.6556449 C11.360469,26.565281 11,25.3082308 11,24 C11,20.1340068 14.1340068,17 18,17 C21.8659932,17 25,20.1340068 25,24 C25,26.125 27.7040312,29 30,29 Z"/><path id="Combined-Shape-Copy" fill="#FFC445" fill-rule="nonzero" d="M42,29 C44.7614237,29 47,26.7614237 47,24 C47,14.6111593 39.3888407,7 30,7 C20.6111593,7 13,14.6111593 13,24 C13,33.3888407 20.6111593,41 30,41 C31.3333404,41 32.6447683,40.8466238 33.9154603,40.5471706 C31.5096374,39.3319645 29.4051056,37.9781963 28.0456579,36.1314815 C26.0625,33.4375 23,27.1875 23,24 C23,20.1340068 26.1340068,17 30,17 C33.8659932,17 37,20.1340068 37,24 C37.02301,26.3435241 39.7040312,29 42,29 Z" transform="translate(30.000000, 24.000000) scale(-1, -1) translate(-30.000000, -24.000000)"/></g></svg>
--- a/dashboard/src/assets/helm-gray-50.svg
+++ b/dashboard/src/assets/helm-gray-50.svg
--- a/dashboard/src/assets/k8s-watcher.svg
+++ b/dashboard/src/assets/k8s-watcher.svg
@@ -0,0 +1,5 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M47.1106 45.775C49.9376 45.775 52.2294 42.4134 52.2294 38.2667C52.2294 34.1199 49.9376 30.7583 47.1106 30.7583C44.2835 30.7583 41.9918 34.1199 41.9918 38.2667C41.9918 42.4134 44.2835 45.775 47.1106 45.775Z" fill="#1347FF"/>
+<path d="M37.0077 38.2667C37.0077 42.4134 34.7159 45.775 31.8888 45.775C29.0618 45.775 26.77 42.4134 26.77 38.2667C26.77 34.12 29.0618 30.7584 31.8888 30.7584C34.7159 30.7584 37.0077 34.12 37.0077 38.2667Z" fill="#1347FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 23.7087L14.4407 18H64.5597L70 23.6838V56.3162L64.5597 62H14.4403L9 56.3162V23.7087ZM17.9923 24.2134L15.8664 26.3861V53.6519L17.9923 55.8246H61.0736L63.1212 53.6483V26.3897L61.0736 24.2134H17.9923Z" fill="#1347FF"/>
+</svg>
--- a/dashboard/src/assets/logo-header.svg
+++ b/dashboard/src/assets/logo-header.svg
--- a/dashboard/src/assets/packges-header.svg
+++ b/dashboard/src/assets/packges-header.svg
--- a/dashboard/src/assets/plugin.svg
+++ b/dashboard/src/assets/plugin.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/plugin</title><g id="illustration/plugin" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#79C9FC" d="M26,15.3994248 C26,15.4091303 26,15.4188459 26,15.4285714 L26,21.4694881 C25.8463595,21.4969567 25.6941676,21.51275 25.5873784,21.51275 C25.4974117,21.51275 25.4230979,21.4768034 25.377756,21.4206259 L25.2660784,21.2822603 L25.1317423,21.1657666 C24.2436317,20.3956144 23.100098,19.9633214 21.895551,19.9633214 C19.2039137,19.9633214 17,22.1075558 17,24.7804643 C17,27.4533728 19.2039137,29.5976071 21.895551,29.5976071 C23.1972122,29.5976071 24.3149423,29.2878193 25.1231445,28.3613697 C25.4542273,27.9818463 25.568273,27.9073214 25.5873784,27.9073214 C25.681532,27.9073214 25.8352452,27.9239643 26,27.9524591 L26,32.5714286 C26,32.5811541 26,32.5908697 26,32.6005752 L26,33 C26,35.209139 24.209139,37 22,37 L4,37 C1.790861,37 0,35.209139 0,33 L0,15 C0,12.790861 1.790861,11 4,11 L22,11 C24.209139,11 26,12.790861 26,15 L26,15.3994248 Z"/><path id="Path" fill="#87E6E5" d="M27.9998779,32.5714286 C27.9998779,33.3604068 28.6572726,34 29.4682101,34 L46.5315458,34 C47.3424832,34 47.9998779,33.3604068 47.9998779,32.5714286 L47.9998779,15.4285714 C47.9998779,14.6395932 47.3424832,14 46.5315458,14 L29.4682101,14 C28.6572726,14 27.9998779,14.6395932 27.9998779,15.4285714 L27.9998779,21.8355216 C27.9334367,22.2650514 27.8567585,22.6454496 27.746391,22.8084643 C27.4245309,23.2838571 26.2402709,23.51275 25.5873784,23.51275 C24.8705773,23.51275 24.2322714,23.1857725 23.8214379,22.6767605 C23.3096996,22.2329909 22.6349941,21.9633214 21.895551,21.9633214 C20.2963823,21.9633214 19,23.2245992 19,24.7804643 C19,26.3363293 20.2963823,27.5976071 21.895551,27.5976071 C22.5398535,27.5976071 23.2399343,27.477727 23.6160247,27.0466112 C24.1396029,26.4464286 24.7367044,25.9073214 25.5873784,25.9073214 C26.2402709,25.9073214 27.5912951,26.1766031 27.8226692,26.6116071 C27.8819199,26.7230038 27.9403239,26.921677 27.9998779,27.1556219 L27.9998779,32.5714286 Z"/></g></svg>
--- a/dashboard/src/assets/react.svg
+++ b/dashboard/src/assets/react.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img"
+    class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228">
+    <path fill="#00D8FF"
+        d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z">
+    </path>
+</svg>
--- a/dashboard/src/assets/repo.svg
+++ b/dashboard/src/assets/repo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/repo</title><g id="illustration/repo" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Rectangle-62-Copy" fill="#B7F0EF" d="M27.2217723,9.04506931 L41.2217723,6.2682098 C43.3886973,5.83840648 45.4937616,7.2466219 45.9235649,9.41354696 C45.9743993,9.66983721 46,9.93049166 46,10.1917747 L46,32.581381 C46,34.4904961 44.650862,36.1335143 42.7782277,36.5049459 L28.7782277,39.2818054 C26.6113027,39.7116087 24.5062384,38.3033933 24.0764351,36.1364682 C24.0256007,35.880178 24,35.6195235 24,35.3582405 L24,12.9686342 C24,11.0595191 25.349138,9.4165009 27.2217723,9.04506931 Z" opacity=".7"/><path id="Combined-Shape" fill="#87E6E5" d="M6.77822775,6.2682098 L20.7782277,9.04506931 C22.650862,9.4165009 24,11.0595191 24,12.9686342 L24,35.3582405 C24,37.5673795 22.209139,39.3582405 20,39.3582405 C19.738717,39.3582405 19.4780625,39.3326398 19.2217723,39.2818054 L5.22177225,36.5049459 C3.34913798,36.1335143 2,34.4904961 2,32.581381 L2,10.1917747 C2,7.98263571 3.790861,6.19177471 6,6.19177471 C6.26128305,6.19177471 6.5219375,6.21737537 6.77822775,6.2682098 Z"/><path id="Rectangle-63-Copy-2" fill="#61C1FD" d="M22,10 C23.1666667,10.2291667 24.0179036,10.625 24.5537109,11.1875 C25.0895182,11.75 25.5716146,12.875 26,14.5625 C26,29.3020833 26,37.5208333 26,39.21875 C26,40.9166667 26.4241536,42.9583333 27.2724609,45.34375 L24.5537109,41.875 L22.9824219,45.34375 C22.327474,43.1979167 22,41.2291667 22,39.4375 C22,37.6458333 22,27.8333333 22,10 Z"/></g></svg>
--- a/dashboard/src/assets/stackalt.svg
+++ b/dashboard/src/assets/stackalt.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/stackalt</title><g id="illustration/stackalt" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#FFAE00" d="M23.8628277,0 L23.8628277,48 L3.32291648,36.2491883 L3.32155653,11.9499781 L23.8628277,0 Z M23.8670509,0 L44.408322,11.9499781 L44.4069621,36.2491883 L23.8670509,48 L23.8670509,0 Z" opacity=".196"/><path id="Rectangle-46-Copy-3" fill="#66BF3C" d="M15.8232279,19.1155258 L24.7368455,21.4714881 C29.6053842,22.7582937 33.4077423,26.5606518 34.694548,31.4291905 L37.0505103,40.3428082 C37.6150232,42.4786032 36.3412474,44.6676353 34.2054524,45.2321482 C33.5569474,45.4035549 32.87575,45.4091235 32.2245294,45.2483418 L23.3459013,43.0562718 C18.2976962,41.809906 14.3561301,37.8683399 13.1097642,32.8201348 L10.9176943,23.9415066 C10.3881737,21.7967682 11.6975664,19.6288529 13.8423049,19.0993322 C14.4935255,18.9385505 15.1747229,18.9441191 15.8232279,19.1155258 Z" opacity=".5" transform="translate(23.999997, 32.166058) rotate(-45.000000) translate(-23.999997, -32.166058)"/><path id="Rectangle-46-Copy-2" fill="#FFAE00" d="M15.8232279,11.2216893 L24.7368455,13.5776516 C29.6053842,14.8644572 33.4077423,18.6668153 34.694548,23.5353541 L37.0505103,32.4489717 C37.6150232,34.5847667 36.3412474,36.7737988 34.2054524,37.3383117 C33.5569474,37.5097184 32.87575,37.515287 32.2245294,37.3545053 L23.3459013,35.1624353 C18.2976962,33.9160695 14.3561301,29.9745034 13.1097642,24.9262983 L10.9176943,16.0476701 C10.3881737,13.9029317 11.6975664,11.7350164 13.8423049,11.2054957 C14.4935255,11.044714 15.1747229,11.0502826 15.8232279,11.2216893 Z" opacity=".5" transform="translate(23.999997, 24.272222) rotate(-45.000000) translate(-23.999997, -24.272222)"/><path id="Rectangle-46-Copy" fill="#FC521F" d="M15.8232279,3.32785281 L24.7368455,5.68381509 C29.6053842,6.97062075 33.4077423,10.7729788 34.694548,15.6415176 L37.0505103,24.5551352 C37.6150232,26.6909302 36.3412474,28.8799623 34.2054524,29.4444752 C33.5569474,29.6158819 32.87575,29.6214505 32.2245294,29.4606688 L23.3459013,27.2685988 C18.2976962,26.022233 14.3561301,22.0806669 13.1097642,17.0324618 L10.9176943,8.15383364 C10.3881737,6.00909519 11.6975664,3.84117987 13.8423049,3.31165925 C14.4935255,3.15087753 15.1747229,3.15644615 15.8232279,3.32785281 Z" opacity=".5" transform="translate(23.999997, 16.378385) rotate(-45.000000) translate(-23.999997, -16.378385)"/></g></svg>
--- a/dashboard/src/components/Badge.stories.tsx
+++ b/dashboard/src/components/Badge.stories.tsx
@@ -0,0 +1,44 @@
+/*
+ * @file Badge.stories.tsx
+ * @description Badge stories, using Storybook.
+ * We create a story for the componenet badge,
+ * and we can use it to test the component in Storybook.
+ * There, we can see the component in different states, and
+ * play with the props to see how it behaves.
+ * We'll use a generic story for the component, and we'll
+ * use the args to pass the props.
+ * We'll use a template to create the story.
+ * Refer to Badge.tsx and the BadgeProps interface to see what props
+ * the component accepts. The story works with the same props.
+ *
+ * @see https://storybook.js.org/docs/react/writing-stories/introduction
+ */
+
+import { ComponentStory } from "@storybook/react";
+import Badge, { BadgeProps } from "./Badge";
+
+// We create a generic template for the component.
+
+const Template: ComponentStory<typeof Badge> = (args: BadgeProps) => (
+  <Badge {...args} />
+);
+// We export the story, and we pass the template to it. For now,
+// we are only going to use the default story.
+export const Default = Template.bind({});
+// We set the props for the story. Recall that the props are the same as the
+// ones in BadgeProps, which we impoted.
+Default.args = {
+  type: "success",
+  children: "Success",
+};
+// We set the metadata for the story.
+// Refer to https://storybook.js.org/docs/react/writing-stories/introduction
+// for more information.
+export default {
+  title: "Badge",
+  component: Badge,
+  args: {
+    type: "success",
+    children: "Success",
+  },
+};
--- a/dashboard/src/components/Badge.tsx
+++ b/dashboard/src/components/Badge.tsx
@@ -0,0 +1,72 @@
+/**
+ * This is a generic badge component.
+ * By passing props you can customize the badge.
+ * The basic custom types are:
+ * warning, success, error, info, default.
+ * You can use this badge like any other html element.
+ *
+ * behind the scenes, it uses tailwindcss classes to imlement the badge,
+ * with the correct styles.
+ *
+ * @example
+ * <Badge type="warning">Warning</Badge>
+ *
+ * @param {string} type - The type of the badge.
+ * @param {string} children - The content of the badge.
+ * @returns {JSX.Element} - The badge component.
+ *
+ *
+ */
+
+export type BadgeCode = "success" | "warning" | "error" | "unknown";
+
+export const BadgeCodes = Object.freeze({
+  ERROR: "error",
+  WARNING: "warning",
+  SUCCESS: "success",
+  UNKNOWN: "unknown",
+});
+
+export interface BadgeProps {
+  type: BadgeCode;
+  children: React.ReactNode;
+  additionalClassNames?: string;
+}
+export default function Badge(props: BadgeProps): JSX.Element {
+  const colorVariants = {
+    [BadgeCodes.SUCCESS]: "bg-text-success text-black-800",
+    [BadgeCodes.WARNING]: "bg-text-warning text-white",
+    [BadgeCodes.ERROR]: "bg-text-danger text-white",
+    [BadgeCodes.UNKNOWN]: "bg-secondary text-danger",
+  };
+
+  const badgeBase =
+    "inline-flex items-center px-1 py-1 rounded text-xs font-light";
+
+  const badgeElem = (
+    <span
+      className={`${badgeBase} ${colorVariants[props.type]} ${
+        props.additionalClassNames ?? ""
+      }`}
+    >
+      {props.children}
+    </span>
+  );
+  return badgeElem;
+}
+
+export const getBadgeType = (status: string): BadgeCode => {
+  if (status === "Unknown") {
+    return BadgeCodes.UNKNOWN;
+  } else if (
+    status === "Healthy" ||
+    status.toLowerCase().includes("exists") ||
+    status === "available"
+  ) {
+    return BadgeCodes.SUCCESS;
+  } else if (status === "Progressing") {
+    return BadgeCodes.WARNING;
+  } else {
+    return BadgeCodes.ERROR;
+  }
+};
--- a/dashboard/src/components/Button.stories.tsx
+++ b/dashboard/src/components/Button.stories.tsx
@@ -0,0 +1,35 @@
+/* eslint-disable no-console */
+// Status.stories.ts|tsx
+
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import Button, { ButtonProps } from "./Button";
+//👇 This default export determines where your story goes in the story list
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: "Button",
+  component: Button,
+} as ComponentMeta<typeof Button>;
+
+// Recall that Button has 'props' which is of type ButtonProps
+// We want to past theme to the story with the name 'Default', so we
+// create a template for it.
+// We want to declare default values for the props, so we create a
+// default args object.
+const Template: ComponentStory<typeof Button> = (args: ButtonProps) => (
+  <Button {...args} />
+);
+export const Default = Template.bind({});
+Default.args = {
+  children: (
+    <>
+      <span>&uarr;</span>
+      <span>Update</span>
+    </>
+  ),
+  onClick: () => {
+    console.log("click");
+  },
+};
--- a/dashboard/src/components/Button.tsx
+++ b/dashboard/src/components/Button.tsx
@@ -0,0 +1,36 @@
+/**
+ * @file Button.tsx
+ * This component is a generic button component using tailwind.
+ * You can include an optional icon.
+ * You can pass the action to be done when the button is clicked using
+ *    the onClick prop.
+ *
+ * Props:
+ *
+ * @param children: children
+ * @param onClick: () => void
+ *
+ *
+ */
+
+// this is a type declaration for the action prop.
+// it is a function that takes a string as an argument and returns void.
+export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+  disabled?: boolean;
+  onClick: () => void;
+  className?: string;
+}
+export default function Button(props: ButtonProps): JSX.Element {
+  return (
+    <>
+      <button
+        onClick={props.onClick}
+        className={`${props.className} bg-white border border-gray-300  hover:bg-gray-50 text-black  py-1 px-4 rounded `}
+        disabled={props.disabled}
+      >
+        {props.children}
+      </button>
+    </>
+  );
+}
--- a/dashboard/src/components/ClustersList.stories.tsx
+++ b/dashboard/src/components/ClustersList.stories.tsx
@@ -0,0 +1,29 @@
+/* eslint-disable no-console */
+// ClustersListBar.stories.ts|tsx
+
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import ClustersList from "./ClustersList";
+
+//👇 This default export determines where your story goes in the story list
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: "ClustersList",
+  component: ClustersList,
+} as ComponentMeta<typeof ClustersList>;
+
+//👇 We create a “template” of how args map to rendering
+const Template: ComponentStory<typeof ClustersList> = () => (
+  <ClustersList
+    filteredNamespaces={[""]}
+    installedReleases={[]}
+    onClusterChange={() => {
+      console.log("onClusterChange called");
+    }}
+    selectedCluster={""}
+  />
+);
+
+export const Default = Template.bind({});
--- a/dashboard/src/components/ClustersList.tsx
+++ b/dashboard/src/components/ClustersList.tsx
@@ -0,0 +1,165 @@
+import { useMemo } from "react";
+import { Cluster, Release } from "../data/types";
+import apiService from "../API/apiService";
+import { useQuery } from "@tanstack/react-query";
+import useCustomSearchParams from "../hooks/useCustomSearchParams";
+import { useAppContext } from "../context/AppContext";
+import { v4 as uuidv4 } from "uuid";
+
+type ClustersListProps = {
+  onClusterChange: (clusterName: string) => void;
+  selectedCluster: string;
+  filteredNamespaces: string[];
+  installedReleases?: Release[];
+};
+
+function getCleanClusterName(rawClusterName: string) {
+  if (rawClusterName.indexOf("arn") === 0) {
+    // AWS cluster
+    const clusterSplit = rawClusterName.split(":");
+    const clusterName = clusterSplit.slice(-1)[0].replace("cluster/", "");
+    const region = clusterSplit.at(-3);
+    return region + "/" + clusterName + " [AWS]";
+  }
+
+  if (rawClusterName.indexOf("gke") === 0) {
+    // GKE cluster
+    return (
+      rawClusterName.split("_").at(-2) +
+      "/" +
+      rawClusterName.split("_").at(-1) +
+      " [GKE]"
+    );
+  }
+
+  return rawClusterName;
+}
+
+function ClustersList({
+  installedReleases,
+  selectedCluster,
+  filteredNamespaces,
+  onClusterChange,
+}: ClustersListProps) {
+  const { upsertSearchParams, removeSearchParam } = useCustomSearchParams();
+  const { clusterMode } = useAppContext();
+
+  const { data: clusters } = useQuery<Cluster[]>({
+    queryKey: ["clusters", selectedCluster],
+    queryFn: apiService.getClusters,
+    onSuccess(data) {
+      const sortedData = data?.sort((a, b) =>
+        getCleanClusterName(a.Name).localeCompare(getCleanClusterName(b.Name))
+      );
+
+      if (sortedData && sortedData.length > 0 && !selectedCluster) {
+        onClusterChange(sortedData[0].Name);
+      }
+
+      if (selectedCluster) {
+        const cluster = data.find(
+          (cluster) => getCleanClusterName(cluster.Name) === selectedCluster
+        );
+        if (!filteredNamespaces && cluster?.Namespace) {
+          upsertSearchParams("filteredNamespace", cluster.Namespace);
+        }
+      }
+    },
+  });
+
+  const namespaces = useMemo(() => {
+    const mapNamespaces = new Map<string, number>();
+
+    installedReleases?.forEach((release) => {
+      const amount = mapNamespaces.get(release.namespace)
+        ? Number(mapNamespaces.get(release.namespace)) + 1
+        : 1;
+      mapNamespaces.set(release.namespace, amount);
+    });
+
+    return Array.from(mapNamespaces, ([key, value]) => ({
+      id: uuidv4(),
+      name: key,
+      amount: value,
+    }));
+  }, [installedReleases]);
+
+  const onNamespaceChange = (namespace: string) => {
+    const newSelectedNamespaces = filteredNamespaces?.includes(namespace)
+      ? filteredNamespaces?.filter((ns) => ns !== namespace)
+      : [...(filteredNamespaces ?? []), namespace];
+    removeSearchParam("filteredNamespace");
+    if (newSelectedNamespaces.length > 0) {
+      upsertSearchParams(
+        "filteredNamespace",
+        newSelectedNamespaces.map((ns) => ns).join("+")
+      );
+    }
+  };
+
+  return (
+    <div className="bg-white flex flex-col p-2 rounded custom-shadow text-cluster-list w-48 m-5 h-fit pb-4 custom-">
+      {!clusterMode ? (
+        <>
+          <label className="font-bold">Clusters</label>
+          {clusters
+            ?.sort((a, b) =>
+              getCleanClusterName(a.Name).localeCompare(
+                getCleanClusterName(b.Name)
+              )
+            )
+            ?.map((cluster) => {
+              return (
+                <span
+                  key={cluster.Name}
+                  className="flex items-center mt-2 text-xs"
+                >
+                  <input
+                    className="cursor-pointer"
+                    onChange={(e) => {
+                      onClusterChange(e.target.value);
+                    }}
+                    type="radio"
+                    id={cluster.Name}
+                    value={cluster.Name}
+                    checked={cluster.Name === selectedCluster}
+                    name="clusters"
+                  />
+                  <label htmlFor={cluster.Name} className="ml-1 ">
+                    {getCleanClusterName(cluster.Name)}
+                  </label>
+                </span>
+              );
+            })}
+        </>
+      ) : null}
+
+      <label className="font-bold mt-4">Namespaces</label>
+      {namespaces
+        ?.sort((a, b) => a.name.localeCompare(b.name))
+        ?.map((namespace) => (
+          <span key={namespace.name} className="flex items-center mt-2 text-xs">
+            <input
+              type="checkbox"
+              id={namespace.name}
+              onChange={(event) => {
+                onNamespaceChange(event.target.value);
+              }}
+              value={namespace.name}
+              checked={
+                filteredNamespaces
+                  ? filteredNamespaces.includes(namespace.name)
+                  : false
+              }
+            />
+            <label
+              htmlFor={namespace.name}
+              className="ml-1"
+            >{`${namespace.name} [${namespace.amount}]`}</label>
+          </span>
+        ))}
+    </div>
+  );
+}
+
+export default ClustersList;
--- a/dashboard/src/components/InstalledPackages/HealthStatus.tsx
+++ b/dashboard/src/components/InstalledPackages/HealthStatus.tsx
@@ -0,0 +1,41 @@
+import { HD_RESOURCE_CONDITION_TYPE } from "../../API/releases";
+import { Tooltip } from "flowbite-react";
+import { ReleaseHealthStatus } from "../../data/types";
+import { v4 as uuidv4 } from "uuid";
+
+interface Props {
+  statusData: ReleaseHealthStatus[];
+}
+
+const HealthStatus = ({ statusData }: Props) => {
+  const statuses = statusData.map((item) => {
+    for (let i = 0; i < item.status.conditions.length; i++) {
+      const cond = item.status.conditions[i];
+
+      if (cond.type !== HD_RESOURCE_CONDITION_TYPE) {
+        continue;
+      }
+
+      return (
+        <Tooltip
+          key={uuidv4()} // this is not a good practice, we need to fetch some unique id from the backend
+          content={`${cond.status} ${item.kind} ${item.metadata.name}`}
+        >
+          <span
+            className={`inline-block ${
+              cond.status === "Healthy"
+                ? "bg-success"
+                : cond.status === "Progressing"
+                ? "bg-warning"
+                : "bg-danger"
+            } w-2.5 h-2.5 rounded-sm`}
+          ></span>
+        </Tooltip>
+      );
+    }
+  });
+
+  return <div className="flex flex-wrap gap-1">{statuses}</div>;
+};
+
+export default HealthStatus;
--- a/dashboard/src/components/InstalledPackages/InstalledPackageCard.stories.tsx
+++ b/dashboard/src/components/InstalledPackages/InstalledPackageCard.stories.tsx
@@ -0,0 +1,41 @@
+// InstalledPackageCard.stories.ts|tsx
+
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import InstalledPackageCard from "./InstalledPackageCard";
+
+//👇 This default export determines where your story goes in the story list
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: "InstalledPackageCard",
+  component: InstalledPackageCard,
+} as ComponentMeta<typeof InstalledPackageCard>;
+
+//👇 We create a “template” of how args map to rendering
+const Template: ComponentStory<typeof InstalledPackageCard> = (args) => (
+  <InstalledPackageCard {...args} />
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  release: {
+    id: "",
+    name: "",
+    namespace: "",
+    revision: 1,
+    updated: "",
+    status: "",
+    chart: "",
+    chart_name: "",
+    chart_ver: "",
+    app_version: "",
+    icon: "",
+    description: "",
+    has_tests: false,
+    chartName: "", // duplicated in some cases in the backend, we need to resolve this
+    chartVersion: "", // duplicated in some cases in the backend, we need to resolve this
+  },
+};
--- a/dashboard/src/components/InstalledPackages/InstalledPackageCard.tsx
+++ b/dashboard/src/components/InstalledPackages/InstalledPackageCard.tsx
@@ -0,0 +1,153 @@
+import { useState } from "react";
+import { Release } from "../../data/types";
+import { BsArrowUpCircleFill, BsPlusCircleFill } from "react-icons/bs";
+import { getAge } from "../../timeUtils";
+import StatusLabel, {
+  DeploymentStatus,
+  getStatusColor,
+} from "../common/StatusLabel";
+import { useQuery } from "@tanstack/react-query";
+import apiService from "../../API/apiService";
+import HealthStatus from "./HealthStatus";
+import HelmGrayIcon from "../../assets/helm-gray-50.svg";
+import Spinner from "../Spinner";
+import { useGetLatestVersion } from "../../API/releases";
+import { isNewerVersion } from "../../utils";
+import { LatestChartVersion } from "../../API/interfaces";
+import useNavigateWithSearchParams from "../../hooks/useNavigateWithSearchParams";
+import { useParams } from "react-router-dom";
+
+type InstalledPackageCardProps = {
+  release: Release;
+};
+
+export default function InstalledPackageCard({
+  release,
+}: InstalledPackageCardProps) {
+  const navigate = useNavigateWithSearchParams();
+
+  const { context: selectedCluster } = useParams();
+  const [isMouseOver, setIsMouseOver] = useState(false);
+
+  const { data: latestVersionResult } = useGetLatestVersion(release.chartName, {
+    queryKey: ["chartName", release.chartName],
+    cacheTime: 0,
+  });
+
+  const { data: statusData } = useQuery<any>({
+    queryKey: ["resourceStatus", release],
+    queryFn: () => apiService.getResourceStatus({ release }),
+  });
+
+  const latestVersionData: LatestChartVersion | undefined =
+    latestVersionResult?.[0];
+
+  const canUpgrade =
+    !latestVersionData?.version || !release.chartVersion
+      ? false
+      : isNewerVersion(release.chartVersion, latestVersionData?.version);
+
+  const installRepoSuggestion = latestVersionData?.isSuggestedRepo
+    ? latestVersionData.repository
+    : null;
+
+  const handleMouseOver = () => {
+    setIsMouseOver(true);
+  };
+
+  const handleMouseOut = () => {
+    setIsMouseOver(false);
+  };
+
+  const handleOnClick = () => {
+    const { name, namespace } = release;
+    navigate(
+      `/${selectedCluster}/${namespace}/${name}/installed/revision/${release.revision}`,
+      { state: release }
+    );
+  };
+
+  const statusColor = getStatusColor(release.status as DeploymentStatus);
+  const borderLeftColor: { [key: string]: string } = {
+    [DeploymentStatus.DEPLOYED]: "border-l-border-deployed",
+    [DeploymentStatus.FAILED]: "border-l-text-danger",
+    [DeploymentStatus.PENDING]: "border-l-border",
+  };
+
+  return (
+    <div
+      className={`${
+        borderLeftColor[release.status]
+      } text-xs grid grid-cols-12 items-center bg-white rounded-md p-2 py-6 my-2 custom-shadow border-l-4 border-l-[${statusColor}] cursor-pointer ${
+        isMouseOver && "custom-shadow-lg"
+      }`}
+      onMouseOver={handleMouseOver}
+      onMouseOut={handleMouseOut}
+      onClick={handleOnClick}
+    >
+      <img
+        src={release.icon || HelmGrayIcon}
+        alt="helm release icon"
+        className="w-[45px] mx-4 col-span-1 min-w-[45px]"
+      />
+
+      <div className="col-span-11 -mb-5">
+        <div className="grid grid-cols-11">
+          <div className="col-span-3 font-bold text-xl mr-0.5 font-roboto-slab">
+            {release.name}
+          </div>
+          <div className="col-span-3">
+            <StatusLabel status={release.status} />
+          </div>
+          <div className="col-span-2 font-bold">{release.chart}</div>
+          <div className="col-span-1 font-bold text-xs">
+            #{release.revision}
+          </div>
+          <div className="col-span-1 font-bold text-xs">
+            {release.namespace}
+          </div>
+          <div className="col-span-1 font-bold text-xs">{getAge(release)}</div>
+        </div>
+        <div
+          className="grid grid-cols-11 text-xs mt-3"
+          style={{ marginBottom: "12px" }}
+        >
+          <div className="col-span-3 h-12 line-clamp-3 mr-1">
+            {release.description}
+          </div>
+          <div className="col-span-3 mr-2">
+            {statusData ? (
+              <HealthStatus statusData={statusData} />
+            ) : (
+              <Spinner size={4} />
+            )}
+          </div>
+          <div className="col-span-2 text-muted flex flex-col items">
+            <span>CHART VERSION</span>
+            {(canUpgrade || installRepoSuggestion) && (
+              <div
+                className="text-upgradable flex flex-row items-center gap-1 font-bold"
+                title={`upgrade available: ${latestVersionData?.version} from ${latestVersionData?.repository}`}
+              >
+                {canUpgrade && !installRepoSuggestion ? (
+                  <>
+                    <BsArrowUpCircleFill />
+                    UPGRADE
+                  </>
+                ) : (
+                  <>
+                    <BsPlusCircleFill />
+                    ADD REPO
+                  </>
+                )}
+              </div>
+            )}
+          </div>
+          <div className="col-span-1 text-muted">REVISION</div>
+          <div className="col-span-1 text-muted">NAMESPACE</div>
+          <div className="col-span-1 text-muted">UPDATED</div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/dashboard/src/components/InstalledPackages/InstalledPackagesHeader.stories.tsx
+++ b/dashboard/src/components/InstalledPackages/InstalledPackagesHeader.stories.tsx
@@ -0,0 +1,60 @@
+// InstalledPackagesHeader.stories.ts|tsx
+
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import InstalledPackagesHeader from "./InstalledPackagesHeader";
+
+//👇 This default export determines where your story goes in the story list
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: "InstalledPackagesHeader",
+  component: InstalledPackagesHeader,
+} as ComponentMeta<typeof InstalledPackagesHeader>;
+
+//👇 We create a “template” of how args map to rendering
+const Template: ComponentStory<typeof InstalledPackagesHeader> = (args) => (
+  <InstalledPackagesHeader {...args} />
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  filteredReleases: [
+    {
+      id: "",
+      name: "",
+      namespace: "",
+      revision: 1,
+      updated: "",
+      status: "",
+      chart: "",
+      chart_name: "",
+      chart_ver: "",
+      app_version: "",
+      icon: "",
+      description: "",
+      has_tests: false,
+      chartName: "", // duplicated in some cases in the backend, we need to resolve this
+      chartVersion: "", // duplicated in some cases in the
+    },
+    {
+      id: "",
+      name: "",
+      namespace: "",
+      revision: 1,
+      updated: "",
+      status: "",
+      chart: "",
+      chart_name: "",
+      chart_ver: "",
+      app_version: "",
+      icon: "",
+      description: "",
+      has_tests: false,
+      chartName: "", // duplicated in some cases in the backend, we need to resolve this
+      chartVersion: "", // duplicated in some cases in the
+    },
+  ],
+};
--- a/dashboard/src/components/InstalledPackages/InstalledPackagesHeader.tsx
+++ b/dashboard/src/components/InstalledPackages/InstalledPackagesHeader.tsx
@@ -0,0 +1,51 @@
+import HeaderLogo from "../../assets/packges-header.svg";
+import { Release } from "../../data/types";
+
+type InstalledPackagesHeaderProps = {
+  filteredReleases?: Release[];
+  setFilterKey: React.Dispatch<React.SetStateAction<string>>;
+  isLoading: boolean;
+};
+
+export default function InstalledPackagesHeader({
+  filteredReleases,
+  setFilterKey,
+  isLoading,
+}: InstalledPackagesHeaderProps) {
+  const numOfPackages = filteredReleases?.length;
+  const showNoPackageAlert = Boolean(
+    !isLoading && (numOfPackages === undefined || numOfPackages === 0)
+  );
+  return (
+    <div className="custom-shadow rounded-t-md  ">
+      <div className="flex items-center justify-between bg-white px-2 py-0.5 font-inter rounded-t-md ">
+        <div className="flex items-center">
+          <img
+            src={HeaderLogo}
+            alt="Helm-DashBoard"
+            className="display-inline h-12 ml-3 mr-3 w-[28px] "
+          />
+          <h2 className="display-inline font-bold text-base ">{`Installed Charts (${
+            numOfPackages || "0"
+          })`}</h2>
+        </div>
+
+        <div className="w-1/3">
+          <input
+            className="border-installed-charts-filter  rounded p-1 text-sm w-11/12"
+            placeholder="Filter..."
+            type="text"
+            onChange={(ev) => setFilterKey(ev.target.value)}
+          />
+        </div>
+      </div>
+
+      {showNoPackageAlert && (
+        <div className="bg-white rounded shadow display-none no-charts mt-3 text-sm p-4">
+          Looks like you don&apos;t have any charts installed.
+          &quot;Repository&quot; section may be a good place to start.
+        </div>
+      )}
+    </div>
+  );
+}
--- a/dashboard/src/components/InstalledPackages/InstalledPackagesList.stories.tsx
+++ b/dashboard/src/components/InstalledPackages/InstalledPackagesList.stories.tsx
@@ -0,0 +1,60 @@
+// InstalledPackagesList.stories.ts|tsx
+
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import InstalledPackagesList from "./InstalledPackagesList";
+
+//👇 This default export determines where your story goes in the story list
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: "InstalledPackagesList",
+  component: InstalledPackagesList,
+} as ComponentMeta<typeof InstalledPackagesList>;
+
+//👇 We create a “template” of how args map to rendering
+const Template: ComponentStory<typeof InstalledPackagesList> = (args) => (
+  <InstalledPackagesList {...args} />
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  installedReleases: [
+    {
+      id: "",
+      name: "",
+      namespace: "",
+      revision: 1,
+      updated: "",
+      status: "",
+      chart: "",
+      chart_name: "",
+      chart_ver: "",
+      app_version: "",
+      icon: "",
+      description: "",
+      has_tests: false,
+      chartName: "", // duplicated in some cases in the backend, we need to resolve this
+      chartVersion: "", // duplicated in some cases in the
+    },
+    {
+      id: "",
+      name: "",
+      namespace: "",
+      revision: 1,
+      updated: "",
+      status: "",
+      chart: "",
+      chart_name: "",
+      chart_ver: "",
+      app_version: "",
+      icon: "",
+      description: "",
+      has_tests: false,
+      chartName: "", // duplicated in some cases in the backend, we need to resolve this
+      chartVersion: "", // duplicated in some cases in the
+    },
+  ],
+};
--- a/dashboard/src/components/InstalledPackages/InstalledPackagesList.tsx
+++ b/dashboard/src/components/InstalledPackages/InstalledPackagesList.tsx
@@ -0,0 +1,23 @@
+import InstalledPackageCard from "./InstalledPackageCard";
+import { Release } from "../../data/types";
+
+type InstalledPackagesListProps = {
+  filteredReleases: Release[];
+};
+
+export default function InstalledPackagesList({
+  filteredReleases,
+}: InstalledPackagesListProps) {
+  return (
+    <div>
+      {filteredReleases.map((installedPackage: Release) => {
+        return (
+          <InstalledPackageCard
+            key={installedPackage.name}
+            release={installedPackage}
+          />
+        );
+      })}
+    </div>
+  );
+}
--- a/dashboard/src/components/LinkWithSearchParams.tsx
+++ b/dashboard/src/components/LinkWithSearchParams.tsx
@@ -0,0 +1,24 @@
+import { NavLink, useLocation } from "react-router-dom";
+
+const LinkWithSearchParams = ({
+  to,
+  ...props
+}: {
+  to: string;
+  end?: boolean;
+  exclude?: string[];
+  className?: string;
+  children: React.ReactNode;
+}) => {
+  const { search } = useLocation();
+  const params = new URLSearchParams(search);
+
+  // For state we don't want to keep while navigating
+  props.exclude?.forEach((key) => {
+    params.delete(key);
+  });
+
+  return <NavLink to={`${to}/?${params.toString()}`} {...props} />;
+};
+
+export default LinkWithSearchParams;
--- a/dashboard/src/components/SelectMenu.stories.tsx
+++ b/dashboard/src/components/SelectMenu.stories.tsx
@@ -0,0 +1,38 @@
+/* eslint-disable no-console */
+/**
+ * @file SelectMenu.stories.tsx
+ * @description This file contains the SelectMenu
+ *    component stories.
+ * currently there is only the default story.
+ * The default story renders the component with the default props.
+ */
+
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import SelectMenu, { SelectMenuItem, SelectMenuProps } from "./SelectMenu";
+
+//👇 This default export determines where your story goes in the story list
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: "SelectMenu",
+  component: SelectMenu,
+} as ComponentMeta<typeof SelectMenu>;
+
+//👇 We create a "template" of how args map to rendering
+const Template: ComponentStory<typeof SelectMenu> = (args: SelectMenuProps) => (
+  <SelectMenu {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  header: "Header",
+  children: [
+    <SelectMenuItem label="Item 1" id={1} key="item1" />,
+    <SelectMenuItem label="Item 2" id={2} key="item2" />,
+    <SelectMenuItem label="Item 3" id={3} key="item3" />,
+  ],
+  selected: 1,
+  onSelect: (id: number) => console.log(id),
+};
--- a/dashboard/src/components/SelectMenu.tsx
+++ b/dashboard/src/components/SelectMenu.tsx
@@ -0,0 +1,82 @@
+/**
+ *
+ * @file SelectMenu.tsx
+ * @description SelectMenu component
+ * This component is used to render a select menu. This is a component
+ * with two parts: The menu header and the menu items. The menu header
+ * is just text, and the menu items are radio toggles.
+ * The menu items are passed as children of type SelectMenuItem,
+ * which is an object with a label and id.
+ * SelectMenuItem is defined in this file.
+ * The menu header is a string.
+ *
+ * We use an interface to define the props that are passed to the component.
+ * The interface name is SelectMenuProps. The interface is defined in the
+ * same file as the component.
+ *
+ * @interface SelectMenuProps:
+ * @property {string} header - The menu header
+ * @property {SelectMenuItem[]} children - The menu items
+ * @property {number} selected - The id of the selected menu item
+ * @property {Function} onSelect - The function to call when a menu item is selected
+ *
+ * @return {JSX.Element} - The component
+ *
+ *
+ */
+
+// define the SelectMenuItem type:
+// This is an object with a label and id.
+// The label is a string, and the id is a number.
+// The id is used to identify the selected menu item.
+export interface SelectMenuItemProps {
+  label: string;
+  id: number;
+}
+
+// define the SelectMenuProps interface:
+
+export interface SelectMenuProps {
+  header: string;
+  children: React.ReactNode;
+  selected: number;
+  onSelect: (id: number) => void;
+}
+
+// define the SelectMenu component:
+// remember to use tailwind classes for styling
+// recall that the menu items are radio buttons
+// the selected menu item is the one that is checked
+// the onSelect function is called when a menu item is selected
+// the onSelect function is passed the id of the selected menu item
+
+export function SelectMenuItem({
+  label,
+  id,
+}: SelectMenuItemProps): JSX.Element {
+  return (
+    <div className="flex flex-row">
+      <input
+        type="radio"
+        name="menu"
+        id={id.toString()} // id must be a string
+        value={id}
+        checked={false}
+        onChange={() => {
+          return;
+        }}
+      />
+      <label htmlFor={id.toString()}>{label}</label>
+    </div>
+  );
+}
+
+export default function SelectMenu(props: SelectMenuProps): JSX.Element {
+  const { header, children } = props;
+  return (
+    <div className="card flex flex-col">
+      <h2 className="text-xl font-bold">{header}</h2>
+      <div className="flex flex-col">{children}</div>
+    </div>
+  );
+}
--- a/dashboard/src/components/ShutDownButton.stories.tsx
+++ b/dashboard/src/components/ShutDownButton.stories.tsx
@@ -0,0 +1,21 @@
+// TabsBar.stories.ts|tsx
+
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import ShutDownButton from "./ShutDownButton";
+
+//👇 This default export determines where your story goes in the story list
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: "ShutDownButton",
+  component: ShutDownButton,
+} as ComponentMeta<typeof ShutDownButton>;
+
+//👇 We create a “template” of how args map to rendering
+const Template: ComponentStory<typeof ShutDownButton> = () => (
+  <ShutDownButton />
+);
+
+export const Default = Template.bind({});
--- a/dashboard/src/components/ShutDownButton.tsx
+++ b/dashboard/src/components/ShutDownButton.tsx
@@ -0,0 +1,33 @@
+import { BsPower } from "react-icons/bs";
+
+import Modal from "./modal/Modal";
+import { useShutdownHelmDashboard } from "../API/other";
+
+function ShutDownButton() {
+  const { mutate: signOut, status } = useShutdownHelmDashboard();
+
+  const handleClick = async () => {
+    signOut();
+  };
+
+  return (
+    <div className="w-full">
+      <Modal title="Session Ended" isOpen={status === "success"}>
+        <p>
+          The Helm Dashboard application has been shut down. You can now close
+          the browser tab.
+        </p>
+      </Modal>
+
+      <button
+        onClick={handleClick}
+        title="Shut down the Helm Dashboard application"
+        className="flex justify-center w-full mr-5 py-3 border border-transparent hover:border hover:border-gray-500 rounded hover:rounded-lg"
+      >
+        <BsPower className="w-6" />
+      </button>
+    </div>
+  );
+}
+
+export default ShutDownButton;
--- a/dashboard/src/components/Spinner/index.tsx
+++ b/dashboard/src/components/Spinner/index.tsx
@@ -0,0 +1,22 @@
+export default function Spinner({ size = 8 }: { size?: number }) {
+  return (
+    <div role="status">
+      <svg
+        aria-hidden="true"
+        className={`w-${size} h-${size} mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600`}
+        viewBox="0 0 100 101"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+          fill="currentColor"
+        />
+        <path
+          d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+          fill="currentFill"
+        />
+      </svg>
+    </div>
+  );
+}
--- a/dashboard/src/components/Tabs.stories.tsx
+++ b/dashboard/src/components/Tabs.stories.tsx
@@ -0,0 +1,39 @@
+// TabsBar.stories.ts|tsx
+
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import Tabs from "./Tabs";
+
+//👇 This default export determines where your story goes in the story list
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: "Tabs",
+  component: Tabs,
+} as ComponentMeta<typeof Tabs>;
+
+//👇 We create a “template” of how args map to rendering
+const Template: ComponentStory<typeof Tabs> = (args) => <Tabs {...args} />;
+
+export const Default = Template.bind({});
+
+const defaultArgs = {
+  tabs: [
+    {
+      label: "tab1",
+      content: <div>tab1</div>,
+    },
+    {
+      label: "tab2",
+      content: <div>tab2</div>,
+    },
+    {
+      label: "tab3",
+      content: <div>tab3</div>,
+    },
+  ],
+};
+
+//@ts-ignore
+Default.args = defaultArgs;
--- a/dashboard/src/components/Tabs.tsx
+++ b/dashboard/src/components/Tabs.tsx
@@ -0,0 +1,43 @@
+import { ReactNode } from "react";
+import useCustomSearchParams from "../hooks/useCustomSearchParams";
+
+export interface Tab {
+  value: string;
+  label: string;
+  content: ReactNode;
+}
+
+interface TabsProps {
+  tabs: Tab[];
+  selectedTab: Tab;
+}
+
+export default function Tabs({ tabs, selectedTab }: TabsProps) {
+  const { upsertSearchParams } = useCustomSearchParams();
+
+  const moveTab = (tab: Tab) => {
+    upsertSearchParams("tab", tab.value);
+  };
+
+  return (
+    <div className="flex flex-col">
+      <div className="flex pb-2">
+        {tabs.map((tab) => (
+          <button
+            key={tab.label}
+            className={`cursor-pointer px-4 py-2 text-sm font-normal text-tab-color focus:outline-none"
+              ${
+                selectedTab.value === tab.value &&
+                "border-b-[3px] border-tab-color"
+              }
+            `}
+            onClick={() => moveTab(tab)}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+      <div>{selectedTab.content}</div>
+    </div>
+  );
+}
--- a/dashboard/src/components/TabsBar.stories.tsx
+++ b/dashboard/src/components/TabsBar.stories.tsx
@@ -0,0 +1,39 @@
+// TabsBar.stories.ts|tsx
+
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import TabsBar from "./TabsBar";
+
+//👇 This default export determines where your story goes in the story list
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: "TabsBar",
+  component: TabsBar,
+} as ComponentMeta<typeof TabsBar>;
+
+//👇 We create a “template” of how args map to rendering
+const Template: ComponentStory<typeof TabsBar> = (args) => (
+  <TabsBar {...args} />
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  tabs: [
+    {
+      name: "tab1",
+      component: <div className="w-250 h-250 bg-green-400">tab1</div>,
+    },
+    {
+      name: "tab2",
+      component: <div className="w-250 h-250 bg-red-400">tab2</div>,
+    },
+    {
+      name: "tab3",
+      component: <div className="w-250 h-250 bg-blue-400">tab3</div>,
+    },
+  ],
+  activeTab: "tab1",
+};
--- a/dashboard/src/components/TabsBar.tsx
+++ b/dashboard/src/components/TabsBar.tsx
@@ -0,0 +1,47 @@
+/**
+ * @file TabsBar.tsx
+ *
+ * This component is the bar that contains the tabs.
+ * it gets the tabs as a prop that contains a list with the name of the tabs
+ * and the component that should be rendered when the tab is clicked.
+ *
+ * @param {Array} tabs - the tabs that should be rendered
+ * @param {string} activeTab - the name of the active tab
+ * @param {Function} setActiveTab - the function that should be called when a tab is clicked
+ * @param {Function} setTabContent - the function that should be called when a tab is clicked
+ *
+ * @returns {JSX.Element} - the tabs bar
+ *
+ *
+ */
+
+interface TabsBarProps {
+  tabs: Array<{ name: string; component: JSX.Element }>;
+  activeTab: string;
+  setActiveTab: (tab: string) => void;
+  setTabContent: (tab: string) => void;
+}
+
+export default function TabsBar({
+  tabs,
+  activeTab,
+  setActiveTab,
+  setTabContent,
+}: TabsBarProps): JSX.Element {
+  return (
+    <div className="relative">
+      {tabs.map((tab) => (
+        <div
+          className={`tab ${activeTab === tab.name ? "active" : ""}`}
+          onClick={() => {
+            setActiveTab(tab.name);
+            setTabContent(tab.name);
+          }}
+          key={tab.name}
+        >
+          {tab.name}
+        </div>
+      ))}
+    </div>
+  );
+}
--- a/dashboard/src/components/TextInput.stories.tsx
+++ b/dashboard/src/components/TextInput.stories.tsx
@@ -0,0 +1,30 @@
+/**
+ * @file TextInput.stories.tsx
+ * @description This file contains the TextInput component stories.
+ * the first story simply renders the component with the default props.
+ */
+
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import TextInput, { TextInputProps } from "./TextInput";
+
+//👇 This default export determines where your story goes in the story list
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: "TextInput",
+  component: TextInput,
+} as ComponentMeta<typeof TextInput>;
+
+//👇 We create a “template” of how args map to rendering
+const Template: ComponentStory<typeof TextInput> = (args: TextInputProps) => (
+  <TextInput {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  label: "Label",
+  placeholder: "Placeholder",
+  isMandatory: false,
+};
--- a/dashboard/src/components/TextInput.tsx
+++ b/dashboard/src/components/TextInput.tsx
@@ -0,0 +1,38 @@
+/**
+ *
+ * @file TextInput.tsx
+ * @description This is a single-lined text field.
+ *              You can choose a placeholder, label,
+ *              and whether the field is mandatory.
+ * @interface TextInputProps:
+ * - label: the label to be displayed
+ * - placeholder: placeholder text
+ * - isMandatory: adds a red star if is.
+ *
+ * @return JSX.Element
+ *
+ */
+
+export interface TextInputProps {
+  label: string;
+  placeholder: string;
+  isMandatory?: boolean;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export default function TextInput(props: TextInputProps): JSX.Element {
+  return (
+    <div className="mb-6">
+      <label className="block ml-1 mb-1 text-sm font-medium text-gray-900dark:text-white">
+        {props.label}
+        {/* if prop.isMandatory is true, add a whitespace and a red star to signify it*/}
+        {props.isMandatory ? <span className="text-red-500"> *</span> : ""}
+      </label>
+      <input
+        type="text"
+        placeholder={props.placeholder}
+        className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 "
+      />
+    </div>
+  );
+}
--- a/dashboard/src/components/Tooltip.tsx
+++ b/dashboard/src/components/Tooltip.tsx
@@ -0,0 +1,41 @@
+import { type ReactElement, cloneElement } from "react";
+
+export default function Tooltip({
+  id,
+  title,
+  element,
+}: {
+  title: string;
+  id: string;
+  element: ReactElement;
+}) {
+  return (
+    <>
+      {cloneElement(element, { "data-tooltip-target": id })}
+      <div
+        id={id}
+        role="tooltip"
+        className="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"
+      >
+        {title}
+        <div className="tooltip-arrow" data-popper-arrow></div>
+      </div>
+
+      <button
+        data-tooltip-target="tooltip-default"
+        type="button"
+        className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+      >
+        Default tooltip
+      </button>
+      <div
+        id="tooltip-default"
+        role="tooltip"
+        className="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"
+      >
+        Tooltip content
+        <div className="tooltip-arrow" data-popper-arrow></div>
+      </div>
+    </>
+  );
+}
--- a/dashboard/src/components/Troubleshoot.stories.tsx
+++ b/dashboard/src/components/Troubleshoot.stories.tsx
@@ -0,0 +1,10 @@
+import { Meta, StoryFn } from "@storybook/react";
+import { Troubleshoot } from "./Troubleshoot";
+
+export default {
+  title: "Troubleshoot",
+  component: Troubleshoot,
+} as Meta<typeof Troubleshoot>;
+
+const Template: StoryFn<typeof Troubleshoot> = () => <Troubleshoot />;
+export const Default = Template.bind({});
--- a/dashboard/src/components/Troubleshoot.tsx
+++ b/dashboard/src/components/Troubleshoot.tsx
@@ -0,0 +1,18 @@
+import { RiExternalLinkLine } from "react-icons/ri";
+
+export const Troubleshoot = () => {
+  return (
+    <div>
+      <a
+        href="https://www.komodor.com/helm-dash/?utm_campaign=Helm%20Dashboard%20%7C%20CTA&utm_source=helm-dash&utm_medium=cta&utm_content=helm-dash"
+        target="_blank"
+        rel="noreferrer"
+      >
+        <button className="bg-primary text-white p-2 flex items-center rounded text-sm font-medium font-roboto">
+          Troubleshoot in Komodor
+          <RiExternalLinkLine className="ml-2 text-lg" />
+        </button>
+      </a>
+    </div>
+  );
+};
--- a/dashboard/src/components/common/Button/Button.stories.tsx
+++ b/dashboard/src/components/common/Button/Button.stories.tsx
@@ -0,0 +1,40 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { Button } from "./Button";
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "Example/Button",
+  component: Button,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    backgroundColor: { control: "color" },
+  },
+} as ComponentMeta<typeof Button>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+
+export const Primary = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Primary.args = {
+  primary: true,
+  label: "Button",
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  label: "Button",
+};
+
+export const Large = Template.bind({});
+Large.args = {
+  size: "large",
+  label: "Button",
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  size: "small",
+  label: "Button",
+};
--- a/dashboard/src/components/common/Button/Button.tsx
+++ b/dashboard/src/components/common/Button/Button.tsx
@@ -0,0 +1,51 @@
+import "./button.css";
+
+interface ButtonProps {
+  /**
+   * Is this the principal call to action on the page?
+   */
+  primary?: boolean;
+  /**
+   * What background color to use
+   */
+  backgroundColor?: string;
+  /**
+   * How large should the button be?
+   */
+  size?: "small" | "medium" | "large";
+  /**
+   * Button contents
+   */
+  label: string;
+  /**
+   * Optional click handler
+   */
+  onClick?: () => void;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({
+  primary = false,
+  size = "medium",
+  backgroundColor,
+  label,
+  ...props
+}: ButtonProps) => {
+  const mode = primary
+    ? "storybook-button--primary"
+    : "storybook-button--secondary";
+  return (
+    <button
+      type="button"
+      className={["storybook-button", `storybook-button--${size}`, mode].join(
+        " "
+      )}
+      style={{ backgroundColor }}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};
--- a/dashboard/src/components/common/Button/button.css
+++ b/dashboard/src/components/common/Button/button.css
@@ -0,0 +1,30 @@
+.storybook-button {
+  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 700;
+  border: 0;
+  border-radius: 3em;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 1;
+}
+.storybook-button--primary {
+  color: white;
+  background-color: #1ea7fd;
+}
+.storybook-button--secondary {
+  color: #333;
+  background-color: transparent;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+}
+.storybook-button--small {
+  font-size: 12px;
+  padding: 10px 16px;
+}
+.storybook-button--medium {
+  font-size: 14px;
+  padding: 11px 20px;
+}
+.storybook-button--large {
+  font-size: 16px;
+  padding: 12px 24px;
+}
--- a/dashboard/src/components/common/DropDown.stories.tsx
+++ b/dashboard/src/components/common/DropDown.stories.tsx
@@ -0,0 +1,35 @@
+/* eslint-disable no-console */
+// DropDown.stories.ts|tsx
+
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import DropDown from "./DropDown";
+import { BsSlack, BsGithub } from "react-icons/bs";
+
+//👇 This default export determines where your story goes in the story list
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: "DropDown",
+  component: DropDown,
+} as ComponentMeta<typeof DropDown>;
+
+//👇 We create a “template” of how args map to rendering
+const Template: ComponentStory<typeof DropDown> = (args) => (
+  <DropDown {...args} />
+);
+
+export const Default = Template.bind({});
+
+const onClick = () => {
+  console.log("drop down clicked");
+};
+
+Default.args = {
+  items: [
+    { id: "1", text: "Menu Item 1", onClick: onClick, icon: <BsSlack /> },
+    { id: "2 ", isSeparator: true },
+    { id: "3", text: "Menu Item 3", isDisabled: true, icon: <BsGithub /> },
+  ],
+};
--- a/dashboard/src/components/common/DropDown.tsx
+++ b/dashboard/src/components/common/DropDown.tsx
@@ -0,0 +1,107 @@
+import { ReactNode, useEffect, useRef, useState } from "react";
+import ArrowDownIcon from "../../assets/arrow-down-icon.svg";
+
+export type DropDownItem = {
+  id: string;
+  text?: string;
+  icon?: ReactNode;
+  onClick?: () => void;
+  isSeparator?: boolean;
+  isDisabled?: boolean;
+};
+
+export type DropDownProps = {
+  items: DropDownItem[];
+};
+
+type PopupState = {
+  isOpen: boolean;
+  X: number;
+  Y: number;
+};
+
+function DropDown({ items }: DropDownProps) {
+  const [popupState, setPopupState] = useState<PopupState>({
+    isOpen: false,
+    X: 0,
+    Y: 0,
+  });
+
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (popupState.isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [popupState.isOpen]);
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
+      setPopupState((prev) => ({
+        ...prev,
+        isOpen: false,
+      }));
+    }
+  };
+
+  return (
+    <>
+      <div className="relative flex flex-col items-center">
+        <button
+          onClick={(e) => {
+            setPopupState((prev) => ({
+              ...prev,
+              isOpen: !prev.isOpen,
+              X: e.pageX,
+              Y: e.pageY,
+            }));
+          }}
+          className="flex items-center justify-between"
+        >
+          Help
+          <img src={ArrowDownIcon} className="ml-2 w-[10px] h-[10px]" />
+        </button>
+      </div>
+      {popupState.isOpen && (
+        <div
+          ref={modalRef}
+          className={`z-10 flex flex-col py-1 gap-1 bg-white mt-3 absolute rounded border top-[${popupState.Y}] left-[${popupState.X}] border-gray-200`}
+        >
+          {items.map((item) => (
+            <>
+              {item.isSeparator ? (
+                <div className="bg-gray-300 h-[1px]" />
+              ) : (
+                <div
+                  onClick={() => {
+                    item.onClick?.();
+                    setPopupState((prev) => ({
+                      ...prev,
+                      isOpen: false,
+                    }));
+                  }}
+                  className={`cursor-pointer font-normal flex items-center gap-2 py-1 pl-3 pr-7 hover:bg-dropdown ${
+                    item.isDisabled
+                      ? "cursor-default hover:bg-transparent text-gray-400"
+                      : ""
+                  }`}
+                >
+                  {item.icon && <span> {item.icon ?? null}</span>}
+                  <span>{item.text}</span>
+                </div>
+              )}
+            </>
+          ))}
+        </div>
+      )}
+    </>
+  );
+}
+
+export default DropDown;
--- a/dashboard/src/components/common/Header/Header.stories.tsx
+++ b/dashboard/src/components/common/Header/Header.stories.tsx
@@ -0,0 +1,24 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { Header } from "./Header";
+
+export default {
+  title: "Example/Header",
+  component: Header,
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "fullscreen",
+  },
+} as ComponentMeta<typeof Header>;
+
+const Template: ComponentStory<typeof Header> = (args) => <Header {...args} />;
+
+export const LoggedIn = Template.bind({});
+LoggedIn.args = {
+  user: {
+    name: "Jane Doe",
+  },
+};
+
+export const LoggedOut = Template.bind({});
+LoggedOut.args = {};
--- a/dashboard/src/components/common/Header/Header.tsx
+++ b/dashboard/src/components/common/Header/Header.tsx
@@ -0,0 +1,69 @@
+import { Button } from "../Button/Button";
+import "./header.css";
+
+type User = {
+  name: string;
+};
+
+interface HeaderProps {
+  user?: User;
+  onLogin: () => void;
+  onLogout: () => void;
+  onCreateAccount: () => void;
+}
+
+export const Header = ({
+  user,
+  onLogin,
+  onLogout,
+  onCreateAccount,
+}: HeaderProps) => (
+  <header>
+    <div className="wrapper">
+      <div>
+        <svg
+          width="32"
+          height="32"
+          viewBox="0 0 32 32"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g fill="none" fillRule="evenodd">
+            <path
+              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+              fill="#FFF"
+            />
+            <path
+              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+              fill="#555AB9"
+            />
+            <path
+              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
+              fill="#91BAF8"
+            />
+          </g>
+        </svg>
+        <h1>Acme</h1>
+      </div>
+      <div>
+        {user ? (
+          <>
+            <span className="welcome">
+              Welcome, <b>{user.name}</b>!
+            </span>
+            <Button size="small" onClick={onLogout} label="Log out" />
+          </>
+        ) : (
+          <>
+            <Button size="small" onClick={onLogin} label="Log in" />
+            <Button
+              primary
+              size="small"
+              onClick={onCreateAccount}
+              label="Sign up"
+            />
+          </>
+        )}
+      </div>
+    </div>
+  </header>
+);
--- a/dashboard/src/components/common/Header/header.css
+++ b/dashboard/src/components/common/Header/header.css
@@ -0,0 +1,32 @@
+.wrapper {
+  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 15px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+svg {
+  display: inline-block;
+  vertical-align: top;
+}
+
+h1 {
+  font-weight: 900;
+  font-size: 20px;
+  line-height: 1;
+  margin: 6px 0 6px 10px;
+  display: inline-block;
+  vertical-align: top;
+}
+
+button + button {
+  margin-left: 10px;
+}
+
+.welcome {
+  color: #333;
+  font-size: 14px;
+  margin-right: 10px;
+}
--- a/dashboard/src/components/common/Page/Page.stories.tsx
+++ b/dashboard/src/components/common/Page/Page.stories.tsx
@@ -0,0 +1,25 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { within, userEvent } from "@storybook/testing-library";
+import { Page } from "./Page";
+
+export default {
+  title: "Example/Page",
+  component: Page,
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "fullscreen",
+  },
+} as ComponentMeta<typeof Page>;
+
+const Template: ComponentStory<typeof Page> = (args) => <Page {...args} />;
+
+export const LoggedOut = Template.bind({});
+
+export const LoggedIn = Template.bind({});
+
+// More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
+LoggedIn.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const loginButton = await canvas.getByRole("button", { name: /Log in/i });
+  await userEvent.click(loginButton);
+};
--- a/dashboard/src/components/common/Page/Page.tsx
+++ b/dashboard/src/components/common/Page/Page.tsx
@@ -0,0 +1,92 @@
+import React from "react";
+
+import { Header } from "../Header/Header";
+import "./page.css";
+
+type User = {
+  name: string;
+};
+
+export const Page: React.VFC = () => {
+  const [user, setUser] = React.useState<User>();
+
+  return (
+    <article>
+      <Header
+        user={user}
+        onLogin={() => setUser({ name: "Jane Doe" })}
+        onLogout={() => setUser(undefined)}
+        onCreateAccount={() => setUser({ name: "Jane Doe" })}
+      />
+
+      <section>
+        <h2>Pages in Storybook</h2>
+        <p>
+          We recommend building UIs with a{" "}
+          <a
+            href="https://componentdriven.org"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <strong>component-driven</strong>
+          </a>{" "}
+          process starting with atomic components and ending with pages.
+        </p>
+        <p>
+          Render pages with mock data. This makes it easy to build and review
+          page states without needing to navigate to them in your app. Here are
+          some handy patterns for managing page data in Storybook:
+        </p>
+        <ul>
+          <li>
+            Use a higher-level connected component. Storybook helps you compose
+            such data from the &quot;args&quot; of child component stories
+          </li>
+
+          <li>
+            Assemble data in the page component from your services. You can mock
+            these services out using Storybook.
+          </li>
+        </ul>
+        <p>
+          Get a guided tutorial on component-driven development at{" "}
+          <a
+            href="https://storybook.js.org/tutorials/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Storybook tutorials
+          </a>
+          . Read more in the{" "}
+          <a
+            href="https://storybook.js.org/docs"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            docs
+          </a>
+          .
+        </p>
+        <div className="tip-wrapper">
+          <span className="tip">Tip</span> Adjust the width of the canvas with
+          the{" "}
+          <svg
+            width="10"
+            height="10"
+            viewBox="0 0 12 12"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g fill="none" fillRule="evenodd">
+              <path
+                d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
+                id="a"
+                fill="#999"
+              />
+            </g>
+          </svg>
+          Viewports addon in the toolbar
+        </div>
+      </section>
+    </article>
+  );
+};
--- a/dashboard/src/components/common/Page/page.css
+++ b/dashboard/src/components/common/Page/page.css
@@ -0,0 +1,69 @@
+section {
+  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 24px;
+  padding: 48px 20px;
+  margin: 0 auto;
+  max-width: 600px;
+  color: #333;
+}
+
+section h2 {
+  font-weight: 900;
+  font-size: 32px;
+  line-height: 1;
+  margin: 0 0 4px;
+  display: inline-block;
+  vertical-align: top;
+}
+
+section p {
+  margin: 1em 0;
+}
+
+section a {
+  text-decoration: none;
+  color: #1ea7fd;
+}
+
+section ul {
+  padding-left: 30px;
+  margin: 1em 0;
+}
+
+section li {
+  margin-bottom: 8px;
+}
+
+section .tip {
+  display: inline-block;
+  border-radius: 1em;
+  font-size: 11px;
+  line-height: 12px;
+  font-weight: 700;
+  background: #e7fdd8;
+  color: #66bf3c;
+  padding: 4px 12px;
+  margin-right: 10px;
+  vertical-align: top;
+}
+
+section .tip-wrapper {
+  font-size: 13px;
+  line-height: 20px;
+  margin-top: 40px;
+  margin-bottom: 40px;
+}
+
+section .tip-wrapper svg {
+  display: inline-block;
+  height: 12px;
+  width: 12px;
+  margin-right: 4px;
+  vertical-align: top;
+  margin-top: 3px;
+}
+
+section .tip-wrapper svg path {
+  fill: #1ea7fd;
+}
--- a/dashboard/src/components/common/StatusLabel.stories.tsx
+++ b/dashboard/src/components/common/StatusLabel.stories.tsx
@@ -0,0 +1,39 @@
+import { ComponentStory } from "@storybook/react";
+import StatusLabel, { DeploymentStatus } from "./StatusLabel";
+
+export default {
+  title: "StatusLabel",
+  component: StatusLabel,
+};
+
+const Template: ComponentStory<typeof StatusLabel> = (args) => (
+  <StatusLabel {...args} />
+);
+
+export const Deployed = Template.bind({});
+
+Deployed.args = {
+  status: DeploymentStatus.DEPLOYED,
+  isRollback: false,
+};
+
+export const Failed = Template.bind({});
+
+Failed.args = {
+  status: DeploymentStatus.FAILED,
+  isRollback: false,
+};
+
+export const Pending = Template.bind({});
+
+Pending.args = {
+  status: DeploymentStatus.PENDING,
+  isRollback: false,
+};
+
+export const Superseded = Template.bind({});
+
+Superseded.args = {
+  status: DeploymentStatus.SUPERSEDED,
+  isRollback: false,
+};
--- a/dashboard/src/components/common/StatusLabel.tsx
+++ b/dashboard/src/components/common/StatusLabel.tsx
@@ -0,0 +1,42 @@
+import { AiOutlineReload } from "react-icons/ai";
+
+type StatusLabelProps = {
+  status: string;
+  isRollback?: boolean;
+};
+
+export enum DeploymentStatus {
+  DEPLOYED = "deployed",
+  FAILED = "failed",
+  PENDING = "pending-install",
+  SUPERSEDED = "superseded",
+}
+
+export function getStatusColor(status: DeploymentStatus) {
+  if (status === DeploymentStatus.DEPLOYED) return "text-deployed";
+  if (status === DeploymentStatus.FAILED) return "text-failed";
+  if (status === DeploymentStatus.PENDING) return "text-pending";
+  else return "text-superseded";
+}
+
+function StatusLabel({ status, isRollback }: StatusLabelProps) {
+  const statusColor = getStatusColor(status as DeploymentStatus);
+
+  return (
+    <div
+      style={{
+        minWidth: "100px",
+        display: "flex",
+        fontSize: "14px",
+        justifyContent: "space-between",
+      }}
+    >
+      <span className={`${statusColor} font-bold text-xs`}>
+        ● {status.toUpperCase()}
+      </span>
+      {isRollback && <AiOutlineReload size={14} />}
+    </div>
+  );
+}
+
+export default StatusLabel;
--- a/dashboard/src/components/modal/AddRepositoryModal.stories.tsx
+++ b/dashboard/src/components/modal/AddRepositoryModal.stories.tsx
@@ -0,0 +1,25 @@
+// Modal.stories.ts|tsx
+
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import AddRepositoryModal from "./AddRepositoryModal";
+
+//👇 This default export determines where your story goes in the story list
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: "AddRepositoryModal",
+  component: AddRepositoryModal,
+} as ComponentMeta<typeof AddRepositoryModal>;
+
+//👇 We create a “template” of how args map to rendering
+const Template: ComponentStory<typeof AddRepositoryModal> = (args) => (
+  <AddRepositoryModal {...args} isOpen={true} />
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  isOpen: true,
+};
--- a/dashboard/src/components/modal/AddRepositoryModal.tsx
+++ b/dashboard/src/components/modal/AddRepositoryModal.tsx
@@ -0,0 +1,166 @@
+import { useEffect, useState } from "react";
+import Modal from "./Modal";
+import Spinner from "../Spinner";
+import useAlertError from "../../hooks/useAlertError";
+import useCustomSearchParams from "../../hooks/useCustomSearchParams";
+import { useAppContext } from "../../context/AppContext";
+import { useQueryClient } from "@tanstack/react-query";
+import { useNavigate, useParams } from "react-router-dom";
+import apiService from "../../API/apiService";
+
+interface FormKeys {
+  name: string;
+  url: string;
+  username: string;
+  password: string;
+}
+
+type AddRepositoryModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+function AddRepositoryModal({ isOpen, onClose }: AddRepositoryModalProps) {
+  const [formData, setFormData] = useState<FormKeys>({} as FormKeys);
+  const [isLoading, setIsLoading] = useState(false);
+  const alertError = useAlertError();
+  const { searchParamsObject } = useCustomSearchParams();
+  const { repo_url, repo_name } = searchParamsObject;
+  const { setSelectedRepo } = useAppContext();
+  const { context } = useParams();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  useEffect(() => {
+    if (!repo_url || !repo_name) return;
+    setFormData({ ...formData, name: repo_name, url: repo_url });
+  }, [repo_url, repo_name, formData]);
+
+  const addRepository = () => {
+    const body = new FormData();
+    body.append("name", formData.name ?? "");
+    body.append("url", formData.url ?? "");
+    body.append("username", formData.username ?? "");
+    body.append("password", formData.password ?? "");
+
+    setIsLoading(true);
+
+    apiService.fetchWithDefaults<void>("/api/helm/repositories", {
+      method: "POST",
+      body,
+    })
+      .then(() => {
+        setIsLoading(false);
+        onClose();
+
+        queryClient.invalidateQueries({
+          queryKey: ["helm", "repositories"],
+        });
+        setSelectedRepo(formData.name || "");
+        navigate(`/${context}/repository/${formData.name}`, {
+          replace: true,
+        });
+      })
+      .catch((error) => {
+        alertError.setShowErrorModal({
+          title: "Failed to add repo",
+          msg: error.message,
+        });
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+  };
+
+  return (
+    <Modal
+      containerClassNames={"w-full max-w-5xl"}
+      title="Add Chart Repository"
+      isOpen={isOpen}
+      onClose={onClose}
+      bottomContent={
+        <div className="flex justify-end p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
+          <button
+            className="flex items-center text-white font-medium px-3 py-1.5 bg-primary hover:bg-add-repo focus:ring-4 focus:outline-none focus:ring-blue-300 disabled:bg-blue-300 rounded-lg text-base text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+            onClick={addRepository}
+            disabled={isLoading}
+          >
+            {isLoading && <Spinner size={4} />}
+            Add Repository
+          </button>
+        </div>
+      }
+    >
+      <div className="flex gap-x-3">
+        <label className="flex-1" htmlFor="name">
+          <div className="mb-2 text-sm require">Name</div>
+          <input
+            value={formData.name}
+            onChange={(e) =>
+              setFormData({
+                ...formData,
+                [e.target.id]: e.target.value,
+              })
+            }
+            required
+            id="name"
+            type="text"
+            placeholder="Komodorio"
+            className="rounded-lg p-2 w-full border border-gray-300 focus:outline-none focus:border-sky-500 input-box-shadow"
+          />
+        </label>
+        <label className="flex-1" htmlFor="url">
+          <div className="mb-2 text-sm require">URL</div>
+          <input
+            value={formData.url}
+            onChange={(e) =>
+              setFormData({
+                ...formData,
+                [e.target.id]: e.target.value,
+              })
+            }
+            required
+            id="url"
+            type="text"
+            placeholder="https://helm-charts.komodor.io"
+            className="rounded-lg p-2 w-full border border-gray-300  focus:outline-none focus:border-sky-500 input-box-shadow"
+          />
+        </label>
+      </div>
+      <div className="flex gap-x-3">
+        <label className="flex-1 " htmlFor="username">
+          <div className="mb-2 text-sm">Username</div>
+          <input
+            onChange={(e) =>
+              setFormData({
+                ...formData,
+                [e.target.id]: e.target.value,
+              })
+            }
+            required
+            id="username"
+            type="text"
+            className="rounded-lg p-2 w-full border border-gray-300  focus:outline-none focus:border-sky-500 input-box-shadow"
+          />
+        </label>
+        <label className="flex-1" htmlFor="password">
+          <div className="mb-2 text-sm">Password</div>
+          <input
+            onChange={(e) =>
+              setFormData({
+                ...formData,
+                [e.target.id]: e.target.value,
+              })
+            }
+            required
+            id="password"
+            type="text"
+            className="rounded-lg p-2 w-full border border-gray-300 focus:outline-none focus:border-sky-500 input-box-shadow"
+          />
+        </label>
+      </div>
+    </Modal>
+  );
+}
+
+export default AddRepositoryModal;
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512.02 319.26"><path d="M5.9 48.96 48.97 5.89c7.86-7.86 20.73-7.84 28.56 0l178.48 178.48L434.5 5.89c7.86-7.86 20.74-7.82 28.56 0l43.07 43.07c7.83 7.84 7.83 20.72 0 28.56l-192.41 192.4-.36.37-43.07 43.07c-7.83 7.82-20.7 7.86-28.56 0l-43.07-43.07-.36-.37L5.9 77.52c-7.87-7.86-7.87-20.7 0-28.56z"/></svg>