From 686d3c409d15307d79ae3046f2c99cd8c066f023 Mon Sep 17 00:00:00 2001
From: akhilmhdh <akhilmhdh@gmail.com>
Date: Sun, 19 Mar 2023 00:32:59 +0530
Subject: [PATCH 1/7] feat(ui): added ui components for new dashboard

---
 .../utilities/cryptography/crypto.ts          | 19 +++--
 frontend/src/components/v2/Button/Button.tsx  | 20 ++---
 .../components/v2/Drawer/Drawer.stories.tsx   | 32 +++++++
 frontend/src/components/v2/Drawer/Drawer.tsx  | 84 +++++++++++++++++++
 frontend/src/components/v2/Drawer/index.tsx   |  1 +
 .../v2/HoverCardv2/HoverCardv2.stories.tsx    | 36 ++++++++
 .../components/v2/HoverCardv2/HoverCardv2.tsx | 26 ++++++
 .../src/components/v2/HoverCardv2/index.tsx   |  1 +
 .../components/v2/IconButton/IconButton.tsx   | 15 +++-
 frontend/src/components/v2/Input/Input.tsx    |  3 +
 frontend/src/components/v2/Modal/Modal.tsx    | 10 ++-
 .../v2/Popoverv2/Popoverv2.stories.tsx        | 29 +++++++
 .../src/components/v2/Popoverv2/Popoverv2.tsx | 54 ++++++++++++
 .../src/components/v2/Popoverv2/index.tsx     |  1 +
 frontend/src/components/v2/Switch/Switch.tsx  |  6 +-
 frontend/src/components/v2/Tag/Tag.tsx        | 56 ++++++++++---
 .../src/components/v2/TextArea/TextArea.tsx   |  7 +-
 .../components/v2/Tooltip/Tooltip.stories.tsx | 28 +++++++
 .../src/components/v2/Tooltip/Tooltip.tsx     | 53 ++++++++++++
 frontend/src/components/v2/Tooltip/index.tsx  |  1 +
 frontend/src/components/v2/index.tsx          |  4 +
 21 files changed, 445 insertions(+), 41 deletions(-)
 create mode 100644 frontend/src/components/v2/Drawer/Drawer.stories.tsx
 create mode 100644 frontend/src/components/v2/Drawer/Drawer.tsx
 create mode 100644 frontend/src/components/v2/Drawer/index.tsx
 create mode 100644 frontend/src/components/v2/HoverCardv2/HoverCardv2.stories.tsx
 create mode 100644 frontend/src/components/v2/HoverCardv2/HoverCardv2.tsx
 create mode 100644 frontend/src/components/v2/HoverCardv2/index.tsx
 create mode 100644 frontend/src/components/v2/Popoverv2/Popoverv2.stories.tsx
 create mode 100644 frontend/src/components/v2/Popoverv2/Popoverv2.tsx
 create mode 100644 frontend/src/components/v2/Popoverv2/index.tsx
 create mode 100644 frontend/src/components/v2/Tooltip/Tooltip.stories.tsx
 create mode 100644 frontend/src/components/v2/Tooltip/Tooltip.tsx
 create mode 100644 frontend/src/components/v2/Tooltip/index.tsx

diff --git a/frontend/src/components/utilities/cryptography/crypto.ts b/frontend/src/components/utilities/cryptography/crypto.ts
index 961dee83f..75b69a109 100644
--- a/frontend/src/components/utilities/cryptography/crypto.ts
+++ b/frontend/src/components/utilities/cryptography/crypto.ts
@@ -20,7 +20,7 @@ type EncryptAsymmetricProps = {
  * @param {Number} obj.time - number of iterations
  * @param {Number} obj.parallelism - desired parallelism
  * @param {Number} obj.hashLen - desired hash length (i.e. byte-length of derived key)
- * @returns 
+ * @returns
  */
 const deriveArgonKey = async ({
   password,
@@ -39,8 +39,8 @@ const deriveArgonKey = async ({
 }) => {
   let derivedKey;
   try {
-    derivedKey = await argon2.hash({ 
-      pass: password, 
+    derivedKey = await argon2.hash({
+      pass: password,
       salt,
       type: argon2.ArgonType.Argon2id,
       mem,
@@ -53,7 +53,7 @@ const deriveArgonKey = async ({
   }
 
   return derivedKey;
-}
+};
 
 /**
  * Return assymmetrically encrypted [plaintext] using [publicKey] where
@@ -173,6 +173,7 @@ type DecryptSymmetricProps = {
  *
  */
 const decryptSymmetric = ({ ciphertext, iv, tag, key }: DecryptSymmetricProps): string => {
+  if (!ciphertext) return '';
   let plaintext;
   try {
     plaintext = aes.decrypt({ ciphertext, iv, tag, secret: key });
@@ -184,10 +185,10 @@ const decryptSymmetric = ({ ciphertext, iv, tag, key }: DecryptSymmetricProps):
   return plaintext;
 };
 
-export { 
-  decryptAssymmetric, 
-  decryptSymmetric, 
+export {
+  decryptAssymmetric,
+  decryptSymmetric,
   deriveArgonKey,
-  encryptAssymmetric, 
-  encryptSymmetric 
+  encryptAssymmetric,
+  encryptSymmetric
 };
diff --git a/frontend/src/components/v2/Button/Button.tsx b/frontend/src/components/v2/Button/Button.tsx
index 8c6bf91b2..00663ad69 100644
--- a/frontend/src/components/v2/Button/Button.tsx
+++ b/frontend/src/components/v2/Button/Button.tsx
@@ -36,7 +36,7 @@ const buttonVariants = cva(
         star: 'text-bunker-200 bg-mineshaft-500'
       },
       isDisabled: {
-        true: 'bg-mineshaft opacity-40 cursor-not-allowed',
+        true: 'bg-mineshaft text-white opacity-50 cursor-not-allowed',
         false: ''
       },
       isFullWidth: {
@@ -155,26 +155,26 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
             className="absolute rounded-xl"
           />
         )}
-        <span
+        <div
           className={twMerge(
-            'shrink-0 cursor-pointer transition-all',
+            'inline-flex shrink-0 cursor-pointer items-center justify-center transition-all',
             loadingToggleClass,
             leftIcon && 'ml-2',
-            size === 'xs' ? 'mr-1' : 'mr-3'
+            size === 'xs' ? 'mr-1' : 'mr-2'
           )}
         >
           {leftIcon}
-        </span>
-        <span className={twMerge('transition-all', loadingToggleClass)}>{children}</span>
-        <span
+        </div>
+        <span className={twMerge('w-full transition-all', loadingToggleClass)}>{children}</span>
+        <div
           className={twMerge(
-            'shrink-0 cursor-pointer transition-all',
+            'inline-flex shrink-0 cursor-pointer items-center justify-center transition-all',
             loadingToggleClass,
-            size === 'xs' ? 'ml-1' : 'ml-3'
+            size === 'xs' ? 'ml-1' : 'ml-2'
           )}
         >
           {rightIcon}
-        </span>
+        </div>
       </button>
     );
   }
diff --git a/frontend/src/components/v2/Drawer/Drawer.stories.tsx b/frontend/src/components/v2/Drawer/Drawer.stories.tsx
new file mode 100644
index 000000000..9925d8cae
--- /dev/null
+++ b/frontend/src/components/v2/Drawer/Drawer.stories.tsx
@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '../Button';
+import { Drawer, DrawerContent, DrawerContentProps, DrawerTrigger } from './Drawer';
+
+const meta: Meta<typeof Drawer> = {
+  title: 'Components/Drawer',
+  component: Drawer,
+  tags: ['v2'],
+  argTypes: {}
+};
+
+export default meta;
+type Story = StoryObj<typeof DrawerContent>;
+
+const Template = (args: DrawerContentProps) => (
+  <Drawer>
+    <DrawerTrigger asChild>
+      <Button>Open</Button>
+    </DrawerTrigger>
+    <DrawerContent {...args}>Hello world</DrawerContent>
+  </Drawer>
+);
+
+export const Basic: Story = {
+  render: (args) => <Template {...args} />,
+  args: {
+    title: 'Title',
+    subTitle: 'Something as subtitle',
+    footerContent: 'footer content'
+  }
+};
diff --git a/frontend/src/components/v2/Drawer/Drawer.tsx b/frontend/src/components/v2/Drawer/Drawer.tsx
new file mode 100644
index 000000000..ef7c7945b
--- /dev/null
+++ b/frontend/src/components/v2/Drawer/Drawer.tsx
@@ -0,0 +1,84 @@
+import { forwardRef, ReactNode } from 'react';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { cva, VariantProps } from 'cva';
+import { twMerge } from 'tailwind-merge';
+
+import { Card, CardBody, CardFooter, CardTitle } from '../Card';
+import { IconButton } from '../IconButton';
+
+export type DrawerContentProps = DialogPrimitive.DialogContentProps & {
+  title?: ReactNode;
+  subTitle?: ReactNode;
+  footerContent?: ReactNode;
+  onClose?: () => void;
+} & VariantProps<typeof drawerContentVariation>;
+
+const drawerContentVariation = cva(
+  'fixed ease-in-out duration-300 z-[90] border border-mineshaft-600 drop-shadow-2xl',
+  {
+    variants: {
+      direction: {
+        right: [
+          'right-0 top-0',
+          'h-full w-96',
+          'data-[state=open]:animate-drawerRightIn data-[state=closed]:animate-drawerRightOut'
+        ]
+      }
+    }
+  }
+);
+
+export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
+  (
+    { children, title, subTitle, className, footerContent, direction = 'right', onClose, ...props },
+    forwardedRef
+  ) => (
+    <DialogPrimitive.Portal>
+      <DialogPrimitive.Overlay
+        className="fixed inset-0 z-[70] h-full w-full"
+        style={{ backgroundColor: 'rgba(0, 0, 0, 0.7)' }}
+      />
+      <DialogPrimitive.Content
+        {...props}
+        ref={forwardedRef}
+        className={twMerge(drawerContentVariation({ direction, className }))}
+      >
+        <Card isRounded={false} className="h-full w-full">
+          {title && (
+            <CardTitle subTitle={subTitle} className="px-4">
+              {title}
+            </CardTitle>
+          )}
+          <CardBody className="flex-grow overflow-y-auto overflow-x-hidden px-4">
+            {children}
+          </CardBody>
+          {footerContent && <CardFooter>{footerContent}</CardFooter>}{' '}
+          <DialogPrimitive.Close aria-label="Close" asChild onClick={onClose}>
+            <IconButton
+              variant="plain"
+              ariaLabel="close"
+              className="absolute top-4 right-6 rounded text-bunker-400 hover:text-bunker-50"
+            >
+              <FontAwesomeIcon icon={faTimes} size="lg" className="cursor-pointer" />
+            </IconButton>
+          </DialogPrimitive.Close>
+        </Card>
+      </DialogPrimitive.Content>
+    </DialogPrimitive.Portal>
+  )
+);
+
+DrawerContent.displayName = 'ModalContent';
+
+export type DrawerProps = Omit<DialogPrimitive.DialogProps, 'open'> & { isOpen?: boolean };
+export const Drawer = ({ isOpen, ...props }: DrawerProps) => (
+  <DialogPrimitive.Root open={isOpen} {...props} />
+);
+
+export const DrawerTrigger = DialogPrimitive.Trigger;
+export type DrawerTriggerProps = DialogPrimitive.DialogTriggerProps;
+
+export const DrawerClose = DialogPrimitive.Close;
+export type DrawerCloseProps = DialogPrimitive.DialogCloseProps;
diff --git a/frontend/src/components/v2/Drawer/index.tsx b/frontend/src/components/v2/Drawer/index.tsx
new file mode 100644
index 000000000..8c44a87ff
--- /dev/null
+++ b/frontend/src/components/v2/Drawer/index.tsx
@@ -0,0 +1 @@
+export { Drawer, DrawerClose,DrawerContent, DrawerTrigger } from './Drawer';
diff --git a/frontend/src/components/v2/HoverCardv2/HoverCardv2.stories.tsx b/frontend/src/components/v2/HoverCardv2/HoverCardv2.stories.tsx
new file mode 100644
index 000000000..3b05c2d66
--- /dev/null
+++ b/frontend/src/components/v2/HoverCardv2/HoverCardv2.stories.tsx
@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '../Button';
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardContentProps,
+  HoverCardTrigger
+} from './HoverCardv2';
+
+const meta: Meta<typeof HoverCardContent> = {
+  title: 'Components/HoverCard',
+  component: HoverCard,
+  tags: ['v2']
+};
+
+export default meta;
+type Story = StoryObj<typeof HoverCardContent>;
+
+const Template = (args: HoverCardContentProps) => (
+  <HoverCard>
+    <HoverCardTrigger>
+      <Button>Hello world</Button>
+    </HoverCardTrigger>
+    <HoverCardContent {...args} sideOffset={10}>
+      <div className="bg-mineshaft-600 p-4 text-gray-400">
+        <h1>This is hover card</h1>
+      </div>
+    </HoverCardContent>
+  </HoverCard>
+);
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const Primary: Story = {
+  render: (args) => <Template {...args} />
+};
diff --git a/frontend/src/components/v2/HoverCardv2/HoverCardv2.tsx b/frontend/src/components/v2/HoverCardv2/HoverCardv2.tsx
new file mode 100644
index 000000000..b4a210b23
--- /dev/null
+++ b/frontend/src/components/v2/HoverCardv2/HoverCardv2.tsx
@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
+import { twMerge } from 'tailwind-merge';
+
+export const HoverCardTrigger = HoverCardPrimitive.Trigger;
+
+export const HoverCard = HoverCardPrimitive.Root;
+
+export type HoverCardContentProps = {
+  children?: ReactNode;
+} & HoverCardPrimitive.HoverCardContentProps;
+
+export const HoverCardContent = ({ children, className, ...props }: HoverCardContentProps) => (
+  <HoverCardPrimitive.Portal>
+    <HoverCardPrimitive.Content
+      {...props}
+      className={twMerge(
+        'relative w-64 rounded-md bg-mineshaft-600 fill-mineshaft-600 p-4 pt-6 font-inter text-gray-200 shadow-md',
+        className
+      )}
+    >
+      {children}
+      <HoverCardPrimitive.Arrow className="fill-inherit stroke-inherit" />
+    </HoverCardPrimitive.Content>
+  </HoverCardPrimitive.Portal>
+);
diff --git a/frontend/src/components/v2/HoverCardv2/index.tsx b/frontend/src/components/v2/HoverCardv2/index.tsx
new file mode 100644
index 000000000..ccdffc432
--- /dev/null
+++ b/frontend/src/components/v2/HoverCardv2/index.tsx
@@ -0,0 +1 @@
+export { HoverCard,HoverCardContent, HoverCardTrigger } from './HoverCardv2';
diff --git a/frontend/src/components/v2/IconButton/IconButton.tsx b/frontend/src/components/v2/IconButton/IconButton.tsx
index 98e81b089..f06fc5b5c 100644
--- a/frontend/src/components/v2/IconButton/IconButton.tsx
+++ b/frontend/src/components/v2/IconButton/IconButton.tsx
@@ -29,7 +29,8 @@ const iconButtonVariants = cva(
       variant: {
         solid: '',
         outline: ['bg-transparent', 'border-2', 'border-solid'],
-        plain: ''
+        plain: '',
+        star: 'text-bunker-200 bg-mineshaft-500'
       },
       isDisabled: {
         true: 'bg-opacity-70 cursor-not-allowed',
@@ -40,13 +41,23 @@ const iconButtonVariants = cva(
         false: ''
       },
       size: {
-        xs: ['text-xs', 'py-2', 'px-2'],
+        xs: ['text-xs', 'py-1.5', 'px-2'],
         sm: ['text-sm', 'py-3', 'px-3'],
         md: ['text-md', 'py-4', 'px-4'],
         lg: ['text-lg', 'py-6', 'px-6']
       }
     },
     compoundVariants: [
+      {
+        colorSchema: 'primary',
+        variant: 'star',
+        className: 'hover:bg-primary hover:text-black'
+      },
+      {
+        colorSchema: 'danger',
+        variant: 'star',
+        className: 'hover:bg-red hover:text-white'
+      },
       {
         colorSchema: 'primary',
         variant: 'outline',
diff --git a/frontend/src/components/v2/Input/Input.tsx b/frontend/src/components/v2/Input/Input.tsx
index e6524c839..98784cdc0 100644
--- a/frontend/src/components/v2/Input/Input.tsx
+++ b/frontend/src/components/v2/Input/Input.tsx
@@ -9,6 +9,7 @@ type Props = {
   leftIcon?: ReactNode;
   rightIcon?: ReactNode;
   isDisabled?: boolean;
+  isReadOnly?: boolean;
 };
 
 const inputVariants = cva(
@@ -78,6 +79,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       rightIcon,
       variant = 'filled',
       size = 'md',
+      isReadOnly,
       ...props
     },
     ref
@@ -89,6 +91,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           {...props}
           required={isRequired}
           ref={ref}
+          readOnly={isReadOnly}
           disabled={isDisabled}
           className={twMerge(
             leftIcon ? 'pl-10' : 'pl-2.5',
diff --git a/frontend/src/components/v2/Modal/Modal.tsx b/frontend/src/components/v2/Modal/Modal.tsx
index fc9a90642..9d1b28432 100644
--- a/frontend/src/components/v2/Modal/Modal.tsx
+++ b/frontend/src/components/v2/Modal/Modal.tsx
@@ -12,20 +12,24 @@ export type ModalContentProps = DialogPrimitive.DialogContentProps & {
   subTitle?: ReactNode;
   footerContent?: ReactNode;
   onClose?: () => void;
+  overlayClassName?: string;
 };
 
 export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
-  ({ children, title, subTitle, className, footerContent, onClose, ...props }, forwardedRef) => (
+  (
+    { children, title, subTitle, className, overlayClassName, footerContent, onClose, ...props },
+    forwardedRef
+  ) => (
     <DialogPrimitive.Portal>
       <DialogPrimitive.Overlay
-        className="fixed inset-0 h-full w-full animate-fadeIn z-[70]"
+        className={twMerge('fixed inset-0 z-[70] h-full w-full animate-fadeIn', overlayClassName)}
         style={{ backgroundColor: 'rgba(0, 0, 0, 0.7)' }}
       />
       <DialogPrimitive.Content {...props} ref={forwardedRef}>
         <Card
           isRounded
           className={twMerge(
-            'fixed top-1/2 left-1/2 max-w-lg border border-mineshaft-600 -translate-y-2/4 -translate-x-2/4 animate-popIn drop-shadow-2xl z-[90]',
+            'fixed top-1/2 left-1/2 z-[90] max-w-lg -translate-y-2/4 -translate-x-2/4 animate-popIn border border-mineshaft-600 drop-shadow-2xl',
             className
           )}
         >
diff --git a/frontend/src/components/v2/Popoverv2/Popoverv2.stories.tsx b/frontend/src/components/v2/Popoverv2/Popoverv2.stories.tsx
new file mode 100644
index 000000000..59a04e400
--- /dev/null
+++ b/frontend/src/components/v2/Popoverv2/Popoverv2.stories.tsx
@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '../Button';
+import { Popover, PopoverContent, PopoverContentProps, PopoverTrigger } from './Popoverv2';
+
+const meta: Meta<typeof PopoverContent> = {
+  title: 'Components/Popover',
+  component: Popover,
+  tags: ['v2']
+};
+
+export default meta;
+type Story = StoryObj<typeof PopoverContent>;
+
+const Template = (args: PopoverContentProps) => (
+  <Popover>
+    <PopoverTrigger asChild>
+      <Button>Hello world</Button>
+    </PopoverTrigger>
+    <PopoverContent {...args} side="bottom" sideOffset={10}>
+      <h1>This is popper</h1>
+    </PopoverContent>
+  </Popover>
+);
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const Primary: Story = {
+  render: (args) => <Template {...args} />
+};
diff --git a/frontend/src/components/v2/Popoverv2/Popoverv2.tsx b/frontend/src/components/v2/Popoverv2/Popoverv2.tsx
new file mode 100644
index 000000000..dc180d047
--- /dev/null
+++ b/frontend/src/components/v2/Popoverv2/Popoverv2.tsx
@@ -0,0 +1,54 @@
+import { ReactNode } from 'react';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { twMerge } from 'tailwind-merge';
+
+import { IconButton } from '../IconButton';
+
+export const PopoverTrigger = PopoverPrimitive.Trigger;
+
+export const Popover = PopoverPrimitive.Root;
+
+export type PopoverContentProps = {
+  children?: ReactNode;
+  hideCloseBtn?: boolean;
+} & PopoverPrimitive.PopperContentProps;
+
+export const PopoverContent = ({
+  children,
+  className,
+  hideCloseBtn,
+  ...props
+}: PopoverContentProps) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      className={twMerge(
+        [
+          'relative z-[100] w-64 rounded-md bg-mineshaft-600 fill-mineshaft-600 p-4 pt-6 font-inter text-gray-200 shadow-md',
+          // animation
+          'data-[state=open]:data-[side=bottom]:animate-slideUpAndFade',
+          'data-[state=open]:data-[side=top]:animate-slideDownAndFade',
+          'data-[state=open]:data-[side=left]:animate-slideRightAndFade',
+          'data-[state=open]:data-[side=right]:animate-slideLeftAndFade'
+        ],
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {!hideCloseBtn && (
+        <PopoverPrimitive.Close aria-label="Close" asChild>
+          <IconButton
+            variant="plain"
+            ariaLabel="close"
+            className="absolute top-0 right-1 rounded text-bunker-400 hover:text-bunker-50"
+          >
+            <FontAwesomeIcon icon={faTimes} size="lg" className="cursor-pointer" />
+          </IconButton>
+        </PopoverPrimitive.Close>
+      )}
+      <PopoverPrimitive.Arrow className="fill-inherit" />
+    </PopoverPrimitive.Content>
+  </PopoverPrimitive.Portal>
+);
diff --git a/frontend/src/components/v2/Popoverv2/index.tsx b/frontend/src/components/v2/Popoverv2/index.tsx
new file mode 100644
index 000000000..2325840bd
--- /dev/null
+++ b/frontend/src/components/v2/Popoverv2/index.tsx
@@ -0,0 +1 @@
+export { Popover,PopoverContent, PopoverTrigger } from './Popoverv2';
diff --git a/frontend/src/components/v2/Switch/Switch.tsx b/frontend/src/components/v2/Switch/Switch.tsx
index 70bbd29ca..81d062d57 100644
--- a/frontend/src/components/v2/Switch/Switch.tsx
+++ b/frontend/src/components/v2/Switch/Switch.tsx
@@ -19,7 +19,7 @@ export const Switch = ({
   isRequired,
   ...props
 }: SwitchProps): JSX.Element => (
-  <div className="flex items-center text-bunker-300 font-inter">
+  <div className="flex items-center font-inter text-bunker-300">
     <label className="text-sm" htmlFor={id}>
       {children}
       {isRequired && <span className="pl-1 text-red">*</span>}
@@ -30,13 +30,13 @@ export const Switch = ({
       checked={isChecked}
       disabled={isDisabled}
       className={twMerge(
-        'h-5 ml-3 transition-all rounded-full w-9 bg-bunker-300 data-[state=checked]:bg-bunker-200',
+        'ml-3 h-5 w-9 rounded-full bg-bunker-300 transition-all data-[state=checked]:bg-primary',
         isDisabled && 'bg-bunker-400 hover:bg-bunker-400',
         className
       )}
       id={id}
     >
-      <SwitchPrimitive.Thumb className="w-4 h-4 border-none will-change-transform rounded-full shadow bg-black block transition-all translate-x-0.5 data-[state=checked]:translate-x-[18px]" />
+      <SwitchPrimitive.Thumb className="block h-4 w-4 translate-x-0.5 rounded-full border-none bg-black shadow transition-all will-change-transform data-[state=checked]:translate-x-[18px]" />
     </SwitchPrimitive.Root>
   </div>
 );
diff --git a/frontend/src/components/v2/Tag/Tag.tsx b/frontend/src/components/v2/Tag/Tag.tsx
index 4f3021e18..df3458762 100644
--- a/frontend/src/components/v2/Tag/Tag.tsx
+++ b/frontend/src/components/v2/Tag/Tag.tsx
@@ -1,24 +1,56 @@
 import { ReactNode } from 'react';
+import { faClose } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { cva, VariantProps } from 'cva';
 import { twMerge } from 'tailwind-merge';
 
 type Props = {
   children: ReactNode;
   className?: string;
+  onClose?: () => void;
+  color?: string;
+  isDisabled?: boolean;
 } & VariantProps<typeof tagVariants>;
 
-const tagVariants = cva('inline-flex whitespace-nowrap text-sm rounded-sm mr-1.5 text-bunker-200 ', {
-  variants: {
-    colorSchema: {
-      gray: 'bg-mineshaft-500',
-      red: 'bg-red/80 text-bunker-100'
-    },
-    size: {
-      sm: 'px-1.5 py-0.5'
+const tagVariants = cva(
+  'inline-flex items-center whitespace-nowrap text-sm rounded-sm mr-1.5 text-bunker-200',
+  {
+    variants: {
+      colorSchema: {
+        gray: 'bg-mineshaft-500',
+        red: 'bg-red/80 text-bunker-100',
+        green: 'bg-primary-800 text-white'
+      },
+      size: {
+        sm: 'px-2 py-0.5'
+      }
     }
   }
-});
-
-export const Tag = ({ children, className, colorSchema = 'gray', size = 'sm' }: Props) => (
-  <div className={twMerge(tagVariants({ colorSchema, className, size }))}>{children}</div>
+);
+
+export const Tag = ({
+  children,
+  className,
+  colorSchema = 'gray',
+  color,
+  isDisabled,
+  size = 'sm',
+  onClose
+}: Props) => (
+  <div
+    className={twMerge(tagVariants({ colorSchema, className, size }))}
+    style={{ backgroundColor: color }}
+  >
+    {children}
+    {onClose && (
+      <button
+        type="button"
+        onClick={onClose}
+        disabled={isDisabled}
+        className="ml-2 flex items-center justify-center"
+      >
+        <FontAwesomeIcon icon={faClose} />
+      </button>
+    )}
+  </div>
 );
diff --git a/frontend/src/components/v2/TextArea/TextArea.tsx b/frontend/src/components/v2/TextArea/TextArea.tsx
index afd9078e9..9a5ac1452 100644
--- a/frontend/src/components/v2/TextArea/TextArea.tsx
+++ b/frontend/src/components/v2/TextArea/TextArea.tsx
@@ -3,6 +3,7 @@ import { cva, VariantProps } from 'cva';
 import { twMerge } from 'tailwind-merge';
 
 type Props = {
+  isDisabled?: boolean;
   placeholder?: string;
   isFullWidth?: boolean;
   isRequired?: boolean;
@@ -10,7 +11,7 @@ type Props = {
 };
 
 const textAreaVariants = cva(
-  'textarea w-full p-2 border border-solid text-gray-400 font-inter placeholder-gray-500 placeholder-opacity-50',
+  'textarea w-full p-2 focus:ring-2 ring-primary-800 outline-none border border-solid text-gray-400 font-inter placeholder-gray-500 placeholder-opacity-50',
   {
     variants: {
       size: {
@@ -43,7 +44,7 @@ const textAreaVariants = cva(
   }
 );
 
-export type TextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> &
+export type TextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size' | 'disabled'> &
   VariantProps<typeof textAreaVariants> &
   Props;
 
@@ -52,6 +53,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
     {
       className,
       isRounded = true,
+      isDisabled = false,
       isError = false,
       isRequired,
       variant = 'filled',
@@ -66,6 +68,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
       style={{ resize: reSize }}
       required={isRequired}
       ref={ref}
+      disabled={isDisabled}
       className={twMerge(textAreaVariants({ className, isError, size, isRounded, variant }))}
     />
   )
diff --git a/frontend/src/components/v2/Tooltip/Tooltip.stories.tsx b/frontend/src/components/v2/Tooltip/Tooltip.stories.tsx
new file mode 100644
index 000000000..294f754d6
--- /dev/null
+++ b/frontend/src/components/v2/Tooltip/Tooltip.stories.tsx
@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Tooltip, TooltipProps, TooltipProvider } from './Tooltip';
+
+const meta: Meta<typeof Tooltip> = {
+  title: 'Components/Tooltip',
+  component: Tooltip,
+  tags: ['v2'],
+  args: {
+    content: 'Hi'
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+
+const Template = (args: TooltipProps) => (
+  <TooltipProvider>
+    <Tooltip {...args}>
+      <div className="text-white">Hello infisical</div>
+    </Tooltip>
+  </TooltipProvider>
+);
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const Primary: Story = {
+  render: (args) => <Template {...args} />
+};
diff --git a/frontend/src/components/v2/Tooltip/Tooltip.tsx b/frontend/src/components/v2/Tooltip/Tooltip.tsx
new file mode 100644
index 000000000..77e587303
--- /dev/null
+++ b/frontend/src/components/v2/Tooltip/Tooltip.tsx
@@ -0,0 +1,53 @@
+import { ReactNode } from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { twMerge } from 'tailwind-merge';
+
+export type TooltipProps = {
+  children: ReactNode;
+  content?: ReactNode;
+  isOpen?: boolean;
+  className?: string;
+  asChild?: boolean;
+  onOpenChange?: (isOpen: boolean) => void;
+  defaultOpen?: boolean;
+} & Omit<TooltipPrimitive.TooltipContentProps, 'open'>;
+
+export const Tooltip = ({
+  children,
+  content,
+  isOpen,
+  onOpenChange,
+  defaultOpen,
+  className,
+  asChild = true,
+  ...props
+}: TooltipProps) => (
+  <TooltipPrimitive.Root
+    delayDuration={150}
+    open={isOpen}
+    defaultOpen={defaultOpen}
+    onOpenChange={onOpenChange}
+  >
+    <TooltipPrimitive.Trigger asChild={asChild}>{children}</TooltipPrimitive.Trigger>
+    <TooltipPrimitive.Content
+      side="top"
+      align="center"
+      sideOffset={5}
+      {...props}
+      className={twMerge(
+        `z-20 select-none rounded-md bg-mineshaft-500 py-2 px-4 text-sm shadow-md 
+data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade
+data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade
+data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade
+data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade
+`,
+        className
+      )}
+    >
+      {content}
+      <TooltipPrimitive.Arrow width={11} height={5} className="fill-mineshaft-500" />
+    </TooltipPrimitive.Content>
+  </TooltipPrimitive.Root>
+);
+
+export const TooltipProvider = TooltipPrimitive.Provider;
diff --git a/frontend/src/components/v2/Tooltip/index.tsx b/frontend/src/components/v2/Tooltip/index.tsx
new file mode 100644
index 000000000..526a242fa
--- /dev/null
+++ b/frontend/src/components/v2/Tooltip/index.tsx
@@ -0,0 +1 @@
+export { Tooltip, TooltipProvider } from './Tooltip';
diff --git a/frontend/src/components/v2/index.tsx b/frontend/src/components/v2/index.tsx
index 130b797ae..63a0dd697 100644
--- a/frontend/src/components/v2/index.tsx
+++ b/frontend/src/components/v2/index.tsx
@@ -2,14 +2,17 @@ export * from './Button';
 export * from './Card';
 export * from './Checkbox';
 export * from './DeleteActionModal';
+export * from './Drawer';
 export * from './Dropdown';
 export * from './EmailServiceSetupModal'
 export * from './EmptyState';
 export * from './FormControl';
+export * from './HoverCardv2';
 export * from './IconButton';
 export * from './Input';
 export * from './Menu';
 export * from './Modal';
+export * from './Popoverv2';
 export * from './Select';
 export * from './Skeleton';
 export * from './Spinner';
@@ -17,4 +20,5 @@ export * from './Switch';
 export * from './Table';
 export * from './Tag';
 export * from './TextArea';
+export * from './Tooltip';
 export * from './UpgradePlanModal';

From b42c33107efc660479bc92c80ac9d2c30047a55c Mon Sep 17 00:00:00 2001
From: akhilmhdh <akhilmhdh@gmail.com>
Date: Sun, 19 Mar 2023 00:34:14 +0530
Subject: [PATCH 2/7] feat(ui): added api hooks and state hooks for dashboard

---
 frontend/src/hooks/api/index.tsx              |   2 +
 .../src/hooks/api/secretSnapshots/index.tsx   |   6 +
 .../src/hooks/api/secretSnapshots/queries.tsx | 154 ++++++++++++++++
 .../src/hooks/api/secretSnapshots/types.ts    |  32 ++++
 frontend/src/hooks/api/secrets/index.ts       |   1 +
 frontend/src/hooks/api/secrets/queries.tsx    | 173 ++++++++++++++++++
 frontend/src/hooks/api/secrets/types.ts       | 104 +++++++++++
 frontend/src/hooks/api/types.ts               |   1 +
 frontend/src/hooks/api/users/index.tsx        |   2 +
 frontend/src/hooks/api/users/queries.tsx      |  26 +++
 frontend/src/hooks/api/workspace/index.tsx    |   4 +-
 frontend/src/hooks/api/workspace/queries.tsx  |  22 ++-
 frontend/src/hooks/api/workspace/types.ts     |  13 +-
 frontend/src/hooks/index.ts                   |   1 +
 frontend/src/hooks/useLeaveConfirm.tsx        |  48 ++---
 frontend/src/hooks/usePersistentState.ts      |  25 +++
 16 files changed, 588 insertions(+), 26 deletions(-)
 create mode 100644 frontend/src/hooks/api/secretSnapshots/index.tsx
 create mode 100644 frontend/src/hooks/api/secretSnapshots/queries.tsx
 create mode 100644 frontend/src/hooks/api/secretSnapshots/types.ts
 create mode 100644 frontend/src/hooks/api/secrets/index.ts
 create mode 100644 frontend/src/hooks/api/secrets/queries.tsx
 create mode 100644 frontend/src/hooks/api/secrets/types.ts
 create mode 100644 frontend/src/hooks/usePersistentState.ts

diff --git a/frontend/src/hooks/api/index.tsx b/frontend/src/hooks/api/index.tsx
index c2035bbba..66d1a3933 100644
--- a/frontend/src/hooks/api/index.tsx
+++ b/frontend/src/hooks/api/index.tsx
@@ -2,6 +2,8 @@ export * from './auth';
 export * from './incidentContacts';
 export * from './keys';
 export * from './organization';
+export * from './secrets';
+export * from './secretSnapshots';
 export * from './serviceTokens';
 export * from './subscriptions';
 export * from './tags';
diff --git a/frontend/src/hooks/api/secretSnapshots/index.tsx b/frontend/src/hooks/api/secretSnapshots/index.tsx
new file mode 100644
index 000000000..7d6b368e7
--- /dev/null
+++ b/frontend/src/hooks/api/secretSnapshots/index.tsx
@@ -0,0 +1,6 @@
+export {
+  useGetSnapshotSecrets,
+  useGetWorkspaceSecretSnapshots,
+  useGetWsSnapshotCount,
+  usePerformSecretRollback
+} from './queries';
diff --git a/frontend/src/hooks/api/secretSnapshots/queries.tsx b/frontend/src/hooks/api/secretSnapshots/queries.tsx
new file mode 100644
index 000000000..3aa9dfbe5
--- /dev/null
+++ b/frontend/src/hooks/api/secretSnapshots/queries.tsx
@@ -0,0 +1,154 @@
+/* eslint-disable no-param-reassign */
+import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+
+import {
+  decryptAssymmetric,
+  decryptSymmetric
+} from '@app/components/utilities/cryptography/crypto';
+import { apiRequest } from '@app/config/request';
+
+import { DecryptedSecret } from '../secrets/types';
+import {
+  GetWorkspaceSecretSnapshotsDTO,
+  TSecretRollbackDTO,
+  TSnapshotSecret,
+  TSnapshotSecretProps,
+  TWorkspaceSecretSnapshot
+} from './types';
+
+export const secretSnapshotKeys = {
+  list: (workspaceId: string) => [{ workspaceId }, 'secret-snapshot'] as const,
+  snapshotSecrets: (snapshotId: string) => [{ snapshotId }, 'secret-snapshot'] as const,
+  count: (workspaceId: string) => [{ workspaceId }, 'count', 'secret-snapshot']
+};
+
+const fetchWorkspaceSecretSnaphots = async (workspaceId: string, limit = 10, offset = 0) => {
+  const res = await apiRequest.get<{ secretSnapshots: TWorkspaceSecretSnapshot[] }>(
+    `/api/v1/workspace/${workspaceId}/secret-snapshots`,
+    {
+      params: {
+        limit,
+        offset
+      }
+    }
+  );
+
+  return res.data.secretSnapshots;
+};
+
+export const useGetWorkspaceSecretSnapshots = (dto: GetWorkspaceSecretSnapshotsDTO) =>
+  useInfiniteQuery({
+    enabled: Boolean(dto.workspaceId),
+    queryKey: secretSnapshotKeys.list(dto.workspaceId),
+    queryFn: ({ pageParam }) => fetchWorkspaceSecretSnaphots(dto.workspaceId, dto.limit, pageParam),
+    getNextPageParam: (lastPage, pages) =>
+      lastPage.length !== 0 ? pages.length * dto.limit : undefined
+  });
+
+const fetchSnapshotEncSecrets = async (snapshotId: string) => {
+  const res = await apiRequest.get<{ secretSnapshot: TSnapshotSecret }>(
+    `/api/v1/secret-snapshot/${snapshotId}`
+  );
+  return res.data.secretSnapshot;
+};
+
+export const useGetSnapshotSecrets = ({ decryptFileKey, env, snapshotId }: TSnapshotSecretProps) =>
+  useQuery({
+    queryKey: secretSnapshotKeys.snapshotSecrets(snapshotId),
+    enabled: Boolean(snapshotId && decryptFileKey),
+    queryFn: () => fetchSnapshotEncSecrets(snapshotId),
+    select: (data) => {
+      const PRIVATE_KEY = localStorage.getItem('PRIVATE_KEY') as string;
+      const latestKey = decryptFileKey;
+      const key = decryptAssymmetric({
+        ciphertext: latestKey.encryptedKey,
+        nonce: latestKey.nonce,
+        publicKey: latestKey.sender.publicKey,
+        privateKey: PRIVATE_KEY
+      });
+
+      const sharedSecrets: DecryptedSecret[] = [];
+      const personalSecrets: Record<string, { id: string; value: string }> = {};
+      data.secretVersions
+        .filter(({ environment }) => environment === env)
+        .forEach((encSecret) => {
+          const secretKey = decryptSymmetric({
+            ciphertext: encSecret.secretKeyCiphertext,
+            iv: encSecret.secretKeyIV,
+            tag: encSecret.secretKeyTag,
+            key
+          });
+
+          const secretValue = decryptSymmetric({
+            ciphertext: encSecret.secretValueCiphertext,
+            iv: encSecret.secretValueIV,
+            tag: encSecret.secretValueTag,
+            key
+          });
+
+          const secretComment = '';
+
+          const decryptedSecret = {
+            _id: encSecret.secret,
+            env: encSecret.environment,
+            key: secretKey,
+            value: secretValue,
+            tags: encSecret.tags,
+            comment: secretComment,
+            createdAt: encSecret.createdAt,
+            updatedAt: encSecret.updatedAt,
+            type: 'modified'
+          };
+
+          if (encSecret.type === 'personal') {
+            personalSecrets[decryptedSecret.key] = { id: encSecret.secret, value: secretValue };
+          } else {
+            sharedSecrets.push(decryptedSecret);
+          }
+        });
+
+      sharedSecrets.forEach((val) => {
+        if (personalSecrets?.[val.key]) {
+          val.idOverride = personalSecrets[val.key].id;
+          val.valueOverride = personalSecrets[val.key].value;
+          val.overrideAction = 'modified';
+        }
+      });
+
+      return { version: data.version, secrets: sharedSecrets, createdAt: data.createdAt };
+    }
+  });
+
+const fetchWorkspaceSecretSnaphotCount = async (workspaceId: string) => {
+  const res = await apiRequest.get<{ count: number }>(
+    `/api/v1/workspace/${workspaceId}/secret-snapshots/count`
+  );
+  return res.data.count;
+};
+
+export const useGetWsSnapshotCount = (workspaceId: string) =>
+  useQuery({
+    enabled: Boolean(workspaceId),
+    queryKey: secretSnapshotKeys.count(workspaceId),
+    queryFn: () => fetchWorkspaceSecretSnaphotCount(workspaceId)
+  });
+
+export const usePerformSecretRollback = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, TSecretRollbackDTO>({
+    mutationFn: async (dto) => {
+      const { data } = await apiRequest.post(
+        `/api/v1/workspace/${dto.workspaceId}/secret-snapshots/rollback`,
+        {
+          version: dto.version
+        }
+      );
+      return data;
+    },
+    onSuccess: (_, dto) => {
+      queryClient.invalidateQueries(secretSnapshotKeys.list(dto.workspaceId));
+      queryClient.invalidateQueries(secretSnapshotKeys.count(dto.workspaceId));
+    }
+  });
+};
diff --git a/frontend/src/hooks/api/secretSnapshots/types.ts b/frontend/src/hooks/api/secretSnapshots/types.ts
new file mode 100644
index 000000000..dbe8ccd17
--- /dev/null
+++ b/frontend/src/hooks/api/secretSnapshots/types.ts
@@ -0,0 +1,32 @@
+import { UserWsKeyPair } from '../keys/types';
+import { EncryptedSecretVersion } from '../secrets/types';
+
+export type TWorkspaceSecretSnapshot = {
+  _id: string;
+  workspace: string;
+  version: number;
+  secretVersions: string[];
+  createdAt: string;
+  updatedAt: string;
+  __v: number;
+};
+
+export type TSnapshotSecret = Omit<TWorkspaceSecretSnapshot, 'secretVersions'> & {
+  secretVersions: EncryptedSecretVersion[];
+};
+
+export type TSnapshotSecretProps = {
+  snapshotId: string;
+  env: string;
+  decryptFileKey: UserWsKeyPair;
+};
+
+export type GetWorkspaceSecretSnapshotsDTO = {
+  workspaceId: string;
+  limit: number;
+};
+
+export type TSecretRollbackDTO = {
+  workspaceId: string;
+  version: number;
+};
diff --git a/frontend/src/hooks/api/secrets/index.ts b/frontend/src/hooks/api/secrets/index.ts
new file mode 100644
index 000000000..c27cecfb1
--- /dev/null
+++ b/frontend/src/hooks/api/secrets/index.ts
@@ -0,0 +1 @@
+export { useBatchSecretsOp, useGetProjectSecrets, useGetSecretVersion } from './queries';
diff --git a/frontend/src/hooks/api/secrets/queries.tsx b/frontend/src/hooks/api/secrets/queries.tsx
new file mode 100644
index 000000000..9b9c49df5
--- /dev/null
+++ b/frontend/src/hooks/api/secrets/queries.tsx
@@ -0,0 +1,173 @@
+/* eslint-disable no-param-reassign */
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+
+import {
+  decryptAssymmetric,
+  decryptSymmetric
+} from '@app/components/utilities/cryptography/crypto';
+import { apiRequest } from '@app/config/request';
+
+import { secretSnapshotKeys } from '../secretSnapshots/queries';
+import {
+  BatchSecretDTO,
+  DecryptedSecret,
+  EncryptedSecret,
+  EncryptedSecretVersion,
+  GetProjectSecretsDTO,
+  GetSecretVersionsDTO
+} from './types';
+
+export const secretKeys = {
+  // this is also used in secretSnapshot part
+  getProjectSecret: (workspaceId: string, env: string) => [{ workspaceId, env }, 'secrets'],
+  getSecretVersion: (secretId: string) => [{ secretId }, 'secret-versions']
+};
+
+const fetchProjectEncryptedSecrets = async (workspaceId: string, env: string) => {
+  const { data } = await apiRequest.get<{ secrets: EncryptedSecret[] }>('/api/v2/secrets', {
+    params: {
+      environment: env,
+      workspaceId
+    }
+  });
+  return data.secrets;
+};
+
+export const useGetProjectSecrets = ({
+  workspaceId,
+  env,
+  decryptFileKey,
+  isPaused
+}: GetProjectSecretsDTO) =>
+  useQuery({
+    // wait for all values to be available
+    enabled: Boolean(decryptFileKey && workspaceId && env) && !isPaused,
+    queryKey: secretKeys.getProjectSecret(workspaceId, env),
+    queryFn: () => fetchProjectEncryptedSecrets(workspaceId, env),
+    select: (data) => {
+      const PRIVATE_KEY = localStorage.getItem('PRIVATE_KEY') as string;
+      const latestKey = decryptFileKey;
+      const key = decryptAssymmetric({
+        ciphertext: latestKey.encryptedKey,
+        nonce: latestKey.nonce,
+        publicKey: latestKey.sender.publicKey,
+        privateKey: PRIVATE_KEY
+      });
+
+      const sharedSecrets: DecryptedSecret[] = [];
+      const personalSecrets: Record<string, { id: string; value: string }> = {};
+      // this used for add-only mode in dashboard
+      // type won't be there thus only one key is shown
+      const duplicateSecretKey: Record<string, boolean> = {};
+      data.forEach((encSecret) => {
+        const secretKey = decryptSymmetric({
+          ciphertext: encSecret.secretKeyCiphertext,
+          iv: encSecret.secretKeyIV,
+          tag: encSecret.secretKeyTag,
+          key
+        });
+
+        const secretValue = decryptSymmetric({
+          ciphertext: encSecret.secretValueCiphertext,
+          iv: encSecret.secretValueIV,
+          tag: encSecret.secretValueTag,
+          key
+        });
+
+        const secretComment = decryptSymmetric({
+          ciphertext: encSecret.secretCommentCiphertext,
+          iv: encSecret.secretCommentIV,
+          tag: encSecret.secretCommentTag,
+          key
+        });
+
+        const decryptedSecret = {
+          _id: encSecret._id,
+          env: encSecret.environment,
+          key: secretKey,
+          value: secretValue,
+          tags: encSecret.tags,
+          comment: secretComment,
+          createdAt: encSecret.createdAt,
+          updatedAt: encSecret.updatedAt
+        };
+
+        if (encSecret.type === 'personal') {
+          personalSecrets[decryptedSecret.key] = { id: encSecret._id, value: secretValue };
+        } else {
+          if (!duplicateSecretKey?.[decryptedSecret.key]) {
+            sharedSecrets.push(decryptedSecret);
+          }
+          duplicateSecretKey[decryptedSecret.key] = true;
+        }
+      });
+      sharedSecrets.forEach((val) => {
+        if (personalSecrets?.[val.key]) {
+          val.idOverride = personalSecrets[val.key].id;
+          val.valueOverride = personalSecrets[val.key].value;
+          val.overrideAction = 'modified';
+        }
+      });
+
+      return { secrets: sharedSecrets };
+    }
+  });
+
+const fetchEncryptedSecretVersion = async (secretId: string, offset: number, limit: number) => {
+  const { data } = await apiRequest.get<{ secretVersions: EncryptedSecretVersion[] }>(
+    `/api/v1/secret/${secretId}/secret-versions`,
+    {
+      params: {
+        limit,
+        offset
+      }
+    }
+  );
+  return data.secretVersions;
+};
+
+export const useGetSecretVersion = (dto: GetSecretVersionsDTO) =>
+  useQuery({
+    enabled: Boolean(dto.secretId && dto.decryptFileKey),
+    queryKey: secretKeys.getSecretVersion(dto.secretId),
+    queryFn: () => fetchEncryptedSecretVersion(dto.secretId, dto.offset, dto.limit),
+    select: (data) => {
+      const PRIVATE_KEY = localStorage.getItem('PRIVATE_KEY') as string;
+      const latestKey = dto.decryptFileKey;
+      const key = decryptAssymmetric({
+        ciphertext: latestKey.encryptedKey,
+        nonce: latestKey.nonce,
+        publicKey: latestKey.sender.publicKey,
+        privateKey: PRIVATE_KEY
+      });
+
+      return data
+        .map((el) => ({
+          createdAt: el.createdAt,
+          id: el._id,
+          value: decryptSymmetric({
+            ciphertext: el.secretValueCiphertext,
+            iv: el.secretValueIV,
+            tag: el.secretValueTag,
+            key
+          })
+        }))
+        .sort((a, b) => b.createdAt.localeCompare(a.createdAt));
+    }
+  });
+
+export const useBatchSecretsOp = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, BatchSecretDTO>({
+    mutationFn: async (dto) => {
+      const { data } = await apiRequest.post('/api/v2/secrets/batch', dto);
+      return data;
+    },
+    onSuccess: (_, dto) => {
+      queryClient.invalidateQueries(secretKeys.getProjectSecret(dto.workspaceId, dto.environment));
+      queryClient.invalidateQueries(secretSnapshotKeys.list(dto.workspaceId));
+      queryClient.invalidateQueries(secretSnapshotKeys.count(dto.workspaceId));
+    }
+  });
+};
diff --git a/frontend/src/hooks/api/secrets/types.ts b/frontend/src/hooks/api/secrets/types.ts
new file mode 100644
index 000000000..7888e64b3
--- /dev/null
+++ b/frontend/src/hooks/api/secrets/types.ts
@@ -0,0 +1,104 @@
+import type { UserWsKeyPair } from '../keys/types';
+import type { WsTag } from '../tags/types';
+
+export type EncryptedSecret = {
+  _id: string;
+  version: number;
+  workspace: string;
+  type: 'shared' | 'personal';
+  environment: string;
+  secretKeyCiphertext: string;
+  secretKeyIV: string;
+  secretKeyTag: string;
+  secretValueCiphertext: string;
+  secretValueIV: string;
+  secretValueTag: string;
+  __v: number;
+  createdAt: string;
+  updatedAt: string;
+  secretCommentCiphertext: string;
+  secretCommentIV: string;
+  secretCommentTag: string;
+  tags: WsTag[];
+};
+
+export type DecryptedSecret = {
+  _id: string;
+  key: string;
+  value: string;
+  comment: string;
+  tags: WsTag[];
+  createdAt: string;
+  updatedAt: string;
+  env: string;
+  valueOverride?: string;
+  idOverride?: string;
+  overrideAction?: string;
+};
+
+export type EncryptedSecretVersion = {
+  _id: string;
+  secret: string;
+  version: number;
+  workspace: string;
+  type: string;
+  environment: string;
+  isDeleted: boolean;
+  secretKeyCiphertext: string;
+  secretKeyIV: string;
+  secretKeyTag: string;
+  secretValueCiphertext: string;
+  secretValueIV: string;
+  secretValueTag: string;
+  tags: WsTag[];
+  __v: number;
+  createdAt: string;
+  updatedAt: string;
+};
+
+// dto
+type SecretTagArg = { _id: string; name: string; slug: string };
+
+export type UpdateSecretArg = {
+  _id: string;
+  type: 'shared' | 'personal';
+  secretKeyCiphertext: string;
+  secretKeyIV: string;
+  secretKeyTag: string;
+  secretValueCiphertext: string;
+  secretValueIV: string;
+  secretValueTag: string;
+  secretCommentCiphertext: string;
+  secretCommentIV: string;
+  secretCommentTag: string;
+  tags: SecretTagArg[];
+};
+
+export type CreateSecretArg = Omit<UpdateSecretArg, '_id'>;
+
+export type DeleteSecretArg = { _id: string };
+
+export type BatchSecretDTO = {
+  workspaceId: string;
+  environment: string;
+  requests: Array<
+    | { method: 'POST'; secret: CreateSecretArg }
+    | { method: 'PATCH'; secret: UpdateSecretArg }
+    | { method: 'DELETE'; secret: DeleteSecretArg }
+  >;
+};
+
+export type GetProjectSecretsDTO = {
+  workspaceId: string;
+  env: string;
+  decryptFileKey: UserWsKeyPair;
+  isPaused?: boolean;
+  onSuccess?: (data: DecryptedSecret[]) => void;
+};
+
+export type GetSecretVersionsDTO = {
+  secretId: string;
+  limit: number;
+  offset: number;
+  decryptFileKey: UserWsKeyPair;
+};
diff --git a/frontend/src/hooks/api/types.ts b/frontend/src/hooks/api/types.ts
index a8821e5a5..554521828 100644
--- a/frontend/src/hooks/api/types.ts
+++ b/frontend/src/hooks/api/types.ts
@@ -4,6 +4,7 @@ export type { UserWsKeyPair } from './keys/types';
 export type { Organization } from './organization/types';
 export type { CreateServiceTokenDTO, ServiceToken } from './serviceTokens/types';
 export type { GetSubscriptionPlan, SubscriptionPlan } from './subscriptions/types';
+export type { WsTag } from './tags/types';
 export type { AddUserToWsDTO, AddUserToWsRes, OrgUser, User } from './users/types';
 export type {
   CreateEnvironmentDTO,
diff --git a/frontend/src/hooks/api/users/index.tsx b/frontend/src/hooks/api/users/index.tsx
index 0980d4108..d6cfcab2b 100644
--- a/frontend/src/hooks/api/users/index.tsx
+++ b/frontend/src/hooks/api/users/index.tsx
@@ -5,6 +5,8 @@ export {
   useDeleteOrgMembership,
   useGetOrgUsers,
   useGetUser,
+  useGetUserAction,
   useLogoutUser,
+  useRegisterUserAction,
   useUpdateOrgUserRole
 } from './queries';
diff --git a/frontend/src/hooks/api/users/queries.tsx b/frontend/src/hooks/api/users/queries.tsx
index 5d0759755..ef6dcc726 100644
--- a/frontend/src/hooks/api/users/queries.tsx
+++ b/frontend/src/hooks/api/users/queries.tsx
@@ -20,6 +20,7 @@ import {
 
 const userKeys = {
   getUser: ['user'] as const,
+  userAction: ['user-action'] as const,
   getOrgUsers: (orgId: string) => [{ orgId }, 'user']
 };
 
@@ -31,6 +32,21 @@ const fetchUserDetails = async () => {
 
 export const useGetUser = () => useQuery(userKeys.getUser, fetchUserDetails);
 
+const fetchUserAction = async (action: string) => {
+  const { data } = await apiRequest.get<{ userAction: string }>('/api/v1/user-action', {
+    params: {
+      action
+    }
+  });
+  return data.userAction;
+};
+
+export const useGetUserAction = (action: string) =>
+  useQuery({
+    queryKey: userKeys.userAction,
+    queryFn: () => fetchUserAction(action)
+  });
+
 export const fetchOrgUsers = async (orgId: string) => {
   const { data } = await apiRequest.get<{ users: OrgUser[] }>(
     `/api/v1/organization/${orgId}/users`
@@ -128,6 +144,16 @@ export const useUpdateOrgUserRole = () => {
   });
 };
 
+export const useRegisterUserAction = () => {
+  const queryClient = useQueryClient();
+  return useMutation<{}, {}, string>({
+    mutationFn: (action) => apiRequest.post('/api/v1/user-action', { action }),
+    onSuccess: () => {
+      queryClient.invalidateQueries(userKeys.userAction);
+    }
+  });
+};
+
 export const useLogoutUser = () =>
   useMutation({
     mutationFn: () => apiRequest.post('/api/v1/auth/logout'),
diff --git a/frontend/src/hooks/api/workspace/index.tsx b/frontend/src/hooks/api/workspace/index.tsx
index cab8617bd..622c5196c 100644
--- a/frontend/src/hooks/api/workspace/index.tsx
+++ b/frontend/src/hooks/api/workspace/index.tsx
@@ -5,7 +5,9 @@ export {
   useDeleteWsEnvironment,
   useGetUserWorkspaceMemberships,
   useGetUserWorkspaces,
+  useGetUserWsEnvironments,
   useGetWorkspaceById,
   useRenameWorkspace,
   useToggleAutoCapitalization,
-  useUpdateWsEnvironment} from './queries';
+  useUpdateWsEnvironment
+} from './queries';
diff --git a/frontend/src/hooks/api/workspace/queries.tsx b/frontend/src/hooks/api/workspace/queries.tsx
index 2bca2e9a5..4736da076 100644
--- a/frontend/src/hooks/api/workspace/queries.tsx
+++ b/frontend/src/hooks/api/workspace/queries.tsx
@@ -7,16 +7,19 @@ import {
   CreateWorkspaceDTO,
   DeleteEnvironmentDTO,
   DeleteWorkspaceDTO,
+  GetWsEnvironmentDTO,
   RenameWorkspaceDTO,
   ToggleAutoCapitalizationDTO,
   UpdateEnvironmentDTO,
-  Workspace
+  Workspace,
+  WorkspaceEnv
 } from './types';
 
 const workspaceKeys = {
   getWorkspaceById: (workspaceId: string) => [{ workspaceId }, 'workspace'] as const,
   getWorkspaceMemberships: (orgId: string) => [{ orgId }, 'workspace-memberships'],
-  getAllUserWorkspace: ['workspaces'] as const
+  getAllUserWorkspace: ['workspaces'] as const,
+  getUserWsEnvironments: (workspaceId: string) => ['workspace-env', { workspaceId }] as const
 };
 
 const fetchWorkspaceById = async (workspaceId: string) => {
@@ -49,6 +52,21 @@ const fetchUserWorkspaceMemberships = async (orgId: string) => {
   return data;
 };
 
+const fetchUserWsEnvironments = async (workspaceId: string) => {
+  const { data } = await apiRequest.get<{ accessibleEnvironments: WorkspaceEnv[] }>(
+    `/api/v2/workspace/${workspaceId}/environments`
+  );
+  return data.accessibleEnvironments;
+};
+
+export const useGetUserWsEnvironments = ({ workspaceId, onSuccess }: GetWsEnvironmentDTO) =>
+  useQuery({
+    enabled: Boolean(workspaceId),
+    onSuccess,
+    queryKey: workspaceKeys.getUserWsEnvironments(workspaceId),
+    queryFn: () => fetchUserWsEnvironments(workspaceId)
+  });
+
 // to get all userids in an org with the workspace they are part of
 export const useGetUserWorkspaceMemberships = (orgId: string) =>
   useQuery({
diff --git a/frontend/src/hooks/api/workspace/types.ts b/frontend/src/hooks/api/workspace/types.ts
index 738f5188c..44d4c4322 100644
--- a/frontend/src/hooks/api/workspace/types.ts
+++ b/frontend/src/hooks/api/workspace/types.ts
@@ -7,7 +7,13 @@ export type Workspace = {
   environments: WorkspaceEnv[];
 };
 
-export type WorkspaceEnv = { name: string; slug: string };
+export type WorkspaceEnv = {
+  name: string;
+  slug: string;
+  isReadDenied: boolean;
+  isWriteDenied: boolean;
+};
+
 export type WorkspaceTag = { _id: string; name: string; slug: string };
 
 // mutation dto
@@ -16,6 +22,11 @@ export type CreateWorkspaceDTO = {
   organizationId: string;
 };
 
+export type GetWsEnvironmentDTO = {
+  workspaceId: string;
+  onSuccess?: (data: WorkspaceEnv[]) => void;
+};
+
 export type RenameWorkspaceDTO = { workspaceID: string; newWorkspaceName: string };
 export type ToggleAutoCapitalizationDTO = { workspaceID: string; state: boolean };
 
diff --git a/frontend/src/hooks/index.ts b/frontend/src/hooks/index.ts
index 94bb7abc0..2c2058ef7 100644
--- a/frontend/src/hooks/index.ts
+++ b/frontend/src/hooks/index.ts
@@ -1,3 +1,4 @@
 export { useLeaveConfirm } from './useLeaveConfirm';
+export { usePersistentState } from './usePersistentState';
 export { usePopUp } from './usePopUp';
 export { useToggle } from './useToggle';
diff --git a/frontend/src/hooks/useLeaveConfirm.tsx b/frontend/src/hooks/useLeaveConfirm.tsx
index e136f41e4..3cbba8e19 100644
--- a/frontend/src/hooks/useLeaveConfirm.tsx
+++ b/frontend/src/hooks/useLeaveConfirm.tsx
@@ -4,52 +4,56 @@ import { useRouter } from 'next/router';
 import { leaveConfirmDefaultMessage } from '@app/const';
 
 type LeaveConfirmProps = {
-    initialValue: boolean,
-    message?: string
-}
+  initialValue: boolean;
+  message?: string;
+};
 
 interface LeaveConfirmReturn {
-  hasUnsavedChanges: boolean,
-  setHasUnsavedChanges: Dispatch<SetStateAction<boolean>>,  
+  hasUnsavedChanges: boolean;
+  setHasUnsavedChanges: Dispatch<SetStateAction<boolean>>;
 }
 
 export function useLeaveConfirm({
-    initialValue,
-    message = leaveConfirmDefaultMessage,
+  initialValue,
+  message = leaveConfirmDefaultMessage
 }: LeaveConfirmProps): LeaveConfirmReturn {
-  const router = useRouter()
+  const router = useRouter();
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState<boolean>(initialValue);
 
   const onRouteChangeStart = useCallback(() => {
     if (hasUnsavedChanges) {
+      // eslint-disable-next-line no-alert
       if (window.confirm(message)) {
-        return true
+        return true;
       }
-      throw new Error("Abort route change by user's confirmation.")
+      throw new Error("Abort route change by user's confirmation.");
     }
     return false;
-  }, [hasUnsavedChanges])
+  }, [hasUnsavedChanges]);
 
-  const handleWindowClose = useCallback((e: any) => {
-    if (!hasUnsavedChanges) { 
-      return;
-    }
-    e.preventDefault();
-    e.returnValue = message;
-  }, []);
+  const handleWindowClose = useCallback(
+    (e: any) => {
+      if (!hasUnsavedChanges) {
+        return;
+      }
+      e.preventDefault();
+      e.returnValue = message;
+    },
+    [hasUnsavedChanges]
+  );
 
   useEffect(() => {
-    router.events.on("routeChangeStart", onRouteChangeStart);
+    router.events.on('routeChangeStart', onRouteChangeStart);
     window.addEventListener('beforeunload', handleWindowClose);
 
     return () => {
-      router.events.off("routeChangeStart", onRouteChangeStart);
+      router.events.off('routeChangeStart', onRouteChangeStart);
       window.removeEventListener('beforeunload', handleWindowClose);
-    }
+    };
   }, [onRouteChangeStart, handleWindowClose]);
 
   return {
     hasUnsavedChanges,
-    setHasUnsavedChanges,
+    setHasUnsavedChanges
   };
 }
diff --git a/frontend/src/hooks/usePersistentState.ts b/frontend/src/hooks/usePersistentState.ts
new file mode 100644
index 000000000..0230e35ef
--- /dev/null
+++ b/frontend/src/hooks/usePersistentState.ts
@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react';
+
+type TPersisntentStateReturn<T extends unknown> = [T, (val: T) => void];
+
+export const usePersistentState = <T extends unknown>(
+  initialValue: T,
+  persistenceKey: string
+): TPersisntentStateReturn<T> => {
+  const [val, setVal] = useState<T>(initialValue);
+
+  useEffect(() => {
+    const temp = localStorage.getItem(persistenceKey);
+    if (temp) {
+      const { key } = JSON.parse(temp);
+      setVal(key);
+    }
+  }, []);
+
+  const setState = (state: T) => {
+    localStorage.setItem(persistenceKey, JSON.stringify({ key: state }));
+    setVal(state);
+  };
+
+  return [val, setState];
+};

From 4cce75d1284bc3b0ff276fc0cae4df3d66e4485f Mon Sep 17 00:00:00 2001
From: akhilmhdh <akhilmhdh@gmail.com>
Date: Sun, 19 Mar 2023 00:37:53 +0530
Subject: [PATCH 3/7] feat(ui): implemented the new dashboard page

---
 frontend/package-lock.json                    |  442 +++++-
 frontend/package.json                         |    2 +
 frontend/src/pages/_app.tsx                   |   33 +-
 frontend/src/pages/dashboard/[id].tsx         | 1225 +----------------
 frontend/src/styles/globals.css               |   38 +-
 .../src/views/DashboardPage/DashboardPage.tsx |  673 +++++++++
 .../DashboardPage/DashboardPage.utils.ts      |  231 ++++
 .../CompareSecret/CompareSecret.tsx           |   64 +
 .../components/CompareSecret/index.tsx        |    1 +
 .../CreateTagModal/CreateTagModal.tsx         |   55 +
 .../components/CreateTagModal/index.tsx       |    1 +
 .../components/PitDrawer/PitDrawer.tsx        |   76 +
 .../components/PitDrawer/index.tsx            |    1 +
 .../SecretDetailDrawer/GenRandomNumber.tsx    |   52 +
 .../SecretDetailDrawer/SecretDetailDrawer.tsx |  211 +++
 .../components/SecretDetailDrawer/index.tsx   |    1 +
 .../SecretDropzone/SecretDropzone.tsx         |  130 ++
 .../components/SecretDropzone/index.tsx       |    1 +
 .../SecretInputRow/SecretInputRow.tsx         |  343 +++++
 .../components/SecretInputRow/index.tsx       |    1 +
 .../SecretTableHeader/SecretTableHeader.tsx   |   49 +
 .../components/SecretTableHeader/index.tsx    |    1 +
 frontend/src/views/DashboardPage/index.tsx    |    1 +
 frontend/tailwind.config.js                   |   19 +
 24 files changed, 2405 insertions(+), 1246 deletions(-)
 create mode 100644 frontend/src/views/DashboardPage/DashboardPage.tsx
 create mode 100644 frontend/src/views/DashboardPage/DashboardPage.utils.ts
 create mode 100644 frontend/src/views/DashboardPage/components/CompareSecret/CompareSecret.tsx
 create mode 100644 frontend/src/views/DashboardPage/components/CompareSecret/index.tsx
 create mode 100644 frontend/src/views/DashboardPage/components/CreateTagModal/CreateTagModal.tsx
 create mode 100644 frontend/src/views/DashboardPage/components/CreateTagModal/index.tsx
 create mode 100644 frontend/src/views/DashboardPage/components/PitDrawer/PitDrawer.tsx
 create mode 100644 frontend/src/views/DashboardPage/components/PitDrawer/index.tsx
 create mode 100644 frontend/src/views/DashboardPage/components/SecretDetailDrawer/GenRandomNumber.tsx
 create mode 100644 frontend/src/views/DashboardPage/components/SecretDetailDrawer/SecretDetailDrawer.tsx
 create mode 100644 frontend/src/views/DashboardPage/components/SecretDetailDrawer/index.tsx
 create mode 100644 frontend/src/views/DashboardPage/components/SecretDropzone/SecretDropzone.tsx
 create mode 100644 frontend/src/views/DashboardPage/components/SecretDropzone/index.tsx
 create mode 100644 frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx
 create mode 100644 frontend/src/views/DashboardPage/components/SecretInputRow/index.tsx
 create mode 100644 frontend/src/views/DashboardPage/components/SecretTableHeader/SecretTableHeader.tsx
 create mode 100644 frontend/src/views/DashboardPage/components/SecretTableHeader/index.tsx
 create mode 100644 frontend/src/views/DashboardPage/index.tsx

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index ad099a70d..384f3a31d 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -24,11 +24,13 @@
         "@radix-ui/react-hover-card": "^1.0.3",
         "@radix-ui/react-label": "^2.0.0",
         "@radix-ui/react-popover": "^1.0.3",
+        "@radix-ui/react-popper": "^1.1.1",
         "@radix-ui/react-progress": "^1.0.1",
         "@radix-ui/react-select": "^1.2.0",
         "@radix-ui/react-switch": "^1.0.1",
         "@radix-ui/react-tabs": "^1.0.2",
         "@radix-ui/react-toast": "^1.1.2",
+        "@radix-ui/react-tooltip": "^1.0.4",
         "@reduxjs/toolkit": "^1.8.3",
         "@stripe/react-stripe-js": "^1.16.3",
         "@stripe/stripe-js": "^1.46.0",
@@ -3310,12 +3312,25 @@
       }
     },
     "node_modules/@radix-ui/react-arrow": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.1.tgz",
-      "integrity": "sha512-1yientwXqXcErDHEv8av9ZVNEBldH8L9scVR3is20lL+jOCfcJyMFZFEY5cgIrgexsq1qggSXqiEL/d/4f+QXA==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.2.tgz",
+      "integrity": "sha512-fqYwhhI9IarZ0ll2cUSfKuXHlJK0qE4AfnRrPBbRwEH/4mGQn04/QFGomLi8TXWIdv9WJk//KgGm+aDxVIr1wA==",
       "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-primitive": "1.0.1"
+        "@radix-ui/react-primitive": "1.0.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-arrow/node_modules/@radix-ui/react-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.2.tgz",
+      "integrity": "sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-slot": "1.0.1"
       },
       "peerDependencies": {
         "react": "^16.8 || ^17.0 || ^18.0",
@@ -3520,6 +3535,41 @@
         "react-dom": "^16.8 || ^17.0 || ^18.0"
       }
     },
+    "node_modules/@radix-ui/react-hover-card/node_modules/@radix-ui/react-arrow": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.1.tgz",
+      "integrity": "sha512-1yientwXqXcErDHEv8av9ZVNEBldH8L9scVR3is20lL+jOCfcJyMFZFEY5cgIrgexsq1qggSXqiEL/d/4f+QXA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-hover-card/node_modules/@radix-ui/react-popper": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.0.tgz",
+      "integrity": "sha512-07U7jpI0dZcLRAxT7L9qs6HecSoPhDSJybF7mEGHJDBDv+ZoGCvIlva0s+WxMXwJEav+ckX3hAlXBtnHmuvlCQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@floating-ui/react-dom": "0.7.2",
+        "@radix-ui/react-arrow": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.1",
+        "@radix-ui/react-use-callback-ref": "1.0.0",
+        "@radix-ui/react-use-layout-effect": "1.0.0",
+        "@radix-ui/react-use-rect": "1.0.0",
+        "@radix-ui/react-use-size": "1.0.0",
+        "@radix-ui/rect": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
     "node_modules/@radix-ui/react-id": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.0.tgz",
@@ -3575,6 +3625,41 @@
         "react-dom": "^16.8 || ^17.0 || ^18.0"
       }
     },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-arrow": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.1.tgz",
+      "integrity": "sha512-1yientwXqXcErDHEv8av9ZVNEBldH8L9scVR3is20lL+jOCfcJyMFZFEY5cgIrgexsq1qggSXqiEL/d/4f+QXA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-popper": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.0.tgz",
+      "integrity": "sha512-07U7jpI0dZcLRAxT7L9qs6HecSoPhDSJybF7mEGHJDBDv+ZoGCvIlva0s+WxMXwJEav+ckX3hAlXBtnHmuvlCQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@floating-ui/react-dom": "0.7.2",
+        "@radix-ui/react-arrow": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.1",
+        "@radix-ui/react-use-callback-ref": "1.0.0",
+        "@radix-ui/react-use-layout-effect": "1.0.0",
+        "@radix-ui/react-use-rect": "1.0.0",
+        "@radix-ui/react-use-size": "1.0.0",
+        "@radix-ui/rect": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
     "node_modules/@radix-ui/react-popover": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.0.3.tgz",
@@ -3602,7 +3687,20 @@
         "react-dom": "^16.8 || ^17.0 || ^18.0"
       }
     },
-    "node_modules/@radix-ui/react-popper": {
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-arrow": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.1.tgz",
+      "integrity": "sha512-1yientwXqXcErDHEv8av9ZVNEBldH8L9scVR3is20lL+jOCfcJyMFZFEY5cgIrgexsq1qggSXqiEL/d/4f+QXA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-popper": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.0.tgz",
       "integrity": "sha512-07U7jpI0dZcLRAxT7L9qs6HecSoPhDSJybF7mEGHJDBDv+ZoGCvIlva0s+WxMXwJEav+ckX3hAlXBtnHmuvlCQ==",
@@ -3624,6 +3722,41 @@
         "react-dom": "^16.8 || ^17.0 || ^18.0"
       }
     },
+    "node_modules/@radix-ui/react-popper": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.1.tgz",
+      "integrity": "sha512-keYDcdMPNMjSC8zTsZ8wezUMiWM9Yj14wtF3s0PTIs9srnEPC9Kt2Gny1T3T81mmSeyDjZxsD9N5WCwNNb712w==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@floating-ui/react-dom": "0.7.2",
+        "@radix-ui/react-arrow": "1.0.2",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.2",
+        "@radix-ui/react-use-callback-ref": "1.0.0",
+        "@radix-ui/react-use-layout-effect": "1.0.0",
+        "@radix-ui/react-use-rect": "1.0.0",
+        "@radix-ui/react-use-size": "1.0.0",
+        "@radix-ui/rect": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-popper/node_modules/@radix-ui/react-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.2.tgz",
+      "integrity": "sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-slot": "1.0.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
     "node_modules/@radix-ui/react-portal": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.1.tgz",
@@ -3732,6 +3865,41 @@
         "react-dom": "^16.8 || ^17.0 || ^18.0"
       }
     },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-arrow": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.1.tgz",
+      "integrity": "sha512-1yientwXqXcErDHEv8av9ZVNEBldH8L9scVR3is20lL+jOCfcJyMFZFEY5cgIrgexsq1qggSXqiEL/d/4f+QXA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-popper": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.0.tgz",
+      "integrity": "sha512-07U7jpI0dZcLRAxT7L9qs6HecSoPhDSJybF7mEGHJDBDv+ZoGCvIlva0s+WxMXwJEav+ckX3hAlXBtnHmuvlCQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@floating-ui/react-dom": "0.7.2",
+        "@radix-ui/react-arrow": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.1",
+        "@radix-ui/react-use-callback-ref": "1.0.0",
+        "@radix-ui/react-use-layout-effect": "1.0.0",
+        "@radix-ui/react-use-rect": "1.0.0",
+        "@radix-ui/react-use-size": "1.0.0",
+        "@radix-ui/rect": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.1.tgz",
@@ -3807,6 +3975,65 @@
         "react-dom": "^16.8 || ^17.0 || ^18.0"
       }
     },
+    "node_modules/@radix-ui/react-tooltip": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.0.4.tgz",
+      "integrity": "sha512-2h0BvJipRSv7nszzOCdAqb8fH7+Igz24GV1M4aCb/3UPfeMQ+clb1UM5/z2msW3Khir795OCQw2G74YGxjueWw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-dismissable-layer": "1.0.2",
+        "@radix-ui/react-id": "1.0.0",
+        "@radix-ui/react-popper": "1.1.0",
+        "@radix-ui/react-portal": "1.0.1",
+        "@radix-ui/react-presence": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.1",
+        "@radix-ui/react-slot": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.0",
+        "@radix-ui/react-visually-hidden": "1.0.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-arrow": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.1.tgz",
+      "integrity": "sha512-1yientwXqXcErDHEv8av9ZVNEBldH8L9scVR3is20lL+jOCfcJyMFZFEY5cgIrgexsq1qggSXqiEL/d/4f+QXA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-popper": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.0.tgz",
+      "integrity": "sha512-07U7jpI0dZcLRAxT7L9qs6HecSoPhDSJybF7mEGHJDBDv+ZoGCvIlva0s+WxMXwJEav+ckX3hAlXBtnHmuvlCQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@floating-ui/react-dom": "0.7.2",
+        "@radix-ui/react-arrow": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.1",
+        "@radix-ui/react-use-callback-ref": "1.0.0",
+        "@radix-ui/react-use-layout-effect": "1.0.0",
+        "@radix-ui/react-use-rect": "1.0.0",
+        "@radix-ui/react-use-size": "1.0.0",
+        "@radix-ui/rect": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz",
@@ -24530,12 +24757,23 @@
       }
     },
     "@radix-ui/react-arrow": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.1.tgz",
-      "integrity": "sha512-1yientwXqXcErDHEv8av9ZVNEBldH8L9scVR3is20lL+jOCfcJyMFZFEY5cgIrgexsq1qggSXqiEL/d/4f+QXA==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.2.tgz",
+      "integrity": "sha512-fqYwhhI9IarZ0ll2cUSfKuXHlJK0qE4AfnRrPBbRwEH/4mGQn04/QFGomLi8TXWIdv9WJk//KgGm+aDxVIr1wA==",
       "requires": {
         "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-primitive": "1.0.1"
+        "@radix-ui/react-primitive": "1.0.2"
+      },
+      "dependencies": {
+        "@radix-ui/react-primitive": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.2.tgz",
+          "integrity": "sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-slot": "1.0.1"
+          }
+        }
       }
     },
     "@radix-ui/react-checkbox": {
@@ -24690,6 +24928,35 @@
         "@radix-ui/react-presence": "1.0.0",
         "@radix-ui/react-primitive": "1.0.1",
         "@radix-ui/react-use-controllable-state": "1.0.0"
+      },
+      "dependencies": {
+        "@radix-ui/react-arrow": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.1.tgz",
+          "integrity": "sha512-1yientwXqXcErDHEv8av9ZVNEBldH8L9scVR3is20lL+jOCfcJyMFZFEY5cgIrgexsq1qggSXqiEL/d/4f+QXA==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-primitive": "1.0.1"
+          }
+        },
+        "@radix-ui/react-popper": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.0.tgz",
+          "integrity": "sha512-07U7jpI0dZcLRAxT7L9qs6HecSoPhDSJybF7mEGHJDBDv+ZoGCvIlva0s+WxMXwJEav+ckX3hAlXBtnHmuvlCQ==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@floating-ui/react-dom": "0.7.2",
+            "@radix-ui/react-arrow": "1.0.1",
+            "@radix-ui/react-compose-refs": "1.0.0",
+            "@radix-ui/react-context": "1.0.0",
+            "@radix-ui/react-primitive": "1.0.1",
+            "@radix-ui/react-use-callback-ref": "1.0.0",
+            "@radix-ui/react-use-layout-effect": "1.0.0",
+            "@radix-ui/react-use-rect": "1.0.0",
+            "@radix-ui/react-use-size": "1.0.0",
+            "@radix-ui/rect": "1.0.0"
+          }
+        }
       }
     },
     "@radix-ui/react-id": {
@@ -24734,6 +25001,35 @@
         "@radix-ui/react-use-callback-ref": "1.0.0",
         "aria-hidden": "^1.1.1",
         "react-remove-scroll": "2.5.5"
+      },
+      "dependencies": {
+        "@radix-ui/react-arrow": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.1.tgz",
+          "integrity": "sha512-1yientwXqXcErDHEv8av9ZVNEBldH8L9scVR3is20lL+jOCfcJyMFZFEY5cgIrgexsq1qggSXqiEL/d/4f+QXA==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-primitive": "1.0.1"
+          }
+        },
+        "@radix-ui/react-popper": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.0.tgz",
+          "integrity": "sha512-07U7jpI0dZcLRAxT7L9qs6HecSoPhDSJybF7mEGHJDBDv+ZoGCvIlva0s+WxMXwJEav+ckX3hAlXBtnHmuvlCQ==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@floating-ui/react-dom": "0.7.2",
+            "@radix-ui/react-arrow": "1.0.1",
+            "@radix-ui/react-compose-refs": "1.0.0",
+            "@radix-ui/react-context": "1.0.0",
+            "@radix-ui/react-primitive": "1.0.1",
+            "@radix-ui/react-use-callback-ref": "1.0.0",
+            "@radix-ui/react-use-layout-effect": "1.0.0",
+            "@radix-ui/react-use-rect": "1.0.0",
+            "@radix-ui/react-use-size": "1.0.0",
+            "@radix-ui/rect": "1.0.0"
+          }
+        }
       }
     },
     "@radix-ui/react-popover": {
@@ -24757,24 +25053,64 @@
         "@radix-ui/react-use-controllable-state": "1.0.0",
         "aria-hidden": "^1.1.1",
         "react-remove-scroll": "2.5.5"
+      },
+      "dependencies": {
+        "@radix-ui/react-arrow": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.1.tgz",
+          "integrity": "sha512-1yientwXqXcErDHEv8av9ZVNEBldH8L9scVR3is20lL+jOCfcJyMFZFEY5cgIrgexsq1qggSXqiEL/d/4f+QXA==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-primitive": "1.0.1"
+          }
+        },
+        "@radix-ui/react-popper": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.0.tgz",
+          "integrity": "sha512-07U7jpI0dZcLRAxT7L9qs6HecSoPhDSJybF7mEGHJDBDv+ZoGCvIlva0s+WxMXwJEav+ckX3hAlXBtnHmuvlCQ==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@floating-ui/react-dom": "0.7.2",
+            "@radix-ui/react-arrow": "1.0.1",
+            "@radix-ui/react-compose-refs": "1.0.0",
+            "@radix-ui/react-context": "1.0.0",
+            "@radix-ui/react-primitive": "1.0.1",
+            "@radix-ui/react-use-callback-ref": "1.0.0",
+            "@radix-ui/react-use-layout-effect": "1.0.0",
+            "@radix-ui/react-use-rect": "1.0.0",
+            "@radix-ui/react-use-size": "1.0.0",
+            "@radix-ui/rect": "1.0.0"
+          }
+        }
       }
     },
     "@radix-ui/react-popper": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.0.tgz",
-      "integrity": "sha512-07U7jpI0dZcLRAxT7L9qs6HecSoPhDSJybF7mEGHJDBDv+ZoGCvIlva0s+WxMXwJEav+ckX3hAlXBtnHmuvlCQ==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.1.tgz",
+      "integrity": "sha512-keYDcdMPNMjSC8zTsZ8wezUMiWM9Yj14wtF3s0PTIs9srnEPC9Kt2Gny1T3T81mmSeyDjZxsD9N5WCwNNb712w==",
       "requires": {
         "@babel/runtime": "^7.13.10",
         "@floating-ui/react-dom": "0.7.2",
-        "@radix-ui/react-arrow": "1.0.1",
+        "@radix-ui/react-arrow": "1.0.2",
         "@radix-ui/react-compose-refs": "1.0.0",
         "@radix-ui/react-context": "1.0.0",
-        "@radix-ui/react-primitive": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.2",
         "@radix-ui/react-use-callback-ref": "1.0.0",
         "@radix-ui/react-use-layout-effect": "1.0.0",
         "@radix-ui/react-use-rect": "1.0.0",
         "@radix-ui/react-use-size": "1.0.0",
         "@radix-ui/rect": "1.0.0"
+      },
+      "dependencies": {
+        "@radix-ui/react-primitive": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.2.tgz",
+          "integrity": "sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-slot": "1.0.1"
+          }
+        }
       }
     },
     "@radix-ui/react-portal": {
@@ -24859,6 +25195,35 @@
         "@radix-ui/react-visually-hidden": "1.0.1",
         "aria-hidden": "^1.1.1",
         "react-remove-scroll": "2.5.5"
+      },
+      "dependencies": {
+        "@radix-ui/react-arrow": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.1.tgz",
+          "integrity": "sha512-1yientwXqXcErDHEv8av9ZVNEBldH8L9scVR3is20lL+jOCfcJyMFZFEY5cgIrgexsq1qggSXqiEL/d/4f+QXA==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-primitive": "1.0.1"
+          }
+        },
+        "@radix-ui/react-popper": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.0.tgz",
+          "integrity": "sha512-07U7jpI0dZcLRAxT7L9qs6HecSoPhDSJybF7mEGHJDBDv+ZoGCvIlva0s+WxMXwJEav+ckX3hAlXBtnHmuvlCQ==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@floating-ui/react-dom": "0.7.2",
+            "@radix-ui/react-arrow": "1.0.1",
+            "@radix-ui/react-compose-refs": "1.0.0",
+            "@radix-ui/react-context": "1.0.0",
+            "@radix-ui/react-primitive": "1.0.1",
+            "@radix-ui/react-use-callback-ref": "1.0.0",
+            "@radix-ui/react-use-layout-effect": "1.0.0",
+            "@radix-ui/react-use-rect": "1.0.0",
+            "@radix-ui/react-use-size": "1.0.0",
+            "@radix-ui/rect": "1.0.0"
+          }
+        }
       }
     },
     "@radix-ui/react-slot": {
@@ -24921,6 +25286,55 @@
         "@radix-ui/react-visually-hidden": "1.0.1"
       }
     },
+    "@radix-ui/react-tooltip": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.0.4.tgz",
+      "integrity": "sha512-2h0BvJipRSv7nszzOCdAqb8fH7+Igz24GV1M4aCb/3UPfeMQ+clb1UM5/z2msW3Khir795OCQw2G74YGxjueWw==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-dismissable-layer": "1.0.2",
+        "@radix-ui/react-id": "1.0.0",
+        "@radix-ui/react-popper": "1.1.0",
+        "@radix-ui/react-portal": "1.0.1",
+        "@radix-ui/react-presence": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.1",
+        "@radix-ui/react-slot": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.0",
+        "@radix-ui/react-visually-hidden": "1.0.1"
+      },
+      "dependencies": {
+        "@radix-ui/react-arrow": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.1.tgz",
+          "integrity": "sha512-1yientwXqXcErDHEv8av9ZVNEBldH8L9scVR3is20lL+jOCfcJyMFZFEY5cgIrgexsq1qggSXqiEL/d/4f+QXA==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-primitive": "1.0.1"
+          }
+        },
+        "@radix-ui/react-popper": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.0.tgz",
+          "integrity": "sha512-07U7jpI0dZcLRAxT7L9qs6HecSoPhDSJybF7mEGHJDBDv+ZoGCvIlva0s+WxMXwJEav+ckX3hAlXBtnHmuvlCQ==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@floating-ui/react-dom": "0.7.2",
+            "@radix-ui/react-arrow": "1.0.1",
+            "@radix-ui/react-compose-refs": "1.0.0",
+            "@radix-ui/react-context": "1.0.0",
+            "@radix-ui/react-primitive": "1.0.1",
+            "@radix-ui/react-use-callback-ref": "1.0.0",
+            "@radix-ui/react-use-layout-effect": "1.0.0",
+            "@radix-ui/react-use-rect": "1.0.0",
+            "@radix-ui/react-use-size": "1.0.0",
+            "@radix-ui/rect": "1.0.0"
+          }
+        }
+      }
+    },
     "@radix-ui/react-use-callback-ref": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index d53e40ca7..0e1d3a907 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -31,11 +31,13 @@
     "@radix-ui/react-hover-card": "^1.0.3",
     "@radix-ui/react-label": "^2.0.0",
     "@radix-ui/react-popover": "^1.0.3",
+    "@radix-ui/react-popper": "^1.1.1",
     "@radix-ui/react-progress": "^1.0.1",
     "@radix-ui/react-select": "^1.2.0",
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tabs": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.0.4",
     "@reduxjs/toolkit": "^1.8.3",
     "@stripe/react-stripe-js": "^1.16.3",
     "@stripe/stripe-js": "^1.46.0",
diff --git a/frontend/src/pages/_app.tsx b/frontend/src/pages/_app.tsx
index 2b5dd0fc2..30d2623b5 100644
--- a/frontend/src/pages/_app.tsx
+++ b/frontend/src/pages/_app.tsx
@@ -8,6 +8,7 @@ import { QueryClientProvider } from '@tanstack/react-query';
 
 import NotificationProvider from '@app/components/context/Notifications/NotificationProvider';
 import Telemetry from '@app/components/utilities/telemetry/Telemetry';
+import { TooltipProvider } from '@app/components/v2';
 import { publicPaths } from '@app/const';
 import {
   AuthProvider,
@@ -73,21 +74,23 @@ const App = ({ Component, pageProps, ...appProps }: NextAppProp): JSX.Element =>
 
   return (
     <QueryClientProvider client={queryClient}>
-      <AuthProvider>
-        <WorkspaceProvider>
-          <OrgProvider>
-            <SubscriptionProvider>
-              <UserProvider>
-                <NotificationProvider>
-                  <AppLayout>
-                    <Component {...pageProps} />
-                  </AppLayout>
-                </NotificationProvider>
-              </UserProvider>
-            </SubscriptionProvider>
-          </OrgProvider>
-        </WorkspaceProvider>
-      </AuthProvider>
+      <TooltipProvider>
+        <AuthProvider>
+          <WorkspaceProvider>
+            <OrgProvider>
+              <SubscriptionProvider>
+                <UserProvider>
+                  <NotificationProvider>
+                    <AppLayout>
+                      <Component {...pageProps} />
+                    </AppLayout>
+                  </NotificationProvider>
+                </UserProvider>
+              </SubscriptionProvider>
+            </OrgProvider>
+          </WorkspaceProvider>
+        </AuthProvider>
+      </TooltipProvider>
     </QueryClientProvider>
   );
 };
diff --git a/frontend/src/pages/dashboard/[id].tsx b/frontend/src/pages/dashboard/[id].tsx
index 799c05c39..4facb61ed 100644
--- a/frontend/src/pages/dashboard/[id].tsx
+++ b/frontend/src/pages/dashboard/[id].tsx
@@ -1,816 +1,13 @@
-/* eslint-disable no-nested-ternary */
-import { UIEvent, useCallback, useEffect, useRef, useState } from 'react';
 import Head from 'next/head';
-import Image from 'next/image';
-import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
-import {
-  faArrowDown,
-  faArrowLeft,
-  faArrowUp,
-  faCheck,
-  faClockRotateLeft,
-  faEye,
-  faEyeSlash,
-  faFolderOpen,
-  faMagnifyingGlass,
-  faPlus,
-  faXmark
-} from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Tag } from 'public/data/frequentInterfaces';
 
-import Button from '@app/components/basic/buttons/Button';
-import ListBox from '@app/components/basic/Listbox';
-import BottonRightPopup from '@app/components/basic/popups/BottomRightPopup';
-import { useNotificationContext } from '@app/components/context/Notifications/NotificationProvider';
-import ConfirmEnvOverwriteModal from '@app/components/dashboard/ConfirmEnvOverwriteModal';
-import DownloadSecretMenu from '@app/components/dashboard/DownloadSecretsMenu';
-import DropZone from '@app/components/dashboard/DropZone';
-import KeyPair from '@app/components/dashboard/KeyPair';
-import SideBar from '@app/components/dashboard/SideBar';
-import NavHeader from '@app/components/navigation/NavHeader';
-import { decryptAssymmetric, decryptSymmetric } from '@app/components/utilities/cryptography/crypto';
-import guidGenerator from '@app/components/utilities/randomId';
-import encryptSecrets from '@app/components/utilities/secrets/encryptSecrets';
-import getSecretsForProject from '@app/components/utilities/secrets/getSecretsForProject';
 import { getTranslatedServerSideProps } from '@app/components/utilities/withTranslateProps';
-import { IconButton } from '@app/components/v2';
-import { leaveConfirmDefaultMessage } from '@app/const';
-import getProjectSercetSnapshotsCount from '@app/ee/api/secrets/GetProjectSercetSnapshotsCount';
-import performSecretRollback from '@app/ee/api/secrets/PerformSecretRollback';
-import PITRecoverySidebar from '@app/ee/components/PITRecoverySidebar';
-import { useLeaveConfirm } from '@app/hooks';
+import { DashboardPage } from '@app/views/DashboardPage';
 
-// import addSecrets from '../api/files/AddSecrets';
-// import deleteSecrets from '../api/files/DeleteSecrets';
-// import updateSecrets from '../api/files/UpdateSecrets';
-import batchSecrets from '../api/files/batchSecrets';
-import getUser from '../api/user/getUser';
-import checkUserAction from '../api/userActions/checkUserAction';
-import registerUserAction from '../api/userActions/registerUserAction';
-import getLatestFileKey from '../api/workspace/getLatestFileKey';
-import getWorkspaceEnvironments from '../api/workspace/getWorkspaceEnvironments';
-import getWorkspaces from '../api/workspace/getWorkspaces';
-import getWorkspaceTags from '../api/workspace/getWorkspaceTags';
-
-type WorkspaceEnv = {
-  name: string;
-  slug: string;
-  isWriteDenied: boolean;
-  isReadDenied: boolean;
-};
-
-interface SecretDataProps {
-  pos: number;
-  key: string;
-  value: string | undefined;
-  valueOverride: string | undefined;
-  id: string;
-  idOverride: string | undefined;
-  comment: string;
-  tags: Tag[];
-}
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-interface OverrideProps {
-  id: string;
-  keyName: string;
-  value: string;
-  pos: number;
-  comment: string;
-}
-
-interface SnapshotProps {
-  id: string;
-  createdAt: string;
-  version: number;
-  secretVersions: {
-    id: string;
-    pos: number;
-    environment: string;
-    key: string;
-    value: string;
-    valueOverride: string;
-    comment: string;
-    tags: Tag[];
-  }[];
-}
-
-interface EncryptedSecretProps {
-  _id: string;
-  createdAt: string;
-  environment: string;
-  secretCommentCiphertext: string;
-  secretCommentIV: string;
-  secretCommentTag: string;
-  secretKeyCiphertext: string;
-  secretKeyIV: string;
-  secretKeyTag: string;
-  secretValueCiphertext: string;
-  secretValueIV: string;
-  secretValueTag: string;
-  type: 'personal' | 'shared';
-  tags: Tag[];
-}
-
-interface SecretProps {
-  key: string;
-  value: string | undefined;
-  type: 'personal' | 'shared';
-  comment: string;
-  id: string;
-  tags: Tag[];
-}
-
-/**
- * this function finds the teh duplicates in an array
- * @param arr - array of anything (e.g., with secret keys and types (personal/shared))
- * @returns - a list with duplicates
- */
-function findDuplicates(arr: any[]) {
-  const map = new Map();
-  return arr.filter((item) => {
-    if (map.has(item)) {
-      map.set(item, false);
-      return true;
-    }
-    map.set(item, true);
-    return false;
-  });
-}
-
-/**
- * This is the main component for the dashboard (aka the screen with all the encironemnt variable & secrets)
- * @returns
- */
-export default function Dashboard() {
-  const [data, setData] = useState<SecretDataProps[] | null>();
-  const [initialData, setInitialData] = useState<SecretDataProps[] | null | undefined>([]);
-  const router = useRouter();
-  const [blurred, setBlurred] = useState(true);
-  const [isKeyAvailable, setIsKeyAvailable] = useState(true);
-  const [isNew, setIsNew] = useState(false);
-  const [isLoading, setIsLoading] = useState(true);
-  const [searchKeys, setSearchKeys] = useState('');
-  const [errorDragAndDrop, setErrorDragAndDrop] = useState(false);
-  const [sortMethod, setSortMethod] = useState('alphabetical');
-  const [checkDocsPopUpVisible, setCheckDocsPopUpVisible] = useState(false);
-  const [hasUserEverPushed, setHasUserEverPushed] = useState(false);
-  const [sidebarSecretId, toggleSidebar] = useState('None');
-  const [PITSidebarOpen, togglePITSidebar] = useState(false);
-  const [sharedToHide, setSharedToHide] = useState<string[]>([]);
-  const [snapshotData, setSnapshotData] = useState<SnapshotProps>();
-  const [numSnapshots, setNumSnapshots] = useState<number>();
-  const [saveLoading, setSaveLoading] = useState(false);
-  const [autoCapitalization, setAutoCapitalization] = useState(false);
-  const [dropZoneData, setDropZoneData] = useState<SecretDataProps[]>();
-  const [projectTags, setProjectTags] = useState<Tag[]>([]);
-
-  const { hasUnsavedChanges, setHasUnsavedChanges } = useLeaveConfirm({ initialValue: false });
+const Dashboard = () => {
   const { t } = useTranslation();
-  const { createNotification } = useNotificationContext();
-
-  const workspaceId = router.query.id as string;
-  const [workspaceEnvs, setWorkspaceEnvs] = useState<WorkspaceEnv[]>([]);
-
-  const [selectedSnapshotEnv, setSelectedSnapshotEnv] = useState<WorkspaceEnv>();
-  const [selectedEnv, setSelectedEnv] = useState<WorkspaceEnv>();
-  const [atSecretAreaTop, setAtSecretsAreaTop] = useState(true);
-  const secretsTop = useRef<HTMLDivElement>(null);
-
-  const onSecretsAreaScroll = (event: UIEvent<HTMLDivElement>) => {
-    if (event.currentTarget.scrollTop !== 0) {
-      setAtSecretsAreaTop(false);
-    }
-  };
-
-  // TODO(akhilmhdh): change to FP
-  const sortValuesHandler = (
-    dataToSort: SecretDataProps[] | 1,
-    specificSortMethod?: 'alphabetical' | '-alphabetical'
-  ) => {
-    const howToSort = specificSortMethod === undefined ? sortMethod : specificSortMethod;
-    const sortedData = (dataToSort !== 1 ? dataToSort : data)!
-      .sort((a, b) =>
-        howToSort === 'alphabetical' ? a.key.localeCompare(b.key) : b.key.localeCompare(a.key)
-      )
-      .map((item: SecretDataProps, index: number) => ({
-        ...item,
-        pos: index
-      }));
-
-    setData(sortedData);
-    setIsLoading(false);
-  };
-
-  /**
-   * Reorder rows alphabetically or in the opprosite order
-   */
-  const reorderRows = (dataToReorder: SecretDataProps[] | 1) => {
-    if (dataToReorder) {
-      setSortMethod((prevSort) => (prevSort === 'alphabetical' ? '-alphabetical' : 'alphabetical'));
-
-      sortValuesHandler(dataToReorder, undefined);
-    }
-  };
-
-  useEffect(() => {
-    (async () => {
-      if (router.isReady && workspaceId === 'undefined') {
-        router.push('/noprojects');
-      } else try {
-        const { push, query } = router
-        const tempNumSnapshots = await getProjectSercetSnapshotsCount({
-          workspaceId
-        });
-        setNumSnapshots(tempNumSnapshots);
-        const userWorkspaces = await getWorkspaces();
-        const workspace = userWorkspaces.find((wp) => wp._id === workspaceId);
-        if (!workspace) {
-          push(`/dashboard/${userWorkspaces?.[0]?._id}`);
-        }
-        setAutoCapitalization(workspace?.autoCapitalization ?? true);
-
-        const accessibleEnvironments = await getWorkspaceEnvironments({ workspaceId });
-        setWorkspaceEnvs(accessibleEnvironments || []);
-
-        // set env
-        const env = accessibleEnvironments?.[0] || {
-          name: 'unknown',
-          slug: 'unknown'
-        };
-        setSelectedEnv(env);
-        setSelectedSnapshotEnv(env);
-
-        if (query.env) {
-          const index = accessibleEnvironments?.findIndex(({ slug }: { slug: string }) => slug === query.env)
-
-          setSelectedEnv({
-            name: accessibleEnvironments?.[index]?.name as string,
-            slug: query.env as string,
-            isWriteDenied: accessibleEnvironments?.[index]?.isWriteDenied as boolean,
-            isReadDenied: accessibleEnvironments?.[index]?.isReadDenied as boolean
-          })
-          setSelectedSnapshotEnv({
-            name: accessibleEnvironments?.[index]?.name as string,
-            slug: query.env as string,
-            isWriteDenied: accessibleEnvironments?.[index]?.isWriteDenied as boolean,
-            isReadDenied: accessibleEnvironments?.[index]?.isReadDenied as boolean
-          })
-
-        }
-
-        const user = await getUser();
-        setIsNew((Date.parse(String(new Date())) - Date.parse(user.createdAt)) / 60000 < 3);
-
-        const userAction = await checkUserAction({
-          action: 'first_time_secrets_pushed'
-        });
-        setHasUserEverPushed(!!userAction);
-
-        setProjectTags(await getWorkspaceTags({ workspaceId }));
-      } catch (error) {
-        console.log('Error', error);
-        setData(undefined);
-      }
-    })();
-  }, [workspaceId]);
-
-  useEffect(() => {
-    (async () => {
-      try {
-        setIsLoading(true);
-        setBlurred(true);
-        // ENV
-        let dataToSort;
-        if (selectedEnv) {
-          dataToSort = await getSecretsForProject({
-            env: selectedEnv.slug,
-            setIsKeyAvailable,
-            setData,
-            workspaceId
-          });
-          setInitialData(dataToSort);
-          reorderRows(dataToSort);
-        } else {
-          setIsLoading(false);
-        }
-      } catch (error) {
-        console.log('Error', error);
-        setData(undefined);
-      }
-    })();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedEnv]);
-
-  const addRow = () => {
-    setIsNew(false);
-    setData([
-      {
-        id: guidGenerator(),
-        idOverride: guidGenerator(),
-        pos: data!.length,
-        key: '',
-        value: '',
-        valueOverride: undefined,
-        comment: '',
-        tags: []
-      },
-      ...data!
-    ]);
-    if (!atSecretAreaTop) {
-      secretsTop.current?.scrollIntoView({ behavior: 'smooth' });
-    }
-  };
-
-  const addRowToBottom = () => {
-    setIsNew(false);
-    setData([
-      ...data!,
-      {
-        id: guidGenerator(),
-        idOverride: guidGenerator(),
-        pos: data!.length,
-        key: '',
-        value: '',
-        valueOverride: undefined,
-        comment: '',
-        tags: []
-      }
-    ]);
-  };
-
-  const deleteRow = ({ ids, secretName }: { ids: string[]; secretName: string }) => {
-    setHasUnsavedChanges(true);
-    toggleSidebar('None');
-    createNotification({
-      text: `${secretName || 'Secret'} has been deleted. Remember to save changes.`,
-      type: 'error'
-    });
-    sortValuesHandler(
-      data!.filter((row: SecretDataProps) => !ids.includes(row.id)),
-      sortMethod === 'alhpabetical' ? '-alphabetical' : 'alphabetical'
-    );
-  };
-
-  const modifyValue = (value: string, id: string) => {
-    setData((oldData) => oldData?.map((e) => ((e.id ? e.id : e.idOverride) === id ? { ...e, value } : e)));
-    setHasUnsavedChanges(true);
-  };
-
-  const modifyValueOverride = (valueOverride: string | undefined, id: string) => {
-    setData((oldData) => oldData?.map((e) => ((e.id ? e.id : e.idOverride) === id ? { ...e, valueOverride } : e)));
-    setHasUnsavedChanges(true);
-  };
-
-  const modifyKey = (key: string, id: string) => {
-    setData((oldData) => oldData?.map((e) => ((e.id ? e.id : e.idOverride) === id ? { ...e, key } : e)));
-    setHasUnsavedChanges(true);
-  };
-
-  const modifyComment = (comment: string, id: string) => {
-    setData((oldData) => oldData?.map((e) => ((e.id ? e.id : e.idOverride) === id ? { ...e, comment } : e)));
-    setHasUnsavedChanges(true);
-  };
-
-  const modifyTags = (tags: Tag[], id: string) => {
-    setData((oldData) => oldData?.map((e) => ((e.id ? e.id : e.idOverride) === id ? { ...e, tags } : e)));
-    setHasUnsavedChanges(true);
-  };
-
-  // For speed purposes and better perforamance, we are using useCallback
-  const listenChangeValue = useCallback((value: string, id: string) => {
-    modifyValue(value, id);
-  }, []);
-
-  const listenChangeValueOverride = useCallback((value: string | undefined, id: string) => {
-    modifyValueOverride(value, id);
-  }, []);
-
-  const listenChangeKey = useCallback((value: string, id: string) => {
-    modifyKey(value, id);
-  }, []);
-
-  const listenChangeComment = useCallback((value: string, id: string) => {
-    modifyComment(value, id);
-  }, []);
-
-  const listenChangeTags = useCallback((value: Tag[], id: string) => {
-    modifyTags(value, id);
-  }, []);
-
-  /**
-   * Save the changes of environment variables and push them to the database
-   */
-  // TODO(akhilmhdh): split and make it small
-  const savePush = async (dataToPush?: SecretDataProps[]) => {
-      try {
-        setSaveLoading(true);
-        let newData: SecretDataProps[] | null | undefined;
-        // dataToPush is mostly used for rollbacks, otherwise we always take the current state data
-        if ((dataToPush ?? [])?.length > 0) {
-          newData = dataToPush;
-        } else {
-          newData = data;
-        }
-
-        // Checking if any of the secret keys start with a number - if so, don't do anything
-        const nameErrors = !newData!
-          .map((secret) => !Number.isNaN(Number(secret.key.charAt(0))))
-          .every((v) => v === false);
-        const emptyNameError = !newData!
-          .map((secret) => secret.key.length === 0)
-          .every((v) => v === false);
-        const duplicatesExist =
-          findDuplicates(data!.map((item: SecretDataProps) => item.key)).length > 0;
-
-        if (emptyNameError) {
-          setSaveLoading(false);
-          return createNotification({
-            text: 'You can`t have empty secret names.',
-            type: 'error'
-          });
-        }
-
-        if (nameErrors) {
-          setSaveLoading(false);
-          return createNotification({
-            text: 'Solve all name errors before saving secrets.',
-            type: 'error'
-          });
-        }
-
-        if (duplicatesExist) {
-          setSaveLoading(false);
-          return createNotification({
-            text: 'Remove duplicated secret names before saving.',
-            type: 'error'
-          });
-        }
-
-        if (selectedEnv?.isWriteDenied) {
-          setSaveLoading(false);
-          return createNotification({
-            text: 'You are not allowed to edit this environment',
-            type: 'error'
-          });
-        }
-
-        // Once "Save changes" is clicked, disable that button
-        setHasUnsavedChanges(false);
-
-        const secretsToBeDeleted = initialData!
-          .filter(
-            (initDataPoint) =>
-              !newData!.map((newDataPoint) => newDataPoint.id).includes(initDataPoint.id)
-          )
-          .map((secret) => secret.id);
-        console.log('delete', secretsToBeDeleted.length);
-
-        const secretsToBeAdded = newData!.filter(
-          (newDataPoint) =>
-            !initialData!.map((initDataPoint) => initDataPoint.id).includes(newDataPoint.id)
-        );
-        console.log('add', secretsToBeAdded.length);
-
-        const secretsToBeUpdated = newData!.filter((newDataPoint) =>
-          initialData!
-            .filter(
-              (initDataPoint) =>
-                newData!.filter((dataPoint) => dataPoint.id)
-                .map((dataPoint) => dataPoint.id).includes(initDataPoint.id) &&
-                (newData!.filter((dataPoint) => dataPoint.id === initDataPoint.id)[0].value !==
-                  initDataPoint.value ||
-                newData!.filter((dataPoint) => dataPoint.id === initDataPoint.id)[0].key !==
-                  initDataPoint.key ||
-                newData!.filter((dataPoint) => dataPoint.id === initDataPoint.id)[0].comment !==
-                  initDataPoint.comment ||
-                JSON.stringify(newData!.filter((dataPoint) => dataPoint.id === initDataPoint.id)[0]?.tags) !==
-                  JSON.stringify(initDataPoint?.tags))
-            )
-            .map((secret) => secret.id)
-            .includes(newDataPoint.id)
-        );
-        console.log('update', secretsToBeUpdated.length);
-
-        const newOverrides = newData!.filter(
-          (newDataPoint) => newDataPoint.valueOverride !== undefined
-        );
-        const initOverrides = initialData!.filter(
-          (initDataPoint) => initDataPoint.valueOverride !== undefined
-        );
-
-        const overridesToBeDeleted = initOverrides
-          .filter(
-            (initDataPoint) =>
-              !newOverrides!.map((newDataPoint) => newDataPoint.id).includes(initDataPoint.id)
-          )
-          .map((secret) => String(secret.idOverride));
-        console.log('override delete', overridesToBeDeleted.length);
-
-        const overridesToBeAdded = newOverrides!
-          .filter(
-            (newDataPoint) =>
-              !initOverrides.map((initDataPoint) => initDataPoint.idOverride).includes(newDataPoint.idOverride)
-          )
-          .map((override) => ({
-            pos: override.pos,
-            key: override.key,
-            value: String(override.valueOverride),
-            valueOverride: override.valueOverride,
-            comment: '',
-            id: String(override.idOverride),
-            idOverride: String(override.idOverride),
-            tags: override.tags
-          }));
-        console.log('override add', overridesToBeAdded.length);
-
-        const overridesToBeUpdated = newOverrides!
-          .filter((newDataPoint) =>
-            initOverrides
-              .filter(
-                (initDataPoint) =>
-                  newOverrides!.map((dataPoint) => dataPoint.idOverride)
-                  .includes(initDataPoint.idOverride) &&
-                  (newOverrides!.filter((dataPoint) => dataPoint.idOverride === initDataPoint.idOverride)[0]
-                    .valueOverride !== initDataPoint.valueOverride ||
-                   newOverrides!.filter((dataPoint) => dataPoint.idOverride === initDataPoint.idOverride)[0].key !==
-                    initDataPoint.key ||
-                   (newOverrides!.filter((dataPoint) => dataPoint.idOverride === initDataPoint.idOverride)[0]
-                    .comment || '') !== (initDataPoint.comment || '') 
-                    ||
-                   (JSON.stringify(newOverrides!.filter((dataPoint) => dataPoint.idOverride === initDataPoint.idOverride)[0]?.tags) || '') !==
-                    (JSON.stringify(initDataPoint?.tags) || '')
-                    )
-              )
-              .map((secret) => secret.idOverride)
-              .includes(newDataPoint.idOverride)
-          )
-          .map((override) => ({
-            pos: override.pos,
-            key: override.key,
-            value: String(override.valueOverride),
-            valueOverride: override.valueOverride,
-            comment: '',
-            id: String(override.idOverride),
-            idOverride: String(override.idOverride),
-            tags: override.tags
-          }));
-        console.log('override update', overridesToBeUpdated.length);
-
-        const requests: any = []; // TODO: fix any
-        if (secretsToBeDeleted.concat(overridesToBeDeleted).length > 0) {
-          secretsToBeDeleted.concat(overridesToBeDeleted).forEach((_id: string) => {
-            requests.push({
-              method: 'DELETE',
-              secret: {
-                _id
-              }
-            });
-          });
-        }
-        if (selectedEnv && secretsToBeAdded.concat(overridesToBeAdded).length > 0) {
-          const secrets = await encryptSecrets({
-            secretsToEncrypt: secretsToBeAdded.concat(overridesToBeAdded),
-            workspaceId,
-            env: selectedEnv.slug
-          });
-          if (secrets) {
-            secrets.forEach((secret) => {
-              requests.push({
-                method: 'POST',
-                secret: {
-                  type: secret.type,
-                  secretKeyCiphertext: secret.secretKeyCiphertext,
-                  secretKeyIV: secret.secretKeyIV,
-                  secretKeyTag: secret.secretKeyTag,
-                  secretValueCiphertext: secret.secretValueCiphertext,
-                  secretValueIV: secret.secretValueIV,
-                  secretValueTag: secret.secretValueTag,
-                  secretCommentCiphertext: secret.secretCommentCiphertext,
-                  secretCommentIV: secret.secretCommentIV,
-                  secretCommentTag: secret.secretCommentTag,
-                  tags: secret.tags
-                }
-              })
-            });
-          }
-        }
-        if (selectedEnv && !selectedEnv.isReadDenied && secretsToBeUpdated.concat(overridesToBeUpdated).length > 0) {
-          const secrets = await encryptSecrets({
-            secretsToEncrypt: secretsToBeUpdated.concat(overridesToBeUpdated),
-            workspaceId,
-            env: selectedEnv.slug
-          });
-          if (secrets) {
-            secrets.forEach((secret) => {
-              requests.push({
-                method: 'PATCH',
-                secret: {
-                  _id: secret.id,
-                  type: secret.type,
-                  secretKeyCiphertext: secret.secretKeyCiphertext,
-                  secretKeyIV: secret.secretKeyIV,
-                  secretKeyTag: secret.secretKeyTag,
-                  secretValueCiphertext: secret.secretValueCiphertext,
-                  secretValueIV: secret.secretValueIV,
-                  secretValueTag: secret.secretValueTag,
-                  secretCommentCiphertext: secret.secretCommentCiphertext,
-                  secretCommentIV: secret.secretCommentIV,
-                  secretCommentTag: secret.secretCommentTag,
-                  tags: secret.tags 
-                }
-              });
-            });
-          }
-        }
-        
-        let newSecrets;
-        if (selectedEnv && requests.length > 0) {
-          newSecrets = await batchSecrets({
-            workspaceId,
-            environment: selectedEnv.slug,
-            requests
-          });
-        }
-
-        let formattedNewDecryptedKeys;
-        if (newSecrets.createdSecrets) {
-          const latestKey = await getLatestFileKey({ workspaceId });
-
-          const PRIVATE_KEY = localStorage.getItem('PRIVATE_KEY') as string;
-
-          const tempDecryptedSecrets: SecretProps[] = [];
-          if (latestKey) {
-            // assymmetrically decrypt symmetric key with local private key
-            const key = decryptAssymmetric({
-              ciphertext: latestKey.latestKey.encryptedKey,
-              nonce: latestKey.latestKey.nonce,
-              publicKey: latestKey.latestKey.sender.publicKey,
-              privateKey: PRIVATE_KEY
-            });
-
-            // decrypt secret keys, values, and comments
-            newSecrets.createdSecrets.forEach((secret: EncryptedSecretProps) => {
-              const plainTextKey = decryptSymmetric({
-                ciphertext: secret.secretKeyCiphertext,
-                iv: secret.secretKeyIV,
-                tag: secret.secretKeyTag,
-                key
-              });
-
-              let plainTextValue;
-              if (secret.secretValueCiphertext !== undefined) {
-                plainTextValue = decryptSymmetric({
-                  ciphertext: secret.secretValueCiphertext,
-                  iv: secret.secretValueIV,
-                  tag: secret.secretValueTag,
-                  key
-                });
-              } else {
-                plainTextValue = undefined;
-              }
-
-              let plainTextComment;
-              if (secret.secretCommentCiphertext) {
-                plainTextComment = decryptSymmetric({
-                  ciphertext: secret.secretCommentCiphertext,
-                  iv: secret.secretCommentIV,
-                  tag: secret.secretCommentTag,
-                  key
-                });
-              } else {
-                plainTextComment = '';
-              }
-
-              tempDecryptedSecrets.push({
-                id: secret._id,
-                key: plainTextKey,
-                value: plainTextValue,
-                type: secret.type,
-                comment: plainTextComment,
-                tags: secret.tags
-              });
-            });
-          }
-
-          const secretKeys = [...new Set(tempDecryptedSecrets.map((secret) => secret.key))];
-
-          formattedNewDecryptedKeys = secretKeys.map((key, index) => ({
-            id: tempDecryptedSecrets.filter((secret) => secret.key === key && secret.type === 'shared')[0]
-              ?.id,
-            idOverride: tempDecryptedSecrets.filter(
-              (secret) => secret.key === key && secret.type === 'personal'
-            )[0]?.id,
-            pos: (newData?.filter(dp => !dp.id?.includes('-'))?.length ?? 0) + index,
-            key,
-            value: tempDecryptedSecrets.filter(
-              (secret) => secret.key === key && secret.type === 'shared'
-            )[0]?.value,
-            valueOverride: tempDecryptedSecrets.filter(
-              (secret) => secret.key === key && secret.type === 'personal'
-            )[0]?.value,
-            comment: tempDecryptedSecrets.filter(
-              (secret) => secret.key === key && secret.type === 'shared'
-            )[0]?.comment,
-            tags: tempDecryptedSecrets.filter(
-              (secret) => secret.key === key && secret.type === 'shared'
-            )[0]?.tags
-          }));
-
-          setInitialData(structuredClone(newData?.filter(dp => !dp.id?.includes('-')).concat(formattedNewDecryptedKeys.filter(dk => dk.id))));
-          setData(structuredClone(newData?.filter(dp => !dp.id?.includes('-')).concat(formattedNewDecryptedKeys.filter(dk => dk.id))))
-        } else {
-          setInitialData(structuredClone(newData));
-        }
-
-        // If this user has never saved environment variables before, show them a prompt to read docs
-        if (!hasUserEverPushed) {
-          setCheckDocsPopUpVisible(true);
-          await registerUserAction({ action: 'first_time_secrets_pushed' });
-        }
-
-        // increasing the number of project commits
-        setNumSnapshots((numSnapshots ?? 0) + 1);
-        setSaveLoading(false);
-        createNotification({
-          text: `Successfully saved secrets.`,
-          type: 'success'
-        });
-      } catch (error) {
-        console.log("Something went wrong while saving secrets: ", error)
-        createNotification({
-          text: `Something went wrong while saving secrets.`,
-          type: 'error'
-        });
-      }
-    return undefined;
-  };
-
-  const addDataWithMerge = (newData: SecretDataProps[], preserve?: 'old' | 'new') => {
-    setData((oldData) => {
-      let filteredOldData = oldData!;
-      let filteredNewData = newData;
-      if (preserve === 'new')
-        filteredOldData = oldData!.filter(
-          (oldDataPoint) => !newData.find((newDataPoint) => newDataPoint.key === oldDataPoint.key)
-        );
-      if (preserve === 'old')
-        filteredNewData = newData.filter(
-          (newDataPoint) => !oldData?.find((oldDataPoint) => oldDataPoint.key === newDataPoint.key)
-        );
-      return filteredOldData.concat(filteredNewData);
-    });
-    setHasUnsavedChanges(true);
-  };
-
-  const addData = (newData: SecretDataProps[]) => {
-    if (
-      newData.some((newDataPoint) => data?.find((dataPoint) => dataPoint.key === newDataPoint.key)) // if newData contains duplicates
-    ) {
-      setDropZoneData(newData);
-      return;
-    }
-    addDataWithMerge(newData);
-  };
-
-  const changeBlurred = () => {
-    setBlurred(!blurred);
-  };
-
-  const deleteCertainRow = ({ ids, secretName }: { ids: string[]; secretName: string }) => {
-    deleteRow({ ids, secretName });
-  };
-
-  const handleOnEnvironmentChange = (envName: string) => {
-    if (hasUnsavedChanges) {
-      if (!window.confirm(leaveConfirmDefaultMessage)) return;
-    }
-
-    const selectedWorkspaceEnv = workspaceEnvs.find(
-      ({ name }: { name: string }) => envName === name
-    ) || {
-      name: 'unknown',
-      slug: 'unknown',
-      isWriteDenied: false,
-      isReadDenied: false
-    };
-
-    if (selectedWorkspaceEnv) {
-      if (snapshotData) setSelectedSnapshotEnv(selectedWorkspaceEnv);
-      else setSelectedEnv(selectedWorkspaceEnv);
-    }
-
-    setHasUnsavedChanges(false);
-    router.push({
-      pathname: router.pathname,
-      query: { ...router.query, env: selectedWorkspaceEnv.slug },
-    })
-  };
-
-  return data ? (
-    <div className="bg-bunker-800 max-h-screen h-full relative flex flex-col justify-between text-white dark">
+  return (
+    <>
       <Head>
         <title>{t('common:head-title', { title: t('dashboard:title') })}</title>
         <link rel="icon" href="/infisical.ico" />
@@ -818,417 +15,13 @@ export default function Dashboard() {
         <meta property="og:title" content={String(t('dashboard:og-title'))} />
         <meta name="og:description" content={String(t('dashboard:og-description'))} />
       </Head>
-      <div className="flex flex-row h-full">
-        <ConfirmEnvOverwriteModal
-          isOpen={!!dropZoneData}
-          onClose={() => setDropZoneData(undefined)}
-          onOverwriteConfirm={(preserve) => {
-            addDataWithMerge(dropZoneData!, preserve);
-            setDropZoneData(undefined);
-          }}
-          duplicateKeys={
-            dropZoneData
-              ?.filter((newDataPoint) =>
-                data?.find((dataPoint) => dataPoint.key === newDataPoint.key)
-              )
-              .map((duplicate) => duplicate.key) ?? []
-          }
-        />
-        <div className="w-full max-h-96 pb-2 dark:[color-scheme:dark]">
-          <NavHeader pageName={t('dashboard:title')} isProjectRelated />
-          {checkDocsPopUpVisible && (
-            <BottonRightPopup
-              buttonText={t('dashboard:check-docs.button')}
-              buttonLink="https://infisical.com/docs/getting-started/introduction"
-              titleText={t('dashboard:check-docs.title')}
-              emoji="🎉"
-              textLine1={t('dashboard:check-docs.line1')}
-              textLine2={t('dashboard:check-docs.line2')}
-              setCheckDocsPopUpVisible={setCheckDocsPopUpVisible}
-            />
-          )}
-          <div className="flex flex-row justify-between items-center mx-6 mt-6 mb-3 text-xl">
-            {snapshotData && (
-              <div className="flex justify-start max-w-sm mt-1 mr-2">
-                <Button
-                  text={String(t('Go back to current'))}
-                  onButtonPressed={() => setSnapshotData(undefined)}
-                  color="mineshaft"
-                  size="md"
-                  icon={faArrowLeft}
-                />
-              </div>
-            )}
-            <div className="flex flex-row justify-start items-center text-3xl">
-              <div className="font-semibold mr-4 mt-1 flex flex-row items-center">
-                <p>{snapshotData ? 'Secret Snapshot' : t('dashboard:title')}</p>
-                {snapshotData && (
-                  <span className="bg-primary-800 text-sm ml-4 mt-1 px-1.5 rounded-md">
-                    {new Date(snapshotData.createdAt).toLocaleString()}
-                  </span>
-                )}
-                {selectedEnv?.isReadDenied && (
-                  <span className="bg-primary-500 text-black text-sm ml-4 mt-1 px-1.5 rounded-md">
-                    Add Only Mode
-                  </span>
-                )}
-              </div>
-              {!snapshotData && data?.length === 0 && selectedEnv && (
-                <ListBox
-                  isSelected={selectedEnv.name}
-                  data={workspaceEnvs.map(({ name }) => name)}
-                  onChange={handleOnEnvironmentChange}
-                />
-              )}
-            </div>
-            <div className="flex flex-row">
-              <div className="flex justify-start max-w-sm mt-1 mr-2">
-                {!selectedEnv?.isReadDenied && (
-                  <Button
-                    text={String(`${numSnapshots} ${t('Commits')}`)}
-                    onButtonPressed={() => {
-                      toggleSidebar('None');
-                      togglePITSidebar(true);
-                    }}
-                    color="mineshaft"
-                    size="md"
-                    icon={faClockRotateLeft}
-                  />
-                )}
-              </div>
-              {(data?.length !== 0 || hasUnsavedChanges) && !snapshotData && (
-                <div className="flex justify-start max-w-sm mt-1">
-                  <Button
-                    text={String(t('common:save-changes'))}
-                    onButtonPressed={savePush}
-                    color="primary"
-                    size="md"
-                    active={hasUnsavedChanges}
-                    iconDisabled={faCheck}
-                    textDisabled={String(t('common:saved'))}
-                    loading={saveLoading}
-                  />
-                </div>
-              )}
-              {snapshotData && selectedEnv && (
-                <div className="flex justify-start max-w-sm mt-1">
-                  <Button
-                    text={String(t('Rollback to this snapshot'))}
-                    onButtonPressed={async () => {
-                      // Update secrets in the state only for the current environment
-                      const rolledBackSecrets = snapshotData.secretVersions
-                        .filter((row) => row.environment === selectedEnv.slug)
-                        .map((sv, position) => ({
-                          id: sv.id,
-                          idOverride: sv.id,
-                          pos: position,
-                          valueOverride: sv.valueOverride,
-                          key: sv.key,
-                          value: sv.value,
-                          comment: '',
-                          tags: sv.tags
-                        }));
-
-                      // Perform the rollback globally
-                      const result = await performSecretRollback({ workspaceId, version: snapshotData.version });
-                      if (result === undefined) {
-                        createNotification({
-                          text: `Something went wrong during the rollback.`,
-                          type: 'error'
-                        });
-                      } else {
-                        setData(rolledBackSecrets);
-                        createNotification({
-                          text: `Successfully rolled back secrets.`,
-                          type: 'success'
-                        });
-                        setSnapshotData(undefined);
-                        setHasUnsavedChanges(false);
-                        togglePITSidebar(false);
-                      }
-                    }}
-                    color="primary"
-                    size="md"
-                    active={hasUnsavedChanges}
-                  />
-                </div>
-              )}
-            </div>
-          </div>
-          <div className="mx-6 w-full pr-12">
-            <div className="flex flex-col pb-1">
-              <div className="w-full flex flex-row items-start">
-                {(snapshotData || data?.length !== 0) && selectedEnv && (
-                  <>
-                    {!snapshotData ? (
-                      <ListBox
-                        isSelected={selectedEnv.name}
-                        data={workspaceEnvs.map(({ name }) => name)}
-                        onChange={handleOnEnvironmentChange}
-                      />
-                    ) : (
-                      <ListBox
-                        isSelected={selectedSnapshotEnv?.name || ''}
-                        data={workspaceEnvs.map(({ name }) => name)}
-                        onChange={handleOnEnvironmentChange}
-                      />
-                    )}
-                    <div className="h-10 w-full bg-mineshaft-700 hover:bg-white/10 ml-2 rounded-md flex flex-row items-center">
-                      <FontAwesomeIcon
-                        className="bg-transparent rounded-l-md py-[0.7rem] pl-4 pr-2 text-bunker-300 text-sm"
-                        icon={faMagnifyingGlass}
-                      />
-                      <input
-                        className="pl-2 text-bunker-300 rounded-r-md bg-transparent w-full h-full outline-none text-sm placeholder:hover:text-bunker-200 placeholder:focus:text-transparent"
-                        value={searchKeys}
-                        onChange={(e) => setSearchKeys(e.target.value)}
-                        placeholder={String(t('dashboard:search-keys'))}
-                      />
-                    </div>
-                    {!snapshotData && !selectedEnv.isReadDenied && (
-                      <div className="ml-2 min-w-max flex flex-row items-start justify-start">
-                        <DownloadSecretMenu data={data} env={selectedEnv.slug} />
-                      </div>
-                    )}
-                    <div className="ml-2 min-w-max flex flex-row items-start justify-start">
-                      <Button
-                        onButtonPressed={changeBlurred}
-                        color="mineshaft"
-                        size="icon-md"
-                        icon={blurred ? faEye : faEyeSlash}
-                      />
-                    </div>
-                    {!snapshotData && (
-                      <div className="relative ml-2 min-w-max flex flex-row items-start justify-end">
-                        <Button
-                          text={String(t('dashboard:add-key'))}
-                          onButtonPressed={addRow}
-                          color="mineshaft"
-                          icon={faPlus}
-                          size="md"
-                        />
-                        {isNew && (
-                          <span className="absolute right-0 flex h-3 w-3 items-center justify-center ml-4 mb-4">
-                            <span className="animate-ping absolute inline-flex rounded-full bg-primary/50 opacity-75 h-4 w-4" />
-                            <span className="relative inline-flex rounded-full h-3 w-3 bg-primary" />
-                          </span>
-                        )}
-                      </div>
-                    )}
-                  </>
-                )}
-              </div>
-            </div>
-            {isLoading ? (
-              <div className="flex items-center justify-center h-full my-48">
-                <Image
-                  src="/images/loading/loading.gif"
-                  height={60}
-                  width={100}
-                  alt="infisical loading indicator"
-                />
-              </div>
-            ) : (data?.length !== 0 || snapshotData?.secretVersions) ? (
-              <div className="flex flex-col w-full mt-1">
-                <div
-                  onScroll={onSecretsAreaScroll}
-                  className="mt-1 max-h-[calc(100vh-280px)] overflow-hidden overflow-y-scroll no-scrollbar no-scrollbar::-webkit-scrollbar border border-mineshaft-600 rounded-md"
-                >
-                  <div ref={secretsTop} />
-                  <div className="group flex flex-col items-center bg-mineshaft-800 border-b-2 border-mineshaft-500 duration-100 sticky top-0 z-[60]">
-                    <div className="relative flex flex-row justify-between w-full mr-auto max-h-14 items-center">
-                      <div className="w-1/5 border-r border-mineshaft-600 flex flex-row items-center">
-                        <div className='text-transparent text-xs flex items-center justify-center w-12 h-10 cursor-default'>0</div>
-                        <span className='px-2 text-bunker-300 font-semibold'>Key</span>
-                        {!snapshotData && <IconButton
-                          ariaLabel="copy icon"
-                          variant="plain"
-                          className="group relative ml-2"
-                          onClick={() => reorderRows(1)}
-                        >
-                          {sortMethod === 'alphabetical' ? <FontAwesomeIcon icon={faArrowUp} /> : <FontAwesomeIcon icon={faArrowDown} />}
-                        </IconButton>}
-                      </div>
-                      <div className="w-5/12 border-r border-mineshaft-600">
-                        <div className="flex items-center rounded-lg mt-4 md:mt-0 max-h-10">
-                          <div className="text-bunker-300 px-2 font-semibold h-10 flex items-center w-7/12">
-                            Value
-                          </div>
-                        </div>
-                      </div>
-                      <div className="w-[calc(10%)] border-r border-mineshaft-600">
-                        <div className="flex items-center max-h-16 overflow-hidden">
-                          <div className="text-bunker-300 px-2 font-semibold h-10 flex items-center w-3/12">
-                            Comment
-                          </div>
-                        </div>
-                      </div>
-                      <div className="w-2/12">
-                        <div className="flex items-center max-h-16">
-                          <div className="text-bunker-300 px-2 font-semibold h-10 flex items-center w-3/12">
-                            Tags
-                          </div>
-                        </div>
-                      </div>
-                      <div className="w-[1.5rem] h-[2.35rem] ml-auto rounded-md flex flex-row justify-center items-center" />
-                      <div className="w-[1.5rem] h-[2.35rem] mr-2 flex items-center justfy-center">
-                        <div
-                          onKeyDown={() => null}
-                          role="none"
-                          onClick={() => { }}
-                          className="invisible group-hover:visible"
-                        >
-                          <FontAwesomeIcon
-                            className="text-bunker-300 hover:text-red pl-2 pr-6 text-lg mt-0.5 invisible"
-                            icon={faXmark}
-                          />
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div className="bg-mineshaft-800 rounded-b-md border-bunker-600">
-                    {!snapshotData &&
-                      data
-                        ?.filter((row) =>
-                          row.key?.toUpperCase().includes(searchKeys.toUpperCase())
-                          || row.tags?.map(tag => tag.name).join(" ")?.toUpperCase().includes(searchKeys.toUpperCase())
-                          || row.comment?.toUpperCase().includes(searchKeys.toUpperCase()))
-                        .filter((row) => !sharedToHide.includes(row.id))
-                        // .filter((row) => row.value !== undefined)
-                        .map((keyPair) => (
-                          <KeyPair
-                            isCapitalized={autoCapitalization}
-                            key={keyPair.id ? keyPair.id : keyPair.idOverride}
-                            keyPair={keyPair}
-                            modifyValue={listenChangeValue}
-                            modifyValueOverride={listenChangeValueOverride}
-                            modifyKey={listenChangeKey}
-                            modifyComment={listenChangeComment}
-                            modifyTags={listenChangeTags}
-                            isBlurred={blurred}
-                            isDuplicate={findDuplicates(data?.map((item) => item.key))?.includes(
-                              keyPair.key
-                            )}
-                            toggleSidebar={toggleSidebar}
-                            togglePITSidebar={togglePITSidebar}
-                            sidebarSecretId={sidebarSecretId}
-                            isSnapshot={false}
-                            deleteRow={deleteCertainRow}
-                            tags={projectTags}
-                          />
-                        ))}
-                    {snapshotData &&
-                      snapshotData.secretVersions
-                        ?.sort((a, b) => a.key.localeCompare(b.key))
-                        .filter((row) => row.environment === selectedSnapshotEnv?.slug)
-                        .filter((row) => row.key.toUpperCase().includes(searchKeys.toUpperCase()))
-                        .map((keyPair) => (
-                          <KeyPair
-                            isCapitalized={autoCapitalization}
-                            key={keyPair.id}
-                            keyPair={keyPair}
-                            modifyValue={listenChangeValue}
-                            modifyValueOverride={listenChangeValueOverride}
-                            modifyKey={listenChangeKey}
-                            modifyComment={listenChangeComment}
-                            modifyTags={listenChangeTags}
-                            isBlurred={blurred}
-                            isDuplicate={findDuplicates(data?.map((item) => item.key))?.includes(
-                              keyPair.key
-                            )}
-                            toggleSidebar={toggleSidebar}
-                            sidebarSecretId={sidebarSecretId}
-                            isSnapshot
-                            tags={projectTags}
-                          />
-                        ))}
-                    <div className="bg-mineshaft-800 text-sm rounded-t-md hover:bg-mineshaft-700 h-10 w-full flex flex-row items-center border-b-2 border-mineshaft-500 sticky top-0 z-[60]">
-                      <div className="w-10" />
-                      <button
-                        type="button"
-                        className="text-bunker-300 relative font-normal h-10 flex items-center w-full cursor-pointer"
-                        onClick={addRowToBottom}
-                      >
-                        <FontAwesomeIcon icon={faPlus} className="mr-3" />
-                        <span className="text-sm">Add Secret</span>
-                      </button>
-                    </div>
-                  </div>
-                  {!snapshotData && (
-                    <div className="w-full px-2 pt-3">
-                      <DropZone
-                        setData={addData}
-                        setErrorDragAndDrop={setErrorDragAndDrop}
-                        createNewFile={addRow}
-                        errorDragAndDrop={errorDragAndDrop}
-                        setButtonReady={setHasUnsavedChanges}
-                        keysExist
-                        numCurrentRows={data.length}
-                      />
-                    </div>
-                  )}
-                </div>
-              </div>
-            ) : (
-              <div className="flex flex-col items-center justify-center h-full text-xl text-gray-400 mt-28">
-                {isKeyAvailable && !snapshotData && (
-                  <DropZone
-                    setData={setData}
-                    setErrorDragAndDrop={setErrorDragAndDrop}
-                    createNewFile={addRow}
-                    errorDragAndDrop={errorDragAndDrop}
-                    setButtonReady={setHasUnsavedChanges}
-                    numCurrentRows={data.length}
-                    keysExist={false}
-                  />
-                )}
-                {!isKeyAvailable && (
-                  <>
-                    <FontAwesomeIcon className="text-7xl mt-20 mb-8" icon={faFolderOpen} />
-                    <p>To view this file, contact your administrator for permission.</p>
-                    <p className="mt-1">They need to grant you access in the team tab.</p>
-                  </>
-                )}
-              </div>
-            )}
-          </div>
-        </div>
-        {sidebarSecretId !== 'None' && (
-          <SideBar
-            toggleSidebar={toggleSidebar}
-            data={data.filter(
-              (row: SecretDataProps) => row.id === sidebarSecretId && row.value !== undefined
-            )}
-            modifyKey={listenChangeKey}
-            modifyValue={listenChangeValue}
-            modifyValueOverride={listenChangeValueOverride}
-            modifyComment={listenChangeComment}
-            buttonReady={hasUnsavedChanges}
-            workspaceEnvs={workspaceEnvs}
-            selectedEnv={selectedEnv!}
-            workspaceId={workspaceId}
-            savePush={savePush}
-            sharedToHide={sharedToHide}
-            setSharedToHide={setSharedToHide}
-            deleteRow={deleteCertainRow}
-          />
-        )}
-        {PITSidebarOpen && (
-          <PITRecoverySidebar
-            toggleSidebar={togglePITSidebar}
-            chosenSnapshot={String(snapshotData?.id ? snapshotData.id : '')}
-            setSnapshotData={setSnapshotData}
-          />
-        )}
-      </div>
-    </div>
-  ) : (
-    <div className="relative z-10 w-10/12 mr-auto h-full ml-2 bg-bunker-800 flex flex-col items-center justify-center">
-      <Image src="/images/loading/loading.gif" height={70} width={120} alt="loading animation" />
-    </div>
+      <DashboardPage />
+    </>
   );
-}
+};
 
 Dashboard.requireAuth = true;
 
 export const getServerSideProps = getTranslatedServerSideProps(['dashboard']);
+
+export default Dashboard;
diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
index df32da8d0..feca862f6 100644
--- a/frontend/src/styles/globals.css
+++ b/frontend/src/styles/globals.css
@@ -2,6 +2,42 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer utilities {
+  .flex-0 {
+    flex:0;
+  }
+  .flex-2 {
+    flex-grow: 2;
+  }
+
+  .flex-3 {
+      flex-grow: 3;
+  }
+}
+
+@layer components {
+  .secret-table {
+    @apply bg-mineshaft-800 text-left text-bunker-300 w-full;
+  }
+
+  /* padding except for comment column */
+  .secret-table th {
+    @apply py-2 px-4 font-medium;
+  }
+
+  .secret-table td {
+    @apply py-1 px-1 pr-2 text-sm;
+  }
+
+  .secret-table th:not(:last-child),.secret-table td:not(:last-child) {
+    @apply border-r border-mineshaft-600;
+  }
+
+  .secret-table tr {
+    @apply border-b border-mineshaft-600;
+  }
+}
+
 @import '@fontsource/inter/400.css';
 @import '@fontsource/inter/500.css';
-@import '@fontsource/inter/700.css';
\ No newline at end of file
+@import '@fontsource/inter/700.css';
diff --git a/frontend/src/views/DashboardPage/DashboardPage.tsx b/frontend/src/views/DashboardPage/DashboardPage.tsx
new file mode 100644
index 000000000..1aec9f3b8
--- /dev/null
+++ b/frontend/src/views/DashboardPage/DashboardPage.tsx
@@ -0,0 +1,673 @@
+import { useEffect, useState } from 'react';
+import { FormProvider, useFieldArray, useForm, useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useRouter } from 'next/router';
+import {
+  faArrowLeft,
+  faCheck,
+  faClockRotateLeft,
+  faCodeCommit,
+  faDownload,
+  faEye,
+  faEyeSlash,
+  faMagnifyingGlass,
+  faPlus
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useQueryClient } from '@tanstack/react-query';
+
+import { useNotificationContext } from '@app/components/context/Notifications/NotificationProvider';
+import NavHeader from '@app/components/navigation/NavHeader';
+import {
+  Button,
+  IconButton,
+  Input,
+  Modal,
+  ModalContent,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Select,
+  SelectItem,
+  TableContainer,
+  Tag,
+  Tooltip
+} from '@app/components/v2';
+import { leaveConfirmDefaultMessage } from '@app/const';
+import { useWorkspace } from '@app/context';
+import { useLeaveConfirm, usePersistentState, usePopUp, useToggle } from '@app/hooks';
+import {
+  useBatchSecretsOp,
+  useCreateWsTag,
+  useGetProjectSecrets,
+  useGetSecretVersion,
+  useGetSnapshotSecrets,
+  useGetUserAction,
+  useGetUserWsEnvironments,
+  useGetUserWsKey,
+  useGetWorkspaceSecretSnapshots,
+  useGetWsSnapshotCount,
+  useGetWsTags,
+  usePerformSecretRollback,
+  useRegisterUserAction
+} from '@app/hooks/api';
+import { secretKeys } from '@app/hooks/api/secrets/queries';
+import { WorkspaceEnv } from '@app/hooks/api/types';
+
+import { CompareSecret } from './components/CompareSecret';
+import { CreateTagModal } from './components/CreateTagModal';
+import { PitDrawer } from './components/PitDrawer';
+import { SecretDetailDrawer } from './components/SecretDetailDrawer';
+import { SecretDropzone } from './components/SecretDropzone';
+import { SecretInputRow } from './components/SecretInputRow';
+import { SecretTableHeader } from './components/SecretTableHeader';
+import {
+  DEFAULT_SECRET_VALUE,
+  downloadSecret,
+  FormData,
+  schema,
+  transformSecretsToBatchSecretReq,
+  TSecOverwriteOpt,
+  TSecretDetailsOpen
+} from './DashboardPage.utils';
+
+const USER_ACTION_PUSH = 'first_time_secrets_pushed';
+
+/*
+ * Some imp aspects to consider. Here there are multiple stats changing
+ * Thus ideally we need to use a context. But instead we rely on react hook form
+ * React hook form provides context and high performance proxy based rendering
+ * It also handles error handling and transferring states between inputs
+ *
+ * Another thing is the purpose of overrideAction
+ * Before we would remove the value for personal secret when user toggle and user couldn't get it back
+ * They have to reload the browser or go back all over again
+ * Instead when user delete we raise a flag so if user decides to go back to toggle personal before saving
+ * They will get it back
+ */
+export const DashboardPage = () => {
+  const { t } = useTranslation();
+  const router = useRouter();
+  const { createNotification } = useNotificationContext();
+  const queryClient = useQueryClient();
+
+  const { popUp, handlePopUpOpen, handlePopUpToggle, handlePopUpClose } = usePopUp([
+    'secretDetails',
+    'addTag',
+    'secretSnapshots',
+    'uploadedSecOpts',
+    'compareSecrets'
+  ] as const);
+  const [isSecretValueHidden, setIsSecretValueHidden] = useToggle();
+  const [isCommentColumnCollapsed, setIsCommentCollapsed] = usePersistentState(
+    false,
+    'infisical-comment-box'
+  );
+  const [searchFilter, setSearchFilter] = useState('');
+  const [snapshotId, setSnaphotId] = useState<string | null>(null);
+  const [selectedEnv, setSelectedEnv] = useState<WorkspaceEnv | null>(null);
+  const [sortDir, setSortDir] = useState<'asc' | 'desc'>('asc');
+  const [deletedSecretIds, setDeletedSecretIds] = useState<string[]>([]);
+  const { hasUnsavedChanges, setHasUnsavedChanges } = useLeaveConfirm({ initialValue: false });
+
+  const { currentWorkspace, isLoading } = useWorkspace();
+  const workspaceId = currentWorkspace?._id as string;
+  const { data: latestFileKey } = useGetUserWsKey(workspaceId);
+
+  useEffect(() => {
+    if (!isLoading && !workspaceId && router.isReady) {
+      router.push('/noprojects');
+    }
+  }, [isLoading, workspaceId, router.isReady]);
+
+  // fetching data
+  const { data: userAction } = useGetUserAction(USER_ACTION_PUSH);
+  const hasUserPushed = Boolean(userAction);
+
+  const { data: wsEnv, isLoading: isEnvListLoading } = useGetUserWsEnvironments({
+    workspaceId,
+    onSuccess: (data) => {
+      // get an env with one of the access available
+      const env = data.find(({ isReadDenied, isWriteDenied }) => !isWriteDenied || !isReadDenied);
+      if (env) {
+        setSelectedEnv(env);
+      }
+    }
+  });
+
+  const { data: secretVersion } = useGetSecretVersion({
+    limit: 10,
+    offset: 0,
+    secretId: (popUp?.secretDetails?.data as TSecretDetailsOpen)?.id,
+    decryptFileKey: latestFileKey!
+  });
+
+  const { data: secrets, isLoading: isSecretsLoading } = useGetProjectSecrets({
+    workspaceId,
+    env: selectedEnv?.slug || '',
+    decryptFileKey: latestFileKey!,
+    isPaused: Boolean(snapshotId)
+  });
+
+  const {
+    data: secretSnaphots,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage
+  } = useGetWorkspaceSecretSnapshots({
+    workspaceId,
+    limit: 10
+  });
+
+  const {
+    data: snapshotSecret,
+    isLoading: isSnapshotSecretsLoading,
+    isFetching: isSnapshotChanging
+  } = useGetSnapshotSecrets({
+    snapshotId: snapshotId || '',
+    env: selectedEnv?.slug || '',
+    decryptFileKey: latestFileKey!
+  });
+
+  const { data: snapshotCount, isLoading: isLoadingSnapshotCount } =
+    useGetWsSnapshotCount(workspaceId);
+
+  const { data: wsTags } = useGetWsTags(workspaceId);
+  // mutation calls
+  const { mutateAsync: batchSecretOp } = useBatchSecretsOp();
+  const { mutateAsync: performSecretRollback } = usePerformSecretRollback();
+  const { mutateAsync: registerUserAction } = useRegisterUserAction();
+  const { mutateAsync: createWsTag } = useCreateWsTag();
+
+  const method = useForm<FormData>({
+    // why any: well yup inferred ts expects other keys to defined as undefined
+    values: secrets as any,
+    mode: 'onBlur',
+    resolver: yupResolver(schema)
+  });
+
+  const {
+    control,
+    handleSubmit,
+    getValues,
+    setValue,
+    formState: { isDirty, isSubmitting, dirtyFields },
+    reset
+  } = method;
+  const formSecrets = useWatch({ control, name: 'secrets' });
+  const { fields, prepend, append, remove, update } = useFieldArray({ control, name: 'secrets' });
+
+  const isRollbackMode = Boolean(snapshotId);
+  const isReadOnly = selectedEnv?.isWriteDenied;
+  const isAddOnly = selectedEnv?.isReadDenied && !selectedEnv?.isWriteDenied;
+  const canDoRollback = !isReadOnly && !isAddOnly;
+  const isSubmitDisabled =
+    isReadOnly ||
+    // on add only mode the formstate becomes dirty due to secrets missing some items
+    // to avoid this we check dirtyFields in isAddOnly Mode
+    (isAddOnly && Object.keys(dirtyFields).length === 0) ||
+    (!isRollbackMode && !isAddOnly && !isDirty) ||
+    isSubmitting;
+
+  useEffect(() => {
+    if (!isSnapshotChanging && Boolean(snapshotId)) {
+      reset({ secrets: snapshotSecret?.secrets, isSnapshotMode: true });
+    }
+  }, [isSnapshotChanging]);
+
+  useEffect(() => {
+    setHasUnsavedChanges(!isSubmitDisabled);
+  }, [isSubmitDisabled]);
+
+  const onSortSecrets = () => {
+    const dir = sortDir === 'asc' ? 'desc' : 'asc';
+    const sec = getValues('secrets') || [];
+    const sortedSec = sec.sort((a, b) =>
+      dir === 'asc' ? a?.key?.localeCompare(b?.key || '') : b?.key?.localeCompare(a?.key || '')
+    );
+    setValue('secrets', sortedSec);
+    setSortDir(dir);
+  };
+
+  const handleUploadedEnv = (uploadedSec: TSecOverwriteOpt['secrets']) => {
+    const sec = getValues('secrets') || [];
+    const conflictingSec = sec.filter(({ key }) => Boolean(uploadedSec?.[key]));
+    const conflictingSecIds = conflictingSec.reduce<Record<string, boolean>>(
+      (prev, curr) => ({
+        ...prev,
+        [curr.key]: true
+      }),
+      {}
+    );
+    // filter to get all conflicting ones
+    const conflictingUploadedSec = { ...uploadedSec };
+    // append non conflicting ones
+    Object.keys(uploadedSec).forEach((key) => {
+      if (!conflictingSecIds?.[key]) {
+        append({
+          ...DEFAULT_SECRET_VALUE,
+          key,
+          value: uploadedSec[key].value,
+          comment: uploadedSec[key].comments.join(',')
+        });
+        delete conflictingUploadedSec[key];
+      }
+    });
+    if (conflictingSec.length > 0) {
+      handlePopUpOpen('uploadedSecOpts', { secrets: conflictingUploadedSec });
+    }
+  };
+
+  const onOverwriteSecrets = () => {
+    const sec = getValues('secrets') || [];
+    const uploadedSec = (popUp?.uploadedSecOpts?.data as TSecOverwriteOpt)?.secrets;
+    const data: Array<{ key: string; index: number }> = [];
+    sec.forEach(({ key }, index) => {
+      if (uploadedSec?.[key]) data.push({ key, index });
+    });
+    data.forEach(({ key, index }) => {
+      const { value, comments } = uploadedSec[key];
+      const comment = comments.join(', ');
+      update(index, {
+        ...DEFAULT_SECRET_VALUE,
+        key,
+        value,
+        comment,
+        tags: sec[index].tags
+      });
+    });
+    handlePopUpClose('uploadedSecOpts');
+  };
+
+  const onSecretRollback = async () => {
+    if (!snapshotSecret?.version) {
+      createNotification({
+        text: 'Failed to find secret version',
+        type: 'success'
+      });
+      return;
+    }
+    try {
+      await performSecretRollback({
+        workspaceId,
+        version: snapshotSecret.version
+      });
+      setValue('isSnapshotMode', false);
+      setSnaphotId(null);
+      queryClient.invalidateQueries(
+        secretKeys.getProjectSecret(workspaceId, selectedEnv?.slug || '')
+      );
+      createNotification({
+        text: 'Successfully rollback secrets',
+        type: 'success'
+      });
+    } catch (error) {
+      console.log(error);
+      createNotification({
+        text: 'Failed to rollback secrets',
+        type: 'error'
+      });
+    }
+  };
+
+  const onAppendSecret = () => append(DEFAULT_SECRET_VALUE);
+
+  const onSaveSecret = async ({ secrets: userSec = [], isSnapshotMode }: FormData) => {
+    if (isSnapshotMode) {
+      await onSecretRollback();
+      return;
+    }
+    // just closing this if save is triggered from drawer
+    handlePopUpClose('secretDetails');
+    // when add only mode remove rest of things not created
+    const sec = isAddOnly ? userSec.filter(({ _id }) => !_id) : userSec;
+    // encrypt and format the secrets to batch api format
+    // requests = [ {method:"", secret:""} ]
+    const batchedSecret = transformSecretsToBatchSecretReq(deletedSecretIds, latestFileKey, sec);
+    // type check
+    if (!selectedEnv?.slug) return;
+    try {
+      await batchSecretOp({
+        requests: batchedSecret,
+        workspaceId,
+        environment: selectedEnv?.slug
+      });
+      createNotification({
+        text: 'Successfully saved changes',
+        type: 'success'
+      });
+      if (!hasUserPushed) {
+        await registerUserAction(USER_ACTION_PUSH);
+      }
+    } catch (error) {
+      console.log(error);
+      createNotification({
+        text: 'Failed to save changes',
+        type: 'error'
+      });
+    }
+  };
+
+  const onDrawerOpen = (dto: TSecretDetailsOpen) => {
+    handlePopUpOpen('secretDetails', dto);
+  };
+
+  const onEnvChange = (slug: string) => {
+    if (hasUnsavedChanges) {
+      // eslint-disable-next-line no-alert
+      if (!window.confirm(leaveConfirmDefaultMessage)) return;
+    }
+    const env = wsEnv?.find((el) => el.slug === slug);
+    if (env) setSelectedEnv(env);
+  };
+
+  // record all deleted ids
+  // This will make final deletion easier
+  const onSecretDelete = (index: number, id?: string, overrideId?: string) => {
+    const ids: string[] = [];
+    if (id) ids.push(id);
+    if (overrideId) ids.push(overrideId);
+    setDeletedSecretIds((state) => [...state, ...ids]);
+    remove(index);
+    // just the case if this is called from drawer
+    handlePopUpClose('secretDetails');
+  };
+
+  const onCreateWsTag = async (tagName: string) => {
+    try {
+      await createWsTag({
+        workspaceID: workspaceId,
+        tagName,
+        tagSlug: tagName.replace(' ', '_')
+      });
+      handlePopUpClose('addTag');
+      createNotification({
+        text: 'Successfully created a tag',
+        type: 'success'
+      });
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: 'Failed to create a tag',
+        type: 'error'
+      });
+    }
+  };
+
+  if (isSecretsLoading || isEnvListLoading) {
+    return (
+      <div className="container mx-auto flex h-1/2 w-full items-center justify-center px-8 text-mineshaft-50 dark:[color-scheme:dark]">
+        <img src="/images/loading/loading.gif" height={70} width={120} alt="loading animation" />
+      </div>
+    );
+  }
+
+  // when secrets is not loading and secrets list is empty
+  const isDashboardSecretEmpty = !isSecretsLoading && !formSecrets?.length;
+  // when using snapshot mode and snapshot is loading and snapshot list is empty
+  const isSnapshotSecretEmtpy =
+    isRollbackMode && !isSnapshotSecretsLoading && !snapshotSecret?.secrets?.length;
+  const isSecretEmpty = (!isRollbackMode && isDashboardSecretEmpty) || isSnapshotSecretEmtpy;
+
+  const userAvailableEnvs = wsEnv?.filter(
+    ({ isReadDenied, isWriteDenied }) => !isReadDenied || !isWriteDenied
+  );
+
+  return (
+    <div className="container mx-auto w-full px-8 text-mineshaft-50 dark:[color-scheme:dark]">
+      <FormProvider {...method}>
+        <form autoComplete="off">
+          {/* breadcrumb row */}
+          <div className="relative right-5">
+            <NavHeader pageName={t('dashboard:title')} isProjectRelated />
+          </div>
+          {/* Secrets, commit and save button section */}
+          <div className="mt-6 flex items-center justify-between">
+            <div className="flex items-center space-x-4">
+              <h1 className="text-3xl font-semibold">
+                {isRollbackMode ? 'Secret Snapshot' : 'Secrets'}
+              </h1>
+              {isRollbackMode && Boolean(snapshotSecret) && (
+                <Tag colorSchema="green">
+                  {new Date(snapshotSecret?.createdAt || '').toLocaleString()}
+                </Tag>
+              )}
+            </div>
+            <div className="flex items-center space-x-2">
+              {isRollbackMode && (
+                <Button
+                  variant="star"
+                  leftIcon={<FontAwesomeIcon icon={faArrowLeft} />}
+                  onClick={() => {
+                    setSnaphotId(null);
+                    reset({ ...secrets, isSnapshotMode: false });
+                  }}
+                >
+                  Go back
+                </Button>
+              )}
+              <Button
+                variant="star"
+                onClick={() => handlePopUpOpen('secretSnapshots')}
+                leftIcon={<FontAwesomeIcon icon={faCodeCommit} />}
+                isLoading={isLoadingSnapshotCount}
+                isDisabled={!canDoRollback}
+              >
+                {snapshotCount} Commits
+              </Button>
+              <Button
+                isDisabled={isSubmitDisabled}
+                isLoading={isSubmitting}
+                leftIcon={<FontAwesomeIcon icon={isRollbackMode ? faClockRotateLeft : faCheck} />}
+                onClick={handleSubmit(onSaveSecret)}
+              >
+                {isRollbackMode ? 'Rollback' : 'Save Changes'}
+              </Button>
+            </div>
+          </div>
+          {/* Environment, search and other action row */}
+          <div className="mt-4 flex items-center space-x-2">
+            <div>
+              <Tooltip content="Select environment">
+                <Select
+                  value={selectedEnv?.slug}
+                  onValueChange={onEnvChange}
+                  position="popper"
+                  className="min-w-[180px] bg-mineshaft-600"
+                >
+                  {userAvailableEnvs?.map(({ name, slug }) => (
+                    <SelectItem value={slug} key={slug}>
+                      {name}
+                    </SelectItem>
+                  ))}
+                </Select>
+              </Tooltip>
+            </div>
+            <div className="flex-grow">
+              <Input
+                className="bg-mineshaft-600 placeholder-mineshaft-50"
+                placeholder="Search keys..."
+                value={searchFilter}
+                onChange={(e) => setSearchFilter(e.target.value)}
+                leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+              />
+            </div>
+            <div className="flex items-center space-x-2">
+              <div>
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <IconButton ariaLabel="download" variant="star">
+                      <FontAwesomeIcon icon={faDownload} />
+                    </IconButton>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-auto">
+                    <div className="flex flex-col space-y-2">
+                      <Button
+                        onClick={() => downloadSecret(getValues('secrets'), selectedEnv?.slug)}
+                        variant="star"
+                        className="bg-bunker-800"
+                      >
+                        Download as .env
+                      </Button>
+                    </div>
+                  </PopoverContent>
+                </Popover>
+              </div>
+              <Tooltip content={isSecretValueHidden ? 'Hide Secrets' : 'Reveal secrets'}>
+                <IconButton
+                  ariaLabel="reveal"
+                  variant="star"
+                  onClick={() => setIsSecretValueHidden.toggle()}
+                >
+                  <FontAwesomeIcon icon={isSecretValueHidden ? faEyeSlash : faEye} />
+                </IconButton>
+              </Tooltip>
+              <Button
+                leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                onClick={() => prepend(DEFAULT_SECRET_VALUE, { shouldFocus: false })}
+                isDisabled={isReadOnly || isRollbackMode}
+                variant="star"
+              >
+                Add Secret
+              </Button>
+            </div>
+          </div>
+          <div className="mt-4">
+            {!isSecretEmpty && (
+              <TableContainer>
+                <table className="secret-table">
+                  <SecretTableHeader
+                    isCommentColumnCollapsed={isCommentColumnCollapsed}
+                    sortDir={sortDir}
+                    onCommentColToggle={() => setIsCommentCollapsed(!isCommentColumnCollapsed)}
+                    onSort={onSortSecrets}
+                  />
+                  <tbody>
+                    {fields.map(({ id, _id }, index) => (
+                      <SecretInputRow
+                        key={id}
+                        isReadOnly={isReadOnly}
+                        isRollbackMode={isRollbackMode}
+                        isAddOnly={isAddOnly}
+                        index={index}
+                        searchTerm={searchFilter}
+                        onSecretDelete={onSecretDelete}
+                        onRowExpand={() => onDrawerOpen({ id: _id as string, index })}
+                        isSecretValueHidden={isSecretValueHidden}
+                        isCommentColumnCollapsed={isCommentColumnCollapsed}
+                        wsTags={wsTags}
+                        onCreateTagOpen={() => handlePopUpOpen('addTag')}
+                      />
+                    ))}
+                    {!isReadOnly && !isRollbackMode && (
+                      <tr>
+                        <td colSpan={3}>
+                          <Button
+                            variant="plain"
+                            className="my-1"
+                            onClick={onAppendSecret}
+                            leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                          >
+                            Add Secret
+                          </Button>
+                        </td>
+                      </tr>
+                    )}
+                  </tbody>
+                </table>
+              </TableContainer>
+            )}
+            <PitDrawer
+              isDrawerOpen={popUp?.secretSnapshots?.isOpen}
+              onOpenChange={(isOpen) => handlePopUpToggle('secretSnapshots', isOpen)}
+              fetchNextPage={fetchNextPage}
+              hasNextPage={hasNextPage}
+              snapshotId={snapshotId}
+              isFetchingNextPage={isFetchingNextPage}
+              secretSnaphots={secretSnaphots}
+              onSelectSnapshot={setSnaphotId}
+            />
+            <SecretDetailDrawer
+              onSave={handleSubmit(onSaveSecret)}
+              isReadOnly={isReadOnly || isRollbackMode}
+              onSecretDelete={onSecretDelete}
+              isDrawerOpen={popUp?.secretDetails?.isOpen}
+              onOpenChange={(isOpen) => handlePopUpToggle('secretDetails', isOpen)}
+              secretVersion={secretVersion}
+              index={(popUp?.secretDetails?.data as TSecretDetailsOpen)?.index}
+              onEnvCompare={(key) => handlePopUpOpen('compareSecrets', key)}
+            />
+            <SecretDropzone
+              isSmaller={!isSecretEmpty}
+              onParsedEnv={handleUploadedEnv}
+              onAddNewSecret={onAppendSecret}
+            />
+          </div>
+          {/* secrets table and drawers, modals */}
+        </form>
+        {/* Create a new tag modal */}
+        <Modal
+          isOpen={popUp?.addTag?.isOpen}
+          onOpenChange={(open) => {
+            handlePopUpToggle('addTag', open);
+          }}
+        >
+          <ModalContent
+            title="Create tag"
+            subTitle="Specify your tag name, and the slug will be created automatically."
+          >
+            <CreateTagModal onCreateTag={onCreateWsTag} />
+          </ModalContent>
+        </Modal>
+        {/* Uploaded env override or not confirmation modal */}
+        <Modal
+          isOpen={popUp?.uploadedSecOpts?.isOpen}
+          onOpenChange={(open) => handlePopUpToggle('uploadedSecOpts', open)}
+        >
+          <ModalContent
+            title="Duplicate Secrets"
+            footerContent={[
+              <Button
+                key="keep-old-btn"
+                className="mr-4"
+                onClick={() => handlePopUpClose('uploadedSecOpts')}
+              >
+                Keep old
+              </Button>,
+              <Button colorSchema="danger" key="overwrite-btn" onClick={onOverwriteSecrets}>
+                Overwrite
+              </Button>
+            ]}
+          >
+            <div className="flex flex-col space-y-2 text-gray-300">
+              <div>Your file contains following duplicate secrets</div>
+              <div className="text-sm text-gray-400">
+                {Object.keys((popUp?.uploadedSecOpts?.data as TSecOverwriteOpt)?.secrets || {})
+                  ?.map((key) => key)
+                  .join(', ')}
+              </div>
+              <div>Are you sure you want to overwrite these secrets?</div>
+            </div>
+          </ModalContent>
+        </Modal>
+        <Modal
+          isOpen={popUp?.compareSecrets?.isOpen}
+          onOpenChange={(open) => handlePopUpToggle('compareSecrets', open)}
+        >
+          <ModalContent
+            title={popUp?.compareSecrets?.data as string}
+            subTitle="Secret value in available environments"
+            overlayClassName="z-[90]"
+          >
+            <CompareSecret
+              workspaceId={workspaceId}
+              envs={userAvailableEnvs || []}
+              secretKey={popUp?.compareSecrets?.data as string}
+            />
+          </ModalContent>
+        </Modal>
+      </FormProvider>
+    </div>
+  );
+};
diff --git a/frontend/src/views/DashboardPage/DashboardPage.utils.ts b/frontend/src/views/DashboardPage/DashboardPage.utils.ts
new file mode 100644
index 000000000..ef754d1c5
--- /dev/null
+++ b/frontend/src/views/DashboardPage/DashboardPage.utils.ts
@@ -0,0 +1,231 @@
+import crypto from 'crypto';
+
+import * as yup from 'yup';
+
+import {
+  decryptAssymmetric,
+  encryptSymmetric
+} from '@app/components/utilities/cryptography/crypto';
+import { BatchSecretDTO } from '@app/hooks/api/secrets/types';
+
+export enum SecretActionType {
+  Created = 'created',
+  Modified = 'modified',
+  Deleted = 'deleted'
+}
+
+export const DEFAULT_SECRET_VALUE = {
+  _id: undefined,
+  overrideAction: undefined,
+  idOverride: undefined,
+  valueOverride: undefined,
+  comment: '',
+  key: '',
+  value: '',
+  tags: []
+};
+
+const secretSchema = yup.object({
+  _id: yup.string(),
+  key: yup
+    .string()
+    .trim()
+    .required()
+    .label('Secret key')
+    .test('starts-with-number', 'Should start with an alphabet', (val) =>
+      Boolean(val?.charAt(0)?.match(/[a-zA-Z]/i))
+    )
+    .test({
+      name: 'duplicate-keys',
+      // TODO:(akhilmhdh) ts keeps throwing from not found need to see how to resolve this
+      test: (val, ctx: any) => {
+        const secrets: Array<{ key: string }> = ctx?.from?.[1]?.value?.secrets || [];
+        const duplicateKeys: Record<number, boolean> = {};
+        secrets?.forEach(({ key }, index) => {
+          if (key === val) duplicateKeys[index + 1] = true;
+        });
+        const pos = Object.keys(duplicateKeys);
+        if (pos.length <= 1) {
+          return true;
+        }
+        return ctx.createError({ message: `Same key in row ${pos.join(', ')}` });
+      }
+    }),
+  value: yup.string().trim(),
+  comment: yup.string().trim(),
+  tags: yup.array(
+    yup.object({
+      _id: yup.string().required(),
+      name: yup.string().required(),
+      slug: yup.string().required()
+    })
+  ),
+  overrideAction: yup.string().notRequired().oneOf(Object.values(SecretActionType)),
+  idOverride: yup.string().notRequired(),
+  valueOverride: yup.string().trim().notRequired()
+});
+
+export const schema = yup.object({
+  isSnapshotMode: yup.bool().notRequired(),
+  secrets: yup.array(secretSchema)
+});
+
+export type FormData = yup.InferType<typeof schema>;
+export type TSecretDetailsOpen = { index: number; id: string };
+export type TSecOverwriteOpt = { secrets: Record<string, { comments: string[]; value: string }> };
+
+export const downloadSecret = (secrets: FormData['secrets'] = [], env: string = 'unknown') => {
+  const finalSecret = secrets.map(({ key, value, valueOverride, overrideAction, comment }) => ({
+    key,
+    value: overrideAction && overrideAction !== SecretActionType.Deleted ? valueOverride : value,
+    comment
+  }));
+
+  let file = '';
+  finalSecret.forEach(({ key, value, comment }) => {
+    if (comment) {
+      file += `# ${comment}\n${key}=${value}\n`;
+      return;
+    }
+    file += `${key}=${value}\n`;
+  });
+
+  const blob = new Blob([file]);
+  const fileDownloadUrl = URL.createObjectURL(blob);
+  const alink = document.createElement('a');
+  alink.href = fileDownloadUrl;
+  alink.download = `${env}.env`;
+  alink.click();
+};
+
+/*
+ * Below functions are used convert the dashboard secrets to the bulk secret creation request format
+ * They are encrypted back
+ * Formatted to [ { request: "", secret:{} } ]
+ */
+const encryptASecret = (randomBytes: string, key: string, value?: string, comment?: string) => {
+  // encrypt key
+  const {
+    ciphertext: secretKeyCiphertext,
+    iv: secretKeyIV,
+    tag: secretKeyTag
+  } = encryptSymmetric({
+    plaintext: key,
+    key: randomBytes
+  });
+
+  // encrypt value
+  const {
+    ciphertext: secretValueCiphertext,
+    iv: secretValueIV,
+    tag: secretValueTag
+  } = encryptSymmetric({
+    plaintext: value ?? '',
+    key: randomBytes
+  });
+
+  // encrypt comment
+  const {
+    ciphertext: secretCommentCiphertext,
+    iv: secretCommentIV,
+    tag: secretCommentTag
+  } = encryptSymmetric({
+    plaintext: comment ?? '',
+    key: randomBytes
+  });
+
+  return {
+    secretKeyCiphertext,
+    secretKeyIV,
+    secretKeyTag,
+    secretValueCiphertext,
+    secretValueIV,
+    secretValueTag,
+    secretCommentCiphertext,
+    secretCommentIV,
+    secretCommentTag
+  };
+};
+
+export const transformSecretsToBatchSecretReq = (
+  deletedSecretIds: string[],
+  latestFileKey: any,
+  secrets: FormData['secrets']
+) => {
+  // deleted secrets
+  const secretsToBeDeleted: BatchSecretDTO['requests'] = deletedSecretIds.map((id) => ({
+    method: 'DELETE',
+    secret: { _id: id }
+  }));
+
+  const secretsToBeUpdated: BatchSecretDTO['requests'] = [];
+  const secretsToBeCreated: BatchSecretDTO['requests'] = [];
+  const PRIVATE_KEY = localStorage.getItem('PRIVATE_KEY') as string;
+
+  const randomBytes = latestFileKey
+    ? decryptAssymmetric({
+        ciphertext: latestFileKey.encryptedKey,
+        nonce: latestFileKey.nonce,
+        publicKey: latestFileKey.sender.publicKey,
+        privateKey: PRIVATE_KEY
+      })
+    : crypto.randomBytes(16).toString('hex');
+
+  secrets?.forEach(
+    ({ _id, idOverride, value, valueOverride, overrideAction, tags = [], comment, key }) => {
+      if (!idOverride && overrideAction === SecretActionType.Created) {
+        secretsToBeCreated.push({
+          method: 'POST',
+          secret: {
+            type: 'personal',
+            tags,
+            ...encryptASecret(randomBytes, key, valueOverride, comment)
+          }
+        });
+      }
+      // to be created ones as they don't have server generated id
+      if (!_id) {
+        secretsToBeCreated.push({
+          method: 'POST',
+          secret: {
+            type: 'shared',
+            tags,
+            ...encryptASecret(randomBytes, key, value, comment)
+          }
+        });
+        return; // exit as updated and delete case won't happen when created
+      }
+      // has an id means this is updated one
+      if (_id) {
+        secretsToBeUpdated.push({
+          method: 'PATCH',
+          secret: {
+            _id,
+            type: 'shared',
+            tags,
+            ...encryptASecret(randomBytes, key, value, comment)
+          }
+        });
+      }
+      if (idOverride) {
+        // if action is deleted meaning override has been removed but id is kept to collect at this point
+        if (overrideAction === SecretActionType.Deleted) {
+          secretsToBeDeleted.push({ method: 'DELETE', secret: { _id: idOverride } });
+        } else {
+          // if not deleted action then as id is there its an updated
+          secretsToBeUpdated.push({
+            method: 'PATCH',
+            secret: {
+              _id: idOverride,
+              type: 'personal',
+              tags,
+              ...encryptASecret(randomBytes, key, valueOverride, comment)
+            }
+          });
+        }
+      }
+    }
+  );
+
+  return secretsToBeCreated.concat(secretsToBeUpdated, secretsToBeDeleted);
+};
diff --git a/frontend/src/views/DashboardPage/components/CompareSecret/CompareSecret.tsx b/frontend/src/views/DashboardPage/components/CompareSecret/CompareSecret.tsx
new file mode 100644
index 000000000..63af91803
--- /dev/null
+++ b/frontend/src/views/DashboardPage/components/CompareSecret/CompareSecret.tsx
@@ -0,0 +1,64 @@
+import { useCallback } from 'react';
+
+import { FormControl, Input, Spinner } from '@app/components/v2';
+import { useGetProjectSecrets, useGetUserWsKey } from '@app/hooks/api';
+
+type SecretValueProps = {
+  workspaceId: string;
+  envName: string;
+  env: string;
+  secretKey: string;
+};
+
+const SecretValue = ({ workspaceId, env, envName, secretKey }: SecretValueProps) => {
+  const { data: latestFileKey } = useGetUserWsKey(workspaceId);
+  const { data: secret, isLoading: isSecretsLoading } = useGetProjectSecrets({
+    workspaceId,
+    env,
+    decryptFileKey: latestFileKey!
+  });
+
+  const getValue = useCallback(
+    (data: typeof secret) => {
+      const sec = data?.secrets?.find(({ key: secKey }) => secKey === secretKey);
+      return sec?.value || 'Not found';
+    },
+    [secretKey]
+  );
+
+  return (
+    <FormControl label={envName}>
+      <Input
+        className="w-full text-ellipsis font-mono focus:text-bunker-100 focus:ring-transparent"
+        value={getValue(secret)}
+        isReadOnly
+        rightIcon={isSecretsLoading ? <Spinner /> : undefined}
+      />
+    </FormControl>
+  );
+};
+
+type Props = {
+  workspaceId: string;
+  secretKey: string;
+  envs: Array<{ name: string; slug: string }>;
+};
+
+export const CompareSecret = ({ workspaceId, secretKey, envs }: Props): JSX.Element => {
+  // should not do anything until secretKey is available
+  if (!secretKey) return <div />;
+
+  return (
+    <div className="flex flex-col">
+      {envs.map(({ name, slug }) => (
+        <SecretValue
+          workspaceId={workspaceId}
+          key={`secret-comparison-${slug}`}
+          envName={name}
+          env={slug}
+          secretKey={secretKey}
+        />
+      ))}
+    </div>
+  );
+};
diff --git a/frontend/src/views/DashboardPage/components/CompareSecret/index.tsx b/frontend/src/views/DashboardPage/components/CompareSecret/index.tsx
new file mode 100644
index 000000000..871a6529d
--- /dev/null
+++ b/frontend/src/views/DashboardPage/components/CompareSecret/index.tsx
@@ -0,0 +1 @@
+export { CompareSecret } from './CompareSecret';
diff --git a/frontend/src/views/DashboardPage/components/CreateTagModal/CreateTagModal.tsx b/frontend/src/views/DashboardPage/components/CreateTagModal/CreateTagModal.tsx
new file mode 100644
index 000000000..541417cbc
--- /dev/null
+++ b/frontend/src/views/DashboardPage/components/CreateTagModal/CreateTagModal.tsx
@@ -0,0 +1,55 @@
+import { Controller, useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from 'yup';
+
+import { Button, FormControl, Input, ModalClose } from '@app/components/v2';
+
+type Props = {
+  onCreateTag: (tagName: string) => Promise<void>;
+};
+
+const createTagSchema = yup.object({
+  name: yup.string().required().trim().label('Tag Name')
+});
+type FormData = yup.InferType<typeof createTagSchema>;
+
+export const CreateTagModal = ({ onCreateTag }: Props): JSX.Element => {
+  const {
+    control,
+    reset,
+    formState: { isSubmitting },
+    handleSubmit
+  } = useForm<FormData>({
+    resolver: yupResolver(createTagSchema)
+  });
+
+  const onFormSubmit = async ({ name }: FormData) => {
+    await onCreateTag(name);
+    reset();
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onFormSubmit)}>
+      <Controller
+        control={control}
+        name="name"
+        defaultValue=""
+        render={({ field, fieldState: { error } }) => (
+          <FormControl label="Tag Name" isError={Boolean(error)} errorText={error?.message}>
+            <Input {...field} placeholder="Type your tag name" />
+          </FormControl>
+        )}
+      />
+      <div className="mt-8 flex items-center">
+        <Button className="mr-4" type="submit" isDisabled={isSubmitting} isLoading={isSubmitting}>
+          Create
+        </Button>
+        <ModalClose asChild>
+          <Button variant="plain" colorSchema="secondary">
+            Cancel
+          </Button>
+        </ModalClose>
+      </div>
+    </form>
+  );
+};
diff --git a/frontend/src/views/DashboardPage/components/CreateTagModal/index.tsx b/frontend/src/views/DashboardPage/components/CreateTagModal/index.tsx
new file mode 100644
index 000000000..a660c64fd
--- /dev/null
+++ b/frontend/src/views/DashboardPage/components/CreateTagModal/index.tsx
@@ -0,0 +1 @@
+export {CreateTagModal} from './CreateTagModal'
\ No newline at end of file
diff --git a/frontend/src/views/DashboardPage/components/PitDrawer/PitDrawer.tsx b/frontend/src/views/DashboardPage/components/PitDrawer/PitDrawer.tsx
new file mode 100644
index 000000000..50667ca24
--- /dev/null
+++ b/frontend/src/views/DashboardPage/components/PitDrawer/PitDrawer.tsx
@@ -0,0 +1,76 @@
+import { Fragment, useCallback } from 'react';
+import { InfiniteData } from '@tanstack/react-query';
+
+import { Button, Drawer, DrawerContent } from '@app/components/v2';
+import timeSince from '@app/ee/utilities/timeSince';
+import { TWorkspaceSecretSnapshot } from '@app/hooks/api/secretSnapshots/types';
+
+type Props = {
+  isDrawerOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  secretSnaphots?: InfiniteData<TWorkspaceSecretSnapshot[]>;
+  onSelectSnapshot: (id: string) => void;
+  snapshotId: string | null;
+  isFetchingNextPage?: boolean;
+  hasNextPage?: boolean;
+  fetchNextPage: () => void;
+};
+
+export const PitDrawer = ({
+  isDrawerOpen,
+  onOpenChange,
+  secretSnaphots,
+  onSelectSnapshot,
+  snapshotId,
+  isFetchingNextPage,
+  hasNextPage,
+  fetchNextPage
+}: Props): JSX.Element => {
+  const getButtonLabel = useCallback((isFirstChild: boolean, isSelectedSnapshot: boolean) => {
+    if (isFirstChild) return 'Current Version';
+    if (isSelectedSnapshot) return 'Currently Viewing';
+    return 'Explore';
+  }, []);
+
+  return (
+    <Drawer isOpen={isDrawerOpen} onOpenChange={onOpenChange}>
+      <DrawerContent
+        title="Point-in-time Recovery"
+        subTitle="Note: This will recover secrets for all environments in this project"
+      >
+        <div className="flex flex-col space-y-2">
+          {secretSnaphots?.pages?.map((group, i) => (
+            <Fragment key={`snapshot-item-${i + 1}`}>
+              {group.map(({ _id, createdAt }, index) => (
+                <Button
+                  key={_id}
+                  className="py-3 px-4 text-sm"
+                  variant={
+                    (i === 0 && index === 0 && snapshotId === null) || snapshotId === _id
+                      ? 'solid'
+                      : 'star'
+                  }
+                  onClick={() => onSelectSnapshot(_id)}
+                >
+                  <div className="flex w-full justify-between">
+                    <div>{timeSince(new Date(createdAt))}</div>
+                    <div>{getButtonLabel(i === 0 && index === 0, snapshotId === _id)}</div>
+                  </div>
+                </Button>
+              ))}
+            </Fragment>
+          ))}
+        </div>
+        <Button
+          className="mt-8 py-3 px-4 text-sm"
+          isFullWidth
+          isLoading={isFetchingNextPage}
+          isDisabled={isFetchingNextPage || !hasNextPage}
+          onClick={fetchNextPage}
+        >
+          {hasNextPage ? 'Load More' : 'End of history'}
+        </Button>
+      </DrawerContent>
+    </Drawer>
+  );
+};
diff --git a/frontend/src/views/DashboardPage/components/PitDrawer/index.tsx b/frontend/src/views/DashboardPage/components/PitDrawer/index.tsx
new file mode 100644
index 000000000..993b641ff
--- /dev/null
+++ b/frontend/src/views/DashboardPage/components/PitDrawer/index.tsx
@@ -0,0 +1 @@
+export { PitDrawer } from './PitDrawer';
diff --git a/frontend/src/views/DashboardPage/components/SecretDetailDrawer/GenRandomNumber.tsx b/frontend/src/views/DashboardPage/components/SecretDetailDrawer/GenRandomNumber.tsx
new file mode 100644
index 000000000..d64a6ad36
--- /dev/null
+++ b/frontend/src/views/DashboardPage/components/SecretDetailDrawer/GenRandomNumber.tsx
@@ -0,0 +1,52 @@
+import crypto from 'crypto';
+
+import { useState } from 'react';
+import { useTranslation } from 'next-i18next';
+import { faMinus, faPlus, faShuffle } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import { Button, Input } from '@app/components/v2';
+
+type Props = {
+  onGenerate: (val: string) => void;
+};
+
+export const GenRandomNumber = ({ onGenerate }: Props) => {
+  const { t } = useTranslation();
+  const [value, setValue] = useState(32);
+
+  const onGenerateRandomHex = () => {
+    const rand = crypto.randomBytes(value).toString('hex');
+    onGenerate(rand);
+  };
+
+  return (
+    <div className="flex">
+      <Button
+        className="rounded-r-none"
+        colorSchema="secondary"
+        leftIcon={<FontAwesomeIcon icon={faShuffle} />}
+        onClick={onGenerateRandomHex}
+      >
+        {t('dashboard:sidebar.generate-random-hex')}
+      </Button>
+      <div className="rounded-r-md bg-mineshaft p-2">
+        <div className="flex rounded-md border-mineshaft-400 bg-bunker-800 p-1 px-2">
+          <button type="button" onClick={() => setValue((val) => val - 1)}>
+            <FontAwesomeIcon icon={faMinus} size="xs" />
+          </button>
+          <Input
+            size="sm"
+            className="w-8 p-0 text-center"
+            value={value}
+            variant="plain"
+            onChange={(e) => setValue(parseInt(e.target.value, 10))}
+          />
+          <button type="button" onClick={() => setValue((val) => val + 1)}>
+            <FontAwesomeIcon icon={faPlus} size="xs" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/views/DashboardPage/components/SecretDetailDrawer/SecretDetailDrawer.tsx b/frontend/src/views/DashboardPage/components/SecretDetailDrawer/SecretDetailDrawer.tsx
new file mode 100644
index 000000000..1fac85361
--- /dev/null
+++ b/frontend/src/views/DashboardPage/components/SecretDetailDrawer/SecretDetailDrawer.tsx
@@ -0,0 +1,211 @@
+import { useFormContext } from 'react-hook-form';
+import { faCircle, faCircleDot, faShuffle } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import {
+  Button,
+  Drawer,
+  DrawerContent,
+  FormControl,
+  Input,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Switch,
+  TextArea
+} from '@app/components/v2';
+import { useToggle } from '@app/hooks';
+
+import { FormData, SecretActionType } from '../../DashboardPage.utils';
+import { GenRandomNumber } from './GenRandomNumber';
+
+type Props = {
+  isDrawerOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  index: number;
+  isReadOnly?: boolean;
+  onEnvCompare: (secretKey: string) => void;
+  secretVersion?: Array<{ id: string; createdAt: string; value: string }>;
+  // to record the ids of deleted ones
+  onSecretDelete: (index: number, id?: string, overrideId?: string) => void;
+  onSave: () => void;
+};
+
+export const SecretDetailDrawer = ({
+  isDrawerOpen,
+  onOpenChange,
+  index,
+  secretVersion = [],
+  isReadOnly,
+  onSecretDelete,
+  onSave,
+  onEnvCompare
+}: Props): JSX.Element => {
+  const [canRevealSecVal, setCanRevealSecVal] = useToggle();
+  const [canRevealSecOverride, setCanRevealSecOverride] = useToggle();
+
+  const { register, setValue, watch } = useFormContext<FormData>();
+  const secret = watch(`secrets.${index}`);
+
+  const isOverridden =
+    secret?.overrideAction === SecretActionType.Created ||
+    secret?.overrideAction === SecretActionType.Modified;
+
+  const onSecretOverride = () => {
+    if (isOverridden) {
+      // when user created a new override but then removes
+      if (SecretActionType.Created) {
+        setValue(`secrets.${index}.valueOverride`, '', { shouldDirty: true });
+      }
+      setValue(`secrets.${index}.overrideAction`, SecretActionType.Deleted, { shouldDirty: true });
+    } else {
+      setValue(
+        `secrets.${index}.overrideAction`,
+        secret?.idOverride ? SecretActionType.Modified : SecretActionType.Created,
+        { shouldDirty: true }
+      );
+    }
+  };
+
+  if (!secret) {
+    return <div />;
+  }
+
+  return (
+    <Drawer onOpenChange={onOpenChange} isOpen={isDrawerOpen}>
+      <DrawerContent
+        className="border-l border-mineshaft-500 bg-bunker"
+        title="Secret"
+        footerContent={
+          <div className="flex flex-col space-y-4 pt-4 shadow-md">
+            <div>
+              <Button
+                variant="star"
+                onClick={() => onEnvCompare(secret?.key)}
+                isFullWidth
+                isDisabled={isReadOnly}
+              >
+                Compare secret across environments
+              </Button>
+            </div>
+            <div className="flex w-full space-x-2">
+              <Button isFullWidth onClick={onSave} isDisabled={isReadOnly}>
+                Save Changes
+              </Button>
+              <Button
+                colorSchema="danger"
+                isDisabled={isReadOnly}
+                onClick={() => onSecretDelete(index, secret._id, secret.idOverride)}
+              >
+                Delete
+              </Button>
+            </div>
+          </div>
+        }
+      >
+        <div className="">
+          <FormControl label="Key">
+            <Input isDisabled {...register(`secrets.${index}.key`)} />
+          </FormControl>
+          <FormControl label="Value">
+            <Popover>
+              <Input
+                isReadOnly={isOverridden || isReadOnly}
+                {...register(`secrets.${index}.value`)}
+                placeholder="EMPTY"
+                onBlur={setCanRevealSecVal.off}
+                onFocus={setCanRevealSecVal.on}
+                type={canRevealSecVal ? 'text' : 'password'}
+                rightIcon={
+                  <PopoverTrigger disabled={isOverridden || isReadOnly}>
+                    <FontAwesomeIcon icon={faShuffle} />
+                  </PopoverTrigger>
+                }
+              />
+              <PopoverContent
+                hideCloseBtn
+                className="w-auto border-mineshaft-500 bg-bunker p-0"
+                align="end"
+              >
+                <GenRandomNumber
+                  onGenerate={(val) =>
+                    setValue(`secrets.${index}.value`, val, { shouldDirty: true })
+                  }
+                />
+              </PopoverContent>
+            </Popover>
+          </FormControl>
+          <div className="mb-2 border-t border-mineshaft-600 pt-4">
+            <Switch
+              id="personal-override"
+              onCheckedChange={onSecretOverride}
+              isChecked={isOverridden}
+              isDisabled={isReadOnly}
+            >
+              Override with a personal value
+            </Switch>
+          </div>
+          <FormControl>
+            <Popover>
+              <Input
+                isReadOnly={!isOverridden || isReadOnly}
+                {...register(`secrets.${index}.valueOverride`)}
+                placeholder="EMPTY"
+                type={canRevealSecOverride ? 'text' : 'password'}
+                onBlur={setCanRevealSecOverride.off}
+                onFocus={setCanRevealSecOverride.on}
+                rightIcon={
+                  <PopoverTrigger disabled={!isOverridden || isReadOnly}>
+                    <FontAwesomeIcon icon={faShuffle} />
+                  </PopoverTrigger>
+                }
+              />
+              <PopoverContent
+                hideCloseBtn
+                className="w-auto border-mineshaft-500 bg-bunker p-0"
+                align="end"
+              >
+                <GenRandomNumber
+                  onGenerate={(val) =>
+                    setValue(`secrets.${index}.valueOverride`, val, { shouldDirty: true })
+                  }
+                />
+              </PopoverContent>
+            </Popover>
+          </FormControl>
+          <div className="mb-4 text-sm text-bunker-300">
+            <div className="mb-2">Version History</div>
+            <div className="flex h-52 flex-col space-y-4 overflow-y-auto overflow-x-hidden rounded-md bg-bunker-800 p-2">
+              {secretVersion?.map(({ createdAt, value, id }, i) => (
+                <div key={id} className="flex flex-col space-y-2">
+                  <div className="flex items-center space-x-2">
+                    <div>
+                      <FontAwesomeIcon icon={i === 0 ? faCircleDot : faCircle} size="sm" />
+                    </div>
+                    <div>
+                      {new Date(createdAt).toLocaleDateString('en-US', {
+                        year: 'numeric',
+                        month: '2-digit',
+                        day: '2-digit',
+                        hour: '2-digit',
+                        minute: '2-digit',
+                        second: '2-digit'
+                      })}
+                    </div>
+                  </div>
+                  <div className="ml-1 flex items-center space-x-2 border-l border-bunker-300 pl-4">
+                    <div className="rounded-sm bg-primary-500/30 px-1">Value:</div>
+                    <div className="font-mono">{value}</div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+          <FormControl label="Comments & Notes">
+            <TextArea isDisabled={isReadOnly} {...register(`secrets.${index}.comment`)} rows={5} />
+          </FormControl>
+        </div>
+      </DrawerContent>
+    </Drawer>
+  );
+};
diff --git a/frontend/src/views/DashboardPage/components/SecretDetailDrawer/index.tsx b/frontend/src/views/DashboardPage/components/SecretDetailDrawer/index.tsx
new file mode 100644
index 000000000..3b93bffd6
--- /dev/null
+++ b/frontend/src/views/DashboardPage/components/SecretDetailDrawer/index.tsx
@@ -0,0 +1 @@
+export {SecretDetailDrawer} from './SecretDetailDrawer'
\ No newline at end of file
diff --git a/frontend/src/views/DashboardPage/components/SecretDropzone/SecretDropzone.tsx b/frontend/src/views/DashboardPage/components/SecretDropzone/SecretDropzone.tsx
new file mode 100644
index 000000000..2fe8c2dd3
--- /dev/null
+++ b/frontend/src/views/DashboardPage/components/SecretDropzone/SecretDropzone.tsx
@@ -0,0 +1,130 @@
+import { ChangeEvent, DragEvent } from 'react';
+import { useTranslation } from 'next-i18next';
+import { faUpload } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { twMerge } from 'tailwind-merge';
+
+import { useNotificationContext } from '@app/components/context/Notifications/NotificationProvider';
+// TODO:(akhilmhdh) convert all the util functions like this into a lib folder grouped by functionalityj
+import { parseDotEnv } from '@app/components/utilities/parseDotEnv';
+import { Button } from '@app/components/v2';
+import { useToggle } from '@app/hooks/useToggle';
+
+type Props = {
+  isSmaller: boolean;
+  onParsedEnv: (env: Record<string, { value: string; comments: string[] }>) => void;
+  onAddNewSecret?: () => void;
+};
+
+export const SecretDropzone = ({ isSmaller, onParsedEnv, onAddNewSecret }: Props): JSX.Element => {
+  const { t } = useTranslation();
+  const [isDragActive, setDragActive] = useToggle();
+  const [isLoading, setIsLoading] = useToggle();
+  const { createNotification } = useNotificationContext();
+
+  const handleDrag = (e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.type === 'dragenter' || e.type === 'dragover') {
+      setDragActive.on();
+    } else if (e.type === 'dragleave') {
+      setDragActive.off();
+    }
+  };
+
+  const parseFile = (file?: File) => {
+    const reader = new FileReader();
+    if (!file) {
+      createNotification({
+        text: `You can't inject files from VS Code. Click 'Reveal in finder', and drag your file directly from the directory where it's located.`,
+        type: 'error',
+        timeoutMs: 10000
+      });
+      return;
+    }
+    // const fileType = file.name.split('.')[1];
+    setIsLoading.on();
+    reader.onload = (event) => {
+      if (!event?.target?.result) return;
+      // parse function's argument looks like to be ArrayBuffer
+      const env = parseDotEnv(event.target.result as ArrayBuffer);
+      setIsLoading.off();
+      onParsedEnv(env);
+    };
+
+    // If something is wrong show an error
+    try {
+      reader.readAsText(file);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const handleDrop = (e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!e.dataTransfer) {
+      return;
+    }
+
+    e.dataTransfer.dropEffect = 'copy';
+    setDragActive.off();
+    parseFile(e.dataTransfer.files[0]);
+  };
+
+  const handleFileUpload = (e: ChangeEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    parseFile(e.target?.files?.[0]);
+  };
+
+  return (
+    <div
+      onDragEnter={handleDrag}
+      onDragLeave={handleDrag}
+      onDragOver={handleDrag}
+      onDrop={handleDrop}
+      className={twMerge(
+        'relative mb-4 mt-4 flex w-full cursor-pointer items-center justify-center space-x-2 rounded-md bg-mineshaft-900 py-8 px-2 opacity-60 outline-dashed outline-2 outline-chicago-600 duration-200 hover:opacity-100',
+        isDragActive && 'opacity-100',
+        !isSmaller && 'flex-col space-y-4',
+        isLoading && 'bg-bunker-800'
+      )}
+    >
+      {isLoading ? (
+        <div className="mb-16 flex items-center justify-center pt-16">
+          <img src="/images/loading/loading.gif" height={70} width={120} alt="google logo" />
+        </div>
+      ) : (
+        <>
+          <div>
+            <FontAwesomeIcon icon={faUpload} size={isSmaller ? '2x' : '5x'} />
+          </div>
+          <div>
+            <p className="">{t(isSmaller ? 'common:drop-zone-keys' : 'common:drop-zone')}</p>
+          </div>
+          <input
+            id="fileSelect"
+            type="file"
+            className="absolute h-full w-full cursor-pointer opacity-0"
+            accept=".txt,.env,.yml,.yaml"
+            onChange={handleFileUpload}
+          />
+          {!isSmaller && (
+            <>
+              <div className="flex w-full flex-row items-center justify-center py-4">
+                <div className="w-1/5 border-t border-gray-700" />
+                <p className="mx-4 text-xs text-gray-400">OR</p>
+                <div className="w-1/5 border-t border-gray-700" />
+              </div>
+              <div>
+                <Button variant="star" onClick={onAddNewSecret}>
+                  Add a new secret
+                </Button>
+              </div>
+            </>
+          )}{' '}
+        </>
+      )}
+    </div>
+  );
+};
diff --git a/frontend/src/views/DashboardPage/components/SecretDropzone/index.tsx b/frontend/src/views/DashboardPage/components/SecretDropzone/index.tsx
new file mode 100644
index 000000000..dc1752390
--- /dev/null
+++ b/frontend/src/views/DashboardPage/components/SecretDropzone/index.tsx
@@ -0,0 +1 @@
+export { SecretDropzone } from './SecretDropzone';
diff --git a/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx b/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx
new file mode 100644
index 000000000..9358569c9
--- /dev/null
+++ b/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx
@@ -0,0 +1,343 @@
+/* eslint-disable react/jsx-no-useless-fragment */
+import { Controller, useFieldArray, useFormContext, useWatch } from 'react-hook-form';
+import {
+  faCodeBranch,
+  faEllipsis,
+  faInfoCircle,
+  faPlus,
+  faSquare,
+  faSquareCheck,
+  faTrash
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { cx } from 'cva';
+import { twMerge } from 'tailwind-merge';
+
+import {
+  Button,
+  FormControl,
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+  IconButton,
+  Input,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Tag,
+  TextArea,
+  Tooltip
+} from '@app/components/v2';
+import { useToggle } from '@app/hooks';
+import { WsTag } from '@app/hooks/api/types';
+
+import { FormData, SecretActionType } from '../../DashboardPage.utils';
+
+type Props = {
+  index: number;
+  // permission and external state's that decided to hide or show
+  isReadOnly?: boolean;
+  isAddOnly?: boolean;
+  isRollbackMode?: boolean;
+  isCommentColumnCollapsed: boolean;
+  isSecretValueHidden: boolean;
+  searchTerm: string;
+  // to record the ids of deleted ones
+  onSecretDelete: (index: number, id?: string, overrideId?: string) => void;
+  // sidebar control props
+  onRowExpand: () => void;
+  // tag props
+  wsTags?: WsTag[];
+  onCreateTagOpen: () => void;
+};
+
+const tagColors = [
+  { bg: 'bg-[#f1c40f]/40', text: 'text-[#fcf0c3]/70' },
+  { bg: 'bg-[#cb1c8d]/40', text: 'text-[#f2c6e3]/70' },
+  { bg: 'bg-[#badc58]/40', text: 'text-[#eef6d5]/70' },
+  { bg: 'bg-[#ff5400]/40', text: 'text-[#ffddcc]/70' },
+  { bg: 'bg-[#3AB0FF]/40', text: 'text-[#f0fffd]/70' },
+  { bg: 'bg-[#6F1AB6]/40', text: 'text-[#FFE5F1]/70' },
+  { bg: 'bg-[#C40B13]/40', text: 'text-[#FFDEDE]/70' },
+  { bg: 'bg-[#332FD0]/40', text: 'text-[#DFF6FF]/70' }
+];
+
+export const SecretInputRow = ({
+  index,
+  isCommentColumnCollapsed,
+  isSecretValueHidden,
+  onRowExpand,
+  isReadOnly,
+  isRollbackMode,
+  isAddOnly,
+  wsTags,
+  onCreateTagOpen,
+  onSecretDelete,
+  searchTerm
+}: Props): JSX.Element => {
+  const { register, setValue, control } = useFormContext<FormData>();
+  const [canRevealSecret, setCanRevealSecret] = useToggle();
+  // comment management in a row
+  const {
+    fields: secretTags,
+    remove,
+    append
+  } = useFieldArray({ control, name: `secrets.${index}.tags` });
+
+  // to get details on a secret
+  const secret = useWatch({ name: `secrets.${index}`, control });
+
+  const hasComment = Boolean(secret.comment);
+  const tags = secret.tags || [];
+  const selectedTagIds = tags.reduce<Record<string, boolean>>(
+    (prev, curr) => ({ ...prev, [curr.slug]: true }),
+    {}
+  );
+
+  // when secret is override by personal values
+  const isOverridden =
+    secret.overrideAction === SecretActionType.Created ||
+    secret.overrideAction === SecretActionType.Modified;
+
+  const onSecretOverride = () => {
+    if (isOverridden) {
+      // when user created a new override but then removes
+      if (secret?.overrideAction === SecretActionType.Created)
+        setValue(`secrets.${index}.valueOverride`, '');
+      setValue(`secrets.${index}.overrideAction`, SecretActionType.Deleted, { shouldDirty: true });
+    } else {
+      setValue(
+        `secrets.${index}.overrideAction`,
+        secret?.idOverride ? SecretActionType.Modified : SecretActionType.Created,
+        { shouldDirty: true }
+      );
+    }
+  };
+
+  const onSelectTag = (selectedTag: WsTag) => {
+    const shouldAppend = !selectedTagIds[selectedTag.slug];
+    if (shouldAppend) {
+      append(selectedTag);
+    } else {
+      const pos = tags.findIndex(({ slug }) => selectedTag.slug === slug);
+      remove(pos);
+    }
+  };
+
+  const isCreatedSecret = !secret?._id;
+  const shouldBeBlockedInAddOnly = !isCreatedSecret && isAddOnly;
+
+  // Why this instead of filter in parent
+  // Because rhf field.map has default values so basically
+  // keys are not updated there and index needs to kept so that we can monitor
+  // values individually here
+  if (
+    !(
+      secret.key?.toUpperCase().includes(searchTerm?.toUpperCase()) ||
+      tags
+        ?.map((tag) => tag.name)
+        .join(' ')
+        ?.toUpperCase()
+        .includes(searchTerm?.toUpperCase()) ||
+      secret.comment?.toUpperCase().includes(searchTerm?.toUpperCase())
+    )
+  ) {
+    return <></>;
+  }
+
+  return (
+    <tr className="group">
+      <td className="px-4 text-center text-xs">{index + 1}</td>
+      <Controller
+        control={control}
+        defaultValue=""
+        name={`secrets.${index}.key`}
+        render={({ fieldState: { error }, field }) => (
+          <HoverCard openDelay={0} open={error?.message ? undefined : false}>
+            <HoverCardTrigger asChild>
+              <td className={cx(error?.message ? 'rounded ring ring-red/50' : null)}>
+                <div className="relative flex items-center">
+                  <Input
+                    autoComplete="off"
+                    variant="plain"
+                    isDisabled={isReadOnly || shouldBeBlockedInAddOnly || isRollbackMode}
+                    className="w-full text-ellipsis font-mono focus:text-bunker-100 focus:ring-transparent"
+                    {...field}
+                  />
+                  {!isAddOnly && (
+                    <IconButton
+                      variant="plain"
+                      className={twMerge(
+                        'w-0 overflow-hidden p-0 group-hover:w-6',
+                        isOverridden && 'w-6 text-primary'
+                      )}
+                      onClick={onSecretOverride}
+                      isDisabled={isRollbackMode || isReadOnly}
+                      ariaLabel="info"
+                    >
+                      <div className="flex items-center space-x-1">
+                        <FontAwesomeIcon icon={faCodeBranch} className="text-base" />
+                      </div>
+                    </IconButton>
+                  )}
+                </div>
+              </td>
+            </HoverCardTrigger>
+            <HoverCardContent className="w-auto py-2 pt-2">
+              <div className="flex items-center space-x-2">
+                <div>
+                  <FontAwesomeIcon icon={faInfoCircle} className="text-red" />
+                </div>
+                <div className="text-sm">{error?.message}</div>
+              </div>
+            </HoverCardContent>
+          </HoverCard>
+        )}
+      />
+      <Popover>
+        <PopoverTrigger asChild>
+          <td className="w-auto max-w-[180px] cursor-pointer text-sm hover:outline hover:outline-mineshaft-400">
+            {isCommentColumnCollapsed ? (
+              <div className="flex justify-center">
+                {hasComment && <FontAwesomeIcon icon={faInfoCircle} />}
+              </div>
+            ) : (
+              <div className="overflow-hidden overflow-ellipsis whitespace-nowrap px-2">
+                {secret.comment || '-'}
+              </div>
+            )}
+          </td>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto">
+          <FormControl label="Comment" className="mb-0">
+            <TextArea
+              isDisabled={isReadOnly || isRollbackMode || shouldBeBlockedInAddOnly}
+              {...register(`secrets.${index}.comment`)}
+              rows={8}
+              cols={30}
+            />
+          </FormControl>
+        </PopoverContent>
+      </Popover>
+      <td className="flex items-center">
+        <div className="flex-grow">
+          {!isOverridden && (
+            <Input
+              variant="plain"
+              isReadOnly={isReadOnly || shouldBeBlockedInAddOnly || isRollbackMode}
+              className="w-full text-ellipsis font-mono focus:text-bunker-100 focus:ring-transparent"
+              type={canRevealSecret || isSecretValueHidden ? 'text' : 'password'}
+              {...register(`secrets.${index}.value`)}
+              placeholder="EMPTY"
+              onBlur={setCanRevealSecret.off}
+              onFocus={setCanRevealSecret.on}
+              autoComplete="off"
+            />
+          )}
+          {isOverridden && (
+            <Input
+              variant="plain"
+              isReadOnly={isReadOnly || isAddOnly || isRollbackMode}
+              className="w-full text-ellipsis font-mono focus:text-bunker-100 focus:ring-transparent"
+              type={canRevealSecret || isSecretValueHidden ? 'text' : 'password'}
+              placeholder="EMPTY"
+              {...register(`secrets.${index}.valueOverride`)}
+              onBlur={setCanRevealSecret.off}
+              onFocus={setCanRevealSecret.on}
+              autoComplete="off"
+            />
+          )}
+        </div>
+        <div className="flex items-center group-hover:mr-2 group-hover:border-r group-hover:border-mineshaft-600">
+          {secretTags.map(({ id, slug }, i) => (
+            <Tag
+              className={cx(
+                tagColors[i % tagColors.length].bg,
+                tagColors[i % tagColors.length].text
+              )}
+              isDisabled={isReadOnly || isAddOnly || isRollbackMode}
+              onClose={() => remove(i)}
+              key={id}
+            >
+              {slug}
+            </Tag>
+          ))}
+          {!(isReadOnly || isAddOnly || isRollbackMode) && (
+            <div className="w-0 overflow-hidden group-hover:w-8">
+              <Popover>
+                <PopoverTrigger asChild>
+                  <div>
+                    <Tooltip content="Add tag">
+                      <IconButton variant="star" size="xs" ariaLabel="add-tag">
+                        <FontAwesomeIcon icon={faPlus} />
+                      </IconButton>
+                    </Tooltip>
+                  </div>
+                </PopoverTrigger>
+                <PopoverContent
+                  side="left"
+                  className="max-h-96 w-auto min-w-[240px] overflow-y-auto overflow-x-hidden p-2 text-bunker-100"
+                  hideCloseBtn
+                >
+                  <div className="mb-2 text-sm font-medium">Add tags to this secret</div>
+                  <div className="flex flex-col space-y-1">
+                    {wsTags?.map((wsTag) => (
+                      <Button
+                        variant="plain"
+                        size="sm"
+                        isFullWidth
+                        className={twMerge(
+                          'justify-start bg-mineshaft-800 text-bunker-100',
+                          selectedTagIds?.[wsTag.slug] && 'text-primary'
+                        )}
+                        onClick={() => onSelectTag(wsTag)}
+                        leftIcon={
+                          <FontAwesomeIcon
+                            icon={selectedTagIds?.[wsTag.slug] ? faSquareCheck : faSquare}
+                          />
+                        }
+                        key={wsTag._id}
+                      >
+                        {wsTag.slug}
+                      </Button>
+                    ))}
+                    <Button
+                      variant="plain"
+                      size="sm"
+                      isFullWidth
+                      className="mt-4 justify-start bg-mineshaft-800 text-bunker-400 hover:text-primary"
+                      onClick={onCreateTagOpen}
+                      leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                    >
+                      Add new tag
+                    </Button>
+                  </div>
+                </PopoverContent>
+              </Popover>
+            </div>
+          )}
+        </div>
+        <div className="flex w-0 items-center justify-end space-x-2 overflow-hidden transition-all group-hover:w-16">
+          <Tooltip content="delete">
+            <IconButton
+              size="xs"
+              colorSchema="danger"
+              ariaLabel="delete"
+              isDisabled={isReadOnly || isRollbackMode}
+              onClick={() => onSecretDelete(index, secret._id, secret?.idOverride)}
+            >
+              <FontAwesomeIcon icon={faTrash} />
+            </IconButton>
+          </Tooltip>
+          {!isAddOnly && (
+            <Tooltip content="more">
+              <IconButton size="xs" variant="solid" onClick={onRowExpand} ariaLabel="expand">
+                <FontAwesomeIcon icon={faEllipsis} />
+              </IconButton>
+            </Tooltip>
+          )}
+        </div>
+      </td>
+    </tr>
+  );
+};
diff --git a/frontend/src/views/DashboardPage/components/SecretInputRow/index.tsx b/frontend/src/views/DashboardPage/components/SecretInputRow/index.tsx
new file mode 100644
index 000000000..94701da38
--- /dev/null
+++ b/frontend/src/views/DashboardPage/components/SecretInputRow/index.tsx
@@ -0,0 +1 @@
+export { SecretInputRow } from './SecretInputRow';
diff --git a/frontend/src/views/DashboardPage/components/SecretTableHeader/SecretTableHeader.tsx b/frontend/src/views/DashboardPage/components/SecretTableHeader/SecretTableHeader.tsx
new file mode 100644
index 000000000..00da7a56e
--- /dev/null
+++ b/frontend/src/views/DashboardPage/components/SecretTableHeader/SecretTableHeader.tsx
@@ -0,0 +1,49 @@
+import { faArrowDown, faArrowUp, faComments } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { twMerge } from 'tailwind-merge';
+
+import { IconButton, Tooltip } from '@app/components/v2';
+
+type Props = {
+  isCommentColumnCollapsed?: boolean;
+  sortDir: 'asc' | 'desc';
+  onSort: () => void;
+  onCommentColToggle: () => void;
+};
+
+export const SecretTableHeader = ({
+  sortDir,
+  isCommentColumnCollapsed,
+  onSort,
+  onCommentColToggle
+}: Props): JSX.Element => (
+  <thead>
+    <tr className="">
+      <th className="w-16 text-center">#</th>
+      <th className={twMerge('w-1/5 min-w-[220px]', isCommentColumnCollapsed && 'w-1/4')}>
+        <div className="inline-flex items-end">
+          Key
+          <IconButton variant="plain" className="ml-2" ariaLabel="sort" onClick={onSort}>
+            <FontAwesomeIcon icon={sortDir === 'asc' ? faArrowDown : faArrowUp} />
+          </IconButton>
+        </div>
+      </th>
+      <th
+        className={twMerge(
+          'w-1/5 cursor-pointer py-2 px-4 font-medium hover:outline hover:outline-mineshaft-400',
+          isCommentColumnCollapsed && 'w-12'
+        )}
+        onClick={onCommentColToggle}
+      >
+        <Tooltip content={isCommentColumnCollapsed ? 'Expand' : 'Minimise'}>
+          <div
+            className={twMerge('flex items-center', isCommentColumnCollapsed && 'justify-center')}
+          >
+            {isCommentColumnCollapsed ? <FontAwesomeIcon icon={faComments} /> : 'Comment'}
+          </div>
+        </Tooltip>
+      </th>
+      <th className={isCommentColumnCollapsed ? 'w-3/4' : '3/5'}>Value</th>
+    </tr>
+  </thead>
+);
diff --git a/frontend/src/views/DashboardPage/components/SecretTableHeader/index.tsx b/frontend/src/views/DashboardPage/components/SecretTableHeader/index.tsx
new file mode 100644
index 000000000..ad0332905
--- /dev/null
+++ b/frontend/src/views/DashboardPage/components/SecretTableHeader/index.tsx
@@ -0,0 +1 @@
+export { SecretTableHeader } from './SecretTableHeader';
diff --git a/frontend/src/views/DashboardPage/index.tsx b/frontend/src/views/DashboardPage/index.tsx
new file mode 100644
index 000000000..d1e7bf228
--- /dev/null
+++ b/frontend/src/views/DashboardPage/index.tsx
@@ -0,0 +1 @@
+export { DashboardPage } from './DashboardPage';
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 54f527c47..e8bd3b56b 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1471,6 +1471,22 @@ module.exports = {
             opacity: 1
             // transform: "translateY(100%)",
           }
+        },
+        drawerRightIn: {
+          '0%': {
+            transform: 'translateX(100%)'
+          },
+          '100%': {
+            transform: 'translateX(0)'
+          }
+        },
+        drawerRightOut: {
+          '0%': {
+            transform: 'translateX(0)'
+          },
+          '100%': {
+            transform: 'translateX(100%)'
+          }
         }
       },
       animation: {
@@ -1478,6 +1494,9 @@ module.exports = {
         // MODAL
         fadeIn: 'fadeIn 100ms cubic-bezier(0.16, 1, 0.3, 1)',
         popIn: 'popIn 150ms cubic-bezier(0.16, 1, 0.3, 1);',
+        // drawer
+        drawerRightIn: 'drawerRightIn 150ms ease-in-out',
+        drawerRightOut: 'drawerRightOut 150ms ease-in-out',
         // Dropdown
         slideDownAndFade: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
         slideLeftAndFade: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',

From c40546945fb63b6643d23aa39aa3c5b433892ffa Mon Sep 17 00:00:00 2001
From: Vladyslav Matsiiako <matsiiako@gmail.com>
Date: Wed, 5 Apr 2023 18:58:59 -0700
Subject: [PATCH 4/7] Minor dashboard updates

---
 .../src/views/DashboardPage/DashboardPage.tsx |   9 +-
 .../SecretInputRow/SecretInputRow.tsx         | 116 +++++++++---------
 .../SecretTableHeader/SecretTableHeader.tsx   |  34 ++---
 3 files changed, 63 insertions(+), 96 deletions(-)

diff --git a/frontend/src/views/DashboardPage/DashboardPage.tsx b/frontend/src/views/DashboardPage/DashboardPage.tsx
index 1aec9f3b8..9f02e08f2 100644
--- a/frontend/src/views/DashboardPage/DashboardPage.tsx
+++ b/frontend/src/views/DashboardPage/DashboardPage.tsx
@@ -36,7 +36,7 @@ import {
 } from '@app/components/v2';
 import { leaveConfirmDefaultMessage } from '@app/const';
 import { useWorkspace } from '@app/context';
-import { useLeaveConfirm, usePersistentState, usePopUp, useToggle } from '@app/hooks';
+import { useLeaveConfirm, usePopUp, useToggle } from '@app/hooks';
 import {
   useBatchSecretsOp,
   useCreateWsTag,
@@ -100,10 +100,6 @@ export const DashboardPage = () => {
     'compareSecrets'
   ] as const);
   const [isSecretValueHidden, setIsSecretValueHidden] = useToggle();
-  const [isCommentColumnCollapsed, setIsCommentCollapsed] = usePersistentState(
-    false,
-    'infisical-comment-box'
-  );
   const [searchFilter, setSearchFilter] = useState('');
   const [snapshotId, setSnaphotId] = useState<string | null>(null);
   const [selectedEnv, setSelectedEnv] = useState<WorkspaceEnv | null>(null);
@@ -538,9 +534,7 @@ export const DashboardPage = () => {
               <TableContainer>
                 <table className="secret-table">
                   <SecretTableHeader
-                    isCommentColumnCollapsed={isCommentColumnCollapsed}
                     sortDir={sortDir}
-                    onCommentColToggle={() => setIsCommentCollapsed(!isCommentColumnCollapsed)}
                     onSort={onSortSecrets}
                   />
                   <tbody>
@@ -555,7 +549,6 @@ export const DashboardPage = () => {
                         onSecretDelete={onSecretDelete}
                         onRowExpand={() => onDrawerOpen({ id: _id as string, index })}
                         isSecretValueHidden={isSecretValueHidden}
-                        isCommentColumnCollapsed={isCommentColumnCollapsed}
                         wsTags={wsTags}
                         onCreateTagOpen={() => handlePopUpOpen('addTag')}
                       />
diff --git a/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx b/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx
index 9358569c9..530f6f581 100644
--- a/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx
+++ b/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx
@@ -2,11 +2,13 @@
 import { Controller, useFieldArray, useFormContext, useWatch } from 'react-hook-form';
 import {
   faCodeBranch,
+  faComment,
   faEllipsis,
   faInfoCircle,
   faPlus,
   faSquare,
   faSquareCheck,
+  faTags,
   faTrash
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -39,7 +41,6 @@ type Props = {
   isReadOnly?: boolean;
   isAddOnly?: boolean;
   isRollbackMode?: boolean;
-  isCommentColumnCollapsed: boolean;
   isSecretValueHidden: boolean;
   searchTerm: string;
   // to record the ids of deleted ones
@@ -64,7 +65,6 @@ const tagColors = [
 
 export const SecretInputRow = ({
   index,
-  isCommentColumnCollapsed,
   isSecretValueHidden,
   onRowExpand,
   isReadOnly,
@@ -146,8 +146,8 @@ export const SecretInputRow = ({
   }
 
   return (
-    <tr className="group">
-      <td className="px-4 text-center text-xs">{index + 1}</td>
+    <tr className="group min-w-full flex flex-row">
+      <td className="w-10 px-4 flex items-center justify-center"><div className='text-center text-xs text-bunker-400'>{index + 1}</div></td>
       <Controller
         control={control}
         defaultValue=""
@@ -156,7 +156,7 @@ export const SecretInputRow = ({
           <HoverCard openDelay={0} open={error?.message ? undefined : false}>
             <HoverCardTrigger asChild>
               <td className={cx(error?.message ? 'rounded ring ring-red/50' : null)}>
-                <div className="relative flex items-center">
+                <div className="min-w-[220px] relative flex items-center">
                   <Input
                     autoComplete="off"
                     variant="plain"
@@ -194,61 +194,36 @@ export const SecretInputRow = ({
           </HoverCard>
         )}
       />
-      <Popover>
-        <PopoverTrigger asChild>
-          <td className="w-auto max-w-[180px] cursor-pointer text-sm hover:outline hover:outline-mineshaft-400">
-            {isCommentColumnCollapsed ? (
-              <div className="flex justify-center">
-                {hasComment && <FontAwesomeIcon icon={faInfoCircle} />}
-              </div>
-            ) : (
-              <div className="overflow-hidden overflow-ellipsis whitespace-nowrap px-2">
-                {secret.comment || '-'}
-              </div>
-            )}
-          </td>
-        </PopoverTrigger>
-        <PopoverContent className="w-auto">
-          <FormControl label="Comment" className="mb-0">
-            <TextArea
-              isDisabled={isReadOnly || isRollbackMode || shouldBeBlockedInAddOnly}
-              {...register(`secrets.${index}.comment`)}
-              rows={8}
-              cols={30}
-            />
-          </FormControl>
-        </PopoverContent>
-      </Popover>
-      <td className="flex items-center">
-        <div className="flex-grow">
-          {!isOverridden && (
-            <Input
-              variant="plain"
-              isReadOnly={isReadOnly || shouldBeBlockedInAddOnly || isRollbackMode}
-              className="w-full text-ellipsis font-mono focus:text-bunker-100 focus:ring-transparent"
-              type={canRevealSecret || isSecretValueHidden ? 'text' : 'password'}
-              {...register(`secrets.${index}.value`)}
-              placeholder="EMPTY"
-              onBlur={setCanRevealSecret.off}
-              onFocus={setCanRevealSecret.on}
-              autoComplete="off"
-            />
-          )}
-          {isOverridden && (
-            <Input
-              variant="plain"
-              isReadOnly={isReadOnly || isAddOnly || isRollbackMode}
-              className="w-full text-ellipsis font-mono focus:text-bunker-100 focus:ring-transparent"
-              type={canRevealSecret || isSecretValueHidden ? 'text' : 'password'}
-              placeholder="EMPTY"
-              {...register(`secrets.${index}.valueOverride`)}
-              onBlur={setCanRevealSecret.off}
-              onFocus={setCanRevealSecret.on}
-              autoComplete="off"
-            />
-          )}
-        </div>
-        <div className="flex items-center group-hover:mr-2 group-hover:border-r group-hover:border-mineshaft-600">
+      <div className="flex-grow w-full">
+        {!isOverridden && (
+          <Input
+            variant="plain"
+            isReadOnly={isReadOnly || shouldBeBlockedInAddOnly || isRollbackMode}
+            className="w-full text-ellipsis font-mono focus:text-bunker-100 focus:ring-transparent"
+            type={canRevealSecret || isSecretValueHidden ? 'text' : 'password'}
+            {...register(`secrets.${index}.value`)}
+            placeholder="EMPTY"
+            onBlur={setCanRevealSecret.off}
+            onFocus={setCanRevealSecret.on}
+            autoComplete="off"
+          />
+        )}
+        {isOverridden && (
+          <Input
+            variant="plain"
+            isReadOnly={isReadOnly || isAddOnly || isRollbackMode}
+            className="w-full text-ellipsis font-mono focus:text-bunker-100 focus:ring-transparent"
+            type={canRevealSecret || isSecretValueHidden ? 'text' : 'password'}
+            placeholder="EMPTY"
+            {...register(`secrets.${index}.valueOverride`)}
+            onBlur={setCanRevealSecret.off}
+            onFocus={setCanRevealSecret.on}
+            autoComplete="off"
+          />
+        )}
+      </div>
+      <td className="flex items-center min-w-sm">
+        <div className="flex items-center group-hover:mr-0 group-hover:border-r group-hover:border-mineshaft-600">
           {secretTags.map(({ id, slug }, i) => (
             <Tag
               className={cx(
@@ -269,7 +244,7 @@ export const SecretInputRow = ({
                   <div>
                     <Tooltip content="Add tag">
                       <IconButton variant="star" size="xs" ariaLabel="add-tag">
-                        <FontAwesomeIcon icon={faPlus} />
+                        <FontAwesomeIcon icon={faTags} />
                       </IconButton>
                     </Tooltip>
                   </div>
@@ -317,6 +292,25 @@ export const SecretInputRow = ({
             </div>
           )}
         </div>
+        <div className={`${hasComment ? "w-8" : "w-0"} overflow-hidden group-hover:w-8`}>
+          <Popover>
+            <PopoverTrigger asChild>
+              <IconButton variant="star" size="xs" ariaLabel="add-tag">
+                <FontAwesomeIcon icon={faComment} />
+              </IconButton>
+            </PopoverTrigger>
+            <PopoverContent className="w-auto">
+              <FormControl label="Comment" className="mb-0">
+                <TextArea
+                  isDisabled={isReadOnly || isRollbackMode || shouldBeBlockedInAddOnly}
+                  {...register(`secrets.${index}.comment`)}
+                  rows={8}
+                  cols={30}
+                />
+              </FormControl>
+            </PopoverContent>
+          </Popover>
+        </div>
         <div className="flex w-0 items-center justify-end space-x-2 overflow-hidden transition-all group-hover:w-16">
           <Tooltip content="delete">
             <IconButton
diff --git a/frontend/src/views/DashboardPage/components/SecretTableHeader/SecretTableHeader.tsx b/frontend/src/views/DashboardPage/components/SecretTableHeader/SecretTableHeader.tsx
index 00da7a56e..48abab7d3 100644
--- a/frontend/src/views/DashboardPage/components/SecretTableHeader/SecretTableHeader.tsx
+++ b/frontend/src/views/DashboardPage/components/SecretTableHeader/SecretTableHeader.tsx
@@ -1,26 +1,21 @@
-import { faArrowDown, faArrowUp, faComments } from '@fortawesome/free-solid-svg-icons';
+import { faArrowDown, faArrowUp } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { twMerge } from 'tailwind-merge';
 
-import { IconButton, Tooltip } from '@app/components/v2';
+import { IconButton } from '@app/components/v2';
 
 type Props = {
-  isCommentColumnCollapsed?: boolean;
   sortDir: 'asc' | 'desc';
   onSort: () => void;
-  onCommentColToggle: () => void;
 };
 
 export const SecretTableHeader = ({
   sortDir,
-  isCommentColumnCollapsed,
-  onSort,
-  onCommentColToggle
+  onSort
 }: Props): JSX.Element => (
   <thead>
-    <tr className="">
-      <th className="w-16 text-center">#</th>
-      <th className={twMerge('w-1/5 min-w-[220px]', isCommentColumnCollapsed && 'w-1/4')}>
+    <tr className="flex flex-row">
+      {/* <th className="w-10 text-center"/> */}
+      <th className='w-1/5 min-w-[220px]'>
         <div className="inline-flex items-end">
           Key
           <IconButton variant="plain" className="ml-2" ariaLabel="sort" onClick={onSort}>
@@ -28,22 +23,7 @@ export const SecretTableHeader = ({
           </IconButton>
         </div>
       </th>
-      <th
-        className={twMerge(
-          'w-1/5 cursor-pointer py-2 px-4 font-medium hover:outline hover:outline-mineshaft-400',
-          isCommentColumnCollapsed && 'w-12'
-        )}
-        onClick={onCommentColToggle}
-      >
-        <Tooltip content={isCommentColumnCollapsed ? 'Expand' : 'Minimise'}>
-          <div
-            className={twMerge('flex items-center', isCommentColumnCollapsed && 'justify-center')}
-          >
-            {isCommentColumnCollapsed ? <FontAwesomeIcon icon={faComments} /> : 'Comment'}
-          </div>
-        </Tooltip>
-      </th>
-      <th className={isCommentColumnCollapsed ? 'w-3/4' : '3/5'}>Value</th>
+      <th className='w-full'>Value</th>
     </tr>
   </thead>
 );

From 553703decbb1070fca73371e24015f8ec4d248e6 Mon Sep 17 00:00:00 2001
From: Maidul Islam <maidul98@gmail.com>
Date: Sat, 8 Apr 2023 16:57:11 -0700
Subject: [PATCH 5/7] add ingress controller to helm chart

---
 helm-charts/infisical/Chart.lock          | 9 ++++++---
 helm-charts/infisical/Chart.yaml          | 6 +++++-
 helm-charts/infisical/templates/NOTES.txt | 1 +
 helm-charts/infisical/values.yaml         | 4 ++++
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/helm-charts/infisical/Chart.lock b/helm-charts/infisical/Chart.lock
index 5170df21b..952009b7b 100644
--- a/helm-charts/infisical/Chart.lock
+++ b/helm-charts/infisical/Chart.lock
@@ -1,9 +1,12 @@
 dependencies:
 - name: mongodb
   repository: https://charts.bitnami.com/bitnami
-  version: 13.9.1
+  version: 13.9.4
 - name: mailhog
   repository: https://codecentric.github.io/helm-charts
   version: 5.2.3
-digest: sha256:1ddb3ffef899859222b72547657f57ea303e768d67886a4a57edcb0f773ea83f
-generated: "2023-03-14T12:58:34.387144895+01:00"
+- name: ingress-nginx
+  repository: https://kubernetes.github.io/ingress-nginx
+  version: 4.0.13
+digest: sha256:d1a679e6c30e37da96b7a4b6115e285f61e6ce0dd921ffbe2cf557418c229f33
+generated: "2023-04-08T15:59:12.950942-07:00"
diff --git a/helm-charts/infisical/Chart.yaml b/helm-charts/infisical/Chart.yaml
index 55cc51b9b..aaafc28ba 100644
--- a/helm-charts/infisical/Chart.yaml
+++ b/helm-charts/infisical/Chart.yaml
@@ -7,7 +7,7 @@ type: application
 # This is the chart version. This version number should be incremented each time you make changes
 # to the chart and its templates, including the app version.
 # Versions are expected to follow Semantic Versioning (https://semver.org/)
-version: 0.1.16
+version: 0.1.17
 
 # This is the version number of the application being deployed. This version number should be
 # incremented each time you make changes to the application. Versions are not expected to
@@ -24,3 +24,7 @@ dependencies:
     version: "~5.2.3"
     repository: "https://codecentric.github.io/helm-charts"
     condition: mailhog.enabled
+  - name: ingress-nginx
+    version: 4.0.13
+    repository: https://kubernetes.github.io/ingress-nginx
+    condition: ingress.nginx.enabled
diff --git a/helm-charts/infisical/templates/NOTES.txt b/helm-charts/infisical/templates/NOTES.txt
index 56879e6a2..7d98ee89c 100644
--- a/helm-charts/infisical/templates/NOTES.txt
+++ b/helm-charts/infisical/templates/NOTES.txt
@@ -50,6 +50,7 @@
 │   • infisical-backend  : {{ .Values.backend.enabled }}
 │   • mongodb            : {{ .Values.mongodb.enabled }}
 │   • mailhog            : {{ .Values.mailhog.enabled }}
+|   • nginx              : {{ .Values.ingress.nginx.enabled }}
 │
 ╰―――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――┤
 
diff --git a/helm-charts/infisical/values.yaml b/helm-charts/infisical/values.yaml
index 67c222278..392c9b3b2 100644
--- a/helm-charts/infisical/values.yaml
+++ b/helm-charts/infisical/values.yaml
@@ -301,6 +301,10 @@ ingress:
   ## @param ingress.ingressClassName Ingress class name
   ##
   ingressClassName: nginx
+  ## @param ingress.nginx.enabled Ingress controller
+  ##
+  nginx:
+    enabled: false
   ## @param ingress.annotations Ingress annotations
   ##
   annotations:

From ecb182ad038d467b01971e93dada722ae589633e Mon Sep 17 00:00:00 2001
From: Vladyslav Matsiiako <matsiiako@gmail.com>
Date: Sat, 8 Apr 2023 17:30:28 -0700
Subject: [PATCH 6/7] Fixing UI, UX, and bugs in the dashboard

---
 frontend/src/components/v2/Button/Button.tsx  |  10 +-
 frontend/src/components/v2/Card/Card.tsx      |   2 +-
 frontend/src/components/v2/Drawer/Drawer.tsx  |   4 +-
 .../components/v2/IconButton/IconButton.tsx   |   8 +-
 .../src/components/v2/Tooltip/Tooltip.tsx     |   2 +-
 .../src/views/DashboardPage/DashboardPage.tsx |  65 ++--
 .../CompareSecret/CompareSecret.tsx           |   2 +-
 .../components/PitDrawer/PitDrawer.tsx        |   1 +
 .../SecretDetailDrawer/SecretDetailDrawer.tsx |  16 +-
 .../SecretDropzone/SecretDropzone.tsx         |  12 +-
 .../SecretInputRow/SecretInputRow.tsx         | 285 ++++++++++++------
 .../SecretTableHeader/SecretTableHeader.tsx   |  68 ++++-
 12 files changed, 312 insertions(+), 163 deletions(-)

diff --git a/frontend/src/components/v2/Button/Button.tsx b/frontend/src/components/v2/Button/Button.tsx
index 00663ad69..635aa0858 100644
--- a/frontend/src/components/v2/Button/Button.tsx
+++ b/frontend/src/components/v2/Button/Button.tsx
@@ -26,7 +26,8 @@ const buttonVariants = cva(
       colorSchema: {
         primary: ['bg-primary', 'text-black', 'border-primary bg-opacity-80 hover:bg-opacity-100'],
         secondary: ['bg-mineshaft', 'text-gray-300', 'border-mineshaft hover:bg-opacity-80'],
-        danger: ['bg-red', 'text-white', 'border-red hover:bg-opacity-90']
+        danger: ['bg-red', 'text-white', 'border-red hover:bg-opacity-90'],
+        gray: ['bg-bunker-500', 'text-bunker-200']
       },
       variant: {
         solid: '',
@@ -85,6 +86,11 @@ const buttonVariants = cva(
         variant: 'plain',
         className: 'text-primary'
       },
+      {
+        colorSchema: 'gray',
+        variant: 'plain',
+        className: 'bg-transparent text-bunker-200'
+      },
       {
         colorSchema: 'secondary',
         variant: 'plain',
@@ -165,7 +171,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         >
           {leftIcon}
         </div>
-        <span className={twMerge('w-full transition-all', loadingToggleClass)}>{children}</span>
+        <span className={twMerge('transition-all', isFullWidth ? 'w-full' : 'w-min', loadingToggleClass)}>{children}</span>
         <div
           className={twMerge(
             'inline-flex shrink-0 cursor-pointer items-center justify-center transition-all',
diff --git a/frontend/src/components/v2/Card/Card.tsx b/frontend/src/components/v2/Card/Card.tsx
index 095018614..0f4a659cf 100644
--- a/frontend/src/components/v2/Card/Card.tsx
+++ b/frontend/src/components/v2/Card/Card.tsx
@@ -25,7 +25,7 @@ export type CardFooterProps = {
 };
 
 export const CardFooter = ({ children, className }: CardFooterProps) => (
-  <div className={twMerge('p-6 pt-0', className)}>{children}</div>
+  <div className={twMerge('p-4 pt-0', className)}>{children}</div>
 );
 
 export type CardBodyProps = {
diff --git a/frontend/src/components/v2/Drawer/Drawer.tsx b/frontend/src/components/v2/Drawer/Drawer.tsx
index ef7c7945b..7c4abcd4b 100644
--- a/frontend/src/components/v2/Drawer/Drawer.tsx
+++ b/frontend/src/components/v2/Drawer/Drawer.tsx
@@ -45,13 +45,13 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
         ref={forwardedRef}
         className={twMerge(drawerContentVariation({ direction, className }))}
       >
-        <Card isRounded={false} className="h-full w-full">
+        <Card isRounded={false} className="h-full w-full dark">
           {title && (
             <CardTitle subTitle={subTitle} className="px-4">
               {title}
             </CardTitle>
           )}
-          <CardBody className="flex-grow overflow-y-auto overflow-x-hidden px-4">
+          <CardBody className="flex-grow overflow-y-auto overflow-x-hidden px-4 dark:[color-scheme:dark]">
             {children}
           </CardBody>
           {footerContent && <CardFooter>{footerContent}</CardFooter>}{' '}
diff --git a/frontend/src/components/v2/IconButton/IconButton.tsx b/frontend/src/components/v2/IconButton/IconButton.tsx
index f06fc5b5c..78fc0088f 100644
--- a/frontend/src/components/v2/IconButton/IconButton.tsx
+++ b/frontend/src/components/v2/IconButton/IconButton.tsx
@@ -24,7 +24,7 @@ const iconButtonVariants = cva(
       colorSchema: {
         primary: ['bg-primary', 'text-black', 'border-primary hover:opacity-80'],
         secondary: ['bg-mineshaft', 'text-gray-300', 'border-mineshaft hover:bg-bunker-400'],
-        danger: ['bg-[#973939] hover:bg-red', 'text-white', 'border-red']
+        danger: ['bg-[#973939]', 'text-white', 'border-red']
       },
       variant: {
         solid: '',
@@ -41,7 +41,7 @@ const iconButtonVariants = cva(
         false: ''
       },
       size: {
-        xs: ['text-xs', 'py-1.5', 'px-2'],
+        xs: ['text-xs', 'rounded-sm', 'py-1.5', 'px-2'],
         sm: ['text-sm', 'py-3', 'px-3'],
         md: ['text-md', 'py-4', 'px-4'],
         lg: ['text-lg', 'py-6', 'px-6']
@@ -76,7 +76,7 @@ const iconButtonVariants = cva(
       {
         colorSchema: 'primary',
         variant: 'plain',
-        className: 'text-primary'
+        className: 'hover:text-primary'
       },
       {
         colorSchema: 'secondary',
@@ -86,7 +86,7 @@ const iconButtonVariants = cva(
       {
         colorSchema: 'danger',
         variant: 'plain',
-        className: 'text-red'
+        className: 'hover:text-red'
       },
       {
         colorSchema: ['danger', 'primary', 'secondary'],
diff --git a/frontend/src/components/v2/Tooltip/Tooltip.tsx b/frontend/src/components/v2/Tooltip/Tooltip.tsx
index 77e587303..20cf918c5 100644
--- a/frontend/src/components/v2/Tooltip/Tooltip.tsx
+++ b/frontend/src/components/v2/Tooltip/Tooltip.tsx
@@ -35,7 +35,7 @@ export const Tooltip = ({
       sideOffset={5}
       {...props}
       className={twMerge(
-        `z-20 select-none rounded-md bg-mineshaft-500 py-2 px-4 text-sm shadow-md 
+        `z-20 select-none rounded-md bg-mineshaft-500 py-2 px-4 text-sm text-bunker-200 shadow-md 
 data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade
 data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade
 data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade
diff --git a/frontend/src/views/DashboardPage/DashboardPage.tsx b/frontend/src/views/DashboardPage/DashboardPage.tsx
index 9f02e08f2..a77eadc14 100644
--- a/frontend/src/views/DashboardPage/DashboardPage.tsx
+++ b/frontend/src/views/DashboardPage/DashboardPage.tsx
@@ -99,7 +99,7 @@ export const DashboardPage = () => {
     'uploadedSecOpts',
     'compareSecrets'
   ] as const);
-  const [isSecretValueHidden, setIsSecretValueHidden] = useToggle();
+  const [isSecretValueHidden, setIsSecretValueHidden] = useToggle(true);
   const [searchFilter, setSearchFilter] = useState('');
   const [snapshotId, setSnaphotId] = useState<string | null>(null);
   const [selectedEnv, setSelectedEnv] = useState<WorkspaceEnv | null>(null);
@@ -178,6 +178,7 @@ export const DashboardPage = () => {
 
   const method = useForm<FormData>({
     // why any: well yup inferred ts expects other keys to defined as undefined
+    defaultValues: secrets as any,
     values: secrets as any,
     mode: 'onBlur',
     resolver: yupResolver(schema)
@@ -191,6 +192,8 @@ export const DashboardPage = () => {
     formState: { isDirty, isSubmitting, dirtyFields },
     reset
   } = method;
+  console.log(122, method)
+  console.log(123, isDirty, Object.keys(dirtyFields))
   const formSecrets = useWatch({ control, name: 'secrets' });
   const { fields, prepend, append, remove, update } = useFieldArray({ control, name: 'secrets' });
 
@@ -198,12 +201,13 @@ export const DashboardPage = () => {
   const isReadOnly = selectedEnv?.isWriteDenied;
   const isAddOnly = selectedEnv?.isReadDenied && !selectedEnv?.isWriteDenied;
   const canDoRollback = !isReadOnly && !isAddOnly;
+  console.log(123, !isRollbackMode, !isAddOnly, !isDirty)
   const isSubmitDisabled =
     isReadOnly ||
     // on add only mode the formstate becomes dirty due to secrets missing some items
     // to avoid this we check dirtyFields in isAddOnly Mode
     (isAddOnly && Object.keys(dirtyFields).length === 0) ||
-    (!isRollbackMode && !isAddOnly && !isDirty) ||
+    (!isRollbackMode && !isAddOnly && Object.keys(dirtyFields).length === 0) ||
     isSubmitting;
 
   useEffect(() => {
@@ -411,7 +415,7 @@ export const DashboardPage = () => {
   );
 
   return (
-    <div className="container mx-auto w-full px-8 text-mineshaft-50 dark:[color-scheme:dark]">
+    <div className="container mx-auto w-full px-6 text-mineshaft-50 dark:[color-scheme:dark]">
       <FormProvider {...method}>
         <form autoComplete="off">
           {/* breadcrumb row */}
@@ -439,6 +443,7 @@ export const DashboardPage = () => {
                     setSnaphotId(null);
                     reset({ ...secrets, isSnapshotMode: false });
                   }}
+                  className='h-10'
                 >
                   Go back
                 </Button>
@@ -449,6 +454,7 @@ export const DashboardPage = () => {
                 leftIcon={<FontAwesomeIcon icon={faCodeCommit} />}
                 isLoading={isLoadingSnapshotCount}
                 isDisabled={!canDoRollback}
+                className='h-10'
               >
                 {snapshotCount} Commits
               </Button>
@@ -457,6 +463,7 @@ export const DashboardPage = () => {
                 isLoading={isSubmitting}
                 leftIcon={<FontAwesomeIcon icon={isRollbackMode ? faClockRotateLeft : faCheck} />}
                 onClick={handleSubmit(onSaveSecret)}
+                className='h-10'
               >
                 {isRollbackMode ? 'Rollback' : 'Save Changes'}
               </Button>
@@ -470,7 +477,8 @@ export const DashboardPage = () => {
                   value={selectedEnv?.slug}
                   onValueChange={onEnvChange}
                   position="popper"
-                  className="min-w-[180px] bg-mineshaft-600"
+                  className="min-w-[180px] bg-mineshaft-600 h-10 font-medium"
+                  dropdownContainerClassName="text-bunker-200 bg-mineshaft-800 border border-mineshaft-600 drop-shadow-2xl"
                 >
                   {userAvailableEnvs?.map(({ name, slug }) => (
                     <SelectItem value={slug} key={slug}>
@@ -482,7 +490,7 @@ export const DashboardPage = () => {
             </div>
             <div className="flex-grow">
               <Input
-                className="bg-mineshaft-600 placeholder-mineshaft-50"
+                className="bg-mineshaft-600 h-[2.3rem] placeholder-mineshaft-50"
                 placeholder="Search keys..."
                 value={searchFilter}
                 onChange={(e) => setSearchFilter(e.target.value)}
@@ -497,12 +505,12 @@ export const DashboardPage = () => {
                       <FontAwesomeIcon icon={faDownload} />
                     </IconButton>
                   </PopoverTrigger>
-                  <PopoverContent className="w-auto">
+                  <PopoverContent className="w-auto bg-mineshaft-800 border border-mineshaft-600 p-1" hideCloseBtn>
                     <div className="flex flex-col space-y-2">
                       <Button
                         onClick={() => downloadSecret(getValues('secrets'), selectedEnv?.slug)}
                         variant="star"
-                        className="bg-bunker-800"
+                        className="bg-bunker-700 h-8"
                       >
                         Download as .env
                       </Button>
@@ -510,34 +518,37 @@ export const DashboardPage = () => {
                   </PopoverContent>
                 </Popover>
               </div>
-              <Tooltip content={isSecretValueHidden ? 'Hide Secrets' : 'Reveal secrets'}>
-                <IconButton
-                  ariaLabel="reveal"
-                  variant="star"
-                  onClick={() => setIsSecretValueHidden.toggle()}
-                >
-                  <FontAwesomeIcon icon={isSecretValueHidden ? faEyeSlash : faEye} />
-                </IconButton>
-              </Tooltip>
+              <div>
+                <Tooltip content={isSecretValueHidden ? 'Reveal Secrets' : 'Hide secrets'}>
+                  <IconButton
+                    ariaLabel="reveal"
+                    variant="star"
+                    onClick={() => setIsSecretValueHidden.toggle()}
+                  >
+                    <FontAwesomeIcon icon={isSecretValueHidden ? faEye : faEyeSlash} />
+                  </IconButton>
+                </Tooltip>
+              </div>
               <Button
                 leftIcon={<FontAwesomeIcon icon={faPlus} />}
                 onClick={() => prepend(DEFAULT_SECRET_VALUE, { shouldFocus: false })}
                 isDisabled={isReadOnly || isRollbackMode}
                 variant="star"
+                className="h-10"
               >
                 Add Secret
               </Button>
             </div>
           </div>
-          <div className="mt-4">
+          <div className={`${isSecretEmpty ? "flex flex-col items-center justify-center" : ""} mt-4 h-[calc(100vh-270px)] overflow-y-scroll overflow-x-hidden no-scrollbar no-scrollbar::-webkit-scrollbar`}>
             {!isSecretEmpty && (
               <TableContainer>
-                <table className="secret-table">
+                <table className="secret-table relative">
                   <SecretTableHeader
                     sortDir={sortDir}
                     onSort={onSortSecrets}
                   />
-                  <tbody>
+                  <tbody className="overflow-y-auto max-h-screen">
                     {fields.map(({ id, _id }, index) => (
                       <SecretInputRow
                         key={id}
@@ -555,15 +566,15 @@ export const DashboardPage = () => {
                     ))}
                     {!isReadOnly && !isRollbackMode && (
                       <tr>
-                        <td colSpan={3}>
-                          <Button
-                            variant="plain"
-                            className="my-1"
+                        <td colSpan={3} className="hover:bg-mineshaft-700">
+                          <button
+                            type="button"
+                            className="w-[calc(100vw-400px)] h-8 ml-12 font-normal text-bunker-300 flex justify-start items-center"
                             onClick={onAppendSecret}
-                            leftIcon={<FontAwesomeIcon icon={faPlus} />}
                           >
-                            Add Secret
-                          </Button>
+                            <FontAwesomeIcon icon={faPlus} />
+                            <span className="w-20 ml-2">Add Secret</span>
+                          </button>
                         </td>
                       </tr>
                     )}
@@ -650,7 +661,7 @@ export const DashboardPage = () => {
         >
           <ModalContent
             title={popUp?.compareSecrets?.data as string}
-            subTitle="Secret value in available environments"
+            subTitle="Below is the comparison of secret values across available environments"
             overlayClassName="z-[90]"
           >
             <CompareSecret
diff --git a/frontend/src/views/DashboardPage/components/CompareSecret/CompareSecret.tsx b/frontend/src/views/DashboardPage/components/CompareSecret/CompareSecret.tsx
index 63af91803..9075595aa 100644
--- a/frontend/src/views/DashboardPage/components/CompareSecret/CompareSecret.tsx
+++ b/frontend/src/views/DashboardPage/components/CompareSecret/CompareSecret.tsx
@@ -29,7 +29,7 @@ const SecretValue = ({ workspaceId, env, envName, secretKey }: SecretValueProps)
   return (
     <FormControl label={envName}>
       <Input
-        className="w-full text-ellipsis font-mono focus:text-bunker-100 focus:ring-transparent"
+        className={`w-full text-ellipsis font-mono focus:ring-transparent ${getValue(secret) === "Not found" && "text-mineshaft-500"}`}
         value={getValue(secret)}
         isReadOnly
         rightIcon={isSecretsLoading ? <Spinner /> : undefined}
diff --git a/frontend/src/views/DashboardPage/components/PitDrawer/PitDrawer.tsx b/frontend/src/views/DashboardPage/components/PitDrawer/PitDrawer.tsx
index 50667ca24..e97b1e13a 100644
--- a/frontend/src/views/DashboardPage/components/PitDrawer/PitDrawer.tsx
+++ b/frontend/src/views/DashboardPage/components/PitDrawer/PitDrawer.tsx
@@ -45,6 +45,7 @@ export const PitDrawer = ({
                 <Button
                   key={_id}
                   className="py-3 px-4 text-sm"
+                  isFullWidth
                   variant={
                     (i === 0 && index === 0 && snapshotId === null) || snapshotId === _id
                       ? 'solid'
diff --git a/frontend/src/views/DashboardPage/components/SecretDetailDrawer/SecretDetailDrawer.tsx b/frontend/src/views/DashboardPage/components/SecretDetailDrawer/SecretDetailDrawer.tsx
index 1fac85361..f0d64819f 100644
--- a/frontend/src/views/DashboardPage/components/SecretDetailDrawer/SecretDetailDrawer.tsx
+++ b/frontend/src/views/DashboardPage/components/SecretDetailDrawer/SecretDetailDrawer.tsx
@@ -74,10 +74,10 @@ export const SecretDetailDrawer = ({
   return (
     <Drawer onOpenChange={onOpenChange} isOpen={isDrawerOpen}>
       <DrawerContent
-        className="border-l border-mineshaft-500 bg-bunker"
+        className="border-l border-mineshaft-500 bg-bunker dark"
         title="Secret"
         footerContent={
-          <div className="flex flex-col space-y-4 pt-4 shadow-md">
+          <div className="flex flex-col space-y-2 pt-4 shadow-md">
             <div>
               <Button
                 variant="star"
@@ -103,7 +103,7 @@ export const SecretDetailDrawer = ({
           </div>
         }
       >
-        <div className="">
+        <div className="dark:[color-scheme:dark]">
           <FormControl label="Key">
             <Input isDisabled {...register(`secrets.${index}.key`)} />
           </FormControl>
@@ -173,11 +173,11 @@ export const SecretDetailDrawer = ({
               </PopoverContent>
             </Popover>
           </FormControl>
-          <div className="mb-4 text-sm text-bunker-300">
+          <div className="mb-4 text-sm text-bunker-300 dark">
             <div className="mb-2">Version History</div>
-            <div className="flex h-52 flex-col space-y-4 overflow-y-auto overflow-x-hidden rounded-md bg-bunker-800 p-2">
+            <div className="flex h-48 flex-col space-y-2 border border-mineshaft-600 overflow-y-auto overflow-x-hidden rounded-md bg-bunker-800 p-2 dark:[color-scheme:dark]">
               {secretVersion?.map(({ createdAt, value, id }, i) => (
-                <div key={id} className="flex flex-col space-y-2">
+                <div key={id} className="flex flex-col space-y-1">
                   <div className="flex items-center space-x-2">
                     <div>
                       <FontAwesomeIcon icon={i === 0 ? faCircleDot : faCircle} size="sm" />
@@ -193,7 +193,7 @@ export const SecretDetailDrawer = ({
                       })}
                     </div>
                   </div>
-                  <div className="ml-1 flex items-center space-x-2 border-l border-bunker-300 pl-4">
+                  <div className="ml-1.5 flex items-center space-x-2 border-l border-bunker-300 pl-4">
                     <div className="rounded-sm bg-primary-500/30 px-1">Value:</div>
                     <div className="font-mono">{value}</div>
                   </div>
@@ -202,7 +202,7 @@ export const SecretDetailDrawer = ({
             </div>
           </div>
           <FormControl label="Comments & Notes">
-            <TextArea isDisabled={isReadOnly} {...register(`secrets.${index}.comment`)} rows={5} />
+            <TextArea className="border border-mineshaft-600 text-sm" isDisabled={isReadOnly} {...register(`secrets.${index}.comment`)} rows={5} />
           </FormControl>
         </div>
       </DrawerContent>
diff --git a/frontend/src/views/DashboardPage/components/SecretDropzone/SecretDropzone.tsx b/frontend/src/views/DashboardPage/components/SecretDropzone/SecretDropzone.tsx
index 2fe8c2dd3..e3a871819 100644
--- a/frontend/src/views/DashboardPage/components/SecretDropzone/SecretDropzone.tsx
+++ b/frontend/src/views/DashboardPage/components/SecretDropzone/SecretDropzone.tsx
@@ -84,15 +84,15 @@ export const SecretDropzone = ({ isSmaller, onParsedEnv, onAddNewSecret }: Props
       onDragOver={handleDrag}
       onDrop={handleDrop}
       className={twMerge(
-        'relative mb-4 mt-4 flex w-full cursor-pointer items-center justify-center space-x-2 rounded-md bg-mineshaft-900 py-8 px-2 opacity-60 outline-dashed outline-2 outline-chicago-600 duration-200 hover:opacity-100',
+        'relative mb-4 mt-4 max-w-[calc(100vw-292px)] flex w-full cursor-pointer text-mineshaft-200 items-center py-8 justify-center space-x-2 rounded-md bg-mineshaft-900 px-2 mx-0.5 opacity-60 outline-dashed outline-2 outline-chicago-600 duration-200 hover:opacity-100',
         isDragActive && 'opacity-100',
-        !isSmaller && 'flex-col space-y-4',
+        !isSmaller && 'flex-col space-y-4 max-w-3xl py-20',
         isLoading && 'bg-bunker-800'
       )}
     >
       {isLoading ? (
         <div className="mb-16 flex items-center justify-center pt-16">
-          <img src="/images/loading/loading.gif" height={70} width={120} alt="google logo" />
+          <img src="/images/loading/loading.gif" height={70} width={120} alt="loading animation" />
         </div>
       ) : (
         <>
@@ -112,9 +112,9 @@ export const SecretDropzone = ({ isSmaller, onParsedEnv, onAddNewSecret }: Props
           {!isSmaller && (
             <>
               <div className="flex w-full flex-row items-center justify-center py-4">
-                <div className="w-1/5 border-t border-gray-700" />
-                <p className="mx-4 text-xs text-gray-400">OR</p>
-                <div className="w-1/5 border-t border-gray-700" />
+                <div className="w-1/5 border-t border-mineshaft-700" />
+                <p className="mx-4 text-xs text-mineshaft-400">OR</p>
+                <div className="w-1/5 border-t border-mineshaft-700" />
               </div>
               <div>
                 <Button variant="star" onClick={onAddNewSecret}>
diff --git a/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx b/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx
index 530f6f581..850e8866c 100644
--- a/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx
+++ b/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx
@@ -1,22 +1,24 @@
 /* eslint-disable react/jsx-no-useless-fragment */
+import { SyntheticEvent, useRef } from 'react';
 import { Controller, useFieldArray, useFormContext, useWatch } from 'react-hook-form';
 import {
+  faCircle,
   faCodeBranch,
   faComment,
   faEllipsis,
   faInfoCircle,
   faPlus,
-  faSquare,
-  faSquareCheck,
   faTags,
-  faTrash
+  faXmark
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { cx } from 'cva';
 import { twMerge } from 'tailwind-merge';
 
+import guidGenerator from '@app/components/utilities/randomId';
 import {
   Button,
+  Checkbox,
   FormControl,
   HoverCard,
   HoverCardContent,
@@ -62,6 +64,7 @@ const tagColors = [
   { bg: 'bg-[#C40B13]/40', text: 'text-[#FFDEDE]/70' },
   { bg: 'bg-[#332FD0]/40', text: 'text-[#DFF6FF]/70' }
 ];
+const REGEX = /([$]{.*?})/g;
 
 export const SecretInputRow = ({
   index,
@@ -75,8 +78,15 @@ export const SecretInputRow = ({
   onSecretDelete,
   searchTerm
 }: Props): JSX.Element => {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const syncScroll = (e: SyntheticEvent<HTMLDivElement>) => {
+    if (ref.current === null) return;
+
+    ref.current.scrollTop = e.currentTarget.scrollTop;
+    ref.current.scrollLeft = e.currentTarget.scrollLeft;
+  };
   const { register, setValue, control } = useFormContext<FormData>();
-  const [canRevealSecret, setCanRevealSecret] = useToggle();
+  const [canRevealSecret] = useToggle();
   // comment management in a row
   const {
     fields: secretTags,
@@ -86,7 +96,6 @@ export const SecretInputRow = ({
 
   // to get details on a secret
   const secret = useWatch({ name: `secrets.${index}`, control });
-
   const hasComment = Boolean(secret.comment);
   const tags = secret.tags || [];
   const selectedTagIds = tags.reduce<Record<string, boolean>>(
@@ -106,6 +115,7 @@ export const SecretInputRow = ({
         setValue(`secrets.${index}.valueOverride`, '');
       setValue(`secrets.${index}.overrideAction`, SecretActionType.Deleted, { shouldDirty: true });
     } else {
+      setValue(`secrets.${index}.valueOverride`, '');
       setValue(
         `secrets.${index}.overrideAction`,
         secret?.idOverride ? SecretActionType.Modified : SecretActionType.Created,
@@ -146,8 +156,8 @@ export const SecretInputRow = ({
   }
 
   return (
-    <tr className="group min-w-full flex flex-row">
-      <td className="w-10 px-4 flex items-center justify-center"><div className='text-center text-xs text-bunker-400'>{index + 1}</div></td>
+    <tr className="group min-w-full flex flex-row items-center">
+      <td className="w-10 h-10 px-4 flex items-center justify-center"><div className='text-center w-10 text-xs text-bunker-400'>{index + 1}</div></td>
       <Controller
         control={control}
         defaultValue=""
@@ -156,30 +166,67 @@ export const SecretInputRow = ({
           <HoverCard openDelay={0} open={error?.message ? undefined : false}>
             <HoverCardTrigger asChild>
               <td className={cx(error?.message ? 'rounded ring ring-red/50' : null)}>
-                <div className="min-w-[220px] relative flex items-center">
+                <div className="min-w-[220px] lg:min-w-[240px] xl:min-w-[280px] relative flex items-center justify-end w-full">
                   <Input
                     autoComplete="off"
                     variant="plain"
                     isDisabled={isReadOnly || shouldBeBlockedInAddOnly || isRollbackMode}
-                    className="w-full text-ellipsis font-mono focus:text-bunker-100 focus:ring-transparent"
+                    className="w-full focus:text-bunker-100 focus:ring-transparent"
                     {...field}
                   />
-                  {!isAddOnly && (
-                    <IconButton
-                      variant="plain"
-                      className={twMerge(
-                        'w-0 overflow-hidden p-0 group-hover:w-6',
-                        isOverridden && 'w-6 text-primary'
-                      )}
-                      onClick={onSecretOverride}
-                      isDisabled={isRollbackMode || isReadOnly}
-                      ariaLabel="info"
-                    >
-                      <div className="flex items-center space-x-1">
-                        <FontAwesomeIcon icon={faCodeBranch} className="text-base" />
+                  <div className="w-max flex flex-row items-center justify-end">
+                    <Tooltip content="Comment">
+                      <div className={`${hasComment ? "w-5" : "w-0"} overflow-hidden group-hover:w-5 mt-0.5`}>
+                        <Popover>
+                          <PopoverTrigger asChild>
+                            <IconButton 
+                              className={twMerge(
+                                'w-0 overflow-hidden p-0 group-hover:w-5',
+                                hasComment && 'w-5 text-primary'
+                              )}
+                              variant="plain" 
+                              size="md" 
+                              ariaLabel="add-tag"
+                            >
+                              <FontAwesomeIcon icon={faComment} />
+                            </IconButton>
+                          </PopoverTrigger>
+                          <PopoverContent className="w-auto bg-mineshaft-800 border border-mineshaft-600 drop-shadow-2xl p-2">
+                            <FormControl label="Comment" className="mb-0">
+                              <TextArea
+                                isDisabled={isReadOnly || isRollbackMode || shouldBeBlockedInAddOnly}
+                                className="border border-mineshaft-600 text-sm"
+                                {...register(`secrets.${index}.comment`)}
+                                rows={8}
+                                cols={30}
+                              />
+                            </FormControl>
+                          </PopoverContent>
+                        </Popover>
                       </div>
-                    </IconButton>
-                  )}
+                    </Tooltip>
+                    {!isAddOnly && (
+                      <div>
+                        <Tooltip content="Override with a personal value">
+                          <IconButton
+                            variant="plain"
+                            className={twMerge(
+                              'w-0 overflow-hidden p-0 group-hover:w-6 group-hover:ml-1 mt-0.5',
+                              isOverridden && 'w-6 text-primary ml-1'
+                            )}
+                            onClick={onSecretOverride}
+                            size="md" 
+                            isDisabled={isRollbackMode || isReadOnly}
+                            ariaLabel="info"
+                          >
+                            <div className="flex items-center space-x-1">
+                              <FontAwesomeIcon icon={faCodeBranch} className="text-base" />
+                            </div>
+                          </IconButton>
+                        </Tooltip>
+                      </div>
+                    )}
+                  </div>
                 </div>
               </td>
             </HoverCardTrigger>
@@ -194,36 +241,86 @@ export const SecretInputRow = ({
           </HoverCard>
         )}
       />
-      <div className="flex-grow w-full">
-        {!isOverridden && (
-          <Input
-            variant="plain"
-            isReadOnly={isReadOnly || shouldBeBlockedInAddOnly || isRollbackMode}
-            className="w-full text-ellipsis font-mono focus:text-bunker-100 focus:ring-transparent"
-            type={canRevealSecret || isSecretValueHidden ? 'text' : 'password'}
-            {...register(`secrets.${index}.value`)}
-            placeholder="EMPTY"
-            onBlur={setCanRevealSecret.off}
-            onFocus={setCanRevealSecret.on}
-            autoComplete="off"
-          />
-        )}
-        {isOverridden && (
-          <Input
-            variant="plain"
-            isReadOnly={isReadOnly || isAddOnly || isRollbackMode}
-            className="w-full text-ellipsis font-mono focus:text-bunker-100 focus:ring-transparent"
-            type={canRevealSecret || isSecretValueHidden ? 'text' : 'password'}
-            placeholder="EMPTY"
+      <td className="flex flex-row w-full justify-center h-8 items-center">
+        <div className="group relative whitespace-pre	flex flex-col justify-center w-full px-1.5">
+          {isOverridden 
+          ? <input
             {...register(`secrets.${index}.valueOverride`)}
-            onBlur={setCanRevealSecret.off}
-            onFocus={setCanRevealSecret.on}
-            autoComplete="off"
+            onScroll={syncScroll}
+            readOnly={isReadOnly || isRollbackMode || (isOverridden ? isAddOnly : shouldBeBlockedInAddOnly)}
+            className={`${
+              (!canRevealSecret && isSecretValueHidden)
+                ? 'text-transparent focus:text-transparent active:text-transparent'
+                : ''
+            } z-10 peer font-mono ph-no-capture bg-transparent caret-white text-transparent text-sm px-2 py-2 w-full min-w-16 outline-none duration-200 no-scrollbar no-scrollbar::-webkit-scrollbar`}
+            spellCheck="false"
           />
-        )}
-      </div>
-      <td className="flex items-center min-w-sm">
-        <div className="flex items-center group-hover:mr-0 group-hover:border-r group-hover:border-mineshaft-600">
+          : <input
+            {...register(`secrets.${index}.value`)}
+            onScroll={syncScroll}
+            readOnly={isReadOnly || isRollbackMode || (isOverridden ? isAddOnly : shouldBeBlockedInAddOnly)}
+            className={`${
+              (!canRevealSecret && isSecretValueHidden)
+                ? 'text-transparent focus:text-transparent active:text-transparent'
+                : ''
+            } z-10 peer font-mono ph-no-capture bg-transparent caret-white text-transparent text-sm px-2 py-2 w-full min-w-16 outline-none duration-200 no-scrollbar no-scrollbar::-webkit-scrollbar`}
+            spellCheck="false"
+          />}
+          <div
+            ref={ref}
+            className={`${
+              (!canRevealSecret && isSecretValueHidden) && !isOverridden
+                ? 'text-bunker-800 group-hover:text-gray-400 peer-focus:text-gray-100 peer-active:text-gray-400 duration-200'
+                : ''
+            } ${isOverridden ? 'text-primary-300' : 'text-gray-400'}
+            absolute flex flex-row whitespace-pre font-mono z-0 ${(!canRevealSecret && isSecretValueHidden) ? 'invisible' : 'visible'} peer-focus:visible mt-0.5 ph-no-capture overflow-x-scroll bg-transparent h-10 text-sm px-2 py-2 w-full min-w-16 outline-none duration-100 no-scrollbar no-scrollbar::-webkit-scrollbar`}
+          >
+            {(isOverridden ? secret.valueOverride : secret.value)?.split('').length === 0 && <span className='text-bunker-400/80 font-sans'>EMPTY</span>}
+            {(isOverridden ? secret.valueOverride : secret.value)?.split(REGEX).map((word) => {
+              if (word.match(REGEX) !== null) {
+                return (
+                  <span className="ph-no-capture text-yellow" key={index}>
+                    {word.slice(0, 2)}
+                    <span className="ph-no-capture text-yellow-200/80">
+                      {word.slice(2, word.length - 1)}
+                    </span>
+                    {word.slice(word.length - 1, word.length) === '}' ? (
+                      <span className="ph-no-capture text-yellow">
+                        {word.slice(word.length - 1, word.length)}
+                      </span>
+                    ) : (
+                      <span className="ph-no-capture text-yellow-400">
+                        {word.slice(word.length - 1, word.length)}
+                      </span>
+                    )}
+                  </span>
+                );
+              }
+              return (
+                <span key={`${word}_${index + 1}`} className="ph-no-capture">
+                  {word}
+                </span>
+              );
+            })}
+          </div>
+          {(!canRevealSecret && isSecretValueHidden) && (
+            <div className='absolute flex flex-row justify-between items-center z-0 peer pr-2 peer-active:hidden peer-focus:hidden group-hover:bg-white/[0.00] duration-100 h-10 w-full text-bunker-400 text-clip'>
+              <div className="px-2 flex flex-row items-center overflow-x-scroll no-scrollbar no-scrollbar::-webkit-scrollbar">
+                {(isOverridden ? secret.valueOverride : secret.value)?.split('').map(() => (
+                  <FontAwesomeIcon
+                    key={guidGenerator()}
+                    className="text-xxs mr-0.5"
+                    icon={faCircle}
+                  />
+                ))}
+                {(isOverridden ? secret.valueOverride : secret.value)?.split('').length === 0 && <span className='text-bunker-400/80 text-sm'>EMPTY</span>}
+              </div>
+            </div>
+          )}
+        </div>
+      </td>
+      <td className="flex items-center min-w-sm h-10">
+        <div className="flex items-center pl-2">
           {secretTags.map(({ id, slug }, i) => (
             <Tag
               className={cx(
@@ -242,8 +339,8 @@ export const SecretInputRow = ({
               <Popover>
                 <PopoverTrigger asChild>
                   <div>
-                    <Tooltip content="Add tag">
-                      <IconButton variant="star" size="xs" ariaLabel="add-tag">
+                    <Tooltip content="Add tags">
+                      <IconButton variant="star" size="xs" ariaLabel="add-tag" className="py-[0.42rem]">
                         <FontAwesomeIcon icon={faTags} />
                       </IconButton>
                     </Tooltip>
@@ -251,25 +348,29 @@ export const SecretInputRow = ({
                 </PopoverTrigger>
                 <PopoverContent
                   side="left"
-                  className="max-h-96 w-auto min-w-[240px] overflow-y-auto overflow-x-hidden p-2 text-bunker-100"
+                  className="max-h-96 w-auto min-w-[200px] overflow-y-auto overflow-x-hidden p-2 text-bunker-200 bg-mineshaft-800 border border-mineshaft-600"
                   hideCloseBtn
                 >
-                  <div className="mb-2 text-sm font-medium">Add tags to this secret</div>
+                  <div className="mb-2 text-sm font-medium text-center text-bunker-200 px-2">Add tags to {secret.key || "this secret"}</div>
                   <div className="flex flex-col space-y-1">
                     {wsTags?.map((wsTag) => (
                       <Button
                         variant="plain"
                         size="sm"
-                        isFullWidth
                         className={twMerge(
-                          'justify-start bg-mineshaft-800 text-bunker-100',
+                          'justify-start bg-mineshaft-600 text-bunker-100 hover:bg-mineshaft-500',
                           selectedTagIds?.[wsTag.slug] && 'text-primary'
                         )}
                         onClick={() => onSelectTag(wsTag)}
                         leftIcon={
-                          <FontAwesomeIcon
-                            icon={selectedTagIds?.[wsTag.slug] ? faSquareCheck : faSquare}
-                          />
+                          <Checkbox
+                            className="data-[state=checked]:bg-primary mr-0"
+                            id="autoCapitalization"
+                            isChecked={selectedTagIds?.[wsTag.slug]}
+                            onCheckedChange={() => {}}
+                          >
+                            {}
+                          </Checkbox>
                         }
                         key={wsTag._id}
                       >
@@ -277,10 +378,10 @@ export const SecretInputRow = ({
                       </Button>
                     ))}
                     <Button
-                      variant="plain"
+                      variant="star"
+                      color="primary"
                       size="sm"
-                      isFullWidth
-                      className="mt-4 justify-start bg-mineshaft-800 text-bunker-400 hover:text-primary"
+                      className="mt-4 justify-start bg-mineshaft-600 h-7 px-1"
                       onClick={onCreateTagOpen}
                       leftIcon={<FontAwesomeIcon icon={faPlus} />}
                     >
@@ -292,44 +393,30 @@ export const SecretInputRow = ({
             </div>
           )}
         </div>
-        <div className={`${hasComment ? "w-8" : "w-0"} overflow-hidden group-hover:w-8`}>
-          <Popover>
-            <PopoverTrigger asChild>
-              <IconButton variant="star" size="xs" ariaLabel="add-tag">
-                <FontAwesomeIcon icon={faComment} />
-              </IconButton>
-            </PopoverTrigger>
-            <PopoverContent className="w-auto">
-              <FormControl label="Comment" className="mb-0">
-                <TextArea
-                  isDisabled={isReadOnly || isRollbackMode || shouldBeBlockedInAddOnly}
-                  {...register(`secrets.${index}.comment`)}
-                  rows={8}
-                  cols={30}
-                />
-              </FormControl>
-            </PopoverContent>
-          </Popover>
-        </div>
-        <div className="flex w-0 items-center justify-end space-x-2 overflow-hidden transition-all group-hover:w-16">
-          <Tooltip content="delete">
-            <IconButton
-              size="xs"
-              colorSchema="danger"
-              ariaLabel="delete"
-              isDisabled={isReadOnly || isRollbackMode}
-              onClick={() => onSecretDelete(index, secret._id, secret?.idOverride)}
-            >
-              <FontAwesomeIcon icon={faTrash} />
-            </IconButton>
-          </Tooltip>
+        <div className="flex w-0 group-hover:w-14 invisible group-hover:visible duration-0 items-center justify-end space-x-2 overflow-hidden transition-all">
           {!isAddOnly && (
-            <Tooltip content="more">
-              <IconButton size="xs" variant="solid" onClick={onRowExpand} ariaLabel="expand">
-                <FontAwesomeIcon icon={faEllipsis} />
+            <div>
+              <Tooltip content="Settings">
+                <IconButton size="lg" colorSchema="primary" variant="plain" onClick={onRowExpand} ariaLabel="expand">
+                  <FontAwesomeIcon icon={faEllipsis} />
+                </IconButton>
+              </Tooltip>
+            </div>
+          )}
+          <div>
+            <Tooltip content="Delete">
+              <IconButton
+                size="md"
+                variant="plain"
+                colorSchema="danger"
+                ariaLabel="delete"
+                isDisabled={isReadOnly || isRollbackMode}
+                onClick={() => onSecretDelete(index, secret._id, secret?.idOverride)}
+              >
+                <FontAwesomeIcon icon={faXmark} />
               </IconButton>
             </Tooltip>
-          )}
+          </div>
         </div>
       </td>
     </tr>
diff --git a/frontend/src/views/DashboardPage/components/SecretTableHeader/SecretTableHeader.tsx b/frontend/src/views/DashboardPage/components/SecretTableHeader/SecretTableHeader.tsx
index 48abab7d3..d7f60a630 100644
--- a/frontend/src/views/DashboardPage/components/SecretTableHeader/SecretTableHeader.tsx
+++ b/frontend/src/views/DashboardPage/components/SecretTableHeader/SecretTableHeader.tsx
@@ -1,5 +1,8 @@
-import { faArrowDown, faArrowUp } from '@fortawesome/free-solid-svg-icons';
+import { Controller } from 'react-hook-form';
+import { faArrowDown, faArrowUp, faCodeBranch, faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '@radix-ui/react-hover-card';
+import { twMerge } from 'tailwind-merge';
 
 import { IconButton } from '@app/components/v2';
 
@@ -13,17 +16,58 @@ export const SecretTableHeader = ({
   onSort
 }: Props): JSX.Element => (
   <thead>
-    <tr className="flex flex-row">
-      {/* <th className="w-10 text-center"/> */}
-      <th className='w-1/5 min-w-[220px]'>
-        <div className="inline-flex items-end">
-          Key
-          <IconButton variant="plain" className="ml-2" ariaLabel="sort" onClick={onSort}>
-            <FontAwesomeIcon icon={sortDir === 'asc' ? faArrowDown : faArrowUp} />
-          </IconButton>
-        </div>
-      </th>
-      <th className='w-full'>Value</th>
+    <tr className="absolute flex flex-row sticky top-0">
+      <td className="w-10 px-4 flex items-center justify-center">
+        <div className='text-center w-10 text-xs text-transparent'>{0}</div>
+      </td>
+      <Controller
+        defaultValue=""
+        name="na"
+        render={({ fieldState: { error } }) => (
+          <HoverCard openDelay={0} open={error?.message ? undefined : false}>
+            <HoverCardTrigger asChild>
+              <td className='flex items-center'>
+                <div className="min-w-[220px] lg:min-w-[240px] xl:min-w-[280px] relative flex items-center justify-start pl-2.5 w-full">
+                  <div className="inline-flex items-end text-md font-medium">
+                    Key
+                    <IconButton variant="plain" className="ml-2" ariaLabel="sort" onClick={onSort}>
+                      <FontAwesomeIcon icon={sortDir === 'asc' ? faArrowDown : faArrowUp} />
+                    </IconButton>
+                  </div>
+                  <div className="w-max flex flex-row items-center justify-end">
+                    <div className="w-5 overflow-hidden group-hover:w-5 mt-1"/>
+                    {!true && (
+                      <IconButton
+                        variant="plain"
+                        className={twMerge(
+                          'w-0 overflow-hidden p-0 group-hover:w-6 group-hover:ml-1',
+                          true && 'w-6 text-primary ml-1'
+                        )}
+                        size="md" 
+                        ariaLabel="info"
+                      >
+                        <div className="flex items-center space-x-1">
+                          <FontAwesomeIcon icon={faCodeBranch} className="text-base" />
+                        </div>
+                      </IconButton>
+                    )}
+                  </div>
+                </div>
+              </td>
+            </HoverCardTrigger>
+            <HoverCardContent className="w-auto py-2 pt-2">
+              <div className="flex items-center space-x-2">
+                <div>
+                  <FontAwesomeIcon icon={faInfoCircle} className="text-red" />
+                </div>
+                <div className="text-sm">{error?.message}</div>
+              </div>
+            </HoverCardContent>
+          </HoverCard>
+        )}
+      />
+      <th className="flex flex-row w-full"><div className="text-sm font-medium">Value</div></th>
     </tr>
+    <tr className='h-0 w-full border border-mineshaft-600'/>
   </thead>
 );

From 12478130d01f7614ac5855e242c60248fdcb08f3 Mon Sep 17 00:00:00 2001
From: Vladyslav Matsiiako <matsiiako@gmail.com>
Date: Sat, 8 Apr 2023 23:36:33 -0700
Subject: [PATCH 7/7] Fixing UI, UX, and bugs in the dashboard

---
 frontend/src/components/v2/Button/Button.tsx  | 11 ++++
 .../src/views/DashboardPage/DashboardPage.tsx | 11 ++--
 .../components/PitDrawer/PitDrawer.tsx        |  8 ++-
 .../SecretTableHeader/SecretTableHeader.tsx   | 57 +++++--------------
 4 files changed, 36 insertions(+), 51 deletions(-)

diff --git a/frontend/src/components/v2/Button/Button.tsx b/frontend/src/components/v2/Button/Button.tsx
index 635aa0858..c4a89023c 100644
--- a/frontend/src/components/v2/Button/Button.tsx
+++ b/frontend/src/components/v2/Button/Button.tsx
@@ -33,6 +33,7 @@ const buttonVariants = cva(
         solid: '',
         outline: ['bg-transparent', 'border-2', 'border-solid'],
         plain: '',
+        selected: '',
         // a constant color not in use on hover or click goes colorSchema color
         star: 'text-bunker-200 bg-mineshaft-500'
       },
@@ -61,6 +62,16 @@ const buttonVariants = cva(
         variant: 'star',
         className: 'hover:bg-primary hover:text-black'
       },
+      {
+        colorSchema: 'primary',
+        variant: 'selected',
+        className: 'bg-primary/10 border border-primary/50 text-bunker-200'
+      },
+      {
+        colorSchema: 'secondary',
+        variant: 'star',
+        className: 'bg-mineshaft-700 border border-mineshaft-600 hover:bg-mineshaft hover:text-white'
+      },
       {
         colorSchema: 'danger',
         variant: 'star',
diff --git a/frontend/src/views/DashboardPage/DashboardPage.tsx b/frontend/src/views/DashboardPage/DashboardPage.tsx
index a77eadc14..146b42165 100644
--- a/frontend/src/views/DashboardPage/DashboardPage.tsx
+++ b/frontend/src/views/DashboardPage/DashboardPage.tsx
@@ -189,11 +189,9 @@ export const DashboardPage = () => {
     handleSubmit,
     getValues,
     setValue,
-    formState: { isDirty, isSubmitting, dirtyFields },
+    formState: { isSubmitting, dirtyFields },
     reset
   } = method;
-  console.log(122, method)
-  console.log(123, isDirty, Object.keys(dirtyFields))
   const formSecrets = useWatch({ control, name: 'secrets' });
   const { fields, prepend, append, remove, update } = useFieldArray({ control, name: 'secrets' });
 
@@ -201,7 +199,6 @@ export const DashboardPage = () => {
   const isReadOnly = selectedEnv?.isWriteDenied;
   const isAddOnly = selectedEnv?.isReadDenied && !selectedEnv?.isWriteDenied;
   const canDoRollback = !isReadOnly && !isAddOnly;
-  console.log(123, !isRollbackMode, !isAddOnly, !isDirty)
   const isSubmitDisabled =
     isReadOnly ||
     // on add only mode the formstate becomes dirty due to secrets missing some items
@@ -415,7 +412,7 @@ export const DashboardPage = () => {
   );
 
   return (
-    <div className="container mx-auto w-full px-6 text-mineshaft-50 dark:[color-scheme:dark]">
+    <div className="container mx-auto max-w-full px-6 text-mineshaft-50 dark:[color-scheme:dark]">
       <FormProvider {...method}>
         <form autoComplete="off">
           {/* breadcrumb row */}
@@ -529,7 +526,7 @@ export const DashboardPage = () => {
                   </IconButton>
                 </Tooltip>
               </div>
-              <Button
+              {!isReadOnly && !isRollbackMode && <Button
                 leftIcon={<FontAwesomeIcon icon={faPlus} />}
                 onClick={() => prepend(DEFAULT_SECRET_VALUE, { shouldFocus: false })}
                 isDisabled={isReadOnly || isRollbackMode}
@@ -537,7 +534,7 @@ export const DashboardPage = () => {
                 className="h-10"
               >
                 Add Secret
-              </Button>
+              </Button>}
             </div>
           </div>
           <div className={`${isSecretEmpty ? "flex flex-col items-center justify-center" : ""} mt-4 h-[calc(100vh-270px)] overflow-y-scroll overflow-x-hidden no-scrollbar no-scrollbar::-webkit-scrollbar`}>
diff --git a/frontend/src/views/DashboardPage/components/PitDrawer/PitDrawer.tsx b/frontend/src/views/DashboardPage/components/PitDrawer/PitDrawer.tsx
index e97b1e13a..a398530b2 100644
--- a/frontend/src/views/DashboardPage/components/PitDrawer/PitDrawer.tsx
+++ b/frontend/src/views/DashboardPage/components/PitDrawer/PitDrawer.tsx
@@ -46,9 +46,14 @@ export const PitDrawer = ({
                   key={_id}
                   className="py-3 px-4 text-sm"
                   isFullWidth
+                  colorSchema={
+                    (i === 0 && index === 0 && snapshotId === null) || snapshotId === _id
+                      ? 'primary'
+                      : 'secondary'
+                  }
                   variant={
                     (i === 0 && index === 0 && snapshotId === null) || snapshotId === _id
-                      ? 'solid'
+                      ? 'selected'
                       : 'star'
                   }
                   onClick={() => onSelectSnapshot(_id)}
@@ -65,6 +70,7 @@ export const PitDrawer = ({
         <Button
           className="mt-8 py-3 px-4 text-sm"
           isFullWidth
+          variant="star"
           isLoading={isFetchingNextPage}
           isDisabled={isFetchingNextPage || !hasNextPage}
           onClick={fetchNextPage}
diff --git a/frontend/src/views/DashboardPage/components/SecretTableHeader/SecretTableHeader.tsx b/frontend/src/views/DashboardPage/components/SecretTableHeader/SecretTableHeader.tsx
index d7f60a630..2c7631298 100644
--- a/frontend/src/views/DashboardPage/components/SecretTableHeader/SecretTableHeader.tsx
+++ b/frontend/src/views/DashboardPage/components/SecretTableHeader/SecretTableHeader.tsx
@@ -1,8 +1,6 @@
 import { Controller } from 'react-hook-form';
-import { faArrowDown, faArrowUp, faCodeBranch, faInfoCircle } from '@fortawesome/free-solid-svg-icons';
+import { faArrowDown, faArrowUp } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { HoverCard, HoverCardContent, HoverCardTrigger } from '@radix-ui/react-hover-card';
-import { twMerge } from 'tailwind-merge';
 
 import { IconButton } from '@app/components/v2';
 
@@ -23,47 +21,20 @@ export const SecretTableHeader = ({
       <Controller
         defaultValue=""
         name="na"
-        render={({ fieldState: { error } }) => (
-          <HoverCard openDelay={0} open={error?.message ? undefined : false}>
-            <HoverCardTrigger asChild>
-              <td className='flex items-center'>
-                <div className="min-w-[220px] lg:min-w-[240px] xl:min-w-[280px] relative flex items-center justify-start pl-2.5 w-full">
-                  <div className="inline-flex items-end text-md font-medium">
-                    Key
-                    <IconButton variant="plain" className="ml-2" ariaLabel="sort" onClick={onSort}>
-                      <FontAwesomeIcon icon={sortDir === 'asc' ? faArrowDown : faArrowUp} />
-                    </IconButton>
-                  </div>
-                  <div className="w-max flex flex-row items-center justify-end">
-                    <div className="w-5 overflow-hidden group-hover:w-5 mt-1"/>
-                    {!true && (
-                      <IconButton
-                        variant="plain"
-                        className={twMerge(
-                          'w-0 overflow-hidden p-0 group-hover:w-6 group-hover:ml-1',
-                          true && 'w-6 text-primary ml-1'
-                        )}
-                        size="md" 
-                        ariaLabel="info"
-                      >
-                        <div className="flex items-center space-x-1">
-                          <FontAwesomeIcon icon={faCodeBranch} className="text-base" />
-                        </div>
-                      </IconButton>
-                    )}
-                  </div>
-                </div>
-              </td>
-            </HoverCardTrigger>
-            <HoverCardContent className="w-auto py-2 pt-2">
-              <div className="flex items-center space-x-2">
-                <div>
-                  <FontAwesomeIcon icon={faInfoCircle} className="text-red" />
-                </div>
-                <div className="text-sm">{error?.message}</div>
+        render={() => (
+          <td className='flex items-center'>
+            <div className="min-w-[220px] lg:min-w-[240px] xl:min-w-[280px] relative flex items-center justify-start pl-2.5 w-full">
+              <div className="inline-flex items-end text-md font-medium">
+                Key
+                <IconButton variant="plain" className="ml-2" ariaLabel="sort" onClick={onSort}>
+                  <FontAwesomeIcon icon={sortDir === 'asc' ? faArrowDown : faArrowUp} />
+                </IconButton>
               </div>
-            </HoverCardContent>
-          </HoverCard>
+              <div className="w-max flex flex-row items-center justify-end">
+                <div className="w-5 overflow-hidden group-hover:w-5 mt-1"/>
+              </div>
+            </div>
+          </td>
         )}
       />
       <th className="flex flex-row w-full"><div className="text-sm font-medium">Value</div></th>