diff --git a/frontend/components/basic/dialog/AddServiceTokenDialog.js b/frontend/components/basic/dialog/AddServiceTokenDialog.js
index f8300358f..b50108d62 100644
--- a/frontend/components/basic/dialog/AddServiceTokenDialog.js
+++ b/frontend/components/basic/dialog/AddServiceTokenDialog.js
@@ -15,13 +15,7 @@ import {
 import Button from "../buttons/Button";
 import InputField from "../InputField";
 import ListBox from "../Listbox";
-
-const envMapping = {
-  Development: "dev",
-  Staging: "staging",
-  Production: "prod",
-  Testing: "test",
-};
+import { envMapping } from "../../../public/data/frequentConstants";
 
 const expiryMapping = {
   "1 day": 86400,
diff --git a/frontend/components/basic/table/ServiceTokenTable.js b/frontend/components/basic/table/ServiceTokenTable.js
index 8018d3e1c..e6cd26221 100644
--- a/frontend/components/basic/table/ServiceTokenTable.js
+++ b/frontend/components/basic/table/ServiceTokenTable.js
@@ -4,15 +4,7 @@ import { faX } from "@fortawesome/free-solid-svg-icons";
 
 import guidGenerator from "../../utilities/randomId";
 import Button from "../buttons/Button";
-
-const roles = ["admin", "user"];
-
-const reverseEnvMapping = {
-  dev: "Development",
-  staging: "Staging",
-  prod: "Production",
-  test: "Testing",
-};
+import { reverseEnvMapping } from "../../../public/data/frequentConstants";
 
 /**
  * This is the component that we utilize for the user table - in future, can reuse it for some other purposes too.
diff --git a/frontend/components/utilities/secrets/getSecretsForProject.js b/frontend/components/utilities/secrets/getSecretsForProject.js
index ba502ccfd..814c1d442 100644
--- a/frontend/components/utilities/secrets/getSecretsForProject.js
+++ b/frontend/components/utilities/secrets/getSecretsForProject.js
@@ -1,6 +1,7 @@
 import getSecrets from "~/pages/api/files/GetSecrets";
 
 import guidGenerator from "../randomId";
+import { envMapping } from "../../../public/data/frequentConstants";
 
 const {
   decryptAssymmetric,
@@ -9,13 +10,6 @@ const {
 const nacl = require("tweetnacl");
 nacl.util = require("tweetnacl-util");
 
-const envMapping = {
-  Development: "dev",
-  Staging: "staging",
-  Production: "prod",
-  Testing: "test",
-};
-
 const getSecretsForProject = async ({
   env,
   setFileState,
diff --git a/frontend/components/utilities/secrets/pushKeys.js b/frontend/components/utilities/secrets/pushKeys.js
index 97ec31c06..1dfefe220 100644
--- a/frontend/components/utilities/secrets/pushKeys.js
+++ b/frontend/components/utilities/secrets/pushKeys.js
@@ -1,6 +1,7 @@
 import uploadSecrets from "~/pages/api/files/UploadSecrets";
 import getLatestFileKey from "~/pages/api/workspace/getLatestFileKey";
 import getWorkspaceKeys from "~/pages/api/workspace/getWorkspaceKeys";
+import { envMapping } from "../../../public/data/frequentConstants";
 
 const crypto = require("crypto");
 const {
@@ -12,12 +13,6 @@ const {
 const nacl = require("tweetnacl");
 nacl.util = require("tweetnacl-util");
 
-const envMapping = {
-  Development: "dev",
-  Staging: "staging",
-  Production: "prod",
-  Testing: "test",
-};
 
 const pushKeys = async (obj, workspaceId, env) => {
   let sharedKey = await getLatestFileKey(workspaceId);
diff --git a/frontend/pages/dashboard/[id].js b/frontend/pages/dashboard/[id].js
index 50a97b72e..b6e7c52b6 100644
--- a/frontend/pages/dashboard/[id].js
+++ b/frontend/pages/dashboard/[id].js
@@ -39,13 +39,7 @@ import getUser from "../api/user/getUser";
 import checkUserAction from "../api/userActions/checkUserAction";
 import registerUserAction from "../api/userActions/registerUserAction";
 import getWorkspaces from "../api/workspace/getWorkspaces";
-
-const envMapping = {
-  Development: "dev",
-  Staging: "staging",
-  Production: "prod",
-  Testing: "test",
-};
+import { envMapping } from "../../public/data/frequentConstants";
 
 /**
  * This component represent a single row for an environemnt variable on the dashboard
diff --git a/frontend/pages/integrations/[id].js b/frontend/pages/integrations/[id].js
index 3689c24ff..d39d4a975 100644
--- a/frontend/pages/integrations/[id].js
+++ b/frontend/pages/integrations/[id].js
@@ -24,23 +24,10 @@ import getIntegrations from "../api/integrations/GetIntegrations";
 import getWorkspaceAuthorizations from "../api/integrations/getWorkspaceAuthorizations";
 import getWorkspaceIntegrations from "../api/integrations/getWorkspaceIntegrations";
 import startIntegration from "../api/integrations/StartIntegration";
+import { envMapping, reverseEnvMapping, frameworks } from "../../public/data/frequentConstants";
 
 const crypto = require("crypto");
 
-const envMapping = {
-  Development: "dev",
-  Staging: "staging",
-  Production: "prod",
-  Testing: "test",
-};
-
-const reverseEnvMapping = {
-  dev: "Development",
-  staging: "Staging",
-  prod: "Production",
-  test: "Testing",
-};
-
 const Integration = ({ projectIntegration }) => {
   const [integrationEnvironment, setIntegrationEnvironment] = useState(
     reverseEnvMapping[projectIntegration.environment]
@@ -248,7 +235,7 @@ export default function Integrations() {
           )}
           <div className="flex flex-col justify-between items-start mx-4 mt-12 mb-4 text-xl max-w-5xl px-2">
             <div className="flex flex-row justify-start items-center text-3xl">
-              <p className="font-semibold mr-4">Available Integrations</p>
+              <p className="font-semibold mr-4">Platform & Cloud Integrations</p>
             </div>
             <p className="mr-4 text-base text-gray-400">
               Click on the itegration you want to connect. This will let your
@@ -265,7 +252,7 @@ export default function Integrations() {
               reach out support@infisical.com.
             </p>
           </div>
-          <div className="grid gap-4 grid-cols-3 grid-rows-3 mx-6 mt-4 max-w-5xl">
+          <div className="grid gap-4 grid-cols-4 grid-rows-2 mx-6 mt-4 max-w-5xl">
             {Object.keys(integrations).map((integration) => (
               <div
                 className={`relative ${
@@ -290,12 +277,12 @@ export default function Integrations() {
                 >
                   <Image
                     src={`/images/integrations/${integrations[integration].name}.png`}
-                    height={100}
-                    width={100}
+                    height={70}
+                    width={70}
                     alt="integration logo"
                   ></Image>
                   {integrations[integration].name.split(" ").length > 2 ? (
-                    <div className="font-semibold text-gray-300 group-hover:text-gray-200 duration-200 text-3xl ml-8 max-w-xs">
+                    <div className="font-semibold text-gray-300 group-hover:text-gray-200 duration-200 text-3xl ml-4 max-w-xs">
                       <div>{integrations[integration].name.split(" ")[0]}</div>
                       <div className="text-base">
                         {integrations[integration].name.split(" ")[1]}{" "}
@@ -303,7 +290,7 @@ export default function Integrations() {
                       </div>
                     </div>
                   ) : (
-                    <div className="font-semibold text-gray-300 group-hover:text-gray-200 duration-200 text-2xl ml-8 max-w-xs">
+                    <div className="font-semibold text-gray-300 group-hover:text-gray-200 duration-200 text-xl ml-4 max-w-xs">
                       {integrations[integration].name}
                     </div>
                   )}
@@ -353,6 +340,35 @@ export default function Integrations() {
               </div>
             ))}
           </div>
+          <div className="flex flex-col justify-between items-start mx-4 mt-12 mb-4 text-xl max-w-5xl px-2">
+            <div className="flex flex-row justify-start items-center text-3xl">
+              <p className="font-semibold mr-4">Framework Integrations</p>
+            </div>
+            <p className="mr-4 text-base text-gray-400">
+              Click on a framework to get the setup instructions.
+            </p>
+          </div><div className="grid gap-4 grid-cols-7 grid-rows-2 mx-6 mt-4 max-w-5xl">
+            {frameworks.map((framework) => (
+              <div key={framework.name}>
+                <a
+                  href={framework.link}
+                  rel="noopener"
+                  className={`relative flex flex-row items-center justify-center bg-bunker-500 hover:bg-gradient-to-tr hover:from-sky-400 hover:to-primary duration-200 h-32 rounded-md p-0.5 items-center cursor-pointer`}
+                >
+                  <div className={`font-semibold bg-bunker-500 flex flex-col items-center justify-center h-full w-full rounded-md text-gray-300 group-hover:text-gray-200 duration-200 ${framework?.name?.split(" ").length > 1 ? "text-sm px-1" : "text-xl px-2"} text-center w-full max-w-xs`}>
+                    {framework?.image && <Image
+                      src={`/images/integrations/${framework.image}.png`}
+                      height={framework?.name ? 60 : 90}
+                      width={framework?.name ? 60 : 90}
+                      alt="integration logo"
+                    ></Image>}
+                    {framework?.name && framework?.image && <div className="h-2"></div>}
+                    {framework?.name && framework.name}
+                  </div>
+                </a>
+              </div>
+            ))}
+          </div>
         </div>
       </div>
     </div>
diff --git a/frontend/public/data/frequentConstants.ts b/frontend/public/data/frequentConstants.ts
new file mode 100644
index 000000000..fbc0034d3
--- /dev/null
+++ b/frontend/public/data/frequentConstants.ts
@@ -0,0 +1,82 @@
+const envMapping = {
+  Development: "dev",
+  Staging: "staging",
+  Production: "prod",
+  Testing: "test",
+};
+  
+const reverseEnvMapping = {
+  dev: "Development",
+  staging: "Staging",
+  prod: "Production",
+  test: "Testing",
+};
+
+const frameworks = [{
+    "name": "Docker",
+    "image": "Docker",
+    "link": "https://infisical.com/docs/integrations/platforms/docker"
+  }, {
+    "name": "Docker Compose",
+    "image": "Docker Compose",
+    "link": "https://infisical.com/docs/integrations/platforms/docker-compose"
+  }, {
+    "name": "React",
+    "image": "React",
+    "link": "https://infisical.com/docs/integrations/frameworks/react"
+  }, {
+    "name": "Vue",
+    "image": "Vue",
+    "link": "https://infisical.com/docs/integrations/frameworks/vue"
+  }, {
+    "image": "Express",
+    "link": "https://infisical.com/docs/integrations/frameworks/express"
+  },{
+    "image": "Next.js",
+    "link": "https://infisical.com/docs/integrations/frameworks/nextjs"
+  }, {
+    "name": "Django",
+    "image": "Django",
+    "link": "https://infisical.com/docs/integrations/frameworks/django"
+  }, {
+    "name": "NestJS",
+    "image": "NestJS",
+    "link": "https://infisical.com/docs/integrations/frameworks/nestjs"
+  }, {
+    "name": "Nuxt",
+    "image": "Nuxt",
+    "link": "https://infisical.com/docs/integrations/frameworks/nuxt"
+  }, {
+    "name": "Gatsby",
+    "image": "Gatsby",
+    "link": "https://infisical.com/docs/integrations/frameworks/gatsby"
+  }, {
+    "name": "Remix",
+    "image": "Remix",
+    "link": "https://infisical.com/docs/integrations/frameworks/remix"
+  }, {
+    "name": "Vite",
+    "image": "Vite",
+    "link": "https://infisical.com/docs/integrations/frameworks/vite"
+  }, {
+    "image": "Fiber",
+    "link": "https://infisical.com/docs/integrations/frameworks/fiber"
+  }, {
+    "name": "Flask",
+    "image": "Flask",
+    "link": "https://infisical.com/docs/integrations/frameworks/flask"
+  }, {
+    "name": "Laravel",
+    "image": "Laravel",
+    "link": "https://infisical.com/docs/integrations/frameworks/laravel"
+  }, {
+    "image": "Rails",
+    "link": "https://infisical.com/docs/integrations/frameworks/rails"
+  }
+]
+
+export {
+  envMapping,
+  frameworks,
+  reverseEnvMapping
+};
diff --git a/frontend/public/images/integrations/Django.png b/frontend/public/images/integrations/Django.png
new file mode 100644
index 000000000..2994c8bc0
Binary files /dev/null and b/frontend/public/images/integrations/Django.png differ
diff --git a/frontend/public/images/integrations/Docker Compose.png b/frontend/public/images/integrations/Docker Compose.png
new file mode 100644
index 000000000..aa9f58112
Binary files /dev/null and b/frontend/public/images/integrations/Docker Compose.png differ
diff --git a/frontend/public/images/integrations/Docker.png b/frontend/public/images/integrations/Docker.png
new file mode 100644
index 000000000..5180a6ae4
Binary files /dev/null and b/frontend/public/images/integrations/Docker.png differ
diff --git a/frontend/public/images/integrations/Express.png b/frontend/public/images/integrations/Express.png
new file mode 100644
index 000000000..87571cbfb
Binary files /dev/null and b/frontend/public/images/integrations/Express.png differ
diff --git a/frontend/public/images/integrations/Fiber.png b/frontend/public/images/integrations/Fiber.png
new file mode 100644
index 000000000..6f856be7b
Binary files /dev/null and b/frontend/public/images/integrations/Fiber.png differ
diff --git a/frontend/public/images/integrations/Flask.png b/frontend/public/images/integrations/Flask.png
new file mode 100644
index 000000000..31a69e832
Binary files /dev/null and b/frontend/public/images/integrations/Flask.png differ
diff --git a/frontend/public/images/integrations/Gatsby.png b/frontend/public/images/integrations/Gatsby.png
new file mode 100644
index 000000000..10dff2aa1
Binary files /dev/null and b/frontend/public/images/integrations/Gatsby.png differ
diff --git a/frontend/public/images/integrations/Laravel.png b/frontend/public/images/integrations/Laravel.png
new file mode 100644
index 000000000..41a6686d4
Binary files /dev/null and b/frontend/public/images/integrations/Laravel.png differ
diff --git a/frontend/public/images/integrations/NestJS.png b/frontend/public/images/integrations/NestJS.png
new file mode 100644
index 000000000..d7b6d349e
Binary files /dev/null and b/frontend/public/images/integrations/NestJS.png differ
diff --git a/frontend/public/images/integrations/Next.js.png b/frontend/public/images/integrations/Next.js.png
new file mode 100644
index 000000000..94296b178
Binary files /dev/null and b/frontend/public/images/integrations/Next.js.png differ
diff --git a/frontend/public/images/integrations/Nuxt.png b/frontend/public/images/integrations/Nuxt.png
new file mode 100644
index 000000000..9b8f0f342
Binary files /dev/null and b/frontend/public/images/integrations/Nuxt.png differ
diff --git a/frontend/public/images/integrations/Rails.png b/frontend/public/images/integrations/Rails.png
new file mode 100644
index 000000000..7b3eb1011
Binary files /dev/null and b/frontend/public/images/integrations/Rails.png differ
diff --git a/frontend/public/images/integrations/React.png b/frontend/public/images/integrations/React.png
new file mode 100644
index 000000000..1a48b7d0d
Binary files /dev/null and b/frontend/public/images/integrations/React.png differ
diff --git a/frontend/public/images/integrations/Remix.png b/frontend/public/images/integrations/Remix.png
new file mode 100644
index 000000000..e46c7ab41
Binary files /dev/null and b/frontend/public/images/integrations/Remix.png differ
diff --git a/frontend/public/images/integrations/Vite.png b/frontend/public/images/integrations/Vite.png
new file mode 100644
index 000000000..394614b0f
Binary files /dev/null and b/frontend/public/images/integrations/Vite.png differ
diff --git a/frontend/public/images/integrations/Vue.png b/frontend/public/images/integrations/Vue.png
new file mode 100644
index 000000000..1f299e476
Binary files /dev/null and b/frontend/public/images/integrations/Vue.png differ