diff --git a/web/dashboard/package-lock.json b/web/dashboard/package-lock.json
index eb6e8e542..6963ebe06 100644
--- a/web/dashboard/package-lock.json
+++ b/web/dashboard/package-lock.json
@@ -10,7 +10,7 @@
       "dependencies": {
         "@craco/craco": "7.1.0",
         "@headlessui/react": "^1.7.18",
-        "@heroicons/react": "^1.0.6",
+        "@heroicons/react": "^2.1.1",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^11.2.6",
         "@testing-library/user-event": "^12.8.3",
@@ -2660,9 +2660,9 @@
       }
     },
     "node_modules/@heroicons/react": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-1.0.6.tgz",
-      "integrity": "sha512-JJCXydOFWMDpCP4q13iEplA503MQO3xLoZiKum+955ZCtHINWnx26CUxVxxFQu/uLb4LW3ge15ZpzIkXKkJ8oQ==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.1.1.tgz",
+      "integrity": "sha512-JyyN9Lo66kirbCMuMMRPtJxtKJoIsXKS569ebHGGRKbl8s4CtUfLnyKJxteA+vIKySocO4s1SkTkGS4xtG/yEA==",
       "peerDependencies": {
         "react": ">= 16"
       }
diff --git a/web/dashboard/package.json b/web/dashboard/package.json
index 6d89031b3..ce9313078 100644
--- a/web/dashboard/package.json
+++ b/web/dashboard/package.json
@@ -5,7 +5,7 @@
   "dependencies": {
     "@craco/craco": "7.1.0",
     "@headlessui/react": "^1.7.18",
-    "@heroicons/react": "^1.0.6",
+    "@heroicons/react": "^2.1.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^12.8.3",
diff --git a/web/dashboard/src/components/commits/commitEvents.js b/web/dashboard/src/components/commits/commitEvents.js
index 543c50fc9..0f6bf4cd7 100644
--- a/web/dashboard/src/components/commits/commitEvents.js
+++ b/web/dashboard/src/components/commits/commitEvents.js
@@ -1,4 +1,4 @@
-import { DocumentIcon, CogIcon, CloudIcon } from '@heroicons/react/solid'
+import { DocumentIcon, CogIcon, CloudIcon } from '@heroicons/react/24/solid'
 import { format, formatDistance } from "date-fns";
 
 export function CommitEvents(props) {
diff --git a/web/dashboard/src/components/commits/commits.js b/web/dashboard/src/components/commits/commits.js
index f3ca5fa72..cbeb11988 100644
--- a/web/dashboard/src/components/commits/commits.js
+++ b/web/dashboard/src/components/commits/commits.js
@@ -50,7 +50,7 @@ export function Commits(props) {
 
   const envNames = envs.map(env => env["name"]);
   for (let env of envs) {
-    env.isOnline = connectedAgents[env.name].isOnline
+    env.isOnline = isOnline(connectedAgents, env.name)
   }
 
   const commitWidgets = commits.map((commit, idx, ar) =>
@@ -107,6 +107,14 @@ export function Commits(props) {
   )
 }
 
+function isOnline(onlineEnvs, singleEnv) {
+  return Object.keys(onlineEnvs)
+    .map(env => onlineEnvs[env])
+    .some(onlineEnv => {
+      return onlineEnv.name === singleEnv.name
+    })
+};
+
 const CommitWidget = (props) => {
   const { owner, repo, repoName, commit, last, idx, commitsRef, envNames, scmUrl, tenant, connectedAgents, deployHandler, gimletClient, envs } = props
 
diff --git a/web/dashboard/src/components/deployWidget/deployWidget.jsx b/web/dashboard/src/components/deployWidget/deployWidget.jsx
index a7f7215c5..f91eec301 100644
--- a/web/dashboard/src/components/deployWidget/deployWidget.jsx
+++ b/web/dashboard/src/components/deployWidget/deployWidget.jsx
@@ -1,10 +1,10 @@
 import {Menu, Transition} from '@headlessui/react'
-import {ChevronDownIcon} from '@heroicons/react/solid'
+import {ChevronDownIcon} from '@heroicons/react/24/solid'
 // eslint-disable-next-line import/no-webpack-loader-syntax
 import logo from "!file-loader!./logo.svg";
 import { usePostHog } from 'posthog-js/react'
 import { useState, Fragment } from 'react';
-import { FilterIcon } from '@heroicons/react/solid'
+import { FunnelIcon } from '@heroicons/react/24/solid'
 
 export default function DeployWidget(props) {
   const {deployTargets, deployHandler, sha, repo } = props;
@@ -60,7 +60,7 @@ export default function DeployWidget(props) {
                     type="search"
                   />
                   <div className="absolute left-0 inset-y-0 flex items-center">
-                    <FilterIcon className="ml-2 h-5 w-5 text-gray-400" aria-hidden="true" />
+                    <FunnelIcon className="ml-2 h-5 w-5 text-gray-400" aria-hidden="true" />
                   </div>
                 </div>
               }
diff --git a/web/dashboard/src/components/dropdown/dropdown.js b/web/dashboard/src/components/dropdown/dropdown.js
index 14a309c04..d6d1885e7 100644
--- a/web/dashboard/src/components/dropdown/dropdown.js
+++ b/web/dashboard/src/components/dropdown/dropdown.js
@@ -1,7 +1,7 @@
 import {Fragment, useEffect, useState} from 'react'
 import { useHistory, useLocation } from 'react-router-dom'
 import {Listbox, Transition} from '@headlessui/react'
-import {CheckIcon, SelectorIcon} from '@heroicons/react/solid'
+import {CheckIcon, ChevronUpDownIcon} from '@heroicons/react/24/solid'
 
 export default function Dropdown(props) {
   const {items, value, changeHandler} = props;
@@ -33,7 +33,7 @@ export default function Dropdown(props) {
               className="bg-white relative w-full border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
               <span className="block truncate">{value}</span>
               <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-                <SelectorIcon className="h-5 w-5 text-gray-400" aria-hidden="true"/>
+                <ChevronUpDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true"/>
               </span>
             </Listbox.Button>
 
diff --git a/web/dashboard/src/components/env/env.js b/web/dashboard/src/components/env/env.js
index 09dfeaa4b..6ed6a84a2 100644
--- a/web/dashboard/src/components/env/env.js
+++ b/web/dashboard/src/components/env/env.js
@@ -1,102 +1,54 @@
-import React, { Component } from "react";
+import { useEffect } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import ServiceDetail from "../serviceDetail/serviceDetail";
-import { InformationCircleIcon } from '@heroicons/react/solid'
+import { InformationCircleIcon } from '@heroicons/react/20/solid';
 
-export class Env extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isClosed: localStorage.getItem([this.props.env.name]) === "true"
-    }
-  }
-
-  componentDidMount() {
-    if (this.props.env.name === this.props.envFromParams) {
-      this.setState({ isClosed: false });
-    }
-  }
-
-  render() {
-    const { env, repoRolloutHistory, envConfigs, navigateToConfigEdit, linkToDeployment, newConfig, rollback, owner, repoName, fileInfos, pullRequests, releaseHistorySinceDays, gimletClient, store, deploymentFromParams, scmUrl, history, alerts } = this.props;
+export function Env(props) {
+  const { env, repoRolloutHistory, envConfigs, navigateToConfigEdit, linkToDeployment, newConfig, rollback, owner, repoName, fileInfos, pullRequests, releaseHistorySinceDays, gimletClient, store, deploymentFromParams, scmUrl, history, alerts } = props;
 
-    const renderedServices = renderServices(env.stacks, envConfigs, env.name, repoRolloutHistory, navigateToConfigEdit, linkToDeployment, rollback, owner, repoName, fileInfos, releaseHistorySinceDays, gimletClient, store, deploymentFromParams, scmUrl, env.builtIn, alerts);
-
-    return (
-      <div>
-        <h4 className="relative flex items-stretch select-none text-xl font-medium capitalize leading-tight text-gray-900 my-4">
-          {env.name}
-          <span title={env.isOnline ? "Connected" : "Disconnected"}>
-            <svg className={(env.isOnline ? "text-green-400" : "text-red-400") + " inline fill-current ml-1"} xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 20 20">
-              <path
-                d="M0 14v1.498c0 .277.225.502.502.502h.997A.502.502 0 0 0 2 15.498V14c0-.959.801-2.273 2-2.779V9.116C1.684 9.652 0 11.97 0 14zm12.065-9.299l-2.53 1.898c-.347.26-.769.401-1.203.401H6.005C5.45 7 5 7.45 5 8.005v3.991C5 12.55 5.45 13 6.005 13h2.327c.434 0 .856.141 1.203.401l2.531 1.898a3.502 3.502 0 0 0 2.102.701H16V4h-1.832c-.758 0-1.496.246-2.103.701zM17 6v2h3V6h-3zm0 8h3v-2h-3v2z"
-              />
-            </svg>
-          </span>
-          <svg
-            onClick={() => {
-              localStorage.setItem(this.props.env.name, !this.state.isClosed);
-              this.setState((prevState) => {
-                return {
-                  isClosed: !prevState.isClosed
-                }
-              })
-            }}
+  const renderedServices = renderServices(env.stacks, envConfigs, env.name, repoRolloutHistory, navigateToConfigEdit, linkToDeployment, rollback, owner, repoName, fileInfos, releaseHistorySinceDays, gimletClient, store, deploymentFromParams, scmUrl, env.builtIn, alerts);
 
-            xmlns="http://www.w3.org/2000/svg"
-            className="h-6 w-6 cursor-pointer absolute right-0"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
+  return (
+    <div>
+      <h4 className="relative flex items-stretch select-none text-xl font-medium capitalize leading-tight text-gray-900 my-4">
+        {env.name}
+        <span title={env.isOnline ? "Connected" : "Disconnected"}>
+          <svg className={(env.isOnline ? "text-green-400" : "text-red-400") + " inline fill-current ml-1"} xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 20 20">
             <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d={
-                this.state.isClosed
-                  ? "M9 5l7 7-7 7"
-                  : "M19 9l-7 7-7-7"
-              }
+              d="M0 14v1.498c0 .277.225.502.502.502h.997A.502.502 0 0 0 2 15.498V14c0-.959.801-2.273 2-2.779V9.116C1.684 9.652 0 11.97 0 14zm12.065-9.299l-2.53 1.898c-.347.26-.769.401-1.203.401H6.005C5.45 7 5 7.45 5 8.005v3.991C5 12.55 5.45 13 6.005 13h2.327c.434 0 .856.141 1.203.401l2.531 1.898a3.502 3.502 0 0 0 2.102.701H16V4h-1.832c-.758 0-1.496.246-2.103.701zM17 6v2h3V6h-3zm0 8h3v-2h-3v2z"
             />
           </svg>
-        </h4>
-        {this.state.isClosed ? null : (
+        </span>
+      </h4>
+      {renderPullRequests(pullRequests)}
+      {!env.isOnline && connectEnvCard(history, env.name)}
+      { env.isOnline &&
+        <div className="space-y-4">
+        {renderedServices.length === 10 &&
+          <span className="text-xs text-blue-700">Displaying at most 10 application configurations per environment.</span>
+        }
+        { env.isOnline && renderedServices.length !== 0 &&
           <>
-            {renderPullRequests(pullRequests)}
-            {!env.isOnline && connectEnvCard(history, env.name)}
-            { env.isOnline &&
-            <div className="bg-stone-900 rounded-lg p-4">
-              <div className="space-y-4">
-              {renderedServices.length === 10 &&
-                <span className="text-xs text-blue-700">Displaying at most 10 application configurations per environment.</span>
-              }
-              { env.isOnline && renderedServices.length !== 0 &&
-                <>
-                  {renderedServices}
-                  <button
-                  title="New deployment configuration"
-                    onClick={() => {
-                      const newAppName = `${repoName}-${uuidv4().slice(0, 4)}`
-                      newConfig(env.name, newAppName)
-                    }}
-                    type="button"
-                    className="inline-block rounded-full p-2 uppercase leading-normal text-white bg-gray-500 hover:bg-gray-400 transition duration-150 ease-in-out">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="2.5" stroke="currentColor" className="w-4 h-4">
-                      <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-                    </svg>
-                  </button>
-                </>
-              }
-              { env.isOnline && renderedServices.length === 0 && emptyStateDeployThisRepo(newConfig, env.name, repoName) }
-              </div>
-            </div>
-            }
+            {renderedServices}
+            {/* <button
+            title="New deployment configuration"
+              onClick={() => {
+                const newAppName = `${repoName}-${uuidv4().slice(0, 4)}`
+                newConfig(env.name, newAppName)
+              }}
+              type="button"
+              className="inline-block rounded-full p-2 uppercase leading-normal text-white bg-gray-500 hover:bg-gray-400 transition duration-150 ease-in-out">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="2.5" stroke="currentColor" className="w-4 h-4">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+              </svg>
+            </button> */}
           </>
-        )}
-      </div>
-    )
-  }
+        }
+        { env.isOnline && renderedServices.length === 0 && emptyStateDeployThisRepo(newConfig, env.name, repoName) }
+        </div>
+      }
+    </div>
+  )
 }
 
 function renderServices(
diff --git a/web/dashboard/src/components/nav/nav.jsx b/web/dashboard/src/components/nav/nav.jsx
index fd0a29cbe..132fec269 100644
--- a/web/dashboard/src/components/nav/nav.jsx
+++ b/web/dashboard/src/components/nav/nav.jsx
@@ -2,7 +2,7 @@ import React, {Fragment} from 'react';
 import { useState } from 'react';
 import './nav.css';
 import {Disclosure, Menu, Transition} from '@headlessui/react'
-import {MenuIcon, XIcon} from '@heroicons/react/outline'
+import {Bars3Icon, XMarkIcon} from '@heroicons/react/20/solid'
 // eslint-disable-next-line import/no-webpack-loader-syntax
 import logo from "!file-loader!./logo.svg";
 import DefaultProfilePicture from '../../../src/views/profile/defaultProfilePicture.png';
@@ -160,9 +160,9 @@ export default function Nav (props) {
                   className="bg-white inline-flex items-center justify-center p-2 rounded-md text-neutral-400 hover:text-neutral-500 hover:bg-neutral-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                   <span className="sr-only">Open main menu</span>
                   {open ? (
-                    <XIcon className="block h-6 w-6" aria-hidden="true"/>
+                    <XMarkIcon className="block h-6 w-6" aria-hidden="true"/>
                   ) : (
-                    <MenuIcon className="block h-6 w-6" aria-hidden="true"/>
+                    <Bars3Icon className="block h-6 w-6" aria-hidden="true"/>
                   )}
                 </Disclosure.Button>
               </div>
diff --git a/web/dashboard/src/components/repoCard/repoCard.jsx b/web/dashboard/src/components/repoCard/repoCard.jsx
index 28aebdc30..8b97c6dae 100644
--- a/web/dashboard/src/components/repoCard/repoCard.jsx
+++ b/web/dashboard/src/components/repoCard/repoCard.jsx
@@ -1,6 +1,5 @@
-import React from "react";
-import {StarIcon} from "@heroicons/react/outline";
-import {StarIcon as SolidStarIcon} from "@heroicons/react/solid";
+import { StarIcon } from "@heroicons/react/20/solid";
+import { StarIcon as StarIconOutline } from "@heroicons/react/24/outline";
 
 function RepoCard(props) {
   const {name, services, navigateToRepo, favorite, favoriteHandler} = props;
@@ -49,13 +48,13 @@ function RepoCard(props) {
     <div className="relative">
       <div className="absolute top-0 right-0 m-6">
         {favorite &&
-        <SolidStarIcon
+        <StarIcon
           className="h-4 w-4 text-green-400 hover:text-neutral-400 cursor-pointer"
           onClick={() => favoriteHandler(name)}
         />
         }
         {!favorite &&
-        <StarIcon
+        <StarIconOutline
           className="h-4 w-4 text-neutral-400 hover:text-green-400 cursor-pointer"
           onClick={() => favoriteHandler(name)}
         />
diff --git a/web/dashboard/src/components/rolloutHistory/rolloutHistory.js b/web/dashboard/src/components/rolloutHistory/rolloutHistory.js
index 0081f6b94..1ead4a38f 100644
--- a/web/dashboard/src/components/rolloutHistory/rolloutHistory.js
+++ b/web/dashboard/src/components/rolloutHistory/rolloutHistory.js
@@ -71,14 +71,14 @@ export class RolloutHistory extends Component {
 
     if (releaseHistorySinceDays && releasesCount === 0) {
       return (
-        <div className="text-xs text-gray-500">
+        <div className="text-xs text-neutral-500">
           No releases in the past {releaseHistorySinceDays} days.
         </div>)
     }
 
     return (
       <div className="space-y-4">
-        <div className="grid grid-cols-10 pb-6">
+        <div className="grid grid-cols-10 pb-6 -ml-1">
           {markers}
         </div>
         {open &&
@@ -102,8 +102,8 @@ function Commit(props) {
   return (
     <div className="md:flex text-xs">
       <div className="md:flex-initial space-y-0.5 mt-2">
-      {isReleaseStatus && <div className="font-semibold text-gray-700"> <Emoji text={gitopsRepo} /></div>}
-        <div className="text-gray-700">{version.message && <Emoji text={version.message} />}</div>
+      {isReleaseStatus && <div className="font-semibold text-neutral-700"> <Emoji text={gitopsRepo} /></div>}
+        <div className="text-neutral-700">{version.message && <Emoji text={version.message} />}</div>
         <div className="flex">
           {version.author &&
             <img
@@ -114,7 +114,7 @@ function Commit(props) {
               height="20"
             />
           }
-          <div className="text-gray-600">
+          <div className="text-neutral-600">
             <span className="font-semibold">{version.authorName}</span>
             <a
               className="ml-1"
@@ -142,9 +142,9 @@ at ${exactDate}`;
 
   return (
     <div key={nanoid()} className={`h-8 ${border} cursor-pointer`} title={title} onClick={() => toggle()}>
-      <div className={`h-2 ml-1 md:mx-1 ${color} rounded`}></div>
+      <div className={`h-2 md:mx-1 ${color} rounded`}></div>
       {showDate &&
-        <div className="hidden lg:block mx-2 mt-2 text-xs text-gray-400">
+        <div className="hidden lg:block mx-2 mt-2 text-xs text-neutral-400">
           <span>{dateLabel} ago</span>
         </div>
       }
@@ -191,21 +191,21 @@ export function rolloutWidget(idx, arr, exactDate, dateLabel, rollback, env, app
     >
       <div className="relative">
         {idx !== 0 &&
-          <span className="absolute top-8 left-4 -ml-px h-full w-0.5 bg-gray-300" aria-hidden="true"></span>
+          <span className="absolute top-8 left-4 -ml-px h-full w-0.5 bg-neutral-300" aria-hidden="true"></span>
         }
         <div className="relative flex items-start space-x-3">
           <div className="relative">
             <img
-              className={`h-8 w-8 rounded-full bg-gray-400 flex items-center justify-center ring-4 ${ringColor}`}
+              className={`h-8 w-8 rounded-full bg-neutral-400 flex items-center justify-center ring-4 ${ringColor}`}
               src={`${scmUrl}/${rollout.triggeredBy}.png?size=128`}
               onError={(e) => { e.target.src = defaultProfilePicture }}
               alt={rollout.triggeredBy} />
           </div>
           <div className="min-w-0 flex-1">
             <div className="text-sm space-y-0.5">
-              <p className="font-semibold text-gray-700">{rollout.triggeredBy}</p>
-              {!rollback && <p className="font-medium text-gray-700">{rollout.app}</p>}
-              <p className="text-gray-700">
+              <p className="font-semibold text-neutral-700">{rollout.triggeredBy}</p>
+              {!rollback && <p className="font-medium text-neutral-700">{rollout.app}</p>}
+              <p className="text-neutral-700">
                 <span>Deployed</span>
                 { !builtInEnv &&
                 <a
@@ -221,7 +221,7 @@ export function rolloutWidget(idx, arr, exactDate, dateLabel, rollback, env, app
                   <span className="ml-1" title={exactDate}>{dateLabel} ago</span>
                 }
               </p>
-              <div className="text-gray-600">
+              <div className="text-neutral-600">
                 <span title={exactGitopsCommitCreatedDate} >
                   {status} {gitopsCommitCreatedDateLabel} ago, {!rollout.gitopsCommitStatusDesc ? "commit is not applied yet." : rollout.gitopsCommitStatusDesc}
                 </span>
diff --git a/web/dashboard/src/components/serviceDetail/serviceDetail.jsx b/web/dashboard/src/components/serviceDetail/serviceDetail.jsx
index 4176d1e2c..b18b5f4bc 100644
--- a/web/dashboard/src/components/serviceDetail/serviceDetail.jsx
+++ b/web/dashboard/src/components/serviceDetail/serviceDetail.jsx
@@ -143,14 +143,14 @@ function ServiceDetail(props) {
 
   return (
     <>
-      <div className="w-full flex items-center justify-between space-x-6 bg-stone-100 pb-8 rounded-lg">
+      <div className="w-full flex items-center justify-between space-x-6 pb-8 bg-white rounded-lg ring-1 ring-inset ring-neutral-200">
         <div className="flex-1">
           <h3 ref={ref} className="flex text-lg font-bold rounded p-4">
             <span className="cursor-pointer" onClick={() => linkToDeployment(envName, stack.service.name)}>{stack.service.name}</span>
             {configExists &&
               <a href={`${scmUrl}/${owner}/${repoName}/blob/main/.gimlet/${encodeURIComponent(fileName)}`} target="_blank" rel="noopener noreferrer">
                 <svg xmlns="http://www.w3.org/2000/svg"
-                  className="inline fill-current text-gray-500 hover:text-gray-700 ml-1 h-4 w-4"
+                  className="inline fill-current text-neutral-500 hover:text-neutral-700 ml-1 h-4 w-4"
                   viewBox="0 0 24 24">
                   <path d="M0 0h24v24H0z" fill="none" />
                   <path
@@ -161,7 +161,7 @@ function ServiceDetail(props) {
             <div className="flex items-center ml-auto space-x-1">
               {configExists &&
                 <button
-                  className="bg-transparent hover:bg-slate-100 font-medium text-sm text-gray-700 py-1 px-4 border border-gray-300 rounded"
+                  className="bg-transparent hover:bg-slate-100 font-medium text-sm text-neutral-700 py-1 px-4 border border-neutral-300 rounded"
                   onClick={() => {
                     posthog?.capture('Env config edit pushed')
                     navigateToConfigEdit(envName, stack.service.name)
@@ -178,7 +178,7 @@ function ServiceDetail(props) {
                       confirm(`Are you sure you want to restart deployment ${deployment.name}?`) &&
                         gimletClient.restartDeploymentRequest(deployment.namespace, deployment.name)
                     }}
-                    className="bg-transparent hover:bg-slate-100 font-medium text-sm text-gray-700 py-1 px-4 border border-gray-300 rounded">
+                    className="bg-transparent hover:bg-slate-100 font-medium text-sm text-neutral-700 py-1 px-4 border border-neutral-300 rounded">
                     Restart
                   </button>
                   <Logs
@@ -223,7 +223,7 @@ function ServiceDetail(props) {
                 { deployment &&
                 <>
                 <div>
-                  <p className="text-base text-gray-600">Status</p>
+                  <p className="text-sm font-light text-neutral-600">Status</p>
                   {
                     deployment.pods && deployment.pods.map((pod) => (
                       <Pod key={pod.name} pod={pod} />
@@ -231,8 +231,8 @@ function ServiceDetail(props) {
                   }
                 </div>
                 <div>
-                  <p className="text-base text-gray-600">Version</p>
-                  <p className="text-gray-900">
+                  <p className="text-sm font-light text-neutral-600">Version</p>
+                  <p className="text-neutral-900">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" className="h4 w-4 inline fill-current"><path d="M320 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160zm156.8-48C462 361 397.4 416 320 416s-142-55-156.8-128H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H163.2C178 151 242.6 96 320 96s142 55 156.8 128H608c17.7 0 32 14.3 32 32s-14.3 32-32 32H476.8z"/></svg>
                     <span className="text-xs pl-2 font-mono"><a href={`${scmUrl}/${repo}/commit/${deployment.sha}`} target="_blank" rel="noopener noreferrer">{deployment.sha.slice(0, 8)}</a></span>
                     <span className="pl-2 text-sm font-normal">{deployment.commitMessage && <Emoji text={deployment.commitMessage} />}</span>
@@ -242,8 +242,8 @@ function ServiceDetail(props) {
                 }
                 {stack.osca && Object.keys(stack.osca.links).length !== 0 &&
                   <div>
-                    <p className="text-base text-gray-600">Links</p>
-                    <div className="text-gray-700 text-sm mt-2">
+                    <p className="text-sm font-light text-neutral-600">Links</p>
+                    <div className="text-neutral-700 text-sm mt-2">
                       {
                         Object.keys(stack.osca.links).map((k, idx, ar) => {
                           return (
@@ -251,7 +251,7 @@ function ServiceDetail(props) {
                               <a href={stack.osca.links[k]} rel="noreferrer" target="_blank" className="capitalize">
                                 {k}
                                 <svg xmlns="http://www.w3.org/2000/svg"
-                                  className="inline fill-current text-gray-500 hover:text-gray-700 h-4 w-4"
+                                  className="inline fill-current text-neutral-500 hover:text-neutral-700 h-4 w-4"
                                   viewBox="0 0 24 24">
                                   <path d="M0 0h24v24H0z" fill="none" />
                                   <path
@@ -270,8 +270,8 @@ function ServiceDetail(props) {
               <div className="col-span-7 space-y-4 pl-2">
                 { deployment &&
                 <div>
-                  <p className="text-base text-gray-600">Address</p>
-                  <div className="text-gray-900 text-sm">
+                  <p className="text-sm font-light text-neutral-600">Address</p>
+                  <div className="text-neutral-900 text-sm">
                     <div className="relative">
                     {stack.service.name}.{stack.service.namespace}.svc.cluster.local
                     <button
@@ -279,7 +279,7 @@ function ServiceDetail(props) {
                         copyToClipboard(`kubectl port-forward deploy/${deployment.name} -n ${deployment.namespace} ${hostPort}:${appPort}`);
                         handleCopyClick();
                       }}
-                      className="absolute right-0 bg-transparent hover:bg-slate-100 font-medium text-sm text-gray-700 py-1 px-4 border border-gray-300 rounded">
+                      className="absolute right-0 bg-transparent hover:bg-slate-100 font-medium text-sm text-neutral-700 py-1 px-4 border border-neutral-300 rounded">
                       Port-forward command
                     </button>
                     {isCopied && (
@@ -294,7 +294,7 @@ function ServiceDetail(props) {
                       <p key={`${ingress.namespace}/${ingress.name}`}>
                         <a href={'https://' + ingress.url} target="_blank" rel="noopener noreferrer">https://{ingress.url}
                         <svg xmlns="http://www.w3.org/2000/svg"
-                          className="inline fill-current text-gray-500 hover:text-gray-700 ml-1 h-4 w-4"
+                          className="inline fill-current text-neutral-500 hover:text-neutral-700 ml-1 h-4 w-4"
                           viewBox="0 0 24 24">
                           <path d="M0 0h24v24H0z" fill="none" />
                           <path
@@ -308,7 +308,7 @@ function ServiceDetail(props) {
                         <>
                           <a href={'http://127.0.0.1:' + hostPort} target="_blank" rel="noopener noreferrer">http://127.0.0.1:{hostPort}
                             <svg xmlns="http://www.w3.org/2000/svg"
-                              className="inline fill-current text-gray-500 hover:text-gray-700 mr-1 h-4 w-4"
+                              className="inline fill-current text-neutral-500 hover:text-neutral-700 mr-1 h-4 w-4"
                               viewBox="0 0 24 24">
                               <path d="M0 0h24v24H0z" fill="none" />
                               <path
@@ -323,15 +323,15 @@ function ServiceDetail(props) {
                 }
                 { deployment &&
                 <div>
-                  <p className="text-base text-gray-600">Health</p>
-                  <div className="text-gray-900 text-sm">
+                  <p className="text-sm font-light text-neutral-600">Health</p>
+                  <div className="text-neutral-900 text-sm pb-2">
                     <Timeline alerts={serviceAlerts} />
                   </div>
                 </div>
                 }
                 <div>
-                  <p className="text-base text-gray-600">Deploy History</p>
-                  <div className="text-gray-900 text-sm pt-2">
+                  <p className="text-sm font-light text-neutral-600">Deploy History</p>
+                  <div className="text-neutral-900 text-sm pt-2">
                     <RolloutHistory
                       env={envName}
                       app={stack.service.name}
@@ -371,7 +371,7 @@ export function Pod(props) {
       pulsar = 'animate-pulse';
       break;
     case 'Terminating':
-      color = 'bg-gray-500';
+      color = 'bg-neutral-500';
       pulsar = 'animate-pulse';
       break;
     default:
diff --git a/web/dashboard/src/popUpWindow.js b/web/dashboard/src/popUpWindow.js
index 10d81445d..3a4bc975d 100644
--- a/web/dashboard/src/popUpWindow.js
+++ b/web/dashboard/src/popUpWindow.js
@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import { CheckIcon, XCircleIcon } from '@heroicons/react/solid'
+import { CheckIcon, XCircleIcon } from '@heroicons/react/24/solid'
 import {
     ACTION_TYPE_POPUPWINDOWRESET
 } from "./redux/redux";
diff --git a/web/dashboard/src/views/envConfig/envConfig.jsx b/web/dashboard/src/views/envConfig/envConfig.jsx
index 65cc306cd..52d3b4492 100644
--- a/web/dashboard/src/views/envConfig/envConfig.jsx
+++ b/web/dashboard/src/views/envConfig/envConfig.jsx
@@ -13,7 +13,7 @@ import {
   ACTION_TYPE_SAVE_REPO_PULLREQUEST
 } from "../../redux/redux";
 import { Menu } from '@headlessui/react'
-import { ChevronDownIcon } from '@heroicons/react/solid'
+import { ChevronDownIcon } from '@heroicons/react/24/solid'
 import { Switch } from '@headlessui/react'
 import posthog from "posthog-js"
 import ImageWidget from "./imageWidget";
@@ -542,7 +542,7 @@ class EnvConfig extends Component {
     }
 
     return (
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-32">
         <h1 className="text-3xl font-bold leading-tight text-gray-900">Editing {config} config for {env}</h1>
         <h2 className="text-xl leading-tight text-gray-900">{repoName}
           <a href={`${this.state.scmUrl}/${repoName}`} target="_blank" rel="noopener noreferrer">
diff --git a/web/dashboard/src/views/environment/category.js b/web/dashboard/src/views/environment/category.js
index 61cb87394..1c51b13bb 100644
--- a/web/dashboard/src/views/environment/category.js
+++ b/web/dashboard/src/views/environment/category.js
@@ -2,7 +2,7 @@ import './style.css'
 import React, { Component } from 'react'
 import { Tile } from './tile';
 import HelmUI from "helm-react-ui";
-import { InformationCircleIcon } from '@heroicons/react/solid'
+import { InformationCircleIcon } from '@heroicons/react/24/solid'
 import { Remarkable } from "remarkable";
 
 export class Category extends Component {
diff --git a/web/dashboard/src/views/environment/environment.jsx b/web/dashboard/src/views/environment/environment.jsx
index 53556af93..29f08efa2 100644
--- a/web/dashboard/src/views/environment/environment.jsx
+++ b/web/dashboard/src/views/environment/environment.jsx
@@ -12,7 +12,7 @@ import {
   ACTION_TYPE_ENVS,
   ACTION_TYPE_STACK_CONFIG
 } from "../../redux/redux";
-import { InformationCircleIcon } from '@heroicons/react/solid'
+import { InformationCircleIcon } from '@heroicons/react/24/solid'
 import SeparateEnvironments from './separateEnvironments';
 import KustomizationPerApp from './kustomizationPerApp';
 import BootstrapGuide from './bootstrapGuide';
diff --git a/web/dashboard/src/views/footer/footer.jsx b/web/dashboard/src/views/footer/footer.jsx
index 83e962508..dccfcfa05 100644
--- a/web/dashboard/src/views/footer/footer.jsx
+++ b/web/dashboard/src/views/footer/footer.jsx
@@ -1,4 +1,4 @@
-import { ArrowDownIcon, ArrowUpIcon } from '@heroicons/react/solid';
+import { ArrowDownIcon, ArrowUpIcon } from '@heroicons/react/24/solid';
 import React, { memo, Component } from 'react';
 import { Summary } from "./capacitor/Summary"
 import { ExpandedFooter } from './capacitor/ExpandedFooter';
diff --git a/web/dashboard/src/views/pulse/pulse.jsx b/web/dashboard/src/views/pulse/pulse.jsx
index e9ed4a9eb..d5f0db818 100644
--- a/web/dashboard/src/views/pulse/pulse.jsx
+++ b/web/dashboard/src/views/pulse/pulse.jsx
@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import { format, formatDistance } from "date-fns";
 import Releases from './releases';
-import { InformationCircleIcon } from '@heroicons/react/solid'
+import { InformationCircleIcon } from '@heroicons/react/24/solid'
 import { Remarkable } from "remarkable";
 import { Menu } from '@headlessui/react';
-import { ChevronDownIcon } from '@heroicons/react/solid';
+import { ChevronDownIcon } from '@heroicons/react/24/solid';
 
 export default class Pulse extends Component {
   constructor(props) {
diff --git a/web/dashboard/src/views/repo/commitView.jsx b/web/dashboard/src/views/repo/commitView.jsx
index 9b5c7abba..c6485c26f 100644
--- a/web/dashboard/src/views/repo/commitView.jsx
+++ b/web/dashboard/src/views/repo/commitView.jsx
@@ -73,7 +73,7 @@ export function CommitView(props) {
   }
 
   return (
-    <div className='max-w-7xl mx-auto pt-32'>
+    <div className='max-w-7xl mx-auto pt-32 px-4 sm:px-6 lg:px-8'>
       {/* {deployStatusModal && envConfigs !== undefined &&
         <DeployStatusModal
           closeHandler={() => this.setState({ deployStatusModal: false })}
diff --git a/web/dashboard/src/views/repo/repo.jsx b/web/dashboard/src/views/repo/repo.jsx
index 0ecb62ee0..7151fb503 100644
--- a/web/dashboard/src/views/repo/repo.jsx
+++ b/web/dashboard/src/views/repo/repo.jsx
@@ -11,8 +11,12 @@ import {
   ACTION_TYPE_RELEASE_STATUSES,
 } from "../../redux/redux";
 import { Env } from '../../components/env/env';
-import TenantSelector from './tenantSelector';
 import RefreshButton from '../../components/refreshButton/refreshButton';
+import { FunnelIcon } from '@heroicons/react/20/solid'
+
+import { Fragment, useState } from 'react'
+import { Listbox, Transition } from '@headlessui/react'
+import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/20/solid'
 
 export default class Repo extends Component {
   constructor(props) {
@@ -429,7 +433,7 @@ export default class Repo extends Component {
       <div>
         <header>
           <div className="max-w-7xl mx-auto pt-32 px-4 sm:px-6 lg:px-8">
-            <div className='flex-1'>
+            {/* <div className='flex-1'>
               <div className="flex justify-between">
                 <h1 className="text-3xl font-bold leading-tight text-gray-900">{repoName}
                   <a href={`${scmUrl}/${owner}/${repo}`} target="_blank" rel="noopener noreferrer">
@@ -449,25 +453,24 @@ export default class Repo extends Component {
                   }}
                 />
               </div>
-            </div>
-            <TenantSelector
-              tenants={this.tenantsFromConfigs(envConfigs)}
-              selectedTenant={this.state.selectedTenant}
-              setSelectedTenant={this.setSelectedTenant}
-            />
-            {decoratedEnvs && Object.keys(envs).length > 1 && <div className='py-4'>
-              <EnvSelector
-                envs={decoratedEnvs}
-                unselectedEnvs={unselectedEnvs}
-                setUnselectedEnvs={this.setUnselectedEnvs}
+            </div> */}
+            <div className='flex items-center space-x-2'>
+              <AppFilter />
+              <EnvFilter
+                environments={envs}
+                selected="All Environments"
+                setSelected={e=>console.log(e)}
               />
+              <button
+                className="bg-teal-600 hover:bg-teal-500 focus:outline-none focus:shadow-outline-teal px-8 py-2 inline-flex items-center text-base font-normal font-sans rounded-md text-white transition ease-in-out duration-150 text-nowrap">
+                New Deployment
+              </button>
             </div>
-            }
           </div>
         </header>
         <main>
           <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
-            <div className="px-4 sm:px-0">
+            <div className="pt-8 px-4 sm:px-0">
               <div>
                 {envConfigs && Object.keys(decoratedEnvs).sort().map((envName) =>
                   {
@@ -505,6 +508,85 @@ export default class Repo extends Component {
   }
 }
 
+function AppFilter(props) {
+  return (
+    <div className="w-full">
+      <div className="relative">
+        <div className="absolute inset-y-0 left-0 flex items-center pl-3">
+          <FunnelIcon className="h-4 w-4 text-neutral-400" aria-hidden="true" />
+        </div>
+        <input
+          type="email"
+          name="email"
+          id="email"
+          className="block w-full rounded-md border-0 bg-white py-2 pl-10 pr-3 placeholder:text-neutral-300 ring-1 ring-inset ring-neutral-200 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+          placeholder="All Deployments..."
+        />
+      </div>
+    </div>
+  )
+}
+
+function EnvFilter(props) {
+  const { environments, selected, setSelected } = props
+
+  const envLabels = environments.map((env) => env.name)
+  envLabels.unshift('All Environments')
+
+  return (
+    <div className="w-96">
+      <Listbox value={selected} onChange={setSelected}>
+        {({ open }) => (
+          <>
+            <div className="relative">
+              <Listbox.Button className="relative w-full cursor-default rounded-md bg-white py-2 pl-3 pr-10 text-left text-neutral-900 ring-1 ring-inset ring-neutral-200 focus:outline-none focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6">
+                <span className="block truncate">{selected}</span>
+                <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                  <ChevronUpDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                </span>
+              </Listbox.Button>
+
+              <Transition
+                show={open}
+                as={Fragment}
+                leave="transition ease-in duration-100"
+                leaveFrom="opacity-100"
+                leaveTo="opacity-0"
+              >
+                <Listbox.Options className="absolute capitalize z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+                  {envLabels.map((env) => (
+                    <Listbox.Option
+                      key={env}
+                      className={({ active }) => `${active ? 'bg-indigo-600 text-white' : 'text-gray-900'} relative cursor-default select-none py-2 pl-3 pr-9 }`}
+                      value={env}
+                    >
+                      {({ selected, active }) => (
+                        <>
+                          <span className={`${selected ? 'font-semibold' : 'font-normal'} block truncate`}>
+                            {env}
+                          </span>
+
+                          {selected ? (
+                            <span
+                              className={`${ active ? 'text-white' : 'text-indigo-600'} absolute inset-y-0 right-0 flex items-center pr-4`}
+                            >
+                              <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                            </span>
+                          ) : null}
+                        </>
+                      )}
+                    </Listbox.Option>
+                  ))}
+                </Listbox.Options>
+              </Transition>
+            </div>
+          </>
+        )}
+      </Listbox>
+    </div>
+  )
+}
+
 /*
   Takes all envs from Kubernetes
   and finds the relevant stacks for the repo for each environment
diff --git a/web/dashboard/src/views/repo/tenantSelector.jsx b/web/dashboard/src/views/repo/tenantSelector.jsx
index 1d329ae9b..007e6ecaa 100644
--- a/web/dashboard/src/views/repo/tenantSelector.jsx
+++ b/web/dashboard/src/views/repo/tenantSelector.jsx
@@ -1,5 +1,5 @@
 import { Menu } from '@headlessui/react'
-import { ChevronDownIcon } from '@heroicons/react/solid'
+import { ChevronDownIcon } from '@heroicons/react/24/solid'
 
 const TenantSelector = ({ tenants, selectedTenant, setSelectedTenant }) => {
   if (tenants.length === 0) {
diff --git a/web/dashboard/src/views/repositories/repositories.jsx b/web/dashboard/src/views/repositories/repositories.jsx
index 57b7b8a46..e9a1dfb9c 100644
--- a/web/dashboard/src/views/repositories/repositories.jsx
+++ b/web/dashboard/src/views/repositories/repositories.jsx
@@ -8,7 +8,7 @@ import {
 } from "../../redux/redux";
 import RefreshRepos from './refreshRepos';
 import { renderChartUpdatePullRequests } from '../pulse/pulse';
-import { InformationCircleIcon, FilterIcon, XIcon } from '@heroicons/react/solid'
+import { InformationCircleIcon, FunnelIcon, XMarkIcon } from '@heroicons/react/20/solid'
 import RefreshButton from '../../components/refreshButton/refreshButton';
 
 export default class Repositories extends Component {
@@ -364,18 +364,18 @@ const setupGithubCard = (history) => {
   );
 }
 
-const FilterBar = (props) => {
+export const FilterBar = (props) => {
   return (
     <div className="w-full">
       <div className="relative">
         <div className="absolute inset-y-0 left-0 flex items-center pl-3">
-          <FilterIcon className="h-5 w-5 text-neutral-400" aria-hidden="true" />
+          <FunnelIcon className="h-4 w-4 text-neutral-400" aria-hidden="true" />
           {props.filters.map(filter => (
             <Filter key={filter.property+filter.value} filter={filter} deleteFilter={props.deleteFilter} />
           ))}
           <FilterInput addFilter={props.addFilter} filterValueByProperty={props.filterValueByProperty} />
         </div>
-        <div className="block w-full rounded-md border-0 bg-white py-2 pl-10 pr-3 text-neutral-900 ring-1 ring-inset ring-neutral-200 placeholder:text-neutral-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
+        <div className="block w-full rounded-md border-0 bg-white py-2 pl-10 pr-3 text-neutral-900 ring-1 ring-inset ring-neutral-200 placeholder:text-neutral-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
           &nbsp;
         </div>
         <div className="absolute inset-y-0 right-0 flex items-center p-1 px-2">
@@ -392,7 +392,7 @@ const Filter = (props) => {
     <span className="py-0.5 ml-1 text-blue-50 bg-blue-600 rounded-full pl-3 pr-1" aria-hidden="true">
       <span>{filter.property}</span>{filter.property !== "Starred" && <span>: {filter.value}</span>}
       <span className="ml-1 px-1 bg-blue-400 rounded-full ">
-        <XIcon className="cursor-pointer inline h-3 w-3" aria-hidden="true" onClick={() => props.deleteFilter(filter)}/>
+        <XMarkIcon className="cursor-pointer inline h-3 w-3" aria-hidden="true" onClick={() => props.deleteFilter(filter)}/>
       </span>
     </span>
   )
@@ -427,8 +427,8 @@ const FilterInput = (props) => {
         <input
           ref={inputRef}
           key={property}
-          className={`${property ? "ml-10" : "" } block border-0 border-t border-b border-neutral-200 pt-2 pb-1.5 px-1 text-neutral-900 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6`}
-          placeholder='Filter Repositories'
+          className={`${property ? "ml-10" : "" } block border-0 border-t border-b border-neutral-200 pt-2 pb-1.5 px-1 text-neutral-900 placeholder:text-neutral-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6`}
+          placeholder='All Repositories...'
           value={value}
           onChange={(e) => setValue(e.target.value)}
           onFocus={() => {setActive(true)}}
diff --git a/web/dashboard/src/views/settings/settings.jsx b/web/dashboard/src/views/settings/settings.jsx
index 68f7edc38..be11f05bf 100644
--- a/web/dashboard/src/views/settings/settings.jsx
+++ b/web/dashboard/src/views/settings/settings.jsx
@@ -1,6 +1,6 @@
 import React, { Component, useState } from 'react';
 import Installer from './installer';
-import { InformationCircleIcon } from '@heroicons/react/solid';
+import { InformationCircleIcon } from '@heroicons/react/24/solid';
 import DefaultProfilePicture from '../profile/defaultProfilePicture.png';
 import {
   ACTION_TYPE_USERS,