Merge pull request #317 from Infisical/gen-example-env-command

generate example .env file command
update regex to capature comment
2025-03-25 14:05:03 +00:00 · 2023-02-08 18:51:23 -08:00 · 2023-02-08 18:48:45 -08:00 · 2023-02-08 17:29:35 -08:00 · 2023-02-08 14:36:56 -08:00 · 2023-02-08 14:32:57 -08:00
125 changed files with 4253 additions and 923 deletions
--- a/README.md
+++ b/README.md
@ -171,7 +171,9 @@ We're currently setting the foundation and building [integrations](https://infis
        🔜 GCP SM (https://github.com/Infisical/infisical/issues/285)
      </td>
      <td align="left" valign="middle">
-        🔜 GitLab CI/CD (https://github.com/Infisical/infisical/issues/134)
+        <a href="https://infisical.com/docs/integrations/cicd/gitlab">
+          ✔️ GitLab CI/CD 
+        </a>
      </td>
      <td align="left" valign="middle">
        🔜 CircleCI (https://github.com/Infisical/infisical/issues/91)
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@ -10,13 +10,13 @@
      "license": "ISC",
      "dependencies": {
        "@godaddy/terminus": "^4.11.2",
-        "@sentry/node": "^7.21.1",
        "@octokit/rest": "^19.0.5",
-        "@sentry/tracing": "^7.21.1",
+        "@sentry/node": "^7.14.0",
+        "@sentry/tracing": "^7.19.0",
        "@types/crypto-js": "^4.1.1",
-        "axios": "^1.2.0",
        "@types/libsodium-wrappers": "^0.7.10",
        "await-to-js": "^3.0.0",
+        "axios": "^1.1.3",
        "bcrypt": "^5.1.0",
        "bigint-conversion": "^2.2.2",
        "builder-pattern": "^2.2.0",
@ -32,9 +32,9 @@
        "js-yaml": "^4.1.0",
        "jsonwebtoken": "^9.0.0",
        "jsrp": "^0.2.4",
-        "mongoose": "^6.7.3",
        "libsodium-wrappers": "^0.7.10",
        "lodash": "^4.17.21",
+        "mongoose": "^6.7.2",
        "nodemailer": "^6.8.0",
        "posthog-node": "^2.2.2",
        "query-string": "^7.1.3",
@ -2838,19 +2838,6 @@
        "@maxmind/geoip2-node": "^3.4.0"
      }
    },
-    "node_modules/@sentry/core": {
-      "version": "7.21.1",
-      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.21.1.tgz",
-      "integrity": "sha512-Og5wEEsy24fNvT/T7IKjcV4EvVK5ryY2kxbJzKY6GU2eX+i+aBl+n/vp7U0Es351C/AlTkS+0NOUsp2TQQFxZA==",
-      "dependencies": {
-        "@sentry/types": "7.21.1",
-        "@sentry/utils": "7.21.1",
-        "tslib": "^1.9.3"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
    "node_modules/@protobufjs/aspromise": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
@ -2905,27 +2892,10 @@
      "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
      "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw=="
    },
-    "node_modules/@sentry/node": {
-      "version": "7.19.0",
-      "resolved": "https://registry.npmjs.org/@sentry/node/-/node-7.19.0.tgz",
-      "integrity": "sha512-yG7Tx32WqOkEHVotFLrumCcT9qlaSDTkFNZ+yLSvZXx74ifsE781DzBA9W7K7bBdYO3op+p2YdsOKzf3nPpAyQ==",
-      "dependencies": {
-        "@sentry/core": "7.19.0",
-        "@sentry/types": "7.19.0",
-        "@sentry/utils": "7.19.0",
-        "cookie": "^0.4.1",
-        "https-proxy-agent": "^5.0.0",
-        "lru_map": "^0.3.3",
-        "tslib": "^1.9.3"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@sentry/node/node_modules/@sentry/core": {
-      "version": "7.19.0",
-      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.19.0.tgz",
-      "integrity": "sha512-YF9cTBcAnO4R44092BJi5Wa2/EO02xn2ziCtmNgAVTN2LD31a/YVGxGBt/FDr4Y6yeuVehaqijVVvtpSmXrGJw==",
+    "node_modules/@sentry/core": {
+      "version": "7.21.1",
+      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.21.1.tgz",
+      "integrity": "sha512-Og5wEEsy24fNvT/T7IKjcV4EvVK5ryY2kxbJzKY6GU2eX+i+aBl+n/vp7U0Es351C/AlTkS+0NOUsp2TQQFxZA==",
      "dependencies": {
        "@sentry/types": "7.21.1",
        "@sentry/utils": "7.21.1",
@ -2986,26 +2956,6 @@
        "node": ">=8"
      }
    },
-    "node_modules/@sentry/types": {
-      "version": "7.21.1",
-      "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.21.1.tgz",
-      "integrity": "sha512-3/IKnd52Ol21amQvI+kz+WB76s8/LR5YvFJzMgIoI2S8d82smIr253zGijRXxHPEif8kMLX4Yt+36VzrLxg6+A==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@sentry/utils": {
-      "version": "7.21.1",
-      "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.21.1.tgz",
-      "integrity": "sha512-F0W0AAi8tgtTx6ApZRI2S9HbXEA9ENX1phTZgdNNWcMFm1BNbc21XEwLqwXBNjub5nlA6CE8xnjXRgdZKx4kzQ==",
-      "dependencies": {
-        "@sentry/types": "7.21.1",
-        "tslib": "^1.9.3"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
    "node_modules/@sinclair/typebox": {
      "version": "0.24.51",
      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.51.tgz",
@ -14306,16 +14256,6 @@
        "@maxmind/geoip2-node": "^3.4.0"
      }
    },
-    "@sentry/core": {
-      "version": "7.21.1",
-      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.21.1.tgz",
-      "integrity": "sha512-Og5wEEsy24fNvT/T7IKjcV4EvVK5ryY2kxbJzKY6GU2eX+i+aBl+n/vp7U0Es351C/AlTkS+0NOUsp2TQQFxZA==",
-      "requires": {
-        "@sentry/types": "7.21.1",
-        "@sentry/utils": "7.21.1",
-        "tslib": "^1.9.3"
-      }
-    },
    "@protobufjs/aspromise": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
@ -14370,6 +14310,16 @@
      "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
      "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw=="
    },
+    "@sentry/core": {
+      "version": "7.21.1",
+      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.21.1.tgz",
+      "integrity": "sha512-Og5wEEsy24fNvT/T7IKjcV4EvVK5ryY2kxbJzKY6GU2eX+i+aBl+n/vp7U0Es351C/AlTkS+0NOUsp2TQQFxZA==",
+      "requires": {
+        "@sentry/types": "7.21.1",
+        "@sentry/utils": "7.21.1",
+        "tslib": "^1.9.3"
+      }
+    },
    "@sentry/node": {
      "version": "7.21.1",
      "resolved": "https://registry.npmjs.org/@sentry/node/-/node-7.21.1.tgz",
@ -14409,20 +14359,6 @@
        "tslib": "^1.9.3"
      }
    },
-    "@sentry/types": {
-      "version": "7.21.1",
-      "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.21.1.tgz",
-      "integrity": "sha512-3/IKnd52Ol21amQvI+kz+WB76s8/LR5YvFJzMgIoI2S8d82smIr253zGijRXxHPEif8kMLX4Yt+36VzrLxg6+A=="
-    },
-    "@sentry/utils": {
-      "version": "7.21.1",
-      "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.21.1.tgz",
-      "integrity": "sha512-F0W0AAi8tgtTx6ApZRI2S9HbXEA9ENX1phTZgdNNWcMFm1BNbc21XEwLqwXBNjub5nlA6CE8xnjXRgdZKx4kzQ==",
-      "requires": {
-        "@sentry/types": "7.21.1",
-        "tslib": "^1.9.3"
-      }
-    },
    "@sinclair/typebox": {
      "version": "0.24.51",
      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.51.tgz",
--- a/backend/src/app.ts
+++ b/backend/src/app.ts
@ -50,6 +50,7 @@ import {
  serviceTokenData as v2ServiceTokenDataRouter,
  apiKeyData as v2APIKeyDataRouter,
  environment as v2EnvironmentRouter,
+  tags as v2TagsRouter,
 } from './routes/v2';

 import { healthCheck } from './routes/status';
@ -112,6 +113,7 @@ app.use('/api/v1/integration-auth', v1IntegrationAuthRouter);
 app.use('/api/v2/users', v2UsersRouter);
 app.use('/api/v2/organizations', v2OrganizationsRouter);
 app.use('/api/v2/workspace', v2EnvironmentRouter);
+app.use('/api/v2/workspace', v2TagsRouter);
 app.use('/api/v2/workspace', v2WorkspaceRouter);
 app.use('/api/v2/secret', v2SecretRouter); // deprecated
 app.use('/api/v2/secrets', v2SecretsRouter);
--- a/backend/src/config/index.ts
+++ b/backend/src/config/index.ts
@ -13,10 +13,13 @@ const MONGO_URL = process.env.MONGO_URL!;
 const NODE_ENV = process.env.NODE_ENV! || 'production';
 const VERBOSE_ERROR_OUTPUT = process.env.VERBOSE_ERROR_OUTPUT! === 'true' && true;
 const LOKI_HOST = process.env.LOKI_HOST || undefined;
+const CLIENT_ID_AZURE = process.env.CLIENT_ID_AZURE!;
+const TENANT_ID_AZURE = process.env.TENANT_ID_AZURE!;
 const CLIENT_ID_HEROKU = process.env.CLIENT_ID_HEROKU!;
 const CLIENT_ID_VERCEL = process.env.CLIENT_ID_VERCEL!;
 const CLIENT_ID_NETLIFY = process.env.CLIENT_ID_NETLIFY!;
 const CLIENT_ID_GITHUB = process.env.CLIENT_ID_GITHUB!;
+const CLIENT_SECRET_AZURE = process.env.CLIENT_SECRET_AZURE!;
 const CLIENT_SECRET_HEROKU = process.env.CLIENT_SECRET_HEROKU!;
 const CLIENT_SECRET_VERCEL = process.env.CLIENT_SECRET_VERCEL!;
 const CLIENT_SECRET_NETLIFY = process.env.CLIENT_SECRET_NETLIFY!;
@ -60,10 +63,13 @@ export {
  NODE_ENV,
  VERBOSE_ERROR_OUTPUT,
  LOKI_HOST,
+  CLIENT_ID_AZURE,
+  TENANT_ID_AZURE,
  CLIENT_ID_HEROKU,
  CLIENT_ID_VERCEL,
  CLIENT_ID_NETLIFY,
  CLIENT_ID_GITHUB,
+  CLIENT_SECRET_AZURE,
  CLIENT_SECRET_HEROKU,
  CLIENT_SECRET_VERCEL,
  CLIENT_SECRET_NETLIFY,
--- a/backend/src/controllers/v1/integrationAuthController.ts
+++ b/backend/src/controllers/v1/integrationAuthController.ts
@ -10,6 +10,31 @@ import { INTEGRATION_SET, INTEGRATION_OPTIONS } from '../../variables';
 import { IntegrationService } from '../../services';
 import { getApps, revokeAccess } from '../../integrations';

+/***
+ * Return integration authorization with id [integrationAuthId]
+ */
+export const getIntegrationAuth = async (req: Request, res: Response) => {
+	let integrationAuth;
+	try {
+		const { integrationAuthId } = req.params;
+		integrationAuth = await IntegrationAuth.findById(integrationAuthId);
+		
+		if (!integrationAuth) return res.status(400).send({
+			message: 'Failed to find integration authorization'
+		});
+	} catch (err) {
+		Sentry.setUser({ email: req.user.email });
+		Sentry.captureException(err);
+		return res.status(400).send({
+			message: 'Failed to get integration authorization'
+		});	
+	}
+	
+	return res.status(200).send({
+		integrationAuth
+	});
+}
+
 export const getIntegrationOptions = async (
 	req: Request,
 	res: Response
@ -31,7 +56,6 @@ export const oAuthExchange = async (
 ) => {
 	try {
 		const { workspaceId, code, integration } = req.body;
-
 		if (!INTEGRATION_SET.has(integration))
 			throw new Error('Failed to validate integration');
 		
@ -40,12 +64,16 @@ export const oAuthExchange = async (
 			throw new Error("Failed to get environments")
 		}
 	
-		await IntegrationService.handleOAuthExchange({
+		const integrationAuth = await IntegrationService.handleOAuthExchange({
 			workspaceId,
 			integration,
 			code,
 			environment: environments[0].slug,
 		});
+		
+		return res.status(200).send({
+			integrationAuth
+		});
 	} catch (err) {
 		Sentry.setUser({ email: req.user.email });
 		Sentry.captureException(err);
@ -53,10 +81,6 @@ export const oAuthExchange = async (
 			message: 'Failed to get OAuth2 code-token exchange'
 		});
 	}
-
-	return res.status(200).send({
-		message: 'Successfully enabled integration authorization'
-	});
 };

 /**
@ -81,6 +105,13 @@ export const saveIntegrationAccessToken = async (
 			integration: string;
 		} = req.body;

+		const bot = await Bot.findOne({
+            workspace: new Types.ObjectId(workspaceId),
+            isActive: true
+        });
+        
+        if (!bot) throw new Error('Bot must be enabled to save integration access token');
+
 		integrationAuth = await IntegrationAuth.findOneAndUpdate({
            workspace: new Types.ObjectId(workspaceId),
            integration
@ -91,13 +122,6 @@ export const saveIntegrationAccessToken = async (
            new: true,
            upsert: true
        });
-
-		const bot = await Bot.findOne({
-            workspace: new Types.ObjectId(workspaceId),
-            isActive: true
-        });
-        
-        if (!bot) throw new Error('Bot must be enabled to save integration access token');
 		
 		// encrypt and save integration access token
 		integrationAuth = await IntegrationService.setIntegrationAuthAccess({
--- a/backend/src/controllers/v1/integrationController.ts
+++ b/backend/src/controllers/v1/integrationController.ts
@ -1,4 +1,5 @@
 import { Request, Response } from 'express';
+import { Types } from 'mongoose';
 import * as Sentry from '@sentry/node';
 import { 
 	Integration, 
@ -18,15 +19,40 @@ import { eventPushSecrets } from '../../events';
 export const createIntegration = async (req: Request, res: Response) => {
 	let integration;
 	try {
+		const {
+			integrationAuthId,
+			app,
+			appId,
+			isActive,
+			sourceEnvironment,
+			targetEnvironment,
+			owner
+		} = req.body;
+		
+		// TODO: validate [sourceEnvironment] and [targetEnvironment]
+
 		// initialize new integration after saving integration access token
        integration = await new Integration({
            workspace: req.integrationAuth.workspace._id,
-            isActive: false,
-            app: null,
-            environment: req.integrationAuth.workspace?.environments[0].slug,
+            environment: sourceEnvironment,
+            isActive,
+            app,
+			appId,
+			targetEnvironment,
+			owner,
            integration: req.integrationAuth.integration,
-            integrationAuth: req.integrationAuth._id
+            integrationAuth: new Types.ObjectId(integrationAuthId)
        }).save();
+		
+		if (integration) {
+			// trigger event - push secrets
+			EventService.handleEvent({
+				event: eventPushSecrets({
+					workspaceId: integration.workspace.toString()
+				})
+			});
+		}
+
 	} catch (err) {
 		Sentry.setUser({ email: req.user.email });
 		Sentry.captureException(err);
--- a/backend/src/controllers/v2/index.ts
+++ b/backend/src/controllers/v2/index.ts
@ -6,6 +6,7 @@ import * as apiKeyDataController from './apiKeyDataController';
 import * as secretController from './secretController';
 import * as secretsController from './secretsController';
 import * as environmentController from './environmentController';
+import * as tagController from './tagController';

 export {
    usersController,
@ -15,5 +16,6 @@ export {
    apiKeyDataController,
    secretController,
    secretsController,
-    environmentController
+    environmentController,
+    tagController
 }
--- a/backend/src/controllers/v2/secretsController.ts
+++ b/backend/src/controllers/v2/secretsController.ts
@ -86,17 +86,31 @@ export const createSecrets = async (req: Request, res: Response) => {
        throw UnauthorizedRequestError({ message: "You do not have the necessary permission(s) perform this action" })
    }

-    let toAdd;
+    let listOfSecretsToCreate;
    if (Array.isArray(req.body.secrets)) {
        // case: create multiple secrets
-        toAdd = req.body.secrets;
+        listOfSecretsToCreate = req.body.secrets;
    } else if (typeof req.body.secrets === 'object') {
        // case: create 1 secret
-        toAdd = [req.body.secrets];
+        listOfSecretsToCreate = [req.body.secrets];
    }

-    const newSecrets = await Secret.insertMany(
-        toAdd.map(({
+    type secretsToCreateType = {
+        type: string;
+        secretKeyCiphertext: string;
+        secretKeyIV: string;
+        secretKeyTag: string;
+        secretValueCiphertext: string;
+        secretValueIV: string;
+        secretValueTag: string;
+        secretCommentCiphertext: string;
+        secretCommentIV: string;
+        secretCommentTag: string;
+        tags: string[]
+    }
+
+    const newlyCreatedSecrets = await Secret.insertMany(
+        listOfSecretsToCreate.map(({
            type,
            secretKeyCiphertext,
            secretKeyIV,
@ -104,15 +118,11 @@ export const createSecrets = async (req: Request, res: Response) => {
            secretValueCiphertext,
            secretValueIV,
            secretValueTag,
-        }: {
-            type: string;
-            secretKeyCiphertext: string;
-            secretKeyIV: string;
-            secretKeyTag: string;
-            secretValueCiphertext: string;
-            secretValueIV: string;
-            secretValueTag: string;
-        }) => {
+            secretCommentCiphertext,
+            secretCommentIV,
+            secretCommentTag,
+            tags
+        }: secretsToCreateType) => {
            return ({
                version: 1,
                workspace: new Types.ObjectId(workspaceId),
@ -124,7 +134,11 @@ export const createSecrets = async (req: Request, res: Response) => {
                secretKeyTag,
                secretValueCiphertext,
                secretValueIV,
-                secretValueTag
+                secretValueTag,
+                secretCommentCiphertext,
+                secretCommentIV,
+                secretCommentTag,
+                tags
            });
        })
    );
@ -140,7 +154,7 @@ export const createSecrets = async (req: Request, res: Response) => {

    // (EE) add secret versions for new secrets
    await EESecretService.addSecretVersions({
-        secretVersions: newSecrets.map(({
+        secretVersions: newlyCreatedSecrets.map(({
            _id,
            version,
            workspace,
@ -154,7 +168,11 @@ export const createSecrets = async (req: Request, res: Response) => {
            secretValueCiphertext,
            secretValueIV,
            secretValueTag,
-            secretValueHash
+            secretValueHash,
+            secretCommentCiphertext,
+            secretCommentIV,
+            secretCommentTag,
+            tags
        }) => ({
            _id: new Types.ObjectId(),
            secret: _id,
@ -171,7 +189,11 @@ export const createSecrets = async (req: Request, res: Response) => {
            secretValueCiphertext,
            secretValueIV,
            secretValueTag,
-            secretValueHash
+            secretValueHash,
+            secretCommentCiphertext,
+            secretCommentIV,
+            secretCommentTag,
+            tags
        }))
    });

@ -179,7 +201,7 @@ export const createSecrets = async (req: Request, res: Response) => {
        name: ACTION_ADD_SECRETS,
        userId: req.user._id,
        workspaceId: new Types.ObjectId(workspaceId),
-        secretIds: newSecrets.map((n) => n._id)
+        secretIds: newlyCreatedSecrets.map((n) => n._id)
    });

    // (EE) create (audit) log
@ -201,7 +223,7 @@ export const createSecrets = async (req: Request, res: Response) => {
            event: 'secrets added',
            distinctId: req.user.email,
            properties: {
-                numberOfSecrets: toAdd.length,
+                numberOfSecrets: listOfSecretsToCreate.length,
                environment,
                workspaceId,
                channel: channel,
@ -211,7 +233,7 @@ export const createSecrets = async (req: Request, res: Response) => {
    }

    return res.status(200).send({
-        secrets: newSecrets
+        secrets: newlyCreatedSecrets
    });
 }

@ -294,7 +316,7 @@ export const getSecrets = async (req: Request, res: Response) => {
            ],
            type: { $in: [SECRET_SHARED, SECRET_PERSONAL] }
        }
-    ).then())
+    ).populate("tags").then())

    if (err) throw ValidationError({ message: 'Failed to get secrets', stack: err.stack });

@ -398,6 +420,7 @@ export const updateSecrets = async (req: Request, res: Response) => {
        secretCommentCiphertext: string;
        secretCommentIV: string;
        secretCommentTag: string;
+        tags: string[]
    }

    const updateOperationsToPerform = req.body.secrets.map((secret: PatchSecret) => {
@ -410,7 +433,8 @@ export const updateSecrets = async (req: Request, res: Response) => {
            secretValueTag,
            secretCommentCiphertext,
            secretCommentIV,
-            secretCommentTag
+            secretCommentTag,
+            tags
        } = secret;

        return ({
@ -426,6 +450,7 @@ export const updateSecrets = async (req: Request, res: Response) => {
                    secretValueCiphertext,
                    secretValueIV,
                    secretValueTag,
+                    tags,
                    ...((
                        secretCommentCiphertext &&
                        secretCommentIV &&
@ -460,6 +485,7 @@ export const updateSecrets = async (req: Request, res: Response) => {
                secretCommentCiphertext,
                secretCommentIV,
                secretCommentTag,
+                tags
            } = secretModificationsBySecretId[secret._id.toString()]

            return ({
@ -477,6 +503,7 @@ export const updateSecrets = async (req: Request, res: Response) => {
                secretCommentCiphertext: secretCommentCiphertext ? secretCommentCiphertext : secret.secretCommentCiphertext,
                secretCommentIV: secretCommentIV ? secretCommentIV : secret.secretCommentIV,
                secretCommentTag: secretCommentTag ? secretCommentTag : secret.secretCommentTag,
+                tags: tags ? tags : secret.tags
            });
        })
    }
--- a/backend/src/controllers/v2/tagController.ts
+++ b/backend/src/controllers/v2/tagController.ts
@ -0,0 +1,66 @@
+import { Request, Response } from 'express';
+import * as Sentry from '@sentry/node';
+import { Types } from 'mongoose';
+import {
+	Membership,
+} from '../../models';
+import Tag, { ITag } from '../../models/tag';
+import { Builder } from "builder-pattern"
+import to from 'await-to-js';
+import { BadRequestError, UnauthorizedRequestError } from '../../utils/errors';
+import { MongoError } from 'mongodb';
+import { userHasWorkspaceAccess } from '../../ee/helpers/checkMembershipPermissions';
+
+export const createWorkspaceTag = async (req: Request, res: Response) => {
+	const { workspaceId } = req.params
+	const { name, slug } = req.body
+	const sanitizedTagToCreate = Builder<ITag>()
+		.name(name)
+		.workspace(new Types.ObjectId(workspaceId))
+		.slug(slug)
+		.user(new Types.ObjectId(req.user._id))
+		.build();
+
+	const [err, createdTag] = await to(Tag.create(sanitizedTagToCreate))
+
+	if (err) {
+		if ((err as MongoError).code === 11000) {
+			throw BadRequestError({ message: "Tags must be unique in a workspace" })
+		}
+
+		throw err
+	}
+
+	res.json(createdTag)
+}
+
+export const deleteWorkspaceTag = async (req: Request, res: Response) => {
+	const { tagId } = req.params
+
+	const tagFromDB = await Tag.findById(tagId)
+	if (!tagFromDB) {
+		throw BadRequestError()
+	}
+
+	// can only delete if the request user is one that belongs to the same workspace as the tag
+	const membership = await Membership.findOne({
+		user: req.user,
+		workspace: tagFromDB.workspace
+	});
+
+	if (!membership) {
+		UnauthorizedRequestError({ message: 'Failed to validate membership' });
+	}
+
+	const result = await Tag.findByIdAndDelete(tagId);
+
+	res.json(result);
+}
+
+export const getWorkspaceTags = async (req: Request, res: Response) => {
+	const { workspaceId } = req.params
+	const workspaceTags = await Tag.find({ workspace: workspaceId })
+	return res.json({
+		workspaceTags
+	})
+}
--- a/backend/src/controllers/v2/workspaceController.ts
+++ b/backend/src/controllers/v2/workspaceController.ts
@ -467,4 +467,42 @@ export const deleteWorkspaceMembership = async (req: Request, res: Response) =>
 	return res.status(200).send({
 		membership
 	});
-}
+}
+
+/**
+ * Change autoCapitilzation Rule of workspace
+ * @param req
+ * @param res
+ * @returns
+ */
+export const toggleAutoCapitalization = async (req: Request, res: Response) => {
+	let workspace;
+	try {
+		const { workspaceId } = req.params;
+		const { autoCapitalization } = req.body;
+
+		workspace = await Workspace.findOneAndUpdate(
+			{
+				_id: workspaceId
+			},
+			{
+				autoCapitalization
+			},
+			{
+				new: true
+			}
+		);
+	} catch (err) {
+		Sentry.setUser({ email: req.user.email });
+		Sentry.captureException(err);
+		return res.status(400).send({
+			message: 'Failed to change autoCapitalization setting'
+		});
+	}
+
+	return res.status(200).send({
+		message: 'Successfully changed autoCapitalization setting',
+		workspace
+	});
+};
+
--- a/backend/src/ee/controllers/v1/secretSnapshotController.ts
+++ b/backend/src/ee/controllers/v1/secretSnapshotController.ts
@ -15,7 +15,13 @@ export const getSecretSnapshot = async (req: Request, res: Response) => {

        secretSnapshot = await SecretSnapshot
            .findById(secretSnapshotId)
-            .populate('secretVersions');
+            .populate({
+                path: 'secretVersions',
+                populate: {
+                    path: 'tags',
+                    model: 'Tag',
+                }
+            });
        
        if (!secretSnapshot) throw new Error('Failed to find secret snapshot');
        
--- a/backend/src/ee/models/secretVersion.ts
+++ b/backend/src/ee/models/secretVersion.ts
@ -21,6 +21,7 @@ export interface ISecretVersion {
 	secretValueIV: string;
 	secretValueTag: string;
 	secretValueHash: string;
+	tags?: string[];
 }

 const secretVersionSchema = new Schema<ISecretVersion>(
@ -88,7 +89,12 @@ const secretVersionSchema = new Schema<ISecretVersion>(
 		},
 		secretValueHash: {
 			type: String
-		}
+		},
+		tags: {
+			ref: 'Tag',
+			type: [Schema.Types.ObjectId],
+			default: []
+		},
 	},
 	{
 		timestamps: true
--- a/backend/src/helpers/integration.ts
+++ b/backend/src/helpers/integration.ts
@ -30,6 +30,7 @@ interface Update {
 * @param {String} obj.workspaceId - id of workspace
 * @param {String} obj.integration - name of integration 
 * @param {String} obj.code - code
+ * @returns {IntegrationAuth} integrationAuth - integration auth after OAuth2 code-token exchange
 */
 const handleOAuthExchangeHelper = async ({
    workspaceId,
@ -42,7 +43,6 @@ const handleOAuthExchangeHelper = async ({
    code: string;
    environment: string;
 }) => {
-    let action;
    let integrationAuth;
    try {
        const bot = await Bot.findOne({
@ -98,21 +98,13 @@ const handleOAuthExchangeHelper = async ({
                accessExpiresAt: res.accessExpiresAt
            });
        }
-
-        // initialize new integration after exchange
-        await new Integration({
-            workspace: workspaceId,
-            isActive: false,
-            app: null,
-            environment,
-            integration,
-            integrationAuth: integrationAuth._id
-        }).save();
    } catch (err) {
        Sentry.setUser(null);
        Sentry.captureException(err);
        throw new Error('Failed to handle OAuth2 code-token exchange')
    }
+    
+    return integrationAuth;
 }
 /**
 * Sync/push environment variables in workspace with id [workspaceId] to
--- a/backend/src/integrations/apps.ts
+++ b/backend/src/integrations/apps.ts
@ -3,6 +3,7 @@ import * as Sentry from '@sentry/node';
 import { Octokit } from '@octokit/rest';
 import { IIntegrationAuth } from '../models';
 import {
+  INTEGRATION_AZURE_KEY_VAULT,
  INTEGRATION_HEROKU,
  INTEGRATION_VERCEL,
  INTEGRATION_NETLIFY,
@ -40,6 +41,11 @@ const getApps = async ({
  let apps: App[];
  try {
    switch (integrationAuth.integration) {
+      case INTEGRATION_AZURE_KEY_VAULT:
+        apps = await getAppsAzureKeyVault({
+          accessToken
+        });
+      break;
      case INTEGRATION_HEROKU:
        apps = await getAppsHeroku({
          accessToken
@ -81,6 +87,15 @@ const getApps = async ({
  return apps;
 };

+const getAppsAzureKeyVault = async ({
+  accessToken
+}: {
+  accessToken: string;
+}) => {
+  // TODO
+  return [];
+}
+
 /**
 * Return list of apps for Heroku integration
 * @param {Object} obj
@ -247,7 +262,9 @@ const getAppsRender = async ({
    const res = (
      await axios.get(`${INTEGRATION_RENDER_API_URL}/v1/services`, {
        headers: {
-          Authorization: `Bearer ${accessToken}`
+          Authorization: `Bearer ${accessToken}`,
+          Accept: 'application/json',
+          'Accept-Encoding': 'application/json'
        }
      })
    ).data;
@ -257,6 +274,7 @@ const getAppsRender = async ({
        name: a.service.name,
        appId: a.service.id
      })); 
+    
  } catch (err) {
    Sentry.setUser(null);
    Sentry.captureException(err);
@ -296,7 +314,9 @@ const getAppsFlyio = async ({
      url: INTEGRATION_FLYIO_API_URL,
      method: 'post',
      headers: {
-        'Authorization': 'Bearer ' + accessToken
+        'Authorization': 'Bearer ' + accessToken,
+        'Accept': 'application/json',
+        'Accept-Encoding': 'application/json'
      },
      data: {
        query,
--- a/backend/src/integrations/exchange.ts
+++ b/backend/src/integrations/exchange.ts
@ -1,10 +1,12 @@
 import axios from 'axios';
 import * as Sentry from '@sentry/node';
 import {
+  INTEGRATION_AZURE_KEY_VAULT,
  INTEGRATION_HEROKU,
  INTEGRATION_VERCEL,
  INTEGRATION_NETLIFY,
  INTEGRATION_GITHUB,
+  INTEGRATION_AZURE_TOKEN_URL,
  INTEGRATION_HEROKU_TOKEN_URL,
  INTEGRATION_VERCEL_TOKEN_URL,
  INTEGRATION_NETLIFY_TOKEN_URL,
@ -12,15 +14,27 @@ import {
 } from '../variables';
 import {
  SITE_URL,
+  CLIENT_ID_AZURE,
  CLIENT_ID_VERCEL,
  CLIENT_ID_NETLIFY,
  CLIENT_ID_GITHUB,
+  CLIENT_SECRET_AZURE,
  CLIENT_SECRET_HEROKU,
  CLIENT_SECRET_VERCEL,
  CLIENT_SECRET_NETLIFY,
  CLIENT_SECRET_GITHUB
 } from '../config';

+interface ExchangeCodeAzureResponse {
+  token_type: string;
+  scope: string;
+  expires_in: number;
+  ext_expires_in: number;
+  access_token: string;
+  refresh_token: string;
+  id_token: string;
+}
+
 interface ExchangeCodeHerokuResponse {
  token_type: string;
  access_token: string;
@ -75,6 +89,11 @@ const exchangeCode = async ({

  try {
    switch (integration) {
+      case INTEGRATION_AZURE_KEY_VAULT:
+        obj = await exchangeCodeAzure({
+          code
+        });
+        break;
      case INTEGRATION_HEROKU:
        obj = await exchangeCodeHeroku({
          code
@ -105,6 +124,46 @@ const exchangeCode = async ({
  return obj;
 };

+/**
+ * Return [accessToken] for Azure OAuth2 code-token exchange
+ * @param param0 
+ */
+const exchangeCodeAzure = async ({
+  code
+}: {
+  code: string;
+}) => {
+  const accessExpiresAt = new Date();
+  let res: ExchangeCodeAzureResponse;
+  try {
+    res = (await axios.post(
+      INTEGRATION_AZURE_TOKEN_URL,
+       new URLSearchParams({
+        grant_type: 'authorization_code',
+        code: code,
+        scope: 'https://vault.azure.net/.default openid offline_access', // TODO: do we need all these permissions?
+        client_id: CLIENT_ID_AZURE,
+        client_secret: CLIENT_SECRET_AZURE,
+        redirect_uri: `${SITE_URL}/integrations/azure-key-vault/oauth2/callback`
+      } as any)
+    )).data;
+    
+    accessExpiresAt.setSeconds(
+        accessExpiresAt.getSeconds() + res.expires_in
+    );
+  } catch (err: any) {
+    Sentry.setUser(null);
+    Sentry.captureException(err);
+    throw new Error('Failed OAuth2 code-token exchange with Azure');
+  }
+  
+  return ({
+    accessToken: res.access_token,
+    refreshToken: res.refresh_token,
+    accessExpiresAt
+  });
+}
+
 /**
 * Return [accessToken], [accessExpiresAt], and [refreshToken] for Heroku
 * OAuth2 code-token exchange
@ -168,7 +227,7 @@ const exchangeCodeVercel = async ({ code }: { code: string }) => {
          code: code,
          client_id: CLIENT_ID_VERCEL,
          client_secret: CLIENT_SECRET_VERCEL,
-          redirect_uri: `${SITE_URL}/vercel`
+          redirect_uri: `${SITE_URL}/integrations/vercel/oauth2/callback`
        } as any)
      )
    ).data;
@ -208,7 +267,7 @@ const exchangeCodeNetlify = async ({ code }: { code: string }) => {
          code: code,
          client_id: CLIENT_ID_NETLIFY,
          client_secret: CLIENT_SECRET_NETLIFY,
-          redirect_uri: `${SITE_URL}/netlify`
+          redirect_uri: `${SITE_URL}/integrations/netlify/oauth2/callback`
        } as any)
      )
    ).data;
@ -260,10 +319,11 @@ const exchangeCodeGithub = async ({ code }: { code: string }) => {
          client_id: CLIENT_ID_GITHUB,
          client_secret: CLIENT_SECRET_GITHUB,
          code: code,
-          redirect_uri: `${SITE_URL}/github`
+          redirect_uri: `${SITE_URL}/integrations/github/oauth2/callback`
        },
        headers: {
-          Accept: 'application/json'
+          'Accept': 'application/json',
+          'Accept-Encoding': 'application/json'
        }
      })
    ).data;
--- a/backend/src/integrations/refresh.ts
+++ b/backend/src/integrations/refresh.ts
@ -1,13 +1,26 @@
 import axios from 'axios';
 import * as Sentry from '@sentry/node';
-import { INTEGRATION_HEROKU } from '../variables';
+import { INTEGRATION_AZURE_KEY_VAULT, INTEGRATION_HEROKU } from '../variables';
 import {
-    CLIENT_SECRET_HEROKU
+  SITE_URL,
+  CLIENT_ID_AZURE,
+  CLIENT_SECRET_AZURE,
+  CLIENT_SECRET_HEROKU
 } from '../config';
 import {
-    INTEGRATION_HEROKU_TOKEN_URL
+  INTEGRATION_AZURE_TOKEN_URL,
+  INTEGRATION_HEROKU_TOKEN_URL
 } from '../variables';

+interface RefreshTokenAzureResponse {
+  token_type: string;
+  scope: string;
+  expires_in: number;
+  ext_expires_in: 4871;
+  access_token: string;
+  refresh_token: string;
+}
+
 /**
 * Return new access token by exchanging refresh token [refreshToken] for integration
 * named [integration]
@ -25,6 +38,11 @@ const exchangeRefresh = async ({
  let accessToken;
  try {
    switch (integration) {
+      case INTEGRATION_AZURE_KEY_VAULT:
+        accessToken = await exchangeRefreshAzure({
+          refreshToken
+        });
+        break;
      case INTEGRATION_HEROKU:
        accessToken = await exchangeRefreshHeroku({
          refreshToken
@ -40,6 +58,38 @@ const exchangeRefresh = async ({
  return accessToken;
 };

+/**
+ * Return new access token by exchanging refresh token [refreshToken] for the
+ * Azure integration
+ * @param {Object} obj
+ * @param {String} obj.refreshToken - refresh token to use to get new access token for Azure
+ * @returns
+ */
+const exchangeRefreshAzure = async ({
+  refreshToken
+}: {
+  refreshToken: string;
+}) => {
+  try {
+    const res: RefreshTokenAzureResponse = (await axios.post(
+      INTEGRATION_AZURE_TOKEN_URL,
+       new URLSearchParams({
+        client_id: CLIENT_ID_AZURE,
+        scope: 'openid offline_access',
+        refresh_token: refreshToken,
+        grant_type: 'refresh_token',
+        client_secret: CLIENT_SECRET_AZURE
+      } as any)
+    )).data;
+    
+    return res.access_token;
+  } catch (err) {
+    Sentry.setUser(null);
+    Sentry.captureException(err);
+    throw new Error('Failed to get refresh OAuth2 access token for Azure'); 
+  }
+}
+
 /**
 * Return new access token by exchanging refresh token [refreshToken] for the
 * Heroku integration
@ -52,23 +102,23 @@ const exchangeRefreshHeroku = async ({
 }: {
  refreshToken: string;
 }) => {
-    let accessToken;
-	//TODO: Refactor code to take advantage of using RequestError. It's possible to create new types of errors for more detailed errors
-    try {
-        const res = await axios.post(
-            INTEGRATION_HEROKU_TOKEN_URL,
-            new URLSearchParams({
-                grant_type: 'refresh_token',
-                refresh_token: refreshToken,
-                client_secret: CLIENT_SECRET_HEROKU
-            } as any)
-        );
+  
+  let accessToken;
+  try {
+    const res = await axios.post(
+        INTEGRATION_HEROKU_TOKEN_URL,
+        new URLSearchParams({
+            grant_type: 'refresh_token',
+            refresh_token: refreshToken,
+            client_secret: CLIENT_SECRET_HEROKU
+        } as any)
+    );

    accessToken = res.data.access_token;
  } catch (err) {
    Sentry.setUser(null);
    Sentry.captureException(err);
-    throw new Error('Failed to get new OAuth2 access token for Heroku');
+    throw new Error('Failed to refresh OAuth2 access token for Heroku');
  }

  return accessToken;
--- a/backend/src/integrations/sync.ts
+++ b/backend/src/integrations/sync.ts
@ -1,11 +1,10 @@
 import axios from 'axios';
 import * as Sentry from '@sentry/node';
 import { Octokit } from '@octokit/rest';
-// import * as sodium from 'libsodium-wrappers';
 import sodium from 'libsodium-wrappers';
-// const sodium = require('libsodium-wrappers');
 import { IIntegration, IIntegrationAuth } from '../models';
 import {
+  INTEGRATION_AZURE_KEY_VAULT,
  INTEGRATION_HEROKU,
  INTEGRATION_VERCEL,
  INTEGRATION_NETLIFY,
@ -18,7 +17,6 @@ import {
  INTEGRATION_RENDER_API_URL,
  INTEGRATION_FLYIO_API_URL
 } from '../variables';
-import { access, appendFile } from 'fs';

 /**
 * Sync/push [secrets] to [app] in integration named [integration]
@ -41,6 +39,13 @@ const syncSecrets = async ({
 }) => {
  try {
    switch (integration.integration) {
+      case INTEGRATION_AZURE_KEY_VAULT:
+        await syncSecretsAzureKeyVault({
+          integration,
+          secrets,
+          accessToken
+        });
+        break;
      case INTEGRATION_HEROKU:
        await syncSecretsHeroku({
          integration,
@ -93,6 +98,151 @@ const syncSecrets = async ({
  }
 };

+/**
+ * Sync/push [secrets] to Azure Key Vault with vault URI [integration.app]
+ * @param {Object} obj
+ * @param {IIntegration} obj.integration - integration details
+ * @param {Object} obj.secrets - secrets to push to integration (object where keys are secret keys and values are secret values)
+ * @param {String} obj.accessToken - access token for Azure Key Vault integration
+ */
+const syncSecretsAzureKeyVault = async ({
+  integration,
+  secrets,
+  accessToken
+}: {
+  integration: IIntegration;
+  secrets: any;
+  accessToken: string;
+}) => {
+  try {
+
+    interface GetAzureKeyVaultSecret {
+      id: string; // secret URI
+      attributes: {
+        enabled: true,
+        created: number;
+        updated: number;
+        recoveryLevel: string;
+        recoverableDays: number;
+      }
+    }
+    
+    interface AzureKeyVaultSecret extends GetAzureKeyVaultSecret {
+      key: string;
+    }
+    
+    /**
+     * Return all secrets from Azure Key Vault by paginating through URL [url]
+     * @param {String} url - pagination URL to get next set of secrets from Azure Key Vault
+     * @returns 
+     */
+    const paginateAzureKeyVaultSecrets = async (url: string) => {
+      let result: GetAzureKeyVaultSecret[] = [];
+      
+      while (url) {
+        const res = await axios.get(url, {
+          headers: {
+            Authorization: `Bearer ${accessToken}`
+          }
+        });
+        
+        result = result.concat(res.data.value);
+        url = res.data.nextLink;
+      }
+      
+      return result;
+    }
+    
+    const getAzureKeyVaultSecrets = await paginateAzureKeyVaultSecrets(`${integration.app}/secrets?api-version=7.3`);
+    
+    let lastSlashIndex: number;
+    const res = (await Promise.all(getAzureKeyVaultSecrets.map(async (getAzureKeyVaultSecret) => {
+      if (!lastSlashIndex) {
+        lastSlashIndex = getAzureKeyVaultSecret.id.lastIndexOf('/');
+      }
+      
+      const azureKeyVaultSecret = await axios.get(`${getAzureKeyVaultSecret.id}?api-version=7.3`, {
+        headers: {
+          'Authorization': `Bearer ${accessToken}`
+        }
+      });
+
+      return ({
+        ...azureKeyVaultSecret.data,
+        key: getAzureKeyVaultSecret.id.substring(lastSlashIndex + 1),
+      });
+    })))
+    .reduce((obj: any, secret: any) => ({
+        ...obj,
+        [secret.key]: secret
+    }), {});
+    
+    const setSecrets: {
+      key: string;
+      value: string;
+    }[] = [];
+
+    Object.keys(secrets).forEach((key) => {
+      const hyphenatedKey = key.replace(/_/g, '-');
+      if (!(hyphenatedKey in res)) {
+        // case: secret has been created
+        setSecrets.push({
+          key: hyphenatedKey,
+          value: secrets[key]
+        });
+      } else {
+        if (secrets[key] !== res[hyphenatedKey].value) {
+          // case: secret has been updated
+          setSecrets.push({
+            key: hyphenatedKey,
+            value: secrets[key]
+          });
+        }
+      }
+    });
+    
+    const deleteSecrets: AzureKeyVaultSecret[] = [];
+    
+    Object.keys(res).forEach((key) => {
+      const underscoredKey = key.replace(/-/g, '_');
+      if (!(underscoredKey in secrets)) {
+        deleteSecrets.push(res[key]);
+      }
+    });
+    
+    // Sync/push set secrets
+    if (setSecrets.length > 0) {
+      setSecrets.forEach(async ({ key, value }) => {
+        await axios.put(
+          `${integration.app}/secrets/${key}?api-version=7.3`,
+          {
+            value
+          },
+          {
+            headers: {
+              Authorization: `Bearer ${accessToken}`
+            }
+          }
+        );
+      });
+    }
+    
+    if (deleteSecrets.length > 0) {
+      deleteSecrets.forEach(async (secret) => {
+        await axios.delete(`${integration.app}/secrets/${secret.key}?api-version=7.3`, {
+          headers: {
+            'Authorization': `Bearer ${accessToken}`
+          }
+        });
+      });
+    }
+  } catch (err) {
+    Sentry.setUser(null);
+    Sentry.captureException(err);
+    throw new Error('Failed to sync secrets to Azure Key Vault');
+  }
+};
+
 /**
 * Sync/push [secrets] to Heroku app named [integration.app]
 * @param {Object} obj
@ -736,8 +886,9 @@ const syncSecretsFlyio = async ({
        method: 'post',
        url: INTEGRATION_FLYIO_API_URL,
        headers: {
-            'Authorization': 'Bearer ' + accessToken,
-            'Content-Type': 'application/json'
+          'Authorization': 'Bearer ' + accessToken,
+          'Content-Type': 'application/json',
+          'Accept-Encoding': 'application/json'
        },
        data: {
          query: GetSecrets,
--- a/backend/src/models/integration.ts
+++ b/backend/src/models/integration.ts
@ -1,5 +1,6 @@
 import { Schema, model, Types } from 'mongoose';
 import {
+  INTEGRATION_AZURE_KEY_VAULT,
  INTEGRATION_HEROKU,
  INTEGRATION_VERCEL,
  INTEGRATION_NETLIFY,
@ -17,7 +18,7 @@ export interface IIntegration {
  owner: string;
  targetEnvironment: string;
  appId: string;
-  integration: 'heroku' | 'vercel' | 'netlify' | 'github' | 'render' | 'flyio';
+  integration: 'heroku' | 'vercel' | 'netlify' | 'github' | 'render' | 'flyio' | 'azure-key-vault';
  integrationAuth: Types.ObjectId;
 }

@ -59,6 +60,7 @@ const integrationSchema = new Schema<IIntegration>(
    integration: {
      type: String,
      enum: [
+        INTEGRATION_AZURE_KEY_VAULT,
        INTEGRATION_HEROKU,
        INTEGRATION_VERCEL,
        INTEGRATION_NETLIFY,
--- a/backend/src/models/integrationAuth.ts
+++ b/backend/src/models/integrationAuth.ts
@ -1,5 +1,6 @@
 import { Schema, model, Types } from 'mongoose';
 import {
+  INTEGRATION_AZURE_KEY_VAULT,
  INTEGRATION_HEROKU,
  INTEGRATION_VERCEL,
  INTEGRATION_NETLIFY,
@ -9,7 +10,7 @@ import {
 export interface IIntegrationAuth {
  _id: Types.ObjectId;
  workspace: Types.ObjectId;
-  integration: 'heroku' | 'vercel' | 'netlify' | 'github' | 'render' | 'flyio';
+  integration: 'heroku' | 'vercel' | 'netlify' | 'github' | 'render' | 'flyio' | 'azure-key-vault';
  teamId: string;
  accountId: string;
  refreshCiphertext?: string;
@ -31,6 +32,7 @@ const integrationAuthSchema = new Schema<IIntegrationAuth>(
    integration: {
      type: String,
      enum: [
+        INTEGRATION_AZURE_KEY_VAULT,
        INTEGRATION_HEROKU,
        INTEGRATION_VERCEL,
        INTEGRATION_NETLIFY,
--- a/backend/src/models/secret.ts
+++ b/backend/src/models/secret.ts
@ -23,6 +23,7 @@ export interface ISecret {
 	secretCommentIV?: string;
 	secretCommentTag?: string;
 	secretCommentHash?: string;
+	tags?: string[];
 }

 const secretSchema = new Schema<ISecret>(
@ -47,6 +48,11 @@ const secretSchema = new Schema<ISecret>(
 			type: Schema.Types.ObjectId,
 			ref: 'User'
 		},
+		tags: {
+			ref: 'Tag',
+			type: [Schema.Types.ObjectId],
+			default: []
+		},
 		environment: {
 			type: String,
 			required: true
--- a/backend/src/models/tag.ts
+++ b/backend/src/models/tag.ts
@ -0,0 +1,49 @@
+import { Schema, model, Types } from 'mongoose';
+
+export interface ITag {
+	_id: Types.ObjectId;
+	name: string;
+	slug: string;
+	user: Types.ObjectId;
+	workspace: Types.ObjectId;
+}
+
+const tagSchema = new Schema<ITag>(
+	{
+		name: {
+			type: String,
+			required: true,
+			trim: true,
+		},
+		slug: {
+			type: String,
+			required: true,
+			trim: true,
+			lowercase: true,
+			validate: [
+				function (value: any) {
+					return value.indexOf(' ') === -1;
+				},
+				'slug cannot contain spaces'
+			]
+		},
+		user: {
+			type: Schema.Types.ObjectId,
+			ref: 'User'
+		},
+		workspace: {
+			type: Schema.Types.ObjectId,
+			ref: 'Workspace'
+		},
+	},
+	{
+		timestamps: true
+	}
+);
+
+tagSchema.index({ slug: 1, workspace: 1 }, { unique: true })
+tagSchema.index({ workspace: 1 })
+
+const Tag = model<ITag>('Tag', tagSchema);
+
+export default Tag;
--- a/backend/src/models/workspace.ts
+++ b/backend/src/models/workspace.ts
@ -8,6 +8,7 @@ export interface IWorkspace {
 		name: string;
 		slug: string;
 	}>;
+	autoCapitalization: boolean;
 }

 const workspaceSchema = new Schema<IWorkspace>({
@ -15,6 +16,10 @@ const workspaceSchema = new Schema<IWorkspace>({
 		type: String,
 		required: true
 	},
+	autoCapitalization: {
+		type: Boolean,
+		default: true,
+	},
 	organization: {
 		type: Schema.Types.ObjectId,
 		ref: 'Organization',
--- a/backend/src/routes/v1/integration.ts
+++ b/backend/src/routes/v1/integration.ts
@ -10,7 +10,7 @@ import { ADMIN, MEMBER } from '../../variables';
 import { body, param } from 'express-validator';
 import { integrationController } from '../../controllers/v1';

-router.post( // new: add new integration
+router.post( // new: add new integration for integration auth
 	'/',
 	requireAuth({
        acceptedAuthModes: ['jwt', 'apiKey']
@ -19,7 +19,13 @@ router.post( // new: add new integration
 		acceptedRoles: [ADMIN, MEMBER],
 		location: 'body'
 	}),
-	body('integrationAuthId').exists().trim(),
+	body('integrationAuthId').exists().isString().trim(),
+	body('app').isString().trim(),
+	body('isActive').exists().isBoolean(),
+	body('appId').trim(),
+	body('sourceEnvironment').trim(),
+	body('targetEnvironment').trim(),
+	body('owner').trim(),
 	validateRequest,
 	integrationController.createIntegration
 );
--- a/backend/src/routes/v1/integrationAuth.ts
+++ b/backend/src/routes/v1/integrationAuth.ts
@ -18,6 +18,19 @@ router.get(
 	integrationAuthController.getIntegrationOptions
 );

+router.get(
+	'/:integrationAuthId',
+	requireAuth({
+        acceptedAuthModes: ['jwt']
+    }),
+	requireIntegrationAuthorizationAuth({
+		acceptedRoles: [ADMIN, MEMBER]
+	}),
+	param('integrationAuthId'),
+	validateRequest,
+	integrationAuthController.getIntegrationAuth	
+);
+
 router.post(
 	'/oauth-token',
 	requireAuth({
--- a/backend/src/routes/v2/index.ts
+++ b/backend/src/routes/v2/index.ts
@ -6,6 +6,7 @@ import secrets from './secrets';
 import serviceTokenData from './serviceTokenData';
 import apiKeyData from './apiKeyData';
 import environment from "./environment"
+import tags from "./tags"

 export {
    users,
@ -15,5 +16,6 @@ export {
    secrets,
    serviceTokenData,
    apiKeyData,
-    environment
+    environment,
+    tags
 }
--- a/backend/src/routes/v2/tags.ts
+++ b/backend/src/routes/v2/tags.ts
@ -0,0 +1,50 @@
+import express, { Response, Request } from 'express';
+const router = express.Router();
+import { body, param } from 'express-validator';
+import { tagController } from '../../controllers/v2';
+import {
+  requireAuth,
+  requireWorkspaceAuth,
+  validateRequest,
+} from '../../middleware';
+import { ADMIN, MEMBER } from '../../variables';
+
+router.get(
+  '/:workspaceId/tags',
+  requireAuth({
+    acceptedAuthModes: ['jwt'],
+  }),
+  requireWorkspaceAuth({
+    acceptedRoles: [MEMBER, ADMIN],
+  }),
+  param('workspaceId').exists().trim(),
+  validateRequest,
+  tagController.getWorkspaceTags
+);
+
+router.delete(
+  '/tags/:tagId',
+  requireAuth({
+    acceptedAuthModes: ['jwt'],
+  }),
+  param('tagId').exists().trim(),
+  validateRequest,
+  tagController.deleteWorkspaceTag
+);
+
+router.post(
+  '/:workspaceId/tags',
+  requireAuth({
+    acceptedAuthModes: ['jwt'],
+  }),
+  requireWorkspaceAuth({
+    acceptedRoles: [MEMBER, ADMIN],
+  }),
+  param('workspaceId').exists().trim(),
+  body('name').exists().trim(),
+  body('slug').exists().trim(),
+  validateRequest,
+  tagController.createWorkspaceTag
+);
+
+export default router;
--- a/backend/src/routes/v2/workspace.ts
+++ b/backend/src/routes/v2/workspace.ts
@ -118,4 +118,19 @@ router.delete( // TODO - rewire dashboard to this route
 	workspaceController.deleteWorkspaceMembership
 );

+
+router.patch(
+	'/:workspaceId/auto-capitalization',
+	requireAuth({
+		acceptedAuthModes: ['jwt']
+	}),
+	requireWorkspaceAuth({
+		acceptedRoles: [ADMIN, MEMBER]
+	}),
+	param('workspaceId').exists().trim(),
+	body('autoCapitalization').exists().trim().notEmpty(),
+	validateRequest,
+	workspaceController.toggleAutoCapitalization
+);
+
 export default router;
--- a/backend/src/services/IntegrationService.ts
+++ b/backend/src/services/IntegrationService.ts
@ -1,7 +1,3 @@
-import * as Sentry from '@sentry/node';
-import {
-    Integration
-} from '../models';
 import { 
    handleOAuthExchangeHelper,
    syncIntegrationsHelper,
@ -10,7 +6,6 @@ import {
    setIntegrationAuthRefreshHelper,
    setIntegrationAuthAccessHelper,
 } from '../helpers/integration';
-import { exchangeCode } from '../integrations';

 // should sync stuff be here too? Probably.
 // TODO: move bot functions to IntegrationService.
@ -26,11 +21,12 @@ class IntegrationService {
     * - Store integration access and refresh tokens returned from the OAuth2 code-token exchange
     * - Add placeholder inactive integration
     * - Create bot sequence for integration
-     * @param {Object} obj
-     * @param {String} obj.workspaceId - id of workspace
-     * @param {String} obj.environment - workspace environment
-     * @param {String} obj.integration - name of integration 
-     * @param {String} obj.code - code
+     * @param {Object} obj1
+     * @param {String} obj1.workspaceId - id of workspace
+     * @param {String} obj1.environment - workspace environment
+     * @param {String} obj1.integration - name of integration 
+     * @param {String} obj1.code - code
+     * @returns {IntegrationAuth} integrationAuth - integration authorization after OAuth2 code-token exchange
     */
    static async handleOAuthExchange({ 
        workspaceId,
@ -43,7 +39,7 @@ class IntegrationService {
        code: string;
        environment: string;
    }) {
-        await handleOAuthExchangeHelper({
+        return await handleOAuthExchangeHelper({
            workspaceId,
            integration,
            code,
--- a/backend/src/variables/index.ts
+++ b/backend/src/variables/index.ts
@ -6,6 +6,7 @@ import {
  ENV_SET
 } from './environment';
 import {
+  INTEGRATION_AZURE_KEY_VAULT,
  INTEGRATION_HEROKU,
  INTEGRATION_VERCEL,
  INTEGRATION_NETLIFY,
@ -14,6 +15,7 @@ import {
  INTEGRATION_FLYIO,
  INTEGRATION_SET,
  INTEGRATION_OAUTH2,
+  INTEGRATION_AZURE_TOKEN_URL,
  INTEGRATION_HEROKU_TOKEN_URL,
  INTEGRATION_VERCEL_TOKEN_URL,
  INTEGRATION_NETLIFY_TOKEN_URL,
@ -58,6 +60,7 @@ export {
  ENV_STAGING,
  ENV_PROD,
  ENV_SET,
+  INTEGRATION_AZURE_KEY_VAULT,
  INTEGRATION_HEROKU,
  INTEGRATION_VERCEL,
  INTEGRATION_NETLIFY,
@ -66,6 +69,7 @@ export {
  INTEGRATION_FLYIO,
  INTEGRATION_SET,
  INTEGRATION_OAUTH2,
+  INTEGRATION_AZURE_TOKEN_URL,
  INTEGRATION_HEROKU_TOKEN_URL,
  INTEGRATION_VERCEL_TOKEN_URL,
  INTEGRATION_NETLIFY_TOKEN_URL,
--- a/backend/src/variables/integration.ts
+++ b/backend/src/variables/integration.ts
@ -1,3 +1,7 @@
+import {
+    CLIENT_ID_AZURE,
+    TENANT_ID_AZURE
+} from '../config';
 import {
    CLIENT_ID_HEROKU,
    CLIENT_ID_NETLIFY,
@ -6,6 +10,7 @@ import {
 } from '../config';

 // integrations
+const INTEGRATION_AZURE_KEY_VAULT = 'azure-key-vault';
 const INTEGRATION_HEROKU = 'heroku';
 const INTEGRATION_VERCEL = 'vercel';
 const INTEGRATION_NETLIFY = 'netlify';
@ -13,6 +18,7 @@ const INTEGRATION_GITHUB = 'github';
 const INTEGRATION_RENDER = 'render';
 const INTEGRATION_FLYIO = 'flyio';
 const INTEGRATION_SET = new Set([
+    INTEGRATION_AZURE_KEY_VAULT,
    INTEGRATION_HEROKU,
    INTEGRATION_VERCEL,
    INTEGRATION_NETLIFY,
@ -25,6 +31,7 @@ const INTEGRATION_SET = new Set([
 const INTEGRATION_OAUTH2 = 'oauth2';

 // integration oauth endpoints
+const INTEGRATION_AZURE_TOKEN_URL = `https://login.microsoftonline.com/${TENANT_ID_AZURE}/oauth2/v2.0/token`;
 const INTEGRATION_HEROKU_TOKEN_URL = 'https://id.heroku.com/oauth/token';
 const INTEGRATION_VERCEL_TOKEN_URL =
    'https://api.vercel.com/v2/oauth/access_token';
@ -40,6 +47,16 @@ const INTEGRATION_RENDER_API_URL = 'https://api.render.com';
 const INTEGRATION_FLYIO_API_URL = 'https://api.fly.io/graphql';

 const INTEGRATION_OPTIONS = [
+    {
+        name: 'Azure Key Vault',
+        slug: 'azure-key-vault',
+        image: 'Microsoft Azure.png',
+        isAvailable: false,
+        type: 'oauth',
+        clientId: CLIENT_ID_AZURE,
+        tenantId: TENANT_ID_AZURE,
+        docsLink: ''
+    },
    {
        name: 'Heroku',
        slug: 'heroku',
@ -143,6 +160,7 @@ const INTEGRATION_OPTIONS = [
 ]

 export {
+    INTEGRATION_AZURE_KEY_VAULT,
    INTEGRATION_HEROKU,
    INTEGRATION_VERCEL,
    INTEGRATION_NETLIFY,
@ -151,6 +169,7 @@ export {
    INTEGRATION_FLYIO,
    INTEGRATION_SET,
    INTEGRATION_OAUTH2,
+    INTEGRATION_AZURE_TOKEN_URL,
    INTEGRATION_HEROKU_TOKEN_URL,
    INTEGRATION_VERCEL_TOKEN_URL,
    INTEGRATION_NETLIFY_TOKEN_URL,
--- a/cli/packages/api/model.go
+++ b/cli/packages/api/model.go
@ -201,21 +201,30 @@ type GetEncryptedSecretsV2Request struct {

 type GetEncryptedSecretsV2Response struct {
 	Secrets []struct {
-		ID                    string    `json:"_id"`
-		Version               int       `json:"version"`
-		Workspace             string    `json:"workspace"`
-		Type                  string    `json:"type"`
-		Environment           string    `json:"environment"`
-		SecretKeyCiphertext   string    `json:"secretKeyCiphertext"`
-		SecretKeyIV           string    `json:"secretKeyIV"`
-		SecretKeyTag          string    `json:"secretKeyTag"`
-		SecretValueCiphertext string    `json:"secretValueCiphertext"`
-		SecretValueIV         string    `json:"secretValueIV"`
-		SecretValueTag        string    `json:"secretValueTag"`
-		V                     int       `json:"__v"`
-		CreatedAt             time.Time `json:"createdAt"`
-		UpdatedAt             time.Time `json:"updatedAt"`
-		User                  string    `json:"user,omitempty"`
+		ID                      string    `json:"_id"`
+		Version                 int       `json:"version"`
+		Workspace               string    `json:"workspace"`
+		Type                    string    `json:"type"`
+		Environment             string    `json:"environment"`
+		SecretKeyCiphertext     string    `json:"secretKeyCiphertext"`
+		SecretKeyIV             string    `json:"secretKeyIV"`
+		SecretKeyTag            string    `json:"secretKeyTag"`
+		SecretValueCiphertext   string    `json:"secretValueCiphertext"`
+		SecretValueIV           string    `json:"secretValueIV"`
+		SecretValueTag          string    `json:"secretValueTag"`
+		SecretCommentCiphertext string    `json:"secretCommentCiphertext"`
+		SecretCommentIV         string    `json:"secretCommentIV"`
+		SecretCommentTag        string    `json:"secretCommentTag"`
+		V                       int       `json:"__v"`
+		CreatedAt               time.Time `json:"createdAt"`
+		UpdatedAt               time.Time `json:"updatedAt"`
+		User                    string    `json:"user,omitempty"`
+		Tags                    []struct {
+			ID        string `json:"_id"`
+			Name      string `json:"name"`
+			Slug      string `json:"slug"`
+			Workspace string `json:"workspace"`
+		} `json:"tags"`
 	} `json:"secrets"`
 }

--- a/cli/packages/cmd/secrets.go
+++ b/cli/packages/cmd/secrets.go
@ -6,6 +6,8 @@ package cmd
 import (
 	"encoding/base64"
 	"fmt"
+	"regexp"
+	"sort"
 	"strings"
 	"unicode"

@ -22,7 +24,7 @@ import (
 )

 var secretsCmd = &cobra.Command{
-	Example:               `infisical secrets"`,
+	Example:               `infisical secrets`,
 	Short:                 "Used to create, read update and delete secrets",
 	Use:                   "secrets",
 	DisableFlagsInUseLine: true,
@ -67,6 +69,16 @@ var secretsGetCmd = &cobra.Command{
 	Run:                   getSecretsByNames,
 }

+var secretsGenerateExampleEnvCmd = &cobra.Command{
+	Example:               `secrets generate-example-env > .example-env`,
+	Short:                 "Used to generate a example .env file",
+	Use:                   "generate-example-env",
+	DisableFlagsInUseLine: true,
+	Args:                  cobra.NoArgs,
+	PreRun:                toggleDebug,
+	Run:                   generateExampleEnv,
+}
+
 var secretsSetCmd = &cobra.Command{
 	Example:               `secrets set <secretName=secretValue> <secretName=secretValue>..."`,
 	Short:                 "Used set secrets",
@ -357,6 +369,171 @@ func getSecretsByNames(cmd *cobra.Command, args []string) {
 	visualize.PrintAllSecretDetails(requestedSecrets)
 }

+func generateExampleEnv(cmd *cobra.Command, args []string) {
+	environmentName, err := cmd.Flags().GetString("env")
+	if err != nil {
+		util.HandleError(err, "Unable to parse flag")
+	}
+
+	workspaceFileExists := util.WorkspaceConfigFileExistsInCurrentPath()
+	if !workspaceFileExists {
+		util.HandleError(err, "Unable to parse flag")
+	}
+
+	infisicalToken, err := cmd.Flags().GetString("token")
+	if err != nil {
+		util.HandleError(err, "Unable to parse flag")
+	}
+
+	secrets, err := util.GetAllEnvironmentVariables(models.GetAllSecretsParameters{Environment: environmentName, InfisicalToken: infisicalToken})
+	if err != nil {
+		util.HandleError(err, "To fetch all secrets")
+	}
+
+	tagsHashToSecretKey := make(map[string]int)
+
+	type TagsAndSecrets struct {
+		Secrets []models.SingleEnvironmentVariable
+		Tags    []struct {
+			ID        string `json:"_id"`
+			Name      string `json:"name"`
+			Slug      string `json:"slug"`
+			Workspace string `json:"workspace"`
+		}
+	}
+
+	// sort secrets by associated tags (most number of tags to least tags)
+	sort.Slice(secrets, func(i, j int) bool {
+		return len(secrets[i].Tags) > len(secrets[j].Tags)
+	})
+
+	for _, secret := range secrets {
+		listOfTagSlugs := []string{}
+
+		for _, tag := range secret.Tags {
+			listOfTagSlugs = append(listOfTagSlugs, tag.Slug)
+		}
+		sort.Strings(listOfTagSlugs)
+
+		tagsHash := util.GetHashFromStringList(listOfTagSlugs)
+
+		tagsHashToSecretKey[tagsHash] += 1
+	}
+
+	finalTagHashToSecretKey := make(map[string]TagsAndSecrets)
+
+	for _, secret := range secrets {
+		listOfTagSlugs := []string{}
+		for _, tag := range secret.Tags {
+			listOfTagSlugs = append(listOfTagSlugs, tag.Slug)
+		}
+
+		// sort the slug so we get the same hash each time
+		sort.Strings(listOfTagSlugs)
+
+		tagsHash := util.GetHashFromStringList(listOfTagSlugs)
+		occurrence, exists := tagsHashToSecretKey[tagsHash]
+		if exists && occurrence > 0 {
+
+			value, exists2 := finalTagHashToSecretKey[tagsHash]
+			allSecretsForTags := append(value.Secrets, secret)
+
+			// sort the the secrets by keys so that they can later be sorted by the first item in the secrets array
+			sort.Slice(allSecretsForTags, func(i, j int) bool {
+				return allSecretsForTags[i].Key < allSecretsForTags[j].Key
+			})
+
+			if exists2 {
+				finalTagHashToSecretKey[tagsHash] = TagsAndSecrets{
+					Tags:    secret.Tags,
+					Secrets: allSecretsForTags,
+				}
+			} else {
+				finalTagHashToSecretKey[tagsHash] = TagsAndSecrets{
+					Tags:    secret.Tags,
+					Secrets: []models.SingleEnvironmentVariable{secret},
+				}
+			}
+
+			tagsHashToSecretKey[tagsHash] -= 1
+		}
+	}
+
+	// sort the fianl result by secret key fo consistent print order
+	listOfsecretDetails := make([]TagsAndSecrets, 0, len(finalTagHashToSecretKey))
+	for _, secretDetails := range finalTagHashToSecretKey {
+		listOfsecretDetails = append(listOfsecretDetails, secretDetails)
+	}
+
+	// sort the order of the headings by the order of the secrets
+	sort.Slice(listOfsecretDetails, func(i, j int) bool {
+		return len(listOfsecretDetails[i].Tags) < len(listOfsecretDetails[j].Tags)
+	})
+
+	for _, secretDetails := range listOfsecretDetails {
+		listOfKeyValue := []string{}
+
+		for _, secret := range secretDetails.Secrets {
+			re := regexp.MustCompile(`(?s)(.*)DEFAULT:(.*)`)
+			match := re.FindStringSubmatch(secret.Comment)
+			defaultValue := ""
+			comment := secret.Comment
+
+			// Case: Only has default value
+			if len(match) == 2 {
+				defaultValue = strings.TrimSpace(match[1])
+			}
+
+			// Case: has a comment and a default value
+			if len(match) == 3 {
+				comment = match[1]
+				defaultValue = match[2]
+			}
+
+			row := ""
+			if comment != "" {
+				comment = addHash(comment)
+				row = fmt.Sprintf("%s \n%s=%s", strings.TrimSpace(comment), strings.TrimSpace(secret.Key), strings.TrimSpace(defaultValue))
+			} else {
+				row = fmt.Sprintf("%s=%s", strings.TrimSpace(secret.Key), strings.TrimSpace(defaultValue))
+			}
+
+			// each secret row to be added to the file
+			listOfKeyValue = append(listOfKeyValue, row)
+		}
+
+		listOfTagNames := []string{}
+		for _, tag := range secretDetails.Tags {
+			listOfTagNames = append(listOfTagNames, tag.Name)
+		}
+
+		heading := CenterString(strings.Join(listOfTagNames, " & "), 80)
+
+		if len(listOfTagNames) == 0 {
+			fmt.Printf("\n%s \n", strings.Join(listOfKeyValue, "\n \n"))
+		} else {
+			fmt.Printf("\n\n\n%s\n \n%s \n", heading, strings.Join(listOfKeyValue, "\n \n"))
+		}
+	}
+}
+
+func CenterString(s string, numStars int) string {
+	stars := strings.Repeat("*", numStars)
+	padding := (numStars - len(s)) / 2
+	cenetredTextWithStar := stars[:padding] + " " + strings.ToUpper(s) + " " + stars[padding:]
+
+	hashes := strings.Repeat("#", len(cenetredTextWithStar)+2)
+	return fmt.Sprintf("%s \n# %s \n%s", hashes, cenetredTextWithStar, hashes)
+}
+
+func addHash(input string) string {
+	lines := strings.Split(input, "\n")
+	for i, line := range lines {
+		lines[i] = "# " + line
+	}
+	return strings.Join(lines, "\n")
+}
+
 func getSecretsByKeys(secrets []models.SingleEnvironmentVariable) map[string]models.SingleEnvironmentVariable {
 	secretMapByName := make(map[string]models.SingleEnvironmentVariable)

@ -368,6 +545,10 @@ func getSecretsByKeys(secrets []models.SingleEnvironmentVariable) map[string]mod
 }

 func init() {
+
+	secretsGenerateExampleEnvCmd.Flags().String("token", "", "Fetch secrets using the Infisical Token")
+	secretsCmd.AddCommand(secretsGenerateExampleEnvCmd)
+
 	secretsGetCmd.Flags().String("token", "", "Fetch secrets using the Infisical Token")
 	secretsCmd.AddCommand(secretsGetCmd)

--- a/cli/packages/crypto/crypto.go
+++ b/cli/packages/crypto/crypto.go
@ -12,6 +12,11 @@ import (

 // will decrypt cipher text to plain text using iv and tag
 func DecryptSymmetric(key []byte, cipherText []byte, tag []byte, iv []byte) ([]byte, error) {
+	// Case: empty string
+	if len(cipherText) == 0 && len(tag) == 0 && len(iv) == 0 {
+		return []byte{}, nil
+	}
+
 	block, err := aes.NewCipher(key)
 	if err != nil {
 		return nil, err
--- a/cli/packages/models/cli.go
+++ b/cli/packages/models/cli.go
@ -1,6 +1,8 @@
 package models

-import "github.com/99designs/keyring"
+import (
+	"github.com/99designs/keyring"
+)

 type UserCredentials struct {
 	Email      string `json:"email"`
@ -19,6 +21,13 @@ type SingleEnvironmentVariable struct {
 	Value string `json:"value"`
 	Type  string `json:"type"`
 	ID    string `json:"_id"`
+	Tags  []struct {
+		ID        string `json:"_id"`
+		Name      string `json:"name"`
+		Slug      string `json:"slug"`
+		Workspace string `json:"workspace"`
+	} `json:"tags"`
+	Comment string `json:"comment"`
 }

 type Workspace struct {
--- a/cli/packages/util/helper.go
+++ b/cli/packages/util/helper.go
@ -1,6 +1,7 @@
 package util

 import (
+	"crypto/sha256"
 	"encoding/base64"
 	"fmt"
 	"os"
@ -98,3 +99,14 @@ func RequireLocalWorkspaceFile() {
 		PrintMessageAndExit("Your project id is missing in your local config file. Please add it or run again [infisical init]")
 	}
 }
+
+func GetHashFromStringList(list []string) string {
+	hash := sha256.New()
+
+	for _, item := range list {
+		hash.Write([]byte(item))
+	}
+
+	sum := sha256.Sum256(hash.Sum(nil))
+	return fmt.Sprintf("%x", sum)
+}
--- a/cli/packages/util/log.go
+++ b/cli/packages/util/log.go
@ -24,7 +24,7 @@ func PrintErrorAndExit(exitCode int, err error, messages ...string) {
 }

 func PrintWarning(message string) {
-	color.Yellow("Warning: %v", message)
+	color.New(color.FgYellow).Fprintf(os.Stderr, "Warning: %v \n", message)
 }

 func PrintMessageAndExit(messages ...string) {
--- a/cli/packages/util/secrets.go
+++ b/cli/packages/util/secrets.go
@ -315,11 +315,34 @@ func GetPlainTextSecrets(key []byte, encryptedSecrets api.GetEncryptedSecretsV2R
 			return nil, fmt.Errorf("unable to symmetrically decrypt secret value")
 		}

+		// Decrypt comment
+		comment_iv, err := base64.StdEncoding.DecodeString(secret.SecretCommentIV)
+		if err != nil {
+			return nil, fmt.Errorf("unable to decode secret IV for secret value")
+		}
+
+		comment_tag, err := base64.StdEncoding.DecodeString(secret.SecretCommentTag)
+		if err != nil {
+			return nil, fmt.Errorf("unable to decode secret authentication tag for secret value")
+		}
+
+		comment_ciphertext, _ := base64.StdEncoding.DecodeString(secret.SecretCommentCiphertext)
+		if err != nil {
+			return nil, fmt.Errorf("unable to decode secret cipher text for secret key")
+		}
+
+		plainTextComment, err := crypto.DecryptSymmetric(key, comment_ciphertext, comment_tag, comment_iv)
+		if err != nil {
+			return nil, fmt.Errorf("unable to symmetrically decrypt secret comment")
+		}
+
 		plainTextSecret := models.SingleEnvironmentVariable{
-			Key:   string(plainTextKey),
-			Value: string(plainTextValue),
-			Type:  string(secret.Type),
-			ID:    secret.ID,
+			Key:     string(plainTextKey),
+			Value:   string(plainTextValue),
+			Type:    string(secret.Type),
+			ID:      secret.ID,
+			Tags:    secret.Tags,
+			Comment: string(plainTextComment),
 		}

 		plainTextSecrets = append(plainTextSecrets, plainTextSecret)
--- a/docs/cli/commands/init.mdx
+++ b/docs/cli/commands/init.mdx
@ -9,6 +9,8 @@ infisical init

 ## Description

-Link a local project to the platform
+Link a local project to your Infisical project. Once connected, you can then access the secrets locally from the connected Infisical project.

-The command creates a `infisical.json` file containing your Project ID.
+<Info>
+This command creates a `infisical.json` file containing your Project ID.
+</Info>
--- a/docs/cli/commands/run.mdx
+++ b/docs/cli/commands/run.mdx
@ -25,13 +25,58 @@ description: "The command that injects your secrets into local environment"

 ## Description

-Inject environment variables from the platform into an application process.
+Inject secrets from Infisical into your application process.

-## Options

-| Option         | Description                                                                                                 | Default value |
-| -------------- | ----------------------------------------------------------------------------------------------------------- | ------------- |
-| `--env`        | Used to set the environment that secrets are pulled from. Accepted values: `dev`, `staging`, `test`, `prod` | `dev`         |
-| `--expand`     | Parse shell parameter expansions in your secrets (e.g., `${DOMAIN}`)      | `true`        |
-| `--command`    | Pass secrets into chained commands (e.g., `"first-command && second-command; more-commands..."`)      | None        |
-| `--secret-overriding`|  Prioritizes personal secrets with the same name over shared secrets      | `true`        |
+## Subcommands & flags
+
+<Accordion title="infisical run" defaultOpen="true">
+  Use this command to inject secrets into your applications process
+
+  ```bash
+  $ infisical run -- <your application command>
+
+  # Example 
+  $ infisical run -- npm run dev
+  ```
+
+  ### flags 
+  <Accordion title="--command">
+    Pass secrets into multiple commands at once
+
+    ```bash
+    # Example 
+    infisical run --command="npm run build && npm run dev; more-commands..."
+    ```
+  </Accordion>
+
+  <Accordion title="--token">
+    If you are using a [service token](../../getting-started/dashboard/token) to authenticate, you can pass the token as a flag
+
+    ```bash
+    # Example 
+    infisical run --token="st.63e03c4a97cb4a747186c71e.ed5b46a34c078a8f94e8228f4ab0ff97.4f7f38034811995997d72badf44b42ec" -- npm run start
+    ```
+
+    You may also expose the token to the CLI by setting the environment variable `INFISICAL_TOKEN` before executing the run command. This will have the same effect as setting the token with `--token` flag 
+  </Accordion>
+
+  <Accordion title="--expand">
+    Turn on or off the shell parameter expansion in your secrets. If you have used shell parameters in your secret(s), activating this feature will populate them before injecting them into your application process.
+
+    Default value: `true`
+  </Accordion>
+
+  <Accordion title="--env">
+    This is used to specify the environment from which secrets should be retrieved. The accepted values are the environment slugs defined for your project, such as `dev`, `staging`, `test`, and `prod`.
+    
+    Default value: `dev`
+  </Accordion>
+
+  <Accordion title="--secret-overriding">
+    Prioritizes personal secrets with the same name over shared secrets
+
+    Default value: `true`
+  </Accordion>
+
+</Accordion>
--- a/docs/cli/commands/secrets.mdx
+++ b/docs/cli/commands/secrets.mdx
@ -14,17 +14,8 @@ This command enables you to perform CRUD (create, read, update, delete) operatio
 <Accordion title="infisical secrets" defaultOpen="true">
  Use this command to print out all of the secrets in your project

-  ```
+  ```bash
  $ infisical secrets
-
-  ## Example 
-  $ infisical secrets
-  ┌─────────────┬──────────────┬─────────────┐
-  │ SECRET NAME │ SECRET VALUE │ SECRET TYPE │
-  ├─────────────┼──────────────┼─────────────┤
-  │ DOMAIN      │ example.com  │ shared      │
-  │ HASH        │ jebhfbwe     │ shared      │
-  └─────────────┴──────────────┴─────────────┘
  ```

  ### flags 
@ -45,16 +36,11 @@ This command enables you to perform CRUD (create, read, update, delete) operatio
 <Accordion title="infisical secrets get">
  This command allows you selectively print the requested secrets by name

-  ``` 
+  ```bash 
  $ infisical secrets get <secret-name-a> <secret-name-b> ...

  # Example
  $ infisical secrets get DOMAIN
-  ┌─────────────┬──────────────┬─────────────┐
-  │ SECRET NAME │ SECRET VALUE │ SECRET TYPE │
-  ├─────────────┼──────────────┼─────────────┤
-  │ DOMAIN      │ example.com  │ shared      │
-  └─────────────┴──────────────┴─────────────┘

  ```

@ -70,18 +56,11 @@ This command enables you to perform CRUD (create, read, update, delete) operatio
 This command allows you to set or update secrets in your environment. If the secret key provided already exists, its value will be updated with the new value. 
 If the secret key does not exist, a new secret will be created using both the key and value provided.

-```
+```bash
 $ infisical secrets set <key1=value1> <key2=value2>...

 ## Example 
 $ infisical secrets set STRIPE_API_KEY=sjdgwkeudyjwe DOMAIN=example.com HASH=jebhfbwe
-┌────────────────┬───────────────┬────────────────────────┐
-│ SECRET NAME    │ SECRET VALUE  │ STATUS                 │
-├────────────────┼───────────────┼────────────────────────┤
-│ STRIPE_API_KEY │ sjdgwkeudyjwe │ SECRET VALUE UNCHANGED │
-│ DOMAIN         │ example.com   │ SECRET VALUE MODIFIED  │
-│ HASH           │ jebhfbwe      │ SECRET CREATED         │
-└────────────────┴───────────────┴────────────────────────┘
 ```

  ### Flags 
@ -95,12 +74,11 @@ $ infisical secrets set STRIPE_API_KEY=sjdgwkeudyjwe DOMAIN=example.com HASH=jeb
 <Accordion title="infisical secrets delete">
  This command allows you to delete secrets by their name(s).

-  ```
+  ```bash
  $ infisical secrets delete <keyName1> <keyName2>...

  ## Example 
  $ infisical secrets delete STRIPE_API_KEY DOMAIN HASH
-  secret name(s) [STRIPE_API_KEY, DOMAIN, HASH] have been deleted from your project
  ```

  ### Flags 
--- a/docs/cli/faq.mdx
+++ b/docs/cli/faq.mdx
@ -13,4 +13,9 @@ If none of the available stores work for you, you can try using the `file` store
 If you are still experiencing trouble, please seek support. 

 [Learn more about vault command](./commands/vault)
+</Accordion>
+
+<Accordion title="Can I fetch secrets with Infisical if I am offline?">
+Yes. If you have previously retrieved secrets for a specific project and environment (such as dev, staging, or prod), the  `run`/`secret` command will utilize the saved secrets, even when offline, on subsequent fetch attempts.
+
 </Accordion>
--- a/docs/images/k8-diagram.png
+++ b/docs/images/k8-diagram.png
--- a/docs/integrations/cicd/gitlab.mdx
+++ b/docs/integrations/cicd/gitlab.mdx
@ -0,0 +1,34 @@
+---
+title: "Gitlab Pipeline"
+---
+
+To integrate Infisical secrets into your Gitlab CI/CD setup, three steps are required.
+
+## Generate service token 
+To expose Infisical secrets in Gitlab CI/CD, you must generate a service token for the specific project and environment in Infisical. For instructions on how to generate a service token, refer to [this page](../../getting-started/dashboard/token)
+
+## Set Infisical service token in Gitlab 
+To provide Infisical CLI with the service token generated in the previous step, go to **Settings > CI/CD > Variables** in Gitlab and create a new **INFISICAL_TOKEN** variable. Enter the generated service token as its value.
+
+## Configure Infisical in your pipeline 
+Edit your .gitlab-ci.yml to include the installation of the Infisical CLI. This will allow you to use the CLI for fetching and injecting secrets into any script or command within your Gitlab CI/CD process.
+
+#### Example
+```yaml 
+image: ubuntu
+
+stages:       
+  - build
+  - test
+  - deploy
+
+build-job:     
+  stage: build
+  script:
+    - apt update && apt install -y curl
+    - curl -1sLf 'https://dl.cloudsmith.io/public/infisical/infisical-cli/setup.deb.sh' | bash
+    - apt-get update && apt-get install -y infisical
+    - infisical run -- npm run build
+
+...
+```
--- a/docs/integrations/overview.mdx
+++ b/docs/integrations/overview.mdx
@ -37,7 +37,7 @@ Missing an integration? Throw in a [request](https://github.com/Infisical/infisi
 | GCP                                                      | Cloud     | Coming soon |
 | Azure                                                    | Cloud     | Coming soon |
 | DigitalOcean                                             | Cloud     | Coming soon |
-| GitLab                                                   | CI/CD     | Coming soon |
+| [GitLab Pipeline](/integrations/cicd/gitlab)             | CI/CD     | Available   |
 | [CircleCI](/integrations/cicd/circleci)                  | CI/CD     | Coming soon |
 | TravisCI                                                 | CI/CD     | Coming soon |
 | GitHub Actions                                           | CI/CD     | Coming soon |
--- a/docs/integrations/platforms/kubernetes.mdx
+++ b/docs/integrations/platforms/kubernetes.mdx
@ -3,10 +3,12 @@ title: 'Kubernetes'
 description: "This page explains how to use Infisical to inject secrets into Kubernetes clusters."
 ---

-The Infisical Secrets Operator is a custom Kubernetes controller that helps keep secrets in a cluster up to date by synchronizing them.
-It is installed in its own namespace within the cluster and follows strict RBAC policies.
-The operator uses InfisicalSecret custom resources to identify which secrets to sync and where to store them.
-It is responsible for continuously updating managed secrets, and in the future may also automatically reload deployments that use them as needed.
+![title](../../images/k8-diagram.png)
+
+
+The Infisical Secrets Operator is a Kubernetes controller that retrieves secrets from Infisical and stores them in a designated cluster. 
+It uses an `InfisicalSecret` resource to specify authentication and storage methods.
+The operator continuously updates secrets and can also reload dependent deployments automatically.

 ## Install Operator

--- a/docs/mint.json
+++ b/docs/mint.json
@ -227,6 +227,7 @@
      "group": "CI/CD",
      "pages": [
        "integrations/cicd/githubactions",
+        "integrations/cicd/gitlab",
        "integrations/cicd/circleci"
      ]
    },
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@ -15,11 +15,13 @@
        "@fortawesome/react-fontawesome": "^0.1.19",
        "@headlessui/react": "^1.6.6",
        "@hookform/resolvers": "^2.9.10",
+        "@octokit/rest": "^19.0.7",
        "@radix-ui/react-accordion": "^1.1.0",
        "@radix-ui/react-alert-dialog": "^1.0.2",
        "@radix-ui/react-checkbox": "^1.0.1",
        "@radix-ui/react-dialog": "^1.0.2",
        "@radix-ui/react-dropdown-menu": "^2.0.2",
+        "@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-progress": "^1.0.1",
@ -3520,6 +3522,153 @@
        "node": ">= 8"
      }
    },
+    "node_modules/@octokit/auth-token": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-3.0.3.tgz",
+      "integrity": "sha512-/aFM2M4HVDBT/jjDBa84sJniv1t9Gm/rLkalaz9htOm+L+8JMj1k9w0CkUdcxNyNxZPlTxKPVko+m1VlM58ZVA==",
+      "dependencies": {
+        "@octokit/types": "^9.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@octokit/core": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@octokit/core/-/core-4.2.0.tgz",
+      "integrity": "sha512-AgvDRUg3COpR82P7PBdGZF/NNqGmtMq2NiPqeSsDIeCfYFOZ9gddqWNQHnFdEUf+YwOj4aZYmJnlPp7OXmDIDg==",
+      "dependencies": {
+        "@octokit/auth-token": "^3.0.0",
+        "@octokit/graphql": "^5.0.0",
+        "@octokit/request": "^6.0.0",
+        "@octokit/request-error": "^3.0.0",
+        "@octokit/types": "^9.0.0",
+        "before-after-hook": "^2.2.0",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@octokit/endpoint": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-7.0.5.tgz",
+      "integrity": "sha512-LG4o4HMY1Xoaec87IqQ41TQ+glvIeTKqfjkCEmt5AIwDZJwQeVZFIEYXrYY6yLwK+pAScb9Gj4q+Nz2qSw1roA==",
+      "dependencies": {
+        "@octokit/types": "^9.0.0",
+        "is-plain-object": "^5.0.0",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@octokit/graphql": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-5.0.5.tgz",
+      "integrity": "sha512-Qwfvh3xdqKtIznjX9lz2D458r7dJPP8l6r4GQkIdWQouZwHQK0mVT88uwiU2bdTU2OtT1uOlKpRciUWldpG0yQ==",
+      "dependencies": {
+        "@octokit/request": "^6.0.0",
+        "@octokit/types": "^9.0.0",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@octokit/openapi-types": {
+      "version": "16.0.0",
+      "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-16.0.0.tgz",
+      "integrity": "sha512-JbFWOqTJVLHZSUUoF4FzAZKYtqdxWu9Z5m2QQnOyEa04fOFljvyh7D3GYKbfuaSWisqehImiVIMG4eyJeP5VEA=="
+    },
+    "node_modules/@octokit/plugin-paginate-rest": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-6.0.0.tgz",
+      "integrity": "sha512-Sq5VU1PfT6/JyuXPyt04KZNVsFOSBaYOAq2QRZUwzVlI10KFvcbUo8lR258AAQL1Et60b0WuVik+zOWKLuDZxw==",
+      "dependencies": {
+        "@octokit/types": "^9.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "@octokit/core": ">=4"
+      }
+    },
+    "node_modules/@octokit/plugin-request-log": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-request-log/-/plugin-request-log-1.0.4.tgz",
+      "integrity": "sha512-mLUsMkgP7K/cnFEw07kWqXGF5LKrOkD+lhCrKvPHXWDywAwuDUeDwWBpc69XK3pNX0uKiVt8g5z96PJ6z9xCFA==",
+      "peerDependencies": {
+        "@octokit/core": ">=3"
+      }
+    },
+    "node_modules/@octokit/plugin-rest-endpoint-methods": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-7.0.1.tgz",
+      "integrity": "sha512-pnCaLwZBudK5xCdrR823xHGNgqOzRnJ/mpC/76YPpNP7DybdsJtP7mdOwh+wYZxK5jqeQuhu59ogMI4NRlBUvA==",
+      "dependencies": {
+        "@octokit/types": "^9.0.0",
+        "deprecation": "^2.3.1"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "@octokit/core": ">=3"
+      }
+    },
+    "node_modules/@octokit/request": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/@octokit/request/-/request-6.2.3.tgz",
+      "integrity": "sha512-TNAodj5yNzrrZ/VxP+H5HiYaZep0H3GU0O7PaF+fhDrt8FPrnkei9Aal/txsN/1P7V3CPiThG0tIvpPDYUsyAA==",
+      "dependencies": {
+        "@octokit/endpoint": "^7.0.0",
+        "@octokit/request-error": "^3.0.0",
+        "@octokit/types": "^9.0.0",
+        "is-plain-object": "^5.0.0",
+        "node-fetch": "^2.6.7",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@octokit/request-error": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-3.0.3.tgz",
+      "integrity": "sha512-crqw3V5Iy2uOU5Np+8M/YexTlT8zxCfI+qu+LxUB7SZpje4Qmx3mub5DfEKSO8Ylyk0aogi6TYdf6kxzh2BguQ==",
+      "dependencies": {
+        "@octokit/types": "^9.0.0",
+        "deprecation": "^2.0.0",
+        "once": "^1.4.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@octokit/rest": {
+      "version": "19.0.7",
+      "resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-19.0.7.tgz",
+      "integrity": "sha512-HRtSfjrWmWVNp2uAkEpQnuGMJsu/+dBr47dRc5QVgsCbnIc1+GFEaoKBWkYG+zjrsHpSqcAElMio+n10c0b5JA==",
+      "dependencies": {
+        "@octokit/core": "^4.1.0",
+        "@octokit/plugin-paginate-rest": "^6.0.0",
+        "@octokit/plugin-request-log": "^1.0.4",
+        "@octokit/plugin-rest-endpoint-methods": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@octokit/types": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-9.0.0.tgz",
+      "integrity": "sha512-LUewfj94xCMH2rbD5YJ+6AQ4AVjFYTgpp6rboWM5T7N3IsIF65SBEOVcYMGAEzO/kKNiNaW4LoWtoThOhH06gw==",
+      "dependencies": {
+        "@octokit/openapi-types": "^16.0.0"
+      }
+    },
    "node_modules/@pkgr/utils": {
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/@pkgr/utils/-/utils-2.3.1.tgz",
@ -3858,6 +4007,27 @@
        "react-dom": "^16.8 || ^17.0 || ^18.0"
      }
    },
+    "node_modules/@radix-ui/react-hover-card": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-1.0.3.tgz",
+      "integrity": "sha512-rr2+DxPlMhR57IPcNvZ85X8chytdfj7kyVToyR5Ge0r4IJEFiyPs0Cs8/K8oe5zt+yo0F8f29vtC8tNNK+ZIkA==",
+      "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-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-use-controllable-state": "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",
@ -8767,6 +8937,11 @@
        }
      ]
    },
+    "node_modules/before-after-hook": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-2.2.3.tgz",
+      "integrity": "sha512-NzUnlZexiaH/46WDhANlyR2bXRopNg4F/zuSA3OpZnllCUgRaOF2znDioDWrmbNVsuZk6l9pMquQB38cfBZwkQ=="
+    },
    "node_modules/better-opn": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/better-opn/-/better-opn-2.1.1.tgz",
@ -10349,6 +10524,11 @@
        "node": ">= 0.8"
      }
    },
+    "node_modules/deprecation": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/deprecation/-/deprecation-2.3.1.tgz",
+      "integrity": "sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ=="
+    },
    "node_modules/dequal": {
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@ -14077,7 +14257,6 @@
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
-      "dev": true,
      "engines": {
        "node": ">=0.10.0"
      }
@ -16433,7 +16612,6 @@
      "version": "2.6.8",
      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.8.tgz",
      "integrity": "sha512-RZ6dBYuj8dRSfxpUSu+NsdF1dpPpluJxwOp+6IoDp/sH2QNDSvurYsAa+F1WxY2RjA1iP93xhcsUoYbF2XBqVg==",
-      "dev": true,
      "dependencies": {
        "whatwg-url": "^5.0.0"
      },
@ -21195,8 +21373,7 @@
    "node_modules/tr46": {
      "version": "0.0.3",
      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
-      "dev": true
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
    },
    "node_modules/trim-lines": {
      "version": "3.0.1",
@ -21642,6 +21819,11 @@
        "url": "https://opencollective.com/unified"
      }
    },
+    "node_modules/universal-user-agent": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-6.0.0.tgz",
+      "integrity": "sha512-isyNax3wXoKaulPDZWHQqbmIx1k2tb9fb3GGDBRxCscfYV2Ch7WxPArBsFEG8s/safwXTT7H4QGhaIkTp9447w=="
+    },
    "node_modules/universalify": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
@ -22046,8 +22228,7 @@
    "node_modules/webidl-conversions": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
-      "dev": true
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
    },
    "node_modules/webpack": {
      "version": "5.75.0",
@ -22245,7 +22426,6 @@
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-      "dev": true,
      "dependencies": {
        "tr46": "~0.0.3",
        "webidl-conversions": "^3.0.0"
@ -24807,6 +24987,118 @@
        "fastq": "^1.6.0"
      }
    },
+    "@octokit/auth-token": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-3.0.3.tgz",
+      "integrity": "sha512-/aFM2M4HVDBT/jjDBa84sJniv1t9Gm/rLkalaz9htOm+L+8JMj1k9w0CkUdcxNyNxZPlTxKPVko+m1VlM58ZVA==",
+      "requires": {
+        "@octokit/types": "^9.0.0"
+      }
+    },
+    "@octokit/core": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@octokit/core/-/core-4.2.0.tgz",
+      "integrity": "sha512-AgvDRUg3COpR82P7PBdGZF/NNqGmtMq2NiPqeSsDIeCfYFOZ9gddqWNQHnFdEUf+YwOj4aZYmJnlPp7OXmDIDg==",
+      "requires": {
+        "@octokit/auth-token": "^3.0.0",
+        "@octokit/graphql": "^5.0.0",
+        "@octokit/request": "^6.0.0",
+        "@octokit/request-error": "^3.0.0",
+        "@octokit/types": "^9.0.0",
+        "before-after-hook": "^2.2.0",
+        "universal-user-agent": "^6.0.0"
+      }
+    },
+    "@octokit/endpoint": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-7.0.5.tgz",
+      "integrity": "sha512-LG4o4HMY1Xoaec87IqQ41TQ+glvIeTKqfjkCEmt5AIwDZJwQeVZFIEYXrYY6yLwK+pAScb9Gj4q+Nz2qSw1roA==",
+      "requires": {
+        "@octokit/types": "^9.0.0",
+        "is-plain-object": "^5.0.0",
+        "universal-user-agent": "^6.0.0"
+      }
+    },
+    "@octokit/graphql": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-5.0.5.tgz",
+      "integrity": "sha512-Qwfvh3xdqKtIznjX9lz2D458r7dJPP8l6r4GQkIdWQouZwHQK0mVT88uwiU2bdTU2OtT1uOlKpRciUWldpG0yQ==",
+      "requires": {
+        "@octokit/request": "^6.0.0",
+        "@octokit/types": "^9.0.0",
+        "universal-user-agent": "^6.0.0"
+      }
+    },
+    "@octokit/openapi-types": {
+      "version": "16.0.0",
+      "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-16.0.0.tgz",
+      "integrity": "sha512-JbFWOqTJVLHZSUUoF4FzAZKYtqdxWu9Z5m2QQnOyEa04fOFljvyh7D3GYKbfuaSWisqehImiVIMG4eyJeP5VEA=="
+    },
+    "@octokit/plugin-paginate-rest": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-6.0.0.tgz",
+      "integrity": "sha512-Sq5VU1PfT6/JyuXPyt04KZNVsFOSBaYOAq2QRZUwzVlI10KFvcbUo8lR258AAQL1Et60b0WuVik+zOWKLuDZxw==",
+      "requires": {
+        "@octokit/types": "^9.0.0"
+      }
+    },
+    "@octokit/plugin-request-log": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-request-log/-/plugin-request-log-1.0.4.tgz",
+      "integrity": "sha512-mLUsMkgP7K/cnFEw07kWqXGF5LKrOkD+lhCrKvPHXWDywAwuDUeDwWBpc69XK3pNX0uKiVt8g5z96PJ6z9xCFA==",
+      "requires": {}
+    },
+    "@octokit/plugin-rest-endpoint-methods": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-7.0.1.tgz",
+      "integrity": "sha512-pnCaLwZBudK5xCdrR823xHGNgqOzRnJ/mpC/76YPpNP7DybdsJtP7mdOwh+wYZxK5jqeQuhu59ogMI4NRlBUvA==",
+      "requires": {
+        "@octokit/types": "^9.0.0",
+        "deprecation": "^2.3.1"
+      }
+    },
+    "@octokit/request": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/@octokit/request/-/request-6.2.3.tgz",
+      "integrity": "sha512-TNAodj5yNzrrZ/VxP+H5HiYaZep0H3GU0O7PaF+fhDrt8FPrnkei9Aal/txsN/1P7V3CPiThG0tIvpPDYUsyAA==",
+      "requires": {
+        "@octokit/endpoint": "^7.0.0",
+        "@octokit/request-error": "^3.0.0",
+        "@octokit/types": "^9.0.0",
+        "is-plain-object": "^5.0.0",
+        "node-fetch": "^2.6.7",
+        "universal-user-agent": "^6.0.0"
+      }
+    },
+    "@octokit/request-error": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-3.0.3.tgz",
+      "integrity": "sha512-crqw3V5Iy2uOU5Np+8M/YexTlT8zxCfI+qu+LxUB7SZpje4Qmx3mub5DfEKSO8Ylyk0aogi6TYdf6kxzh2BguQ==",
+      "requires": {
+        "@octokit/types": "^9.0.0",
+        "deprecation": "^2.0.0",
+        "once": "^1.4.0"
+      }
+    },
+    "@octokit/rest": {
+      "version": "19.0.7",
+      "resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-19.0.7.tgz",
+      "integrity": "sha512-HRtSfjrWmWVNp2uAkEpQnuGMJsu/+dBr47dRc5QVgsCbnIc1+GFEaoKBWkYG+zjrsHpSqcAElMio+n10c0b5JA==",
+      "requires": {
+        "@octokit/core": "^4.1.0",
+        "@octokit/plugin-paginate-rest": "^6.0.0",
+        "@octokit/plugin-request-log": "^1.0.4",
+        "@octokit/plugin-rest-endpoint-methods": "^7.0.0"
+      }
+    },
+    "@octokit/types": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-9.0.0.tgz",
+      "integrity": "sha512-LUewfj94xCMH2rbD5YJ+6AQ4AVjFYTgpp6rboWM5T7N3IsIF65SBEOVcYMGAEzO/kKNiNaW4LoWtoThOhH06gw==",
+      "requires": {
+        "@octokit/openapi-types": "^16.0.0"
+      }
+    },
    "@pkgr/utils": {
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/@pkgr/utils/-/utils-2.3.1.tgz",
@ -25050,6 +25342,23 @@
        "@radix-ui/react-use-callback-ref": "1.0.0"
      }
    },
+    "@radix-ui/react-hover-card": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-1.0.3.tgz",
+      "integrity": "sha512-rr2+DxPlMhR57IPcNvZ85X8chytdfj7kyVToyR5Ge0r4IJEFiyPs0Cs8/K8oe5zt+yo0F8f29vtC8tNNK+ZIkA==",
+      "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-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-use-controllable-state": "1.0.0"
+      }
+    },
    "@radix-ui/react-id": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.0.tgz",
@ -28703,6 +29012,11 @@
      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="
    },
+    "before-after-hook": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-2.2.3.tgz",
+      "integrity": "sha512-NzUnlZexiaH/46WDhANlyR2bXRopNg4F/zuSA3OpZnllCUgRaOF2znDioDWrmbNVsuZk6l9pMquQB38cfBZwkQ=="
+    },
    "better-opn": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/better-opn/-/better-opn-2.1.1.tgz",
@ -29899,6 +30213,11 @@
      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="
    },
+    "deprecation": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/deprecation/-/deprecation-2.3.1.tgz",
+      "integrity": "sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ=="
+    },
    "dequal": {
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@ -32693,8 +33012,7 @@
    "is-plain-object": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
-      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
-      "dev": true
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q=="
    },
    "is-regex": {
      "version": "1.1.4",
@ -34371,7 +34689,6 @@
      "version": "2.6.8",
      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.8.tgz",
      "integrity": "sha512-RZ6dBYuj8dRSfxpUSu+NsdF1dpPpluJxwOp+6IoDp/sH2QNDSvurYsAa+F1WxY2RjA1iP93xhcsUoYbF2XBqVg==",
-      "dev": true,
      "requires": {
        "whatwg-url": "^5.0.0"
      }
@ -37824,8 +38141,7 @@
    "tr46": {
      "version": "0.0.3",
      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
-      "dev": true
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
    },
    "trim-lines": {
      "version": "3.0.1",
@ -38147,6 +38463,11 @@
        "unist-util-is": "^5.0.0"
      }
    },
+    "universal-user-agent": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-6.0.0.tgz",
+      "integrity": "sha512-isyNax3wXoKaulPDZWHQqbmIx1k2tb9fb3GGDBRxCscfYV2Ch7WxPArBsFEG8s/safwXTT7H4QGhaIkTp9447w=="
+    },
    "universalify": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
@ -38440,8 +38761,7 @@
    "webidl-conversions": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
-      "dev": true
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
    },
    "webpack": {
      "version": "5.75.0",
@ -38587,7 +38907,6 @@
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-      "dev": true,
      "requires": {
        "tr46": "~0.0.3",
        "webidl-conversions": "^3.0.0"
--- a/frontend/package.json
+++ b/frontend/package.json
@ -22,11 +22,13 @@
    "@fortawesome/react-fontawesome": "^0.1.19",
    "@headlessui/react": "^1.6.6",
    "@hookform/resolvers": "^2.9.10",
+    "@octokit/rest": "^19.0.7",
    "@radix-ui/react-accordion": "^1.1.0",
    "@radix-ui/react-alert-dialog": "^1.0.2",
    "@radix-ui/react-checkbox": "^1.0.1",
    "@radix-ui/react-dialog": "^1.0.2",
    "@radix-ui/react-dropdown-menu": "^2.0.2",
+    "@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-progress": "^1.0.1",
--- a/frontend/public/data/frequentConstants.ts
+++ b/frontend/public/data/frequentConstants.ts
@ -2,6 +2,16 @@ interface Mapping {
  [key: string]: string;
 }

+const integrationSlugNameMapping: Mapping = {
+  'azure-key-vault': 'Azure Key Vault',
+  'heroku': 'Heroku',
+  'vercel': 'Vercel',
+  'netlify': 'Netlify',
+  'github': 'GitHub',
+  'render': 'Render',
+  'flyio': 'Fly.io'
+}
+
 const envMapping: Mapping = {
  Development: "dev",
  Staging: "staging",
@ -19,7 +29,7 @@ const reverseEnvMapping: Mapping = {
 const contextNetlifyMapping: Mapping = {
  "dev": "Local development",
  "branch-deploy": "Branch deploys",
-  "deploy-review": "Deploy Previews",
+  "deploy-preview": "Deploy Previews",
  "production": "Production"
 }

@ -49,6 +59,7 @@ const plans = plansProd || plansDev;
 export {
  contextNetlifyMapping,
  envMapping,
+  integrationSlugNameMapping,
  plans,
  reverseContextNetlifyMapping,
  reverseEnvMapping}
--- a/frontend/public/data/frequentInterfaces.ts
+++ b/frontend/public/data/frequentInterfaces.ts
@ -1,3 +1,12 @@
+export interface Tag {
+  _id: string; 
+  name: string;
+  slug: string;
+  user: string;
+  workspace: string;
+  createdAt: string;
+}
+
 export interface SecretDataProps {
  pos: number;
  key: string;
@ -5,4 +14,5 @@ export interface SecretDataProps {
  valueOverride: string | undefined;
  id: string;
  comment: string;
+  tags: Tag[];
 }
--- a/frontend/public/locales/en/common.json
+++ b/frontend/public/locales/en/common.json
@ -14,7 +14,7 @@
  "save-changes": "Save Changes",
  "saved": "Saved",
  "drop-zone": "Drag and drop a .env or .yml file here.",
-  "drop-zone-keys": "Drag and drop a .env or .yml file here to add more keys.",
+  "drop-zone-keys": "Drag and drop a .env or .yml file here to add more secrets.",
  "role": "Role",
  "role_admin": "admin",
  "display-name": "Display Name",
--- a/frontend/public/locales/en/settings-project.json
+++ b/frontend/public/locales/en/settings-project.json
@ -9,5 +9,7 @@
  "project-id-description": "To integrate Infisical into your code base and get automatic injection of environmental variables, you should use the following Project ID.",
  "project-id-description2": "For more guidance, including code snipets for various languages and frameworks, see ",
  "auto-generated": "This is your project's auto-generated unique identifier. It can't be changed.",
-  "docs": "Infisical Docs"
+  "docs": "Infisical Docs",
+  "auto-capitalization": "Auto Capitalization",
+  "auto-capitalization-description": "According to standards, Infisical will automatically capitalize your keys. If you want to disable this feature, you can do so here."
 }
--- a/frontend/src/components/basic/Layout.tsx
+++ b/frontend/src/components/basic/Layout.tsx
@ -199,13 +199,13 @@ const Layout = ({ children }: LayoutProps) => {
          .split('/')
          [router.asPath.split('/').length - 1].split('?')[0];

-        if (!['heroku', 'vercel', 'github', 'netlify'].includes(intendedWorkspaceId)) {
+        if (!['callback', 'create', 'authorize'].includes(intendedWorkspaceId)) {
          localStorage.setItem('projectData.id', intendedWorkspaceId);
        }
-
+        
        // If a user is not a member of a workspace they are trying to access, just push them to one of theirs
        if (
-          !['heroku', 'vercel', 'github', 'netlify'].includes(intendedWorkspaceId) &&
+          !['callback', 'create', 'authorize'].includes(intendedWorkspaceId) &&
          !userWorkspaces
            .map((workspace: { _id: string }) => workspace._id)
            .includes(intendedWorkspaceId)
--- a/frontend/src/components/basic/Listbox.tsx
+++ b/frontend/src/components/basic/Listbox.tsx
@ -58,7 +58,7 @@ const ListBox = ({
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
-            <Listbox.Options className="border border-mineshaft-700 z-50 p-2 absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-bunker text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+            <Listbox.Options className="border border-mineshaft-700 z-[70] p-2 absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-bunker text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm no-scrollbar no-scrollbar::-webkit-scrollbar">
              {data.map((person, personIdx) => (
                <Listbox.Option
                  key={`${person}.${personIdx + 1}`}
--- a/frontend/src/components/basic/dialog/AddWorkspaceDialog.tsx
+++ b/frontend/src/components/basic/dialog/AddWorkspaceDialog.tsx
@ -36,7 +36,7 @@ const AddWorkspaceDialog = ({
  return (
    <div>
      <Transition appear show={isOpen} as={Fragment}>
-        <Dialog as="div" className="relative z-20" onClose={closeModal}>
+        <Dialog as="div" className="relative z-[100]" onClose={closeModal}>
          <Transition.Child
            as={Fragment}
            enter="ease-out duration-300"
@ -49,7 +49,7 @@ const AddWorkspaceDialog = ({
            <div className="fixed inset-0 bg-black bg-opacity-70" />
          </Transition.Child>

-          <div className="fixed inset-0 overflow-y-auto z-50">
+          <div className="fixed inset-0 overflow-y-auto">
            <div className="flex min-h-full items-center justify-center p-4 text-center">
              <Transition.Child
                as={Fragment}
@ -60,7 +60,7 @@ const AddWorkspaceDialog = ({
                leaveFrom="opacity-100 scale-100"
                leaveTo="opacity-0 scale-95"
              >
-                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
+                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
                  <Dialog.Title
                    as="h3"
                    className="text-lg font-medium leading-6 text-gray-400"
@ -69,7 +69,7 @@ const AddWorkspaceDialog = ({
                  </Dialog.Title>
                  <div className="mt-2">
                    <p className="text-sm text-gray-500">
-                      This project will contain your environmental variables.
+                      This project will contain your secrets and configs.
                    </p>
                  </div>
                  <div className="max-h-28 mt-4">
--- a/frontend/src/components/basic/dialog/DeleteEnvVar.tsx
+++ b/frontend/src/components/basic/dialog/DeleteEnvVar.tsx
@ -15,7 +15,7 @@ export const DeleteEnvVar = ({ isOpen, onClose, onSubmit }: Props) => {
  return (
    <div>
      <Transition appear show={isOpen} as={Fragment}>
-        <Dialog as="div" className="relative z-10" onClose={() => {}}>
+        <Dialog as="div" className="relative z-[80]" onClose={() => {}}>
          <div className="fixed inset-0 overflow-y-auto">
            <Transition.Child
              as={Fragment}
--- a/frontend/src/components/basic/dialog/IntegrationAccessTokenDialog.tsx
+++ b/frontend/src/components/basic/dialog/IntegrationAccessTokenDialog.tsx
@ -1,120 +0,0 @@
-import { Fragment, useState } from "react";
-import { Dialog, Transition } from "@headlessui/react";
-
-import Button from "../buttons/Button";
-import InputField from "../InputField";
-
-interface IntegrationOption {
-  clientId: string;
-  clientSlug?: string; // vercel-integration specific
-  docsLink: string;
-  image: string;
-  isAvailable: boolean;
-  name: string;
-  slug: string;
-  type: string;
-}
-
-type Props = {
-  isOpen: boolean;
-  closeModal: () => void;
-  selectedIntegrationOption: IntegrationOption | null
-  handleIntegrationOption: (arg:{
-    integrationOption: IntegrationOption,
-    accessToken?: string;
-})=>void;
-};
-
-const IntegrationAccessTokenDialog = ({
-    isOpen,
-    closeModal,
-    selectedIntegrationOption,
-    handleIntegrationOption
-}:Props) => {
-    const [accessToken, setAccessToken] = useState('');
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const submit = async () => {
-        try {
-            if (selectedIntegrationOption && accessToken !== '') {
-                handleIntegrationOption({
-                    integrationOption: selectedIntegrationOption,
-                    accessToken
-                });
-                closeModal();
-                setAccessToken('');
-            }
-        } catch (err) {
-            console.log(err);
-        }
-    }
-
-    return (
-        <div>
-            <Transition appear show={isOpen} as={Fragment}>
-                <Dialog as="div" className="relative z-10" onClose={() => {
-                    closeModal();
-                }}>
-                    <Transition.Child
-                        as={Fragment}
-                        enter="ease-out duration-300"
-                        enterFrom="opacity-0"
-                        enterTo="opacity-100"
-                        leave="ease-in duration-200"
-                        leaveFrom="opacity-100"
-                        leaveTo="opacity-0"
-                    >
-                        <div className="fixed inset-0 bg-black bg-opacity-70" />
-                    </Transition.Child>
-                    <div className="fixed inset-0 overflow-y-auto">
-                        <div className="flex min-h-full items-center justify-center p-4 text-center">
-                            <Transition.Child
-                                as={Fragment}
-                                enter="ease-out duration-300"
-                                enterFrom="opacity-0 scale-95"
-                                enterTo="opacity-100 scale-100"
-                                leave="ease-in duration-200"
-                                leaveFrom="opacity-100 scale-100"
-                                leaveTo="opacity-0 scale-95"
-                            >
-                                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
-                                <Dialog.Title
-                                    as="h3"
-                                    className="text-lg font-medium leading-6 text-gray-400"
-                                >
-                                    {`Enter your ${selectedIntegrationOption?.name} API Key`}
-                                </Dialog.Title>
-                                <div className="mt-2 mb-2">
-                                    <p className="text-sm text-gray-500">
-                                        {`This integration requires you to obtain an API key from ${selectedIntegrationOption?.name ?? ''} and store it with Infisical. `}
-                                        You can learn how to do this <a target="_blank" rel="noreferrer" className="text-primary cursor-pointer underline underline-offset-2" href="https://infisical.com/docs/integrations/cloud/render">here</a>.
-                                    </p>
-                                </div>
-                                <div className="mt-4 max-w-full">
-                                    <InputField
-                                        label="API Key"
-                                        onChangeHandler={setAccessToken}
-                                        type="varName"
-                                        value={accessToken}
-                                        placeholder=""
-                                        isRequired
-                                    />
-                                    <div className="mt-4 max-w-[5.5rem]">
-                                        <Button 
-                                            onButtonPressed={submit}
-                                            color="mineshaft"
-                                            text="Connect"
-                                            size="md"
-                                        />
-                                    </div>
-                                </div>
-                                </Dialog.Panel>
-                            </Transition.Child>
-                        </div>
-                    </div>
-                </Dialog>
-            </Transition>
-        </div>
-    );
-}
-
-export default IntegrationAccessTokenDialog;
--- a/frontend/src/components/basic/table/EnvironmentsTable.tsx
+++ b/frontend/src/components/basic/table/EnvironmentsTable.tsx
@ -83,7 +83,7 @@ const EnvironmentTable = ({ data = [], onCreateEnv, onDeleteEnv, onUpdateEnv }:
        </div>
        <div className="w-48">
          <Button
-            text="Add New Env"
+            text="Add New Environment"
            onButtonPressed={() => {
              if (plan !== plans.starter || host !== 'https://app.infisical.com') {
                handlePopUpOpen('createUpdateEnv');
--- a/frontend/src/components/dashboard/AddTagsMenu.tsx
+++ b/frontend/src/components/dashboard/AddTagsMenu.tsx
@ -0,0 +1,63 @@
+import { Fragment } from 'react';
+import { useRouter } from 'next/router';
+import { faCheckSquare, faPlus, faSquare } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Menu, Transition } from '@headlessui/react';
+import { Tag } from 'public/data/frequentInterfaces';
+
+/**
+ * This is the menu that is used to add more tags to a secret
+ * @param {object} obj
+ * @param {Tag[]} obj.allTags - all available tags for a vertain project
+ * @param {Tag[]} obj.currentTags - currently selected tags for a certain secret
+ * @param {function} obj.modifyTags - modify tags for a certain secret
+ * @param {Tag[]} obj.position - currently selected tags for a certain secret
+ */
+const AddTagsMenu = ({ allTags, currentTags, modifyTags, position }: { allTags: Tag[]; currentTags: Tag[]; modifyTags: (value: Tag[], position: number) => void; position: number; }) => {
+  const router = useRouter();
+  return (
+    <Menu as="div" className="ml-2 relative inline-block text-left">
+      <Menu.Button
+        as="div"
+        className="flex justify-center items-center font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
+      >
+        <div className='bg-mineshaft/30 cursor-pointer rounded-sm text-sm text-mineshaft-200/50 hover:bg-mineshaft/70 duration-200 flex items-center'>
+          <FontAwesomeIcon icon={faPlus} className="p-[0.28rem]"/>
+          {currentTags?.length > 2 && <span className='pr-2'>{currentTags.length - 2}</span>}
+        </div>
+      </Menu.Button>
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        <Menu.Items className="absolute z-[90] text-sm drop-shadow-xl right-0 mt-0.5 w-[12rem] origin-top-right rounded-md bg-mineshaft-600 border border-mineshaft-500 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none p-1 space-y-1">
+          {allTags?.map((tag) => { return (
+            <Menu.Item key={tag._id}>
+              <button
+                type="button"
+                className={`${currentTags?.map(currentTag => currentTag.name).includes(tag.name) ? "opacity-30 cursor-default" : "hover:bg-mineshaft-700"} w-full text-left bg-mineshaft-800 px-2 py-0.5 text-bunker-200 rounded-sm flex items-center`}
+                onClick={() => {if (!currentTags?.map(currentTag => currentTag.name).includes(tag.name)) {modifyTags(currentTags.concat([tag]), position)}}}
+              >
+                {currentTags?.map(currentTag => currentTag.name).includes(tag.name) ? <FontAwesomeIcon icon={faCheckSquare} className="text-xs mr-2 text-primary"/> : <FontAwesomeIcon icon={faSquare} className="text-xs mr-2"/>} {tag.name}
+              </button>
+            </Menu.Item>
+          )})}
+          <button
+            type="button"
+            className='w-full text-left bg-mineshaft-800 hover:bg-primary hover:text-black duration-200 px-2 py-0.5 text-bunker-200 rounded-sm'
+            onClick={() => router.push(`/settings/project/${String(router.query.id)}`)}
+          >
+            <FontAwesomeIcon icon={faPlus} className="mr-2 text-xs" />Add more tags
+          </button>
+        </Menu.Items>
+      </Transition>
+    </Menu>
+  );
+};
+
+export default AddTagsMenu;
--- a/frontend/src/components/dashboard/CompareSecretsModal.tsx
+++ b/frontend/src/components/dashboard/CompareSecretsModal.tsx
@ -0,0 +1,88 @@
+import { SetStateAction, useEffect, useState } from 'react';
+import Image from 'next/image';
+
+import { WorkspaceEnv } from '@app/hooks/api/types';
+
+import getSecretsForProject from '../utilities/secrets/getSecretsForProject';
+import { Modal, ModalContent } from '../v2';
+
+interface Secrets {
+  label: string;
+  secret: string;
+}
+
+interface CompareSecretsModalProps {
+  compareModal: boolean;
+  setCompareModal: React.Dispatch<SetStateAction<boolean>>;
+  selectedEnv: WorkspaceEnv;
+  workspaceEnvs: WorkspaceEnv[];
+  workspaceId: string;
+  currentSecret: {
+    key: string;
+    value: string;
+  };
+}
+
+const CompareSecretsModal = ({
+  compareModal,
+  setCompareModal,
+  selectedEnv,
+  workspaceEnvs,
+  workspaceId,
+  currentSecret
+}: CompareSecretsModalProps) => {
+  const [secrets, setSecrets] = useState<Secrets[]>([]);
+
+  const getEnvSecrets = async () => {
+    const workspaceEnvironments = workspaceEnvs?.filter((env) => env !== selectedEnv);
+    const newSecrets = await Promise.all(
+      workspaceEnvironments.map(async (env) => {
+        // #TODO: optimize this query somehow...
+        const allSecrets = await getSecretsForProject({ env: env.slug, workspaceId });
+        const secret =
+          allSecrets.find((item) => item.key === currentSecret.key)?.value ?? 'Not found';
+        return { label: env.name, secret };
+      })
+    );
+    setSecrets([{ label: selectedEnv.name, secret: currentSecret.value }, ...newSecrets]);
+  };
+
+  useEffect(() => {
+    if (compareModal) {
+      (async () => {
+        await getEnvSecrets();
+      })();
+    }
+  }, [compareModal]);
+
+  return (
+    <Modal isOpen={compareModal} onOpenChange={setCompareModal}>
+      <ModalContent title={currentSecret?.key} onOpenAutoFocus={(e) => e.preventDefault()}>
+        <div className="space-y-4">
+          {secrets.length === 0 ? (
+            <div className="flex items-center bg-bunker-900 justify-center h-full py-4 rounded-md">
+              <Image
+                src="/images/loading/loading.gif"
+                height={60}
+                width={100}
+                alt="infisical loading indicator"
+              />
+            </div>
+          ) : (
+            secrets.map((item) => (
+              <div key={`${currentSecret.key}${item.label}`} className="space-y-0.5">
+                <p className="text-sm text-bunker-300">{item.label}</p>
+                <input
+                  defaultValue={item.secret}
+                  className="h-no-capture border border-mineshaft-500 text-md min-w-16 no-scrollbar::-webkit-scrollbar peer z-10 w-full rounded-md bg-bunker-800 px-2 py-1.5 font-mono text-gray-400 caret-white outline-none duration-200 no-scrollbar focus:ring-2 focus:ring-primary/50 "
+                  readOnly
+                />
+              </div>
+            ))
+          )}
+        </div>
+      </ModalContent>
+    </Modal>
+  );
+};
+export default CompareSecretsModal;
--- a/frontend/src/components/dashboard/ConfirmEnvOverwriteModal.tsx
+++ b/frontend/src/components/dashboard/ConfirmEnvOverwriteModal.tsx
@ -0,0 +1,42 @@
+import { Button, Modal, ModalContent } from '../v2';
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  onOverwriteConfirm: (preserve: 'old' | 'new') => void;
+  duplicateKeys: string[];
+};
+
+const ConfirmEnvOverwriteModal = ({
+  isOpen,
+  onClose,
+  duplicateKeys,
+  onOverwriteConfirm
+}: Props): JSX.Element => {
+  return (
+    <Modal isOpen={isOpen}>
+      <ModalContent
+        title="Duplicate Secrets"
+        footerContent={
+          <div className="flex items-center gap-4">
+            <Button colorSchema="primary" onClick={() => onOverwriteConfirm('old')}>
+              Keep Old
+            </Button>
+            <Button colorSchema="danger" onClick={() => onOverwriteConfirm('new')}>
+              Overwrite
+            </Button>
+          </div>
+        }
+        onClose={onClose}
+      >
+        <div className="flex flex-col gap-2">
+          <p className='text-gray-400'>Your file contains the following duplicate secrets:</p>
+          <p className="text-sm text-gray-500">{duplicateKeys.join(', ')}</p>
+          <p className='text-md text-gray-400'>Are you sure you want to overwrite these secrets?</p>
+        </div>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default ConfirmEnvOverwriteModal;
--- a/frontend/src/components/dashboard/DashboardInputField.tsx
+++ b/frontend/src/components/dashboard/DashboardInputField.tsx
@ -1,8 +1,9 @@
 import { memo, SyntheticEvent, useRef } from 'react';
-import { faCircle } from '@fortawesome/free-solid-svg-icons';
+import { faCircle, faExclamationCircle, faEye, faLayerGroup } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

 import guidGenerator from '../utilities/randomId';
+import { HoverObject } from '../v2/HoverCard';

 const REGEX = /([$]{.*?})/g;

@ -10,10 +11,13 @@ interface DashboardInputFieldProps {
  position: number;
  onChangeHandler: (value: string, position: number) => void;
  value: string | undefined;
-  type: 'varName' | 'value';
+  type: 'varName' | 'value' | 'comment';
  blurred?: boolean;
  isDuplicate?: boolean;
-  override?: boolean;
+  isCapitalized?: boolean;
+  overrideEnabled?: boolean;
+  modifyValueOverride?: (value: string | undefined, position: number) => void;
+  isSideBarOpen?: boolean;
 }

 /**
@ -26,6 +30,8 @@ interface DashboardInputFieldProps {
 * @param {boolean} obj.blurred - whether the input field should be blurred (behind the gray dots) or not; this can be turned on/off in the dashboard
 * @param {boolean} obj.isDuplicate - if the key name is duplicated
 * @param {boolean} obj.override - whether a secret/row should be displalyed as overriden
+ * 
+ * 
 * @returns
 */

@ -36,7 +42,10 @@ const DashboardInputField = ({
  value,
  blurred,
  isDuplicate,
-  override
+  isCapitalized,
+  overrideEnabled,
+  modifyValueOverride,
+  isSideBarOpen
 }: DashboardInputFieldProps) => {
  const ref = useRef<HTMLDivElement | null>(null);
  const syncScroll = (e: SyntheticEvent<HTMLDivElement>) => {
@ -51,41 +60,97 @@ const DashboardInputField = ({
    const error = startsWithNumber || isDuplicate;

    return (
-      <div className="flex-col w-full">
+      <div className={`relative flex-col w-full h-10 ${
+        error && value !== '' ? 'bg-red/[0.15]' : ''
+      } ${
+        isSideBarOpen && 'bg-mineshaft-700 duration-200'
+      }`}>
        <div
-          className={`group relative flex flex-col justify-center w-full border ${
-            error ? 'border-red' : 'border-mineshaft-500'
-          } rounded-md`}
+          className={`group relative flex flex-col justify-center items-center h-full ${
+            error ? 'w-max' : 'w-full'
+          }`}
        >
          <input
-            onChange={(e) => onChangeHandler(e.target.value.toUpperCase(), position)}
+            onChange={(e) => onChangeHandler(isCapitalized ? e.target.value.toUpperCase() : e.target.value, position)}
            type={type}
            value={value}
-            className={`z-10 peer font-mono ph-no-capture bg-bunker-800 rounded-md caret-white text-gray-400 text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 ${
-              error ? 'focus:ring-red/50' : 'focus:ring-primary/50'
+            className={`z-10 peer font-mono ph-no-capture bg-transparent h-full caret-bunker-200 text-sm px-2 w-full min-w-16 outline-none ${
+              error ? 'text-red-600 focus:text-red-500' : 'text-bunker-300 focus:text-bunker-100'
            } duration-200`}
            spellCheck="false"
          />
        </div>
        {startsWithNumber && (
-          <p className="text-red text-xs mt-0.5 mx-1 mb-2 max-w-xs">
-            Should not start with a number
-          </p>
+          <div className='absolute right-2 top-2 text-red z-50'>
+            <HoverObject 
+              text="Secret names should not start with a number"
+              icon={faExclamationCircle}
+              color="red"
+            />
+          </div>
        )}
-        {isDuplicate && !startsWithNumber && (
-          <p className="text-red text-xs mt-0.5 mx-1 mb-2 max-w-xs">
-            Secret names should be unique
-          </p>
+        {isDuplicate && value !== '' && !startsWithNumber && (
+          <div className='absolute right-2 top-2 text-red z-50'>
+            <HoverObject 
+              text="Secret names should be unique"
+              icon={faExclamationCircle}
+              color="red"
+            />
+          </div>
        )}
+        {!error && <div className={`absolute right-0 top-0 text-red z-50 ${
+          overrideEnabled ? 'visible group-hover:bg-mineshaft-700' : 'invisible group-hover:visible bg-mineshaft-700'
+        } cursor-pointer duration-0 h-10 flex items-center px-2`}>
+          <button type="button" onClick={() => {
+            if (modifyValueOverride) {
+              if (overrideEnabled === false) {
+                modifyValueOverride('', position);
+              } else {
+                modifyValueOverride(undefined, position);
+              }
+            }
+          }}>
+            <HoverObject 
+              text={overrideEnabled ? 'This secret is overriden with your personal value' : 'You can override this secret with a personal value'}
+              icon={faLayerGroup}
+              color={overrideEnabled ? 'primary' : 'bunker-400'}
+            />
+          </button>
+        </div>}
+      </div>
+    );
+  }
+  if (type === 'comment') {
+    const startsWithNumber = !Number.isNaN(Number(value?.charAt(0))) && value !== '';
+    const error = startsWithNumber || isDuplicate;
+
+    return (
+      <div className={`relative flex-col w-full h-10 ${
+        isSideBarOpen && 'bg-mineshaft-700 duration-200'
+      }`}>
+        <div
+          className={`group relative flex flex-col justify-center items-center ${
+            error ? 'w-max' : 'w-full'
+          }`}
+        >
+          <input
+            onChange={(e) => onChangeHandler(e.target.value, position)}
+            type={type}
+            value={value}
+            className='z-10 peer font-mono ph-no-capture bg-transparent py-2.5 caret-bunker-200 text-sm px-2 w-full min-w-16 outline-none text-bunker-300 focus:text-bunker-100 placeholder:text-bunker-400 placeholder:focus:text-transparent placeholder duration-200'
+            spellCheck="false"
+            placeholder='–'
+          />
+        </div>
      </div>
    );
  }
  if (type === 'value') {
    return (
      <div className="flex-col w-full">
-        <div className="group relative whitespace-pre	flex flex-col justify-center w-full border border-mineshaft-500 rounded-md">
-          {override === true && (
-            <div className="bg-primary-300 absolute top-[0.1rem] right-[0.1rem] z-10 w-min text-xxs px-1 text-black opacity-80 rounded-md">
+        <div className="group relative whitespace-pre	flex flex-col justify-center w-full">
+          {overrideEnabled === true && (
+            <div className="bg-primary-500 rounded-sm absolute top-[0.1rem] right-[0.1rem] z-0 w-min text-xxs px-1 text-black opacity-80">
              Override enabled
            </div>
          )}
@ -95,19 +160,19 @@ const DashboardInputField = ({
            onScroll={syncScroll}
            className={`${
              blurred
-                ? 'text-transparent group-hover:text-transparent focus:text-transparent active:text-transparent'
+                ? 'text-transparent focus:text-transparent active:text-transparent'
                : ''
-            } z-10 peer font-mono ph-no-capture bg-transparent rounded-md caret-white text-transparent text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 focus:ring-primary/50 duration-200 no-scrollbar no-scrollbar::-webkit-scrollbar`}
+            } 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={`${
-              blurred && !override
-                ? 'text-bunker-800 group-hover:text-gray-400 peer-focus:text-gray-400 peer-active:text-gray-400'
+              blurred && !overrideEnabled
+                ? 'text-bunker-800 group-hover:text-gray-400 peer-focus:text-gray-100 peer-active:text-gray-400 duration-200'
                : ''
-            } ${override ? 'text-primary-300' : 'text-gray-400'}
-            absolute flex flex-row whitespace-pre font-mono z-0 ph-no-capture overflow-x-scroll bg-bunker-800 h-9 rounded-md text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 focus:ring-primary/50 duration-100 no-scrollbar no-scrollbar::-webkit-scrollbar`}
+            } ${overrideEnabled ? 'text-primary-300' : 'text-gray-400'}
+            absolute flex flex-row whitespace-pre font-mono z-0 ${blurred ? '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`}
          >
            {value?.split(REGEX).map((word, id) => {
              if (word.match(REGEX) !== null) {
@ -137,7 +202,9 @@ const DashboardInputField = ({
            })}
          </div>
          {blurred && (
-            <div className="absolute flex flex-row items-center z-20 peer pr-2 bg-bunker-800 group-hover:hidden peer-hover:hidden peer-focus:hidden peer-active:invisible h-9 w-full rounded-md text-gray-400/50 text-clip">
+            <div className={`absolute flex flex-row justify-between items-center z-0 peer pr-2 ${
+              isSideBarOpen ? 'bg-mineshaft-700 duration-200' : 'bg-mineshaft-800'
+            } 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">
                {value?.split('').map(() => (
                  <FontAwesomeIcon
@ -146,7 +213,9 @@ const DashboardInputField = ({
                    icon={faCircle}
                  />
                ))}
+                {value?.split('').length === 0 && <span className='text-bunker-400/80'>EMPTY</span>}
              </div>
+              <div className='invisible group-hover:visible cursor-pointer'><FontAwesomeIcon icon={faEye} /></div>
            </div>
          )}
        </div>
@ -163,8 +232,10 @@ function inputPropsAreEqual(prev: DashboardInputFieldProps, next: DashboardInput
    prev.type === next.type &&
    prev.position === next.position &&
    prev.blurred === next.blurred &&
-    prev.override === next.override &&
-    prev.isDuplicate === next.isDuplicate
+    prev.isCapitalized === next.isCapitalized &&
+    prev.overrideEnabled === next.overrideEnabled &&
+    prev.isDuplicate === next.isDuplicate &&
+    prev.isSideBarOpen === next.isSideBarOpen
  );
 }

--- a/frontend/src/components/dashboard/DeleteActionButton.tsx
+++ b/frontend/src/components/dashboard/DeleteActionButton.tsx
@ -1,26 +1,42 @@
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next';
+import { faXmark } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

 import Button from '../basic/buttons/Button';
 import { DeleteEnvVar } from '../basic/dialog/DeleteEnvVar';

 type Props = {
-  onSubmit: () => void
+  onSubmit: () => void;
+  isPlain?: boolean;
 }

-export const DeleteActionButton = ({ onSubmit }: Props) => {
+export const DeleteActionButton = ({ onSubmit, isPlain }: Props) => {
  const { t } = useTranslation();
  const [open, setOpen] = useState(false)

  return (
-    <div className="bg-[#9B3535] opacity-70 hover:opacity-100 w-[4.5rem] h-[2.5rem] rounded-md duration-200 ml-2">
-      <Button
+    <div className={`${
+      !isPlain 
+      ? 'bg-[#9B3535] opacity-70 hover:opacity-100 w-[4.5rem] h-[2.5rem] rounded-md duration-200 ml-2'
+      : 'cursor-pointer w-[1.5rem] h-[2.35rem] mr-2 flex items-center justfy-center'}`}>
+      {isPlain 
+      ? <div
+        onKeyDown={() => null}
+        role="button"
+        tabIndex={0}
+        onClick={() => setOpen(true)}
+        className="invisible group-hover:visible"
+      >
+        <FontAwesomeIcon className="text-bunker-300 hover:text-red pl-2 pr-6 text-lg mt-0.5" icon={faXmark} />
+      </div>
+      : <Button
        text={String(t("Delete"))}
        // onButtonPressed={onSubmit}
        color="red"
        size="md"
        onButtonPressed={() => setOpen(true)}
-      />
+      />}
      <DeleteEnvVar 
        isOpen={open}
        onClose={() => {
--- a/frontend/src/components/dashboard/DownloadSecretsMenu.tsx
+++ b/frontend/src/components/dashboard/DownloadSecretsMenu.tsx
@ -31,7 +31,7 @@ const DownloadSecretMenu = ({ data, env }: { data: SecretDataProps[]; env: strin
        leaveFrom="transform opacity-100 scale-100"
        leaveTo="transform opacity-0 scale-95"
      >
-        <Menu.Items className="absolute z-50 drop-shadow-xl right-0 mt-0.5 w-[12rem] origin-top-right rounded-md bg-bunker border border-mineshaft-500 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none p-2 space-y-2">
+        <Menu.Items className="absolute z-[90] drop-shadow-xl right-0 mt-0.5 w-[12rem] origin-top-right rounded-md bg-bunker border border-mineshaft-500 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none p-2 space-y-2">
          <Menu.Item>
            <Button
              color="mineshaft"
--- a/frontend/src/components/dashboard/DropZone.tsx
+++ b/frontend/src/components/dashboard/DropZone.tsx
@ -64,7 +64,8 @@ const DropZone = ({
          key,
          value: keyPairs[key as keyof typeof keyPairs].value,
          comment: keyPairs[key as keyof typeof keyPairs].comments.join('\n'),
-          type: 'shared'
+          type: 'shared',
+          tags: []
        }));
        break;
      }
@ -86,7 +87,8 @@ const DropZone = ({
            key,
            value: keyPairs[key as keyof typeof keyPairs]?.toString() ?? '',
            comment,
-            type: 'shared'
+            type: 'shared',
+            tags: []
          };
        });
        break;
@ -152,7 +154,7 @@ const DropZone = ({
    </div>
  ) : keysExist ? (
    <div
-      className="opacity-60 hover:opacity-100 duration-200 relative bg-mineshaft-900 max-w-[calc(100%-1rem)] w-full outline-dashed outline-chicago-600 rounded-md outline-2 flex flex-col items-center justify-center mb-16 mx-auto mt-1 py-8 px-2"
+      className="opacity-60 hover:opacity-100 duration-200 relative bg-mineshaft-900 max-w-[calc(100%-1rem)] w-full outline-dashed outline-chicago-600 rounded-md outline-2 flex flex-col items-center justify-center mb-4 mx-auto mt-1 py-8 px-2"
      onDragEnter={handleDragEnter}
      onDragOver={handleDragOver}
      onDragLeave={handleDragLeave}
--- a/frontend/src/components/dashboard/KeyPair.tsx
+++ b/frontend/src/components/dashboard/KeyPair.tsx
@ -1,21 +1,51 @@
-import { faEllipsis } from '@fortawesome/free-solid-svg-icons';
+import { faEllipsis, faXmark } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { SecretDataProps } from 'public/data/frequentInterfaces';
+import { SecretDataProps, Tag } from 'public/data/frequentInterfaces';

+import AddTagsMenu from './AddTagsMenu';
 import DashboardInputField from './DashboardInputField';
+import { DeleteActionButton } from './DeleteActionButton';

 interface KeyPairProps {
  keyPair: SecretDataProps;
  modifyKey: (value: string, position: number) => void;
  modifyValue: (value: string, position: number) => void;
-  modifyValueOverride: (value: string, position: number) => void;
+  modifyValueOverride: (value: string | undefined, position: number) => void;
+  modifyComment: (value: string, position: number) => void;
+  modifyTags: (value: Tag[], position: number) => void;
  isBlurred: boolean;
  isDuplicate: boolean;
  toggleSidebar: (id: string) => void;
  sidebarSecretId: string;
  isSnapshot: boolean;
+  isCapitalized: boolean;
+  deleteRow?: (props: DeleteRowFunctionProps) => void;
+  tags: Tag[];
+  togglePITSidebar?: (value: boolean) => void;
 }

+export interface DeleteRowFunctionProps {
+  ids: string[];
+  secretName: string;
+}
+
+const colors = [
+  'bg-[#f1c40f]/40',
+  'bg-[#cb1c8d]/40',
+  'bg-[#badc58]/40',
+  'bg-[#ff5400]/40',
+  'bg-[#00bbf9]/40'
+]
+
+
+const colorsText = [
+  'text-[#fcf0c3]/70',
+  'text-[#f2c6e3]/70',
+  'text-[#eef6d5]/70',
+  'text-[#ffddcc]/70',
+  'text-[#f0fffd]/70'
+]
+
 /**
 * This component represent a single row for an environemnt variable on the dashboard
 * @param {object} obj
@ -23,11 +53,16 @@ interface KeyPairProps {
 * @param {function} obj.modifyKey - modify the key of a certain environment variable
 * @param {function} obj.modifyValue - modify the value of a certain environment variable
 * @param {function} obj.modifyValueOverride - modify the value of a certain environment variable if it is overriden
+ * @param {function} obj.modifyComment - modify the comment of a certain environment variable
+ * @param {function} obj.modifyTags - modify the tags of a certain environment variable
 * @param {boolean} obj.isBlurred - if the blurring setting is turned on
 * @param {boolean} obj.isDuplicate - list of all the duplicates secret names on the dashboard
 * @param {function} obj.toggleSidebar - open/close/switch sidebar
 * @param {string} obj.sidebarSecretId - the id of a secret for the side bar is displayed
 * @param {boolean} obj.isSnapshot - whether this keyPair is in a snapshot. If so, it won't have some features like sidebar
+ * @param {function} obj.deleteRow - a function to delete a certain keyPair
+ * @param {function} obj.togglePITSidebar - open or close the Point-in-time recovery sidebar
+ * @param {Tag[]} obj.tags - tags for a certain secret
 * @returns
 */
 const KeyPair = ({
@ -35,66 +70,110 @@ const KeyPair = ({
  modifyKey,
  modifyValue,
  modifyValueOverride,
+  modifyComment,
+  modifyTags,
  isBlurred,
  isDuplicate,
  toggleSidebar,
  sidebarSecretId,
-  isSnapshot
-}: KeyPairProps) => (
+  isCapitalized,
+  isSnapshot, 
+  deleteRow,
+  togglePITSidebar,
+  tags
+}: KeyPairProps) => {
+  const tagData = (tags.map((tag, index) => {return {
+    ...tag, 
+    color: colors[index%colors.length], 
+    colorText: colorsText[index%colorsText.length]
+  }}));
+
+  return (
  <div
-    className={`mx-1 flex flex-col items-center ml-1 ${isSnapshot && 'pointer-events-none'} ${
-      keyPair.id === sidebarSecretId && 'bg-mineshaft-500 duration-200'
-    } rounded-md`}
+    className={`group flex flex-col items-center border-b border-mineshaft-500 hover:bg-white/[0.03] duration-100 ${isSnapshot && 'pointer-events-none'} ${
+      keyPair.id === sidebarSecretId && 'bg-mineshaft-700 duration-200'
+    }`}
  >
-    <div className="relative flex flex-row justify-between w-full max-w-5xl mr-auto max-h-14 my-1 items-start px-1">
-      {keyPair.valueOverride && (
-        <div className="group font-normal group absolute top-[1rem] left-[0.2rem] z-40 inline-block text-gray-300 underline hover:text-primary duration-200">
-          <div className="w-1 h-1 rounded-full bg-primary z-40" />
-          <span className="absolute z-50 hidden group-hover:flex group-hover:animate-popdown duration-200 w-[10.5rem] -left-[0.4rem] -top-[1.7rem] translate-y-full px-2 py-2 bg-mineshaft-500 rounded-b-md rounded-r-md text-center text-gray-100 text-sm after:content-[''] after:absolute after:left-0 after:bottom-[100%] after:-translate-x-0 after:border-8 after:border-x-transparent after:border-t-transparent after:border-b-mineshaft-500">
-            This secret is overriden
-          </span>
-        </div>
-      )}
-      <div className="min-w-xl w-96">
-        <div className="flex pr-1.5 items-center rounded-lg mt-4 md:mt-0 max-h-16">
+    <div className="relative flex flex-row justify-between w-full mr-auto max-h-14 items-center">
+      <div className="w-2/12 border-r border-mineshaft-600 flex flex-row items-center">
+        <div className='text-bunker-400 text-xs flex items-center justify-center w-14 h-10 cursor-default'>{keyPair.pos + 1}</div>
+        <div className="flex items-center max-h-16">
          <DashboardInputField
+            isCapitalized = {isCapitalized}
            onChangeHandler={modifyKey}
            type="varName"
            position={keyPair.pos}
            value={keyPair.key}
            isDuplicate={isDuplicate}
+            overrideEnabled={keyPair.valueOverride !== undefined}
+            modifyValueOverride={modifyValueOverride}
+            isSideBarOpen={keyPair.id === sidebarSecretId}
          />
        </div>
      </div>
-      <div className="w-full min-w-xl">
+      <div className="w-5/12 border-r border-mineshaft-600">
        <div
-          className={`flex min-w-xl items-center ${
-            !isSnapshot && 'pr-1.5'
-          } rounded-lg mt-4 md:mt-0 max-h-10`}
+          className='flex items-center rounded-lg mt-4 md:mt-0 max-h-10'
        >
          <DashboardInputField
-            onChangeHandler={keyPair.valueOverride ? modifyValueOverride : modifyValue}
+            onChangeHandler={keyPair.valueOverride !== undefined ? modifyValueOverride : modifyValue}
            type="value"
            position={keyPair.pos}
-            value={keyPair.valueOverride ? keyPair.valueOverride : keyPair.value}
+            value={keyPair.valueOverride !== undefined ? keyPair.valueOverride : keyPair.value}
            blurred={isBlurred}
-            override={Boolean(keyPair.valueOverride)}
+            overrideEnabled={keyPair.valueOverride !== undefined}
+            isSideBarOpen={keyPair.id === sidebarSecretId}
          />
        </div>
      </div>
-      {!isSnapshot && (
-        <div
-          onKeyDown={() => null}
-          role="button"
-          tabIndex={0}
-          onClick={() => toggleSidebar(keyPair.id)}
-          className="cursor-pointer w-[2.35rem] h-[2.35rem] bg-mineshaft-700 hover:bg-chicago-700 rounded-md flex flex-row justify-center items-center duration-200"
-        >
-          <FontAwesomeIcon className="text-gray-300 px-2.5 text-lg mt-0.5" icon={faEllipsis} />
+      <div className="w-2/12 border-r border-mineshaft-600">
+        <div className="flex items-center max-h-16">
+          <DashboardInputField
+            onChangeHandler={modifyComment}
+            type="comment"
+            position={keyPair.pos}
+            value={keyPair.comment}
+            isDuplicate={isDuplicate}
+            isSideBarOpen={keyPair.id === sidebarSecretId}
+          />
        </div>
-      )}
+      </div>
+      <div className="w-2/12 h-10 flex items-center overflow-visible overflow-r-scroll no-scrollbar no-scrollbar::-webkit-scrollbar">
+        <div className="flex items-center max-h-16">
+          {keyPair.tags?.map((tag, index) => (
+            index < 2 && <div key={keyPair.pos} className={`ml-2 px-1.5 ${tagData.filter(tagDp => tagDp._id === tag._id)[0]?.color} rounded-sm text-sm ${tagData.filter(tagDp => tagDp._id === tag._id)[0]?.colorText} flex items-center`}>
+              <span className='mb-0.5 cursor-default'>{tag.name}</span>
+              <FontAwesomeIcon icon={faXmark} className="ml-1 cursor-pointer p-1" onClick={() => modifyTags(keyPair.tags.filter(ttag => ttag._id !== tag._id), keyPair.pos)}/>
+            </div>
+          ))}
+          
+          <AddTagsMenu allTags={tags} currentTags={keyPair.tags} modifyTags={modifyTags} position={keyPair.pos} />
+        </div>
+      </div>
+      <div
+        onKeyDown={() => null}
+        role="button"
+        tabIndex={0}
+        onClick={() => {
+          if (togglePITSidebar) {
+            togglePITSidebar(false);
+          }
+          toggleSidebar(keyPair.id)
+        }}
+        className={`cursor-pointer w-[1.5rem] h-[2.35rem] ml-auto group-hover:bg-mineshaft-700 z-50 rounded-md invisible group-hover:visible flex flex-row justify-center items-center ${isSnapshot ?? 'invisible'}`}
+      >
+        <FontAwesomeIcon className="text-bunker-300 hover:text-primary text-lg" icon={faEllipsis} />
+      </div>
+      <div className={`group-hover:bg-mineshaft-700 z-50 ${isSnapshot ?? 'invisible'}`}>
+        <DeleteActionButton
+          onSubmit={() => { if (deleteRow) {
+            deleteRow({ ids: [keyPair.id], secretName: keyPair?.key })
+          }}}
+          isPlain
+        />
+      </div>
    </div>
  </div>
-);
+)};

 export default KeyPair;
--- a/frontend/src/components/dashboard/SideBar.tsx
+++ b/frontend/src/components/dashboard/SideBar.tsx
@ -2,14 +2,16 @@
 import { useState } from 'react';
 import Image from 'next/image';
 import { useTranslation } from 'next-i18next';
-import { faX } from '@fortawesome/free-solid-svg-icons';
+import { faXmark } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

 import SecretVersionList from '@app/ee/components/SecretVersionList';
+import { WorkspaceEnv } from '@app/hooks/api/types';

 import Button from '../basic/buttons/Button';
 import Toggle from '../basic/Toggle';
 import CommentField from './CommentField';
+import CompareSecretsModal from './CompareSecretsModal';
 import DashboardInputField from './DashboardInputField';
 import { DeleteActionButton } from './DeleteActionButton';
 import GenerateSecretMenu from './GenerateSecretMenu';
@ -40,6 +42,9 @@ interface SideBarProps {
  sharedToHide: string[];
  setSharedToHide: (values: string[]) => void;
  deleteRow: (props: DeleteRowFunctionProps) => void;
+  workspaceEnvs: WorkspaceEnv[];
+  selectedEnv: WorkspaceEnv;
+  workspaceId: string;
 }

 /**
@ -63,15 +68,19 @@ const SideBar = ({
  modifyComment,
  buttonReady,
  savePush,
-  deleteRow
+  deleteRow,
+  workspaceEnvs,
+  selectedEnv,
+  workspaceId
 }: SideBarProps) => {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const [isLoading, setIsLoading] = useState(false);
-  const [overrideEnabled, setOverrideEnabled] = useState(data[0].valueOverride !== undefined);
+  const [overrideEnabled, setOverrideEnabled] = useState(data[0]?.valueOverride !== undefined);
+  const [compareModal, setCompareModal] = useState(false);
  const { t } = useTranslation();

  return (
-    <div className="absolute border-l border-mineshaft-500 bg-bunker h-full w-96 right-0 z-40 shadow-xl flex flex-col justify-between">
+    <div className="absolute border-l border-mineshaft-500 bg-bunker h-full w-[28rem] sticky top-0 right-0 z-[70] shadow-xl flex flex-col justify-between">
      {isLoading ? (
        <div className="flex items-center justify-center h-full">
          <Image
@ -92,19 +101,21 @@ const SideBar = ({
              className="p-1"
              onClick={() => toggleSidebar('None')}
            >
-              <FontAwesomeIcon icon={faX} className="w-4 h-4 text-bunker-300 cursor-pointer" />
+              <FontAwesomeIcon icon={faXmark} className="w-4 h-4 text-bunker-300 cursor-pointer" />
            </div>
          </div>
          <div className="mt-4 px-4 pointer-events-none">
            <p className="text-sm text-bunker-300">{t('dashboard:sidebar.key')}</p>
-            <DashboardInputField
-              onChangeHandler={modifyKey}
-              type="varName"
-              position={data[0]?.pos}
-              value={data[0]?.key}
-              isDuplicate={false}
-              blurred={false}
-            />
+            <div className='rounded-md border overflow-hidden border-mineshaft-600 bg-white/5'>
+              <DashboardInputField
+                onChangeHandler={modifyKey}
+                type="varName"
+                position={data[0]?.pos}
+                value={data[0]?.key}
+                isDuplicate={false}
+                blurred={false}
+              />
+            </div>
          </div>
          {(data[0]?.value || data[0]?.value === "") ? (
            <div
@ -113,14 +124,16 @@ const SideBar = ({
              } duration-200`}
            >
              <p className="text-sm text-bunker-300">{t('dashboard:sidebar.value')}</p>
-              <DashboardInputField
-                onChangeHandler={modifyValue}
-                type="value"
-                position={data[0].pos}
-                value={data[0]?.value}
-                isDuplicate={false}
-                blurred
-              />
+              <div className='rounded-md border overflow-hidden border-mineshaft-600 bg-white/5'>
+                <DashboardInputField
+                  onChangeHandler={modifyValue}
+                  type="value"
+                  position={data[0].pos}
+                  value={data[0]?.value}
+                  isDuplicate={false}
+                  blurred
+                />
+              </div>
              <div className="absolute bg-bunker-800 right-[1.07rem] top-[1.6rem] z-50">
                <GenerateSecretMenu modifyValue={modifyValue} position={data[0]?.pos} />
              </div>
@ -150,14 +163,16 @@ const SideBar = ({
                !overrideEnabled && 'opacity-40 pointer-events-none'
              } duration-200`}
            >
-              <DashboardInputField
-                onChangeHandler={modifyValueOverride}
-                type="value"
-                position={data[0]?.pos}
-                value={overrideEnabled ? data[0]?.valueOverride : data[0]?.value}
-                isDuplicate={false}
-                blurred
-              />
+              <div className='rounded-md border overflow-hidden border-mineshaft-600 bg-white/5'>
+                <DashboardInputField
+                  onChangeHandler={modifyValueOverride}
+                  type="value"
+                  position={data[0]?.pos}
+                  value={overrideEnabled ? data[0]?.valueOverride : data[0]?.value}
+                  isDuplicate={false}
+                  blurred
+                />
+              </div>
              <div className="absolute right-[0.57rem] top-[0.3rem] z-50">
                <GenerateSecretMenu modifyValue={modifyValueOverride} position={data[0]?.pos} />
              </div>
@ -171,20 +186,38 @@ const SideBar = ({
          />
        </div>
      )}
-      <div className="flex justify-start max-w-sm mt-4 px-4 mt-full mb-8">
-        <Button
-          text={String(t('common:save-changes'))}
-          onButtonPressed={savePush}
-          color="primary"
-          size="md"
-          active={buttonReady}
-          textDisabled="Saved"
-        />
-        <DeleteActionButton
-          onSubmit={() =>
-            deleteRow({ ids: data.map((secret) => secret.id), secretName: data[0]?.key })
-          }
-        />
+      <div className="mt-full mt-4 mb-4 flex max-w-sm flex-col justify-start space-y-2 px-4">
+        <div>
+          <Button
+            text="Compare secret across environments"
+            color="mineshaft"
+            size="md"
+            onButtonPressed={() => setCompareModal(true)}
+          />
+          <CompareSecretsModal
+            compareModal={compareModal}
+            setCompareModal={setCompareModal}
+            currentSecret={{ key: data[0]?.key, value: data[0]?.value }}
+            workspaceEnvs={workspaceEnvs}
+            selectedEnv={selectedEnv}
+            workspaceId={workspaceId}
+          />
+        </div>
+        <div className="flex">
+          <Button
+            text={String(t('common:save-changes'))}
+            onButtonPressed={savePush}
+            color="primary"
+            size="md"
+            active={buttonReady}
+            textDisabled="Saved"
+          />
+          <DeleteActionButton
+            onSubmit={() =>
+              deleteRow({ ids: data.map((secret) => secret.id), secretName: data[0]?.key })
+            }
+          />
+        </div>
      </div>
    </div>
  );
--- a/frontend/src/components/integrations/Integration.tsx
+++ b/frontend/src/components/integrations/Integration.tsx
@ -4,7 +4,7 @@ import { useRouter } from 'next/router';
 import { faArrowRight, faRotate, faX } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 // TODO: This needs to be moved from public folder
-import { contextNetlifyMapping, reverseContextNetlifyMapping } from 'public/data/frequentConstants';
+import { contextNetlifyMapping, integrationSlugNameMapping, reverseContextNetlifyMapping } from 'public/data/frequentConstants';

 import Button from '@app/components/basic/buttons/Button';
 import ListBox from '@app/components/basic/Listbox';
@ -52,6 +52,7 @@ const IntegrationTile = ({
  environments = [],
  handleDeleteIntegration
 }: Props) => {
+
  // set initial environment. This find will only execute when component is mounting
  const [integrationEnvironment, setIntegrationEnvironment] = useState<Props['environments'][0]>(
    environments.find(({ slug }) => slug === integration.environment) || {
@ -72,7 +73,14 @@ const IntegrationTile = ({
      });
      
      setApps(tempApps);
-      setIntegrationApp(integration.app ? integration.app : tempApps[0].name);
+      
+      if (integration?.app) {
+        setIntegrationApp(integration.app);
+      } else if (tempApps.length > 0) {
+          setIntegrationApp(tempApps[0].name)
+        } else {
+          setIntegrationApp('');
+        }

      switch (integration.integration) {
        case 'vercel':
@ -174,7 +182,7 @@ const IntegrationTile = ({
    return <div />;
  };

-  if (!integrationApp || apps.length === 0) return <div />;
+  if (!integrationApp) return <div />;

  return (
    <div className="max-w-5xl p-6 mx-6 mb-8 rounded-md bg-white/5 flex justify-between">
@ -201,7 +209,8 @@ const IntegrationTile = ({
        <div className="mr-2">
          <p className="text-gray-400 text-xs font-semibold mb-2">INTEGRATION</p>
          <div className="py-2.5 bg-white/[.07] rounded-md pl-4 pr-10 text-sm font-semibold text-gray-300">
-            {integration.integration.charAt(0).toUpperCase() + integration.integration.slice(1)}
+            {/* {integration.integration.charAt(0).toUpperCase() + integration.integration.slice(1)} */}
+            {integrationSlugNameMapping[integration.integration]}
          </div>
        </div>
        <div className="mr-2">
--- a/frontend/src/components/utilities/attemptLogin.ts
+++ b/frontend/src/components/utilities/attemptLogin.ts
@ -137,8 +137,9 @@ const attemptLogin = async (
                // eslint-disable-next-line no-template-curly-in-string
                value: 'mongodb+srv://${DB_USERNAME}:${DB_PASSWORD}@mongodb.net',
                valueOverride: undefined,
-                comment: 'This is an example of secret referencing.',
-                id: ''
+                comment: 'Secret referencing example',
+                id: '',
+                tags: []
              },
              {
                pos: 1,
@ -146,8 +147,9 @@ const attemptLogin = async (
                value: 'OVERRIDE_THIS',
                valueOverride: undefined,
                comment:
-                  'This is an example of secret overriding. Your team can have a shared value of a secret, while you can override it to whatever value you need',
-                id: ''
+                  'Override secrets with personal value',
+                id: '',
+                tags: []
              },
              {
                pos: 2,
@ -155,8 +157,9 @@ const attemptLogin = async (
                value: 'OVERRIDE_THIS',
                valueOverride: undefined,
                comment:
-                  'This is an example of secret overriding. Your team can have a shared value of a secret, while you can override it to whatever value you need',
-                id: ''
+                  'Another secret override',
+                id: '',
+                tags: []
              },
              {
                pos: 3,
@ -164,7 +167,8 @@ const attemptLogin = async (
                value: 'user1234',
                valueOverride: 'user1234',
                comment: '',
-                id: ''
+                id: '',
+                tags: []
              },
              {
                pos: 4,
@ -172,7 +176,8 @@ const attemptLogin = async (
                value: 'example_password',
                valueOverride: 'example_password',
                comment: '',
-                id: ''
+                id: '',
+                tags: []
              },
              {
                pos: 5,
@ -180,7 +185,8 @@ const attemptLogin = async (
                value: 'example_twillio_token',
                valueOverride: undefined,
                comment: '',
-                id: ''
+                id: '',
+                tags: []
              },
              {
                pos: 6,
@ -188,7 +194,8 @@ const attemptLogin = async (
                value: 'http://localhost:3000',
                valueOverride: undefined,
                comment: '',
-                id: ''
+                id: '',
+                tags: []
              }
            ];
            const secrets = await encryptSecrets({
--- a/frontend/src/components/utilities/secrets/encryptSecrets.ts
+++ b/frontend/src/components/utilities/secrets/encryptSecrets.ts
@ -1,6 +1,6 @@
 import crypto from 'crypto';

-import { SecretDataProps } from 'public/data/frequentInterfaces';
+import { SecretDataProps, Tag } from 'public/data/frequentInterfaces';

 import getLatestFileKey from '@app/pages/api/workspace/getLatestFileKey';

@ -20,6 +20,7 @@ interface EncryptedSecretProps {
  secretValueIV: string;
  secretValueTag: string;
  type: 'personal' | 'shared';
+  tags: Tag[];
 }

 /**
@ -105,7 +106,8 @@ const encryptSecrets = async ({
        type:
          secret.valueOverride === undefined || secret?.value !== secret?.valueOverride
            ? 'shared'
-            : 'personal'
+            : 'personal',
+        tags: secret.tags
      };

      return result;
--- a/frontend/src/components/utilities/secrets/getSecretsForProject.ts
+++ b/frontend/src/components/utilities/secrets/getSecretsForProject.ts
@ -1,3 +1,5 @@
+import { Tag } from 'public/data/frequentInterfaces';
+
 import getSecrets from '@app/pages/api/files/GetSecrets';
 import getLatestFileKey from '@app/pages/api/workspace/getLatestFileKey';

@ -17,6 +19,7 @@ interface EncryptedSecretProps {
  secretValueIV: string;
  secretValueTag: string;
  type: 'personal' | 'shared';
+  tags: Tag[];
 }

 interface SecretProps {
@ -25,12 +28,13 @@ interface SecretProps {
  type: 'personal' | 'shared';
  comment: string;
  id: string;
+  tags: Tag[];
 }

 interface FunctionProps {
  env: string;
-  setIsKeyAvailable: any;
-  setData: any;
+  setIsKeyAvailable?: any;
+  setData?: any;
  workspaceId: string;
 }

@ -58,7 +62,9 @@ const getSecretsForProject = async ({

    const latestKey = await getLatestFileKey({ workspaceId });
    // This is called isKeyAvailable but what it really means is if a person is able to create new key pairs
-    setIsKeyAvailable(!latestKey ? encryptedSecrets.length === 0 : true);
+    if (typeof setIsKeyAvailable === 'function') {
+      setIsKeyAvailable(!latestKey ? encryptedSecrets.length === 0 : true);
+    }

    const PRIVATE_KEY = localStorage.getItem('PRIVATE_KEY') as string;

@ -105,7 +111,8 @@ const getSecretsForProject = async ({
          key: plainTextKey,
          value: plainTextValue,
          type: secret.type,
-          comment: plainTextComment
+          comment: plainTextComment,
+          tags: secret.tags
        });
      });
    }
@ -128,10 +135,16 @@ const getSecretsForProject = async ({
      )[0]?.value,
      comment: tempDecryptedSecrets.filter(
        (secret) => secret.key === key && secret.type === 'shared'
-      )[0]?.comment
+      )[0]?.comment,
+      tags: tempDecryptedSecrets.filter(
+        (secret) => secret.key === key && secret.type === 'shared'
+      )[0]?.tags
    }));

-    setData(result);
+    if (typeof setData === 'function') {
+      setData(result);
+    }
+  
    return result;
  } catch (error) {
    console.log('Something went wrong during accessing or decripting secrets.');
--- a/frontend/src/components/v2/Button/Button.tsx
+++ b/frontend/src/components/v2/Button/Button.tsx
@ -158,7 +158,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
          className={twMerge(
            'shrink-0 cursor-pointer transition-all',
            loadingToggleClass,
-            size === 'xs' ? 'ml-1' : 'ml-2'
+            size === 'xs' ? 'ml-1' : 'ml-3'
          )}
        >
          {rightIcon}
--- a/frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx
+++ b/frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx
@ -52,7 +52,7 @@ export const DeleteActionModal = ({
    >
      <ModalContent
        title={title}
-        subTitle="This action is irreversible!!!"
+        subTitle="This action is irreversible!"
        footerContent={
          <div className="flex items-center">
            <Button
--- a/frontend/src/components/v2/HoverCard/HoverCard.tsx
+++ b/frontend/src/components/v2/HoverCard/HoverCard.tsx
@ -0,0 +1,42 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import * as HoverCard from '@radix-ui/react-hover-card';
+
+type Props = {
+  text: string;
+  icon: IconProp;
+  color: string;
+};
+
+export type HoverCardProps = Props;
+
+export const HoverObject = ({
+    text,
+    icon,
+    color
+  }: Props): JSX.Element => (
+  <HoverCard.Root openDelay={50}>
+    <HoverCard.Trigger asChild>
+      <a
+        className="ImageTrigger z-20"
+      >
+        <FontAwesomeIcon icon={icon} className={`text-${color}`} />
+      </a>
+    </HoverCard.Trigger>
+    <HoverCard.Portal>
+      <HoverCard.Content className="HoverCardContent z-[50]" sideOffset={5}>
+        <div className='bg-bunker-700 border border-mineshaft-600 p-2 rounded-md drop-shadow-xl text-bunker-300'>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 15 }}>
+            <div>
+              <div className="Text bold">{text}</div>
+            </div>
+          </div>
+        </div>
+
+        <HoverCard.Arrow className="border-mineshaft-600" />
+      </HoverCard.Content>
+    </HoverCard.Portal>
+  </HoverCard.Root>
+);
+
+HoverObject.displayName = 'HoverCard';
--- a/frontend/src/components/v2/HoverCard/index.tsx
+++ b/frontend/src/components/v2/HoverCard/index.tsx
@ -0,0 +1,2 @@
+export type { HoverCardProps } from './HoverCard';
+export { HoverObject } from './HoverCard';
--- a/frontend/src/components/v2/IconButton/IconButton.tsx
+++ b/frontend/src/components/v2/IconButton/IconButton.tsx
@ -80,7 +80,7 @@ const iconButtonVariants = cva(
      {
        colorSchema: ['danger', 'primary', 'secondary'],
        variant: ['plain'],
-        className: 'bg-transparent py-1 px-1'
+        className: 'bg-transparent py-1 px-1 text-bunker-300'
      }
    ]
  }
--- a/frontend/src/components/v2/Modal/Modal.tsx
+++ b/frontend/src/components/v2/Modal/Modal.tsx
@ -18,14 +18,14 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
  ({ children, title, subTitle, className, footerContent, onClose, ...props }, forwardedRef) => (
    <DialogPrimitive.Portal>
      <DialogPrimitive.Overlay
-        className="fixed inset-0 h-full w-full animate-fadeIn"
+        className="fixed inset-0 h-full w-full animate-fadeIn z-[70]"
        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 -translate-y-2/4 -translate-x-2/4 animate-popIn drop-shadow-md',
+            'fixed top-1/2 left-1/2 max-w-lg -translate-y-2/4 -translate-x-2/4 animate-popIn drop-shadow-2xl z-[90]',
            className
          )}
        >
--- a/frontend/src/components/v2/Select/Select.tsx
+++ b/frontend/src/components/v2/Select/Select.tsx
@ -41,7 +41,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
        <SelectPrimitive.Portal>
          <SelectPrimitive.Content
            className={twMerge(
-              'relative left-4 top-1 overflow-hidden rounded-md bg-bunker-800 font-inter text-bunker-100 shadow-md',
+              'relative left-4 top-1 overflow-hidden rounded-md bg-bunker-800 font-inter text-bunker-100 shadow-md z-[100]',
              dropdownContainerClassName
            )}
          >
--- a/frontend/src/context/WorkspaceContext/WorkspaceContext.tsx
+++ b/frontend/src/context/WorkspaceContext/WorkspaceContext.tsx
@ -1,4 +1,4 @@
-import { createContext, ReactNode, useContext, useEffect, useMemo } from 'react';
+import { createContext, ReactNode, useContext, useMemo } from 'react';
 import { useRouter } from 'next/router';

 import { useGetUserWorkspaces } from '@app/hooks/api';
@ -30,15 +30,6 @@ export const WorkspaceProvider = ({ children }: Props): JSX.Element => {
    };
  }, [ws, workspaceId, isLoading]);

-  useEffect(() => {
-    // not loading and current workspace is empty
-    // ws empty means user has no access to the ws
-    // push to the first workspace
-    if (!isLoading && !value?.currentWorkspace?._id) {
-      router.push(`/dashboard/${value.workspaces?.[0]?._id}`);
-    }
-  }, [value?.currentWorkspace?._id, isLoading, value.workspaces?.[0]?._id, router.pathname]);
-
  return <WorkspaceContext.Provider value={value}>{children}</WorkspaceContext.Provider>;
 };

--- a/frontend/src/ee/components/PITRecoverySidebar.tsx
+++ b/frontend/src/ee/components/PITRecoverySidebar.tsx
@ -3,8 +3,9 @@ import { useEffect, useState } from 'react';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
-import { faX } from '@fortawesome/free-solid-svg-icons';
+import { 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 {
@ -48,6 +49,7 @@ interface EncrypetedSecretVersionListProps {
  secretKeyTag: string;
  environment: string;
  type: 'personal' | 'shared';
+  tags: Tag[];
 }

 /**
@ -106,6 +108,7 @@ const PITRecoverySidebar = ({ toggleSidebar, setSnapshotData, chosenSnapshot }:
        pos,
        type: encryptedSecretVersion.type,
        environment: encryptedSecretVersion.environment,
+        tags: encryptedSecretVersion.tags,
        key: decryptSymmetric({
          ciphertext: encryptedSecretVersion.secretKeyCiphertext,
          iv: encryptedSecretVersion.secretKeyIV,
@ -134,6 +137,9 @@ const PITRecoverySidebar = ({ toggleSidebar, setSnapshotData, chosenSnapshot }:
      environment: decryptedSecretVersions.filter(
        (secret: SecretDataProps) => secret.key === key && secret.type === 'shared'
      )[0].environment,
+      tags: decryptedSecretVersions.filter(
+        (secret: SecretDataProps) => secret.key === key && secret.type === 'shared'
+      )[0].tags,
      value: decryptedSecretVersions.filter(
        (secret: SecretDataProps) => secret.key === key && secret.type === 'shared'
      )[0]?.value,
@ -155,7 +161,7 @@ const PITRecoverySidebar = ({ toggleSidebar, setSnapshotData, chosenSnapshot }:
    <div
      className={`absolute border-l border-mineshaft-500 ${
        isLoading ? 'bg-bunker-800' : 'bg-bunker'
-      } fixed h-full w-96 top-14 right-0 z-40 shadow-xl flex flex-col justify-between`}
+      } fixed h-full w-[28rem] right-0 z-[70] shadow-xl flex flex-col justify-between sticky top-0`}
    >
      {isLoading ? (
        <div className="flex items-center justify-center h-full mb-8">
@ -177,7 +183,7 @@ const PITRecoverySidebar = ({ toggleSidebar, setSnapshotData, chosenSnapshot }:
              className="p-1"
              onClick={() => toggleSidebar(false)}
            >
-              <FontAwesomeIcon icon={faX} className="w-4 h-4 text-bunker-300 cursor-pointer" />
+              <FontAwesomeIcon icon={faXmark} className="w-4 h-4 text-bunker-300 cursor-pointer" />
            </div>
          </div>
          <div className="flex flex-col px-2 py-2 overflow-y-auto h-[92vh]">
--- a/frontend/src/ee/components/SecretVersionList.tsx
+++ b/frontend/src/ee/components/SecretVersionList.tsx
@ -89,7 +89,7 @@ const SecretVersionList = ({ secretId }: { secretId: string }) => {
            />
          </div>
        ) : (
-          <div className="h-48 overflow-y-auto overflow-x-none">
+          <div className="h-48 overflow-y-auto overflow-x-none dark:[color-scheme:dark]">
            {secretVersions ? (
              secretVersions
                ?.sort((a, b) => b.createdAt.localeCompare(a.createdAt))
--- a/frontend/src/hooks/api/index.tsx
+++ b/frontend/src/hooks/api/index.tsx
@ -2,4 +2,5 @@ export * from './auth';
 export * from './keys';
 export * from './serviceTokens';
 export * from './subscriptions';
+export * from './tags';
 export * from './workspace';
--- a/frontend/src/hooks/api/integrationAuth/index.tsx
+++ b/frontend/src/hooks/api/integrationAuth/index.tsx
@ -0,0 +1,3 @@
+export {
+    useGetIntegrationAuthApps,
+    useGetIntegrationAuthById} from './queries';
--- a/frontend/src/hooks/api/integrationAuth/queries.tsx
+++ b/frontend/src/hooks/api/integrationAuth/queries.tsx
@ -0,0 +1,38 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import {
+    App,
+    IntegrationAuth} from './types';
+
+const integrationAuthKeys = {
+    getIntegrationAuthById: (integrationAuthId: string) => [{ integrationAuthId }, 'integrationAuth'] as const,
+    getIntegrationAuthApps: (integrationAuthId: string) => [{ integrationAuthId }, 'integrationAuthApps'] as const,
+}
+
+const fetchIntegrationAuthById = async (integrationAuthId: string) => {
+    const { data } = await apiRequest.get<{ integrationAuth: IntegrationAuth }>(`/api/v1/integration-auth/${integrationAuthId}`);
+    return data.integrationAuth;
+}
+
+const fetchIntegrationAuthApps = async (integrationAuthId: string) => {
+    const { data } = await apiRequest.get<{ apps: App[] }>(`/api/v1/integration-auth/${integrationAuthId}/apps`);
+    return data.apps;
+}
+
+export const useGetIntegrationAuthById = (integrationAuthId: string) => {
+    return useQuery({
+        queryKey: integrationAuthKeys.getIntegrationAuthById(integrationAuthId),
+        queryFn: () => fetchIntegrationAuthById(integrationAuthId),
+        enabled: true
+    });
+}
+
+export const useGetIntegrationAuthApps = (integrationAuthId: string) => {
+    return useQuery({
+        queryKey: integrationAuthKeys.getIntegrationAuthApps(integrationAuthId),
+        queryFn: () =>  fetchIntegrationAuthApps(integrationAuthId),
+        enabled: true
+    });
+}
--- a/frontend/src/hooks/api/integrationAuth/types.ts
+++ b/frontend/src/hooks/api/integrationAuth/types.ts
@ -0,0 +1,13 @@
+export type IntegrationAuth = {
+    _id: string;
+    workspace: string;
+    integration: string;
+    teamId?: string;
+    accountId?: string;
+}
+
+export type App = {
+    name: string;
+    appId?: string;
+    owner?: string;
+}
--- a/frontend/src/hooks/api/tags/index.tsx
+++ b/frontend/src/hooks/api/tags/index.tsx
@ -0,0 +1,3 @@
+export { useGetWsTags } from './queries';
+export { useCreateWsTag } from './queries';
+export { useDeleteWsTag } from './queries';
--- a/frontend/src/hooks/api/tags/queries.tsx
+++ b/frontend/src/hooks/api/tags/queries.tsx
@ -0,0 +1,62 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+
+import { apiRequest } from '@app/config/request';
+
+import {
+  CreateTagDTO,
+  CreateTagRes,
+  DeleteTagDTO,
+  DeleteWsTagRes,
+  UserWsTags
+} from './types';
+
+
+const workspaceTags = {
+  getWsTags: (workspaceID: string) => ['workspace-tags', { workspaceID }] as const
+};
+
+const fetchWsTag = async (workspaceID: string) => {
+  const { data } = await apiRequest.get<{ workspaceTags: UserWsTags }>(
+    `/api/v2/workspace/${workspaceID}/tags`
+  );
+
+  return data.workspaceTags;
+};
+
+export const useGetWsTags = (workspaceID: string) =>
+  useQuery({
+    queryKey: workspaceTags.getWsTags(workspaceID),
+    queryFn: () => fetchWsTag(workspaceID),
+    enabled: Boolean(workspaceID)
+  });
+
+export const useCreateWsTag = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<CreateTagRes, {}, CreateTagDTO>({
+    mutationFn: async ({ workspaceID, tagName, tagSlug }) => {
+      const { data } = await apiRequest.post(`/api/v2/workspace/${workspaceID}/tags`, {
+        name: tagName,
+        slug: tagSlug
+      })
+      return data;
+    },
+    onSuccess: (tagData) => {
+      queryClient.invalidateQueries(workspaceTags.getWsTags(tagData?.workspace));
+    }
+  });
+};
+
+export const useDeleteWsTag = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<DeleteWsTagRes, {}, DeleteTagDTO>({
+    mutationFn: async ({ tagID }) => {
+      const { data } = await apiRequest.delete(`/api/v2/workspace/tags/${tagID}`);
+      return data
+    },
+    onSuccess: (tagData) => {
+      queryClient.invalidateQueries(workspaceTags.getWsTags(tagData?.workspace));
+    }
+  });
+};
--- a/frontend/src/hooks/api/tags/types.ts
+++ b/frontend/src/hooks/api/tags/types.ts
@ -0,0 +1,39 @@
+export type UserWsTags = WsTag[];
+
+export type WsTag = {
+  _id: string;
+  name: string;
+  slug: string;
+  workspace: string;
+  createdAt: string;
+  updatedAt: string;
+  __v: number;
+}
+
+export type WorkspaceTag = { _id: string; name: string; slug: string };
+
+export type CreateTagDTO = {
+  workspaceID: string;
+  tagSlug: string;
+  tagName: string;
+};
+
+export type CreateTagRes = {
+  name: string;
+  slug: string;
+  workspace: string;
+  createdAt: string;
+  user: string;
+  _id: string;
+};
+
+export type DeleteTagDTO = { tagID: string; };
+
+export type DeleteWsTagRes = {
+  name: string;
+  slug: string;
+  workspace: string;
+  createdAt: string;
+  user: string;
+  _id: string;
+};
--- a/frontend/src/hooks/api/types.ts
+++ b/frontend/src/hooks/api/types.ts
@ -9,5 +9,6 @@ export type {
  RenameWorkspaceDTO,
  UpdateEnvironmentDTO,
  Workspace,
-  WorkspaceEnv
+  WorkspaceEnv,
+  WorkspaceTag
 } from './workspace/types';
--- a/frontend/src/hooks/api/workspace/index.tsx
+++ b/frontend/src/hooks/api/workspace/index.tsx
@ -3,6 +3,8 @@ export {
  useDeleteWorkspace,
  useDeleteWsEnvironment,
  useGetUserWorkspaces,
+  useGetWorkspaceById,
  useRenameWorkspace,
-  useUpdateWsEnvironment
-} from './queries';
+  useToggleAutoCapitalization,
+  useUpdateWsEnvironment} from './queries';
+  
--- a/frontend/src/hooks/api/workspace/queries.tsx
+++ b/frontend/src/hooks/api/workspace/queries.tsx
@ -7,20 +7,35 @@ import {
  DeleteEnvironmentDTO,
  DeleteWorkspaceDTO,
  RenameWorkspaceDTO,
+  ToggleAutoCapitalizationDTO,
  UpdateEnvironmentDTO,
  Workspace
 } from './types';

+
 const workspaceKeys = {
+  getWorkspaceById: (workspaceId: string) => [{ workspaceId }, 'workspace'] as const,
  getAllUserWorkspace: ['workspaces'] as const
 };

+const fetchWorkspaceById = async (workspaceId: string) => {
+  const { data } = await apiRequest.get<{ workspace: Workspace }>(`/api/v1/workspace/${workspaceId}`);
+  return data.workspace; 
+}
+
 const fetchUserWorkspaces = async () => {
  const { data } = await apiRequest.get<{ workspaces: Workspace[] }>('/api/v1/workspace');
-
  return data.workspaces;
 };

+export const useGetWorkspaceById = (workspaceId: string) => {
+  return useQuery({
+    queryKey: workspaceKeys.getWorkspaceById(workspaceId),
+    queryFn: () => fetchWorkspaceById(workspaceId),
+    enabled: true
+  });
+};
+
 export const useGetUserWorkspaces = () =>
  useQuery(workspaceKeys.getAllUserWorkspace, fetchUserWorkspaces);

@ -37,6 +52,18 @@ export const useRenameWorkspace = () => {
  });
 };

+export const useToggleAutoCapitalization = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, ToggleAutoCapitalizationDTO>({
+    mutationFn: ({ workspaceID, state }) =>
+      apiRequest.patch(`/api/v2/workspace/${workspaceID}/auto-capitalization`, { autoCapitalization: state }),
+    onSuccess: () => {
+      queryClient.invalidateQueries(workspaceKeys.getAllUserWorkspace);
+    }
+  });
+};
+
 export const useDeleteWorkspace = () => {
  const queryClient = useQueryClient();

--- a/frontend/src/hooks/api/workspace/types.ts
+++ b/frontend/src/hooks/api/workspace/types.ts
@ -3,13 +3,16 @@ export type Workspace = {
  _id: string;
  name: string;
  organization: string;
+  autoCapitalization: boolean;
  environments: WorkspaceEnv[];
 };

 export type WorkspaceEnv = { name: string; slug: string };
+export type WorkspaceTag = { _id: string; name: string; slug: string };

 // mutation dto
 export type RenameWorkspaceDTO = { workspaceID: string; newWorkspaceName: string };
+export type ToggleAutoCapitalizationDTO = { workspaceID: string; state: boolean };

 export type DeleteWorkspaceDTO = { workspaceID: string };

--- a/frontend/src/pages/api/integrations/authorizeIntegration.ts
+++ b/frontend/src/pages/api/integrations/authorizeIntegration.ts
@ -26,7 +26,7 @@ const AuthorizeIntegration = ({ workspaceId, code, integration }: Props) =>
    })
  }).then(async (res) => {
    if (res && res.status === 200) {
-      return res;
+      return (await res.json()).integrationAuth;
    }
    console.log('Failed to authorize the integration');
    return undefined;
--- a/frontend/src/pages/api/integrations/createIntegration.ts
+++ b/frontend/src/pages/api/integrations/createIntegration.ts
@ -1,7 +1,13 @@
 import SecurityClient from '@app/components/utilities/SecurityClient';

 interface Props {
-    integrationAuthId: string;
+  integrationAuthId: string;
+  isActive: boolean;
+  app: string | null;
+  appId: string | null;
+  sourceEnvironment: string;
+  targetEnvironment: string | null;
+  owner: string | null;
 }
 /**
 * This route creates a new integration based on the integration authorization with id [integrationAuthId]
@ -10,7 +16,13 @@ interface Props {
 * @returns
 */
 const createIntegration = ({ 
-    integrationAuthId
+    integrationAuthId,
+    isActive,
+    app,
+    appId,
+    sourceEnvironment,
+    targetEnvironment,
+    owner
 }: Props) =>
  SecurityClient.fetchCall('/api/v1/integration', {
    method: 'POST',
@ -18,7 +30,13 @@ const createIntegration = ({
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
-        integrationAuthId
+        integrationAuthId,
+        isActive,
+        app,
+        appId,
+        sourceEnvironment,
+        targetEnvironment,
+        owner
    })
  }).then(async (res) => {
    if (res && res.status === 200) {
--- a/frontend/src/pages/api/workspace/getWorkspaceTags.ts
+++ b/frontend/src/pages/api/workspace/getWorkspaceTags.ts
@ -0,0 +1,22 @@
+import SecurityClient from '@app/components/utilities/SecurityClient';
+
+/**
+ * This route lets us get the tags for a certain project
+ * @param {string} workspaceId
+ * @returns
+ */
+const getWorkspaceTags = ({ workspaceId }: { workspaceId: string }) =>
+  SecurityClient.fetchCall(`/api/v2/workspace/${workspaceId}/tags`, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  }).then(async (res) => {
+    if (res?.status === 200) {
+      return (await res.json()).workspaceTags;
+    }
+    console.log('Failed to get the tags available in a certain project');
+    return undefined;
+  });
+
+export default getWorkspaceTags;
--- a/frontend/src/pages/api/workspace/getWorkspaces.ts
+++ b/frontend/src/pages/api/workspace/getWorkspaces.ts
@ -4,6 +4,7 @@ interface Workspace {
  __v: number;
  _id: string;
  name: string;
+  autoCapitalization: boolean;
  organization: string;
  environments: Array<{ name: string; slug: string }>;
 }
--- a/frontend/src/pages/dashboard/[id].tsx
+++ b/frontend/src/pages/dashboard/[id].tsx
@ -5,23 +5,26 @@ import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
 import {
-  faArrowDownAZ,
-  faArrowDownZA,
+  faArrowDown,
  faArrowLeft,
+  faArrowUp,
  faCheck,
  faClockRotateLeft,
  faEye,
  faEyeSlash,
  faFolderOpen,
  faMagnifyingGlass,
-  faPlus
+  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';
@ -31,6 +34,7 @@ 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 getProjectSercetSnapshotsCount from '@app/ee/api/secrets/GetProjectSercetSnapshotsCount';
 import performSecretRollback from '@app/ee/api/secrets/PerformSecretRollback';
 import PITRecoverySidebar from '@app/ee/components/PITRecoverySidebar';
@ -43,6 +47,7 @@ import checkUserAction from '../api/userActions/checkUserAction';
 import registerUserAction from '../api/userActions/registerUserAction';
 import getWorkspaceEnvironments from '../api/workspace/getWorkspaceEnvironments';
 import getWorkspaces from '../api/workspace/getWorkspaces';
+import getWorkspaceTags from '../api/workspace/getWorkspaceTags';

 type WorkspaceEnv = {
  name: string;
@ -58,6 +63,7 @@ interface SecretDataProps {
  id: string;
  idOverride: string | undefined;
  comment: string;
+  tags: Tag[];
 }

 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@ -81,6 +87,7 @@ interface SnapshotProps {
    value: string;
    valueOverride: string;
    comment: string;
+    tags: Tag[];
  }[];
 }

@ -113,7 +120,7 @@ export default function Dashboard() {
  const [blurred, setBlurred] = useState(true);
  const [isKeyAvailable, setIsKeyAvailable] = useState(true);
  const [isNew, setIsNew] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
  const [searchKeys, setSearchKeys] = useState('');
  const [errorDragAndDrop, setErrorDragAndDrop] = useState(false);
  const [sortMethod, setSortMethod] = useState('alphabetical');
@ -125,6 +132,9 @@ export default function Dashboard() {
  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 { t } = useTranslation();
  const { createNotification } = useNotificationContext();
@ -133,11 +143,7 @@ export default function Dashboard() {
  const [workspaceEnvs, setWorkspaceEnvs] = useState<WorkspaceEnv[]>([]);

  const [selectedSnapshotEnv, setSelectedSnapshotEnv] = useState<WorkspaceEnv>();
-  const [selectedEnv, setSelectedEnv] = useState<WorkspaceEnv>({
-    name: '',
-    slug: '',
-    isWriteDenied: false
-  });
+  const [selectedEnv, setSelectedEnv] = useState<WorkspaceEnv>();
  const [atSecretAreaTop, setAtSecretsAreaTop] = useState(true);
  const secretsTop = useRef<HTMLDivElement>(null);

@ -193,15 +199,18 @@ export default function Dashboard() {
      }));

    setData(sortedData);
+    setIsLoading(false);
  };

  /**
   * Reorder rows alphabetically or in the opprosite order
   */
  const reorderRows = (dataToReorder: SecretDataProps[] | 1) => {
-    setSortMethod((prevSort) => (prevSort === 'alphabetical' ? '-alphabetical' : 'alphabetical'));
+    if (dataToReorder) {
+      setSortMethod((prevSort) => (prevSort === 'alphabetical' ? '-alphabetical' : 'alphabetical'));

-    sortValuesHandler(dataToReorder, undefined);
+      sortValuesHandler(dataToReorder, undefined);
+    }
  };

  useEffect(() => {
@ -216,6 +225,7 @@ export default function Dashboard() {
        if (!workspace) {
          router.push(`/dashboard/${userWorkspaces?.[0]?._id}`);
        }
+        setAutoCapitalization(workspace?.autoCapitalization ?? true);

        const accessibleEnvironments = await getWorkspaceEnvironments({ workspaceId });
        setWorkspaceEnvs(accessibleEnvironments || []);
@ -233,6 +243,8 @@ export default function Dashboard() {
          action: 'first_time_secrets_pushed'
        });
        setHasUserEverPushed(!!userAction);
+
+        setProjectTags(await getWorkspaceTags({ workspaceId }));
      } catch (error) {
        console.log('Error', error);
        setData(undefined);
@ -246,16 +258,17 @@ export default function Dashboard() {
        setIsLoading(true);
        setBlurred(true);
        // ENV
-        const dataToSort = await getSecretsForProject({
-          env: selectedEnv.slug,
-          setIsKeyAvailable,
-          setData,
-          workspaceId
-        });
-        setInitialData(dataToSort);
-        reorderRows(dataToSort);
-
-        setTimeout(() => setIsLoading(false), 700);
+        let dataToSort;
+        if (selectedEnv) {
+          dataToSort = await getSecretsForProject({
+            env: selectedEnv.slug,
+            setIsKeyAvailable,
+            setData,
+            workspaceId
+          });
+          setInitialData(dataToSort);
+          reorderRows(dataToSort);
+        }
      } catch (error) {
        console.log('Error', error);
        setData(undefined);
@ -274,7 +287,8 @@ export default function Dashboard() {
        key: '',
        value: '',
        valueOverride: undefined,
-        comment: ''
+        comment: '',
+        tags: []
      },
      ...data!
    ]);
@ -283,6 +297,23 @@ export default function Dashboard() {
    }
  };

+  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 }) => {
    setButtonReady(true);
    toggleSidebar('None');
@ -316,6 +347,11 @@ export default function Dashboard() {
    setButtonReady(true);
  };

+  const modifyTags = (tags: Tag[], pos: number) => {
+    setData((oldData) => oldData?.map((e) => (e.pos === pos ? { ...e, tags } : e)));
+    setButtonReady(true);
+  };
+
  // For speed purposes and better perforamance, we are using useCallback
  const listenChangeValue = useCallback((value: string, pos: number) => {
    modifyValue(value, pos);
@ -333,6 +369,10 @@ export default function Dashboard() {
    modifyComment(value, pos);
  }, []);

+  const listenChangeTags = useCallback((value: Tag[], pos: number) => {
+    modifyTags(value, pos);
+  }, []);
+
  /**
   * Save the changes of environment variables and push them to the database
   */
@ -370,7 +410,7 @@ export default function Dashboard() {
      });
    }

-    if (selectedEnv.isWriteDenied) {
+    if (selectedEnv?.isWriteDenied) {
      setSaveLoading(false);
      return createNotification({
        text: 'You are not allowed to edit this environment',
@ -405,7 +445,9 @@ export default function Dashboard() {
              newData!.filter((dataPoint) => dataPoint.id === initDataPoint.id)[0].key !==
                initDataPoint.key ||
              newData!.filter((dataPoint) => dataPoint.id === initDataPoint.id)[0].comment !==
-                initDataPoint.comment)
+                initDataPoint.comment) ||
+              newData!.filter((dataPoint) => dataPoint.id === initDataPoint.id)[0]?.tags !==
+                initDataPoint?.tags
        )
        .map((secret) => secret.id)
        .includes(newDataPoint.id)
@ -439,7 +481,8 @@ export default function Dashboard() {
        valueOverride: override.valueOverride,
        comment: '',
        id: String(override.idOverride),
-        idOverride: String(override.idOverride)
+        idOverride: String(override.idOverride),
+        tags: override.tags
      }));
    console.log('override add', overridesToBeAdded.length);

@ -454,7 +497,8 @@ export default function Dashboard() {
                newOverrides!.filter((dataPoint) => dataPoint.id === initDataPoint.id)[0].key !==
                  initDataPoint.key ||
                newOverrides!.filter((dataPoint) => dataPoint.id === initDataPoint.id)[0]
-                  .comment !== initDataPoint.comment)
+                  .comment !== initDataPoint.comment ||
+                newOverrides!.filter((dataPoint) => dataPoint.id === initDataPoint.id)[0]?.tags !== initDataPoint?.tags)
          )
          .map((secret) => secret.id)
          .includes(newDataPoint.id)
@ -466,14 +510,15 @@ export default function Dashboard() {
        valueOverride: override.valueOverride,
        comment: '',
        id: String(override.idOverride),
-        idOverride: String(override.idOverride)
+        idOverride: String(override.idOverride),
+        tags: override.tags
      }));
    console.log('override update', overridesToBeUpdated.length);

    if (secretsToBeDeleted.concat(overridesToBeDeleted).length > 0) {
      await deleteSecrets({ secretIds: secretsToBeDeleted.concat(overridesToBeDeleted) });
    }
-    if (secretsToBeAdded.concat(overridesToBeAdded).length > 0) {
+    if (selectedEnv && secretsToBeAdded.concat(overridesToBeAdded).length > 0) {
      const secrets = await encryptSecrets({
        secretsToEncrypt: secretsToBeAdded.concat(overridesToBeAdded),
        workspaceId,
@ -481,7 +526,7 @@ export default function Dashboard() {
      });
      if (secrets) await addSecrets({ secrets, env: selectedEnv.slug, workspaceId });
    }
-    if (secretsToBeUpdated.concat(overridesToBeUpdated).length > 0) {
+    if (selectedEnv && secretsToBeUpdated.concat(overridesToBeUpdated).length > 0) {
      const secrets = await encryptSecrets({
        secretsToEncrypt: secretsToBeUpdated.concat(overridesToBeUpdated),
        workspaceId,
@ -504,11 +549,33 @@ export default function Dashboard() {
    return undefined;
  };

-  const addData = (newData: SecretDataProps[]) => {
-    setData(data!.concat(newData));
+  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);
+    });
    setButtonReady(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);
  };
@ -518,7 +585,7 @@ export default function Dashboard() {
  };

  return data ? (
-    <div className="bg-bunker-800 max-h-screen h-full relative flex flex-col justify-between text-white">
+    <div className="bg-bunker-800 max-h-screen h-full relative flex flex-col justify-between text-white dark">
      <Head>
        <title>{t('common:head-title', { title: t('dashboard:title') })}</title>
        <link rel="icon" href="/infisical.ico" />
@ -527,32 +594,22 @@ export default function Dashboard() {
        <meta name="og:description" content={String(t('dashboard:og-description'))} />
      </Head>
      <div className="flex flex-row h-full">
-        {sidebarSecretId !== 'None' && (
-          <SideBar
-            toggleSidebar={toggleSidebar}
-            data={data.filter(
-              (row: SecretDataProps) =>
-                row.key === data.filter((r) => r.id === sidebarSecretId)[0]?.key
-            )}
-            modifyKey={listenChangeKey}
-            modifyValue={listenChangeValue}
-            modifyValueOverride={listenChangeValueOverride}
-            modifyComment={listenChangeComment}
-            buttonReady={buttonReady}
-            savePush={savePush}
-            sharedToHide={sharedToHide}
-            setSharedToHide={setSharedToHide}
-            deleteRow={deleteCertainRow}
-          />
-        )}
-        {PITSidebarOpen && (
-          <PITRecoverySidebar
-            toggleSidebar={togglePITSidebar}
-            chosenSnapshot={String(snapshotData?.id ? snapshotData.id : '')}
-            setSnapshotData={setSnapshotData}
-          />
-        )}
-        <div className="w-full max-h-96 pb-2">
+        <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
@ -565,7 +622,7 @@ export default function Dashboard() {
              setCheckDocsPopUpVisible={setCheckDocsPopUpVisible}
            />
          )}
-          <div className="flex flex-row justify-between items-center mx-6 mt-6 mb-3 text-xl max-w-5xl">
+          <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
@ -586,7 +643,7 @@ export default function Dashboard() {
                  </span>
                )}
              </div>
-              {!snapshotData && data?.length === 0 && (
+              {!snapshotData && data?.length === 0 && selectedEnv && (
                <ListBox
                  isSelected={selectedEnv.name}
                  data={workspaceEnvs.map(({ name }) => name)}
@ -606,7 +663,10 @@ export default function Dashboard() {
              <div className="flex justify-start max-w-sm mt-1 mr-2">
                <Button
                  text={String(`${numSnapshots} ${t('Commits')}`)}
-                  onButtonPressed={() => togglePITSidebar(true)}
+                  onButtonPressed={() => {
+                    toggleSidebar('None');
+                    togglePITSidebar(true)
+                  }}
                  color="mineshaft"
                  size="md"
                  icon={faClockRotateLeft}
@ -626,7 +686,7 @@ export default function Dashboard() {
                  />
                </div>
              )}
-              {snapshotData && (
+              {snapshotData && selectedEnv && (
                <div className="flex justify-start max-w-sm mt-1">
                  <Button
                    text={String(t('Rollback to this snapshot'))}
@ -641,7 +701,8 @@ export default function Dashboard() {
                          valueOverride: sv.valueOverride,
                          key: sv.key,
                          value: sv.value,
-                          comment: ''
+                          comment: '',
+                          tags: sv.tags
                        }));
                      setData(rolledBackSecrets);

@ -653,6 +714,7 @@ export default function Dashboard() {
                        text: `Rollback has been performed successfully.`,
                        type: 'success'
                      });
+                      setButtonReady(false);
                    }}
                    color="primary"
                    size="md"
@ -663,9 +725,9 @@ export default function Dashboard() {
            </div>
          </div>
          <div className="mx-6 w-full pr-12">
-            <div className="flex flex-col max-w-5xl pb-1">
+            <div className="flex flex-col pb-1">
              <div className="w-full flex flex-row items-start">
-                {(snapshotData || data?.length !== 0) && (
+                {(snapshotData || data?.length !== 0) && selectedEnv && (
                  <>
                    {!snapshotData ? (
                      <ListBox
@ -696,28 +758,18 @@ export default function Dashboard() {
                        }
                      />
                    )}
-                    <div className="h-10 w-full bg-white/5 hover:bg-white/10 ml-2 rounded-md flex flex-row items-center">
+                    <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-white/5 rounded-l-md py-3 pl-4 pr-2 text-gray-400"
+                        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-gray-400 rounded-r-md bg-white/5 w-full h-full outline-none"
+                        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 && (
-                      <div className="ml-2 min-w-max flex flex-row items-start justify-start">
-                        <Button
-                          onButtonPressed={() => reorderRows(1)}
-                          color="mineshaft"
-                          size="icon-md"
-                          icon={sortMethod === 'alphabetical' ? faArrowDownAZ : faArrowDownZA}
-                        />
-                      </div>
-                    )}
                    {!snapshotData && (
                      <div className="ml-2 min-w-max flex flex-row items-start justify-start">
                        <DownloadSecretMenu data={data} env={selectedEnv.slug} />
@ -762,31 +814,85 @@ export default function Dashboard() {
                />
              </div>
            ) : data?.length !== 0 ? (
-              <div className="flex flex-col w-full mt-1 mb-2">
+              <div className="flex flex-col w-full mt-1">
                <div
                  onScroll={onSecretsAreaScroll}
-                  className="max-w-5xl mt-1 max-h-[calc(100vh-280px)] overflow-hidden overflow-y-scroll no-scrollbar no-scrollbar::-webkit-scrollbar"
+                  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="px-1 pt-2 bg-mineshaft-800 rounded-md p-2">
+                  <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-2/12 border-r border-mineshaft-600 flex flex-row items-center">
+                        <div className='text-transparent text-xs flex items-center justify-center w-14 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-2/12 border-r border-mineshaft-600">
+                        <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'>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()))
+                        ?.filter((row) => row.key?.toUpperCase().includes(searchKeys.toUpperCase()) || row.tags?.map(tag => tag.name).join(" ")?.toUpperCase().includes(searchKeys.toUpperCase()))
                        .filter((row) => !sharedToHide.includes(row.id))
                        .map((keyPair) => (
                          <KeyPair
-                            key={keyPair.id}
+                            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 &&
@ -812,11 +918,14 @@ export default function Dashboard() {
                        )
                        .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
@ -824,11 +933,23 @@ export default function Dashboard() {
                            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 max-w-5xl px-2 pt-3">
+                    <div className="w-full px-2 pt-3">
                      <DropZone
                        setData={addData}
                        setErrorDragAndDrop={setErrorDragAndDrop}
@ -843,7 +964,7 @@ export default function Dashboard() {
                </div>
              </div>
            ) : (
-              <div className="flex flex-col items-center justify-center h-full text-xl text-gray-400 max-w-5xl mt-28">
+              <div className="flex flex-col items-center justify-center h-full text-xl text-gray-400 mt-28">
                {isKeyAvailable && !snapshotData && (
                  <DropZone
                    setData={setData}
@ -866,11 +987,38 @@ export default function Dashboard() {
            )}
          </div>
        </div>
+        {sidebarSecretId !== 'None' && (
+          <SideBar
+            toggleSidebar={toggleSidebar}
+            data={data.filter(
+              (row: SecretDataProps) =>
+                row.key === data.filter((r) => r.id === sidebarSecretId)[0]?.key
+            )}
+            modifyKey={listenChangeKey}
+            modifyValue={listenChangeValue}
+            modifyValueOverride={listenChangeValueOverride}
+            modifyComment={listenChangeComment}
+            buttonReady={buttonReady}
+            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">
-      <div className="absolute top-0 bg-bunker h-14 border-b border-mineshaft-700 w-full" />
      <Image src="/images/loading/loading.gif" height={70} width={120} alt="loading animation" />
    </div>
  );
--- a/frontend/src/pages/github.tsx
+++ b/frontend/src/pages/github.tsx
@ -1,41 +0,0 @@
-import { useEffect } from 'react';
-import { useRouter } from 'next/router';
-import queryString from 'query-string';
-
-import AuthorizeIntegration from './api/integrations/authorizeIntegration';
-
-export default function Github() {
-  const router = useRouter();
-  const parsedUrl = queryString.parse(router.asPath.split('?')[1]);
-  const {code} = parsedUrl;
-  const {state} = parsedUrl;
-
-  /**
-   * Here we forward to the default workspace if a user opens this url
-   */
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(() => {
-    (async () => {
-      try {
-        if (state === localStorage.getItem('latestCSRFToken')) {
-          localStorage.removeItem('latestCSRFToken');
-          await AuthorizeIntegration({
-            workspaceId: localStorage.getItem('projectData.id') as string,
-            code: code as string,
-            integration: 'github',
-          });
-          router.push(
-            `/integrations/${  localStorage.getItem('projectData.id')}`
-          );
-        }
-      } catch (error) {
-        console.error('Github integration error: ', error);
-      }
-    })();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return <div />;
-}
-
-Github.requireAuth = true;
--- a/frontend/src/pages/heroku.tsx
+++ b/frontend/src/pages/heroku.tsx
@ -1,41 +0,0 @@
-import { useEffect } from 'react';
-import { useRouter } from 'next/router';
-import queryString from 'query-string';
-
-import AuthorizeIntegration from './api/integrations/authorizeIntegration';
-
-export default function Heroku() {
-  const router = useRouter();
-  const parsedUrl = queryString.parse(router.asPath.split('?')[1]);
-  const {code} = parsedUrl;
-  const {state} = parsedUrl;
-
-  /**
-   * Here we forward to the default workspace if a user opens this url
-   */
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(() => {
-    (async () => {
-      try {
-        if (state === localStorage.getItem('latestCSRFToken')) {
-          localStorage.removeItem('latestCSRFToken');
-          await AuthorizeIntegration({
-            workspaceId: localStorage.getItem('projectData.id') as string,
-            code: code as string,
-            integration: 'heroku',
-          });
-          router.push(
-            `/integrations/${  localStorage.getItem('projectData.id')}`
-          );
-        }
-      } catch (error) {
-        console.error('Heroku integration error: ', error);
-      }
-    })();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return <div />;
-}
-
-Heroku.requireAuth = true;
--- a/frontend/src/pages/integrations/[id].tsx
+++ b/frontend/src/pages/integrations/[id].tsx
@ -7,7 +7,6 @@ import { useTranslation } from 'next-i18next';
 import frameworkIntegrationOptions from 'public/json/frameworkIntegrations.json';

 import ActivateBotDialog from '@app/components/basic/dialog/ActivateBotDialog';
-import IntegrationAccessTokenDialog from '@app/components/basic/dialog/IntegrationAccessTokenDialog';
 import CloudIntegrationSection from '@app/components/integrations/CloudIntegrationSection';
 import FrameworkIntegrationSection from '@app/components/integrations/FrameworkIntegrationSection';
 import IntegrationSection from '@app/components/integrations/IntegrationSection';
@ -20,12 +19,10 @@ import {
 } from '../../components/utilities/cryptography/crypto';
 import getBot from '../api/bot/getBot';
 import setBotActiveStatus from '../api/bot/setBotActiveStatus';
-import createIntegration from '../api/integrations/createIntegration';
 import deleteIntegration from '../api/integrations/DeleteIntegration';
 import getIntegrationOptions from '../api/integrations/GetIntegrationOptions';
 import getWorkspaceAuthorizations from '../api/integrations/getWorkspaceAuthorizations';
 import getWorkspaceIntegrations from '../api/integrations/getWorkspaceIntegrations';
-import saveIntegrationAccessToken from '../api/integrations/saveIntegrationAccessToken';
 import getAWorkspace from '../api/workspace/getAWorkspace';
 import getLatestFileKey from '../api/workspace/getLatestFileKey';

@ -52,6 +49,7 @@ interface Integration {
 }

 interface IntegrationOption {
+  tenantId?: string;
  clientId: string;
  clientSlug?: string; // vercel-integration specific
  docsLink: string;
@ -75,7 +73,6 @@ export default function Integrations() {
  // TODO: These will have its type when migratiing towards react-query
  const [bot, setBot] = useState<any>(null);
  const [isActivateBotDialogOpen, setIsActivateBotDialogOpen] = useState(false);
-  const [isIntegrationAccessTokenDialogOpen, setIntegrationAccessTokenDialogOpen] = useState(false);
  const [selectedIntegrationOption, setSelectedIntegrationOption] = useState<IntegrationOption | null>(null);

  const router = useRouter();
@ -166,80 +163,83 @@ export default function Integrations() {
    }
  };
  
-  /**
-   * Handle integration option authorization for a given integration option [integrationOption]
-   * @param {Object} obj
-   * @param {Object} obj.integrationOption - an integration option
-   * @param {String} obj.name
-   * @param {String} obj.type
-   * @param {String} obj.docsLink
-   * @returns
-   */
-  const handleIntegrationOption = async ({
-    integrationOption,
-    accessToken
-  }: { 
-    integrationOption: IntegrationOption,
-    accessToken?: string;
-  }) => {
+  const handleUnauthorizedIntegrationOptionPress = (integrationOption: IntegrationOption) => {
    try {
-      if (!bot.isActive) {
-        await handleBotActivate();
+      // generate CSRF token for OAuth2 code-token exchange integrations
+      const state = crypto.randomBytes(16).toString('hex');
+      localStorage.setItem('latestCSRFToken', state);
+
+      let link = '';
+      switch (integrationOption.slug) {
+        case 'azure-key-vault':
+          link = `https://login.microsoftonline.com/${integrationOption.tenantId}/oauth2/v2.0/authorize?client_id=${integrationOption.clientId}&response_type=code&redirect_uri=${window.location.origin}/integrations/azure-key-vault/oauth2/callback&response_mode=query&scope=https://vault.azure.net/.default openid offline_access&state=${state}`;
+          break;
+        case 'heroku':
+          link = `https://id.heroku.com/oauth/authorize?client_id=${integrationOption.clientId}&response_type=code&scope=write-protected&state=${state}`;
+          break;
+        case 'vercel':
+          link = `https://vercel.com/integrations/${integrationOption.clientSlug}/new?state=${state}`;
+          break;
+        case 'netlify':
+          link = `https://app.netlify.com/authorize?client_id=${integrationOption.clientId}&response_type=code&state=${state}&redirect_uri=${window.location.origin}/integrations/netlify/oauth2/callback`;
+          break;
+        case 'github':
+          link = `https://github.com/login/oauth/authorize?client_id=${integrationOption.clientId}&response_type=code&scope=repo&redirect_uri=${window.location.origin}/integrations/github/oauth2/callback&state=${state}`;
+          break;
+        case 'render':
+          link = `${window.location.origin}/integrations/render/authorize`
+          break;
+        case 'flyio':
+          link = `${window.location.origin}/integrations/flyio/authorize`
+          break;
+        default:
+          break;
      }
-      
-      if (integrationOption.type === 'oauth') {
-        // integration is of type OAuth

-        // generate CSRF token for OAuth2 code-token exchange integrations
-        const state = crypto.randomBytes(16).toString('hex');
-        localStorage.setItem('latestCSRFToken', state);
-
-        switch (integrationOption.slug) {
-          case 'heroku':
-            window.location.assign(
-              `https://id.heroku.com/oauth/authorize?client_id=${integrationOption.clientId}&response_type=code&scope=write-protected&state=${state}`
-            );
-            break;
-          case 'vercel':
-            window.location.assign(
-              `https://vercel.com/integrations/${integrationOption.clientSlug}/new?state=${state}`
-            );
-            break;
-          case 'netlify':
-            window.location.assign(
-              `https://app.netlify.com/authorize?client_id=${integrationOption.clientId}&response_type=code&state=${state}&redirect_uri=${window.location.origin}/netlify`
-            );
-            break;
-          case 'github':
-            window.location.assign(
-              `https://github.com/login/oauth/authorize?client_id=${integrationOption.clientId}&response_type=code&scope=repo&redirect_uri=${window.location.origin}/github&state=${state}`
-            );
-            break;
-          default:
-            break;
-        }
-        return;
-      } if (integrationOption.type === 'pat') {
-        // integration is of type personal access token
-        const integrationAuth = await saveIntegrationAccessToken({
-            workspaceId: localStorage.getItem('projectData.id'),
-            integration: integrationOption.slug,
-            accessToken: accessToken ?? ''
-        });
-
-        setIntegrationAuths([...integrationAuths, integrationAuth])
-
-        const integration = await createIntegration({
-          integrationAuthId: integrationAuth._id
-        });
-        
-        setIntegrations([...integrations, integration]); 
-        return;
+      if (link !== '') {
+        window.location.assign(link);
      }
    } catch (err) {
      console.error(err);
    }
-  };
+  }
+  
+  const handleAuthorizedIntegrationOptionPress = (integrationAuth: IntegrationAuth) => {
+    try {
+      let link = '';
+      switch (integrationAuth.integration) {
+        case 'azure-key-vault':
+          link = `${window.location.origin}/integrations/azure-key-vault/create?integrationAuthId=${integrationAuth._id}`;
+          break;
+        case 'heroku':
+          link = `${window.location.origin}/integrations/heroku/create?integrationAuthId=${integrationAuth._id}`;
+          break;
+        case 'vercel':
+          link = `${window.location.origin}/integrations/vercel/create?integrationAuthId=${integrationAuth._id}`;
+          break;
+        case 'netlify':
+          link = `${window.location.origin}/integrations/netlify/create?integrationAuthId=${integrationAuth._id}`;
+          break;
+        case 'github':
+          link = `${window.location.origin}/integrations/github/create?integrationAuthId=${integrationAuth._id}`;
+          break;
+        case 'render':
+          link = `${window.location.origin}/integrations/render/create?integrationAuthId=${integrationAuth._id}`;
+          break;
+        case 'flyio':
+          link = `${window.location.origin}/integrations/flyio/create?integrationAuthId=${integrationAuth._id}`;
+          break;
+        default:
+          break;
+      }
+
+      if (link !== '') {
+        window.location.assign(link);
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  }
  
  /**
   * Open dialog to activate bot if bot is not active.
@ -251,34 +251,20 @@ export default function Integrations() {
   * @returns
   */
  const integrationOptionPress = async (integrationOption: IntegrationOption) => {
-    // consider: don't start integration until at [handleIntegrationOption] step
    try {
      const integrationAuthX = integrationAuths.find((integrationAuth) => integrationAuth.integration === integrationOption.slug);
      
-      if (!integrationAuthX) {
-        // case: integration has not been authorized before
-        
-        if (integrationOption.type === 'pat') {
-          // case: integration requires user to input their personal access token for that integration
-          setIntegrationAccessTokenDialogOpen(true);
-          return;
-        }
-        
-        // case: integration does not require user to input their personal access token (i.e. it's an OAuth2 integration)
-        handleIntegrationOption({ integrationOption });
-        return;
-      }
-      
      if (!bot.isActive) {
        await handleBotActivate();
      }
      
-      // case: integration has been authorized before
-      // -> create new integration
-      const integration = await createIntegration({
-        integrationAuthId: integrationAuthX._id
-      });
-      setIntegrations([...integrations, integration]);
+      if (!integrationAuthX) {
+        // case: integration has not been authorized
+        handleUnauthorizedIntegrationOptionPress(integrationOption);
+        return;
+      }
+
+      handleAuthorizedIntegrationOptionPress(integrationAuthX);
    } catch (err) {
      console.error(err);
    }
@ -360,12 +346,6 @@ export default function Integrations() {
          selectedIntegrationOption={selectedIntegrationOption}
          integrationOptionPress={integrationOptionPress}
        />
-        <IntegrationAccessTokenDialog
-          isOpen={isIntegrationAccessTokenDialogOpen}
-          closeModal={() => setIntegrationAccessTokenDialogOpen(false)}
-          selectedIntegrationOption={selectedIntegrationOption}
-          handleIntegrationOption={handleIntegrationOption}
-        />
        <IntegrationSection 
          integrations={integrations} 
          setIntegrations={setIntegrations}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Maidul Islam	6115a311ad	Merge pull request #317 from Infisical/gen-example-env-command generate example .env file command	2023-02-08 18:51:23 -08:00
Maidul Islam	a685ac3e73	update regex to capature comment	2023-02-08 18:48:45 -08:00
Maidul Islam	9a22975732	When comments are empty, return empty byte	2023-02-08 17:29:35 -08:00
Vladyslav Matsiiako	cd0b2e3a26	Change default secret comments	2023-02-08 14:36:56 -08:00
Vladyslav Matsiiako	80a3c196ae	Fixed errors with undefined tags	2023-02-08 14:32:57 -08:00
Maidul Islam	b0c541f8dc	generate example .env file command	2023-02-08 13:46:57 -08:00
Tuan Dang	6188b04544	Switch azure integration off	2023-02-08 13:53:12 +07:00
Tuan Dang	8ba4f964d4	Switch Azure KV integration on	2023-02-08 13:42:49 +07:00
mv-turtle	0d2caddb12	Merge pull request #292 from HasanMansoor4/auto-capitalization-toggle Auto capitalization toggle for secrets	2023-02-07 21:55:05 -08:00
BlackMagiq	4570c35658	Merge pull request #313 from Infisical/debug-new-integrations Fix more encoding issues with integrations	2023-02-08 12:38:49 +07:00
Tuan Dang	72f7d81b80	Fix more encoding issues with integrations	2023-02-08 12:38:15 +07:00
mv-turtle	231fa61805	Merge branch 'main' into auto-capitalization-toggle	2023-02-07 21:32:29 -08:00
mv-turtle	9f74affd3a	Merge pull request #300 from kanhaiya38/feat/merge-env feat(ui): allow user to merge secrets while uploading file	2023-02-07 21:29:38 -08:00
Vladyslav Matsiiako	f58e1e1d6c	Minor style changes	2023-02-07 21:27:21 -08:00
mv-turtle	074cf695b2	Merge branch 'main' into feat/merge-env	2023-02-07 19:57:50 -08:00
Hasan Mansoor	65eb037020	Merge branch 'main' into auto-capitalization-toggle	2023-02-08 05:23:41 +03:00
mv-turtle	c84add0a2a	Merge pull request #312 from Infisical/secret-tagging Added tags to secrets in the dashboard	2023-02-07 16:57:01 -08:00
Vladyslav Matsiiako	ace0e9c56f	Fixed the bug of wrong data structure	2023-02-07 16:54:13 -08:00
Vladyslav Matsiiako	498705f330	Fixed the login error with tags	2023-02-07 16:47:05 -08:00
Vladyslav Matsiiako	7892624709	Added tags to secrets in the dashboard	2023-02-07 16:29:15 -08:00
Maidul Islam	d8889beaf7	mark gitlab as complete	2023-02-07 12:58:39 -08:00
Maidul Islam	6e67304e92	Update wording of k8	2023-02-07 12:54:09 -08:00
Maidul Islam	8b23e89a64	add k8 diagram	2023-02-07 12:38:58 -08:00
BlackMagiq	7611b999fe	Merge pull request #311 from Infisical/debug-new-integrations Patch encoding header issue for some integrations for getting their apps	2023-02-08 01:30:02 +07:00
Tuan Dang	aba8feb985	Patch encoding header issue for some integrations for getting their apps	2023-02-08 01:28:46 +07:00
BlackMagiq	747cc1134c	Merge pull request #310 from Infisical/refactor-integration-pages Refactor integration pages into separate steps for authorization and integration creation.	2023-02-07 23:29:42 +07:00
Tuan Dang	db05412865	Fix incorrect imports, build errors	2023-02-07 23:27:21 +07:00
Tuan Dang	679b1d9c23	Move existing integration authorization and creation into separate steps	2023-02-07 23:10:31 +07:00
Tuan Dang	5ea5887146	Begin refactoring all integrations to separate integration pages by step	2023-02-07 11:48:17 +07:00
BlackMagiq	13838861fb	Merge pull request #305 from Infisical/azure Finish v1 Azure Key Vault integration	2023-02-06 18:15:57 +07:00
BlackMagiq	09c60322db	Merge branch 'main' into azure	2023-02-06 18:15:44 +07:00
Tuan Dang	68bf0b9efe	Finish v1 Azure Key Vault integration	2023-02-06 17:57:47 +07:00
Hasan Mansoor	3ec68daf2e	Merge branch 'main' into auto-capitalization-toggle	2023-02-06 11:17:08 +03:00
mv-turtle	9fafe02e16	Merge branch 'main' into feat/merge-env	2023-02-05 23:16:19 -08:00
mv-turtle	56da34d343	Merge pull request #304 from Infisical/secret-tagging Revamped the dashboard look	2023-02-05 20:36:49 -08:00
Vladyslav Matsiiako	086dd621b5	Revamped the dashabord look	2023-02-05 20:29:27 -08:00
Maidul Islam	56a14925da	Add githlab to integ overview	2023-02-05 19:23:52 -08:00
Maidul Islam	c13cb23942	Add gitlab integ docs	2023-02-05 19:21:07 -08:00
Maidul Islam	31df4a26fa	Update cli docs to be more clear and consistent	2023-02-05 16:05:34 -08:00
Maidul Islam	9f9273bb02	Add tags support for secrets	2023-02-05 12:54:42 -08:00
Hasan Mansoor	86fd876850	change api from post to patch, fix spelling mistakes	2023-02-05 20:51:53 +03:00
Kanhaiya M	b56d9287e4	feat(ui): allow user to merge secrets while uploading file	2023-02-05 18:07:54 +05:30
Hasan Mansoor	a35e235744	remove console log	2023-02-05 06:25:40 +03:00
Hasan Mansoor	77a44b4490	Refactor into component and use React Query	2023-02-05 06:21:58 +03:00
Hasan Mansoor	594f846943	Merge remote-tracking branch 'origin/main' into auto-capitalization-toggle	2023-02-05 03:19:06 +03:00
mv-turtle	8ae43cdcf6	Merge pull request #296 from akhilmhdh/fix/ws-redirect feat(ui): removed workspace context redirect and added redirect when ws is deleted	2023-02-04 10:50:23 -08:00
Maidul Islam	1d72d310e5	Add offline support to faq	2023-02-04 08:48:01 -08:00
akhilmhdh	e72e6cf2b7	feat(ui): removed workspace context redirect and added redirect when project is deleted	2023-02-04 14:24:10 +05:30
mv-turtle	0ac40acc40	Merge pull request #295 from mocherfaoui/inf-compare-secrets add new modal to compare secrets across environments	2023-02-03 23:55:17 -08:00
Vladyslav Matsiiako	56710657bd	Minor styling updates	2023-02-03 23:49:03 -08:00
mv-turtle	92f4979715	Merge branch 'main' into inf-compare-secrets	2023-02-03 21:24:24 -08:00
Mohammed	16883cf168	make some params optional	2023-02-03 22:34:18 +01:00
Mohammed	1781b71399	add new modal to compare secrets across environments	2023-02-03 22:33:39 +01:00
Hasan Mansoor	75cd7a0f15	integrate frontend with backend for auto capitalization setting	2023-02-02 05:30:22 +03:00
Hasan Mansoor	4722bb8fcd	add auto capitalization api controllers and routes with mongo schema updated	2023-02-02 05:27:07 +03:00