diff --git a/app/api/environment-variables/[id]/route.ts b/app/api/environment-variables/[id]/route.ts
new file mode 100644
index 00000000..a4243748
--- /dev/null
+++ b/app/api/environment-variables/[id]/route.ts
@@ -0,0 +1,124 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { requireUserAbility } from '~/auth/session';
+import { prisma } from '~/lib/prisma';
+import { deleteEnvironmentVariable, updateEnvironmentVariable } from '~/lib/services/environmentVariablesService';
+import { logger } from '~/utils/logger';
+import { PermissionAction, PermissionResource } from '@prisma/client';
+
+export async function PUT(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  try {
+    const { userAbility } = await requireUserAbility(request);
+
+    const { id } = await params;
+
+    if (!userAbility.can(PermissionAction.update, PermissionResource.EnvironmentVariable)) {
+      return NextResponse.json({ success: false, error: 'Forbidden' }, { status: 403 });
+    }
+
+    const body = (await request.json()) as {
+      key: string;
+      environmentId: string;
+      value: string;
+      type: string;
+      description?: string;
+    };
+
+    const { key, environmentId, value, type, description } = body;
+
+    if (!key || !value || !type) {
+      return NextResponse.json({ success: false, error: 'Missing required fields: key, value, type' }, { status: 400 });
+    }
+
+    // Check if user has access to this environment variable
+    const envVar = await prisma.environmentVariable.findUnique({
+      where: { id },
+      include: {
+        environment: true,
+      },
+    });
+
+    if (!envVar) {
+      return NextResponse.json({ success: false, error: 'Environment variable not found' }, { status: 404 });
+    }
+
+    if (!userAbility.can(PermissionAction.read, PermissionResource.Environment)) {
+      return NextResponse.json(
+        { success: false, error: 'Access denied to this environment variable' },
+        { status: 403 },
+      );
+    }
+
+    // Check if key already exists for this environment (excluding current env var)
+    const existingEnvVar = await prisma.environmentVariable.findFirst({
+      where: {
+        key,
+        environmentId: environmentId || envVar.environmentId,
+        id: { not: id },
+      },
+    });
+
+    if (existingEnvVar) {
+      return NextResponse.json(
+        { success: false, error: 'Environment variable with this key already exists' },
+        { status: 409 },
+      );
+    }
+
+    const updatedEnvironmentVariable = await updateEnvironmentVariable(
+      id,
+      key,
+      value,
+      type as any, // Type will be validated by the service
+      environmentId || envVar.environmentId,
+      description,
+    );
+
+    return NextResponse.json({
+      success: true,
+      environmentVariable: updatedEnvironmentVariable,
+    });
+  } catch (error) {
+    logger.error('Failed to update environment variable:', error);
+    return NextResponse.json({ success: false, error: 'Failed to update environment variable' }, { status: 500 });
+  }
+}
+
+export async function DELETE(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  try {
+    const { userAbility } = await requireUserAbility(request);
+
+    const { id } = await params;
+
+    if (!userAbility.can(PermissionAction.delete, PermissionResource.EnvironmentVariable)) {
+      return NextResponse.json({ success: false, error: 'Forbidden' }, { status: 403 });
+    }
+
+    // Check if user has access to this environment variable
+    const envVar = await prisma.environmentVariable.findUnique({
+      where: { id },
+      include: {
+        environment: true,
+      },
+    });
+
+    if (!envVar) {
+      return NextResponse.json({ success: false, error: 'Environment variable not found' }, { status: 404 });
+    }
+
+    if (!userAbility.can(PermissionAction.read, PermissionResource.Environment)) {
+      return NextResponse.json(
+        { success: false, error: 'Access denied to this environment variable' },
+        { status: 403 },
+      );
+    }
+
+    await deleteEnvironmentVariable(id);
+
+    return NextResponse.json({
+      success: true,
+    });
+  } catch (error) {
+    logger.error('Failed to delete environment variable:', error);
+    return NextResponse.json({ success: false, error: 'Failed to delete environment variable' }, { status: 500 });
+  }
+}
diff --git a/app/api/environment-variables/route.ts b/app/api/environment-variables/route.ts
new file mode 100644
index 00000000..4eba60fb
--- /dev/null
+++ b/app/api/environment-variables/route.ts
@@ -0,0 +1,102 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { requireUserAbility } from '~/auth/session';
+import {
+  createEnvironmentVariable,
+  getEnvironmentVariablesWithEnvironmentDetails,
+} from '~/lib/services/environmentVariablesService';
+import { logger } from '~/utils/logger';
+import { type EnvironmentVariableType, PermissionAction, PermissionResource } from '@prisma/client';
+import { z } from 'zod';
+
+const postBodySchema = z.object({
+  key: z.string().min(1),
+  value: z.string().min(1),
+  type: z.enum(['GLOBAL', 'DATA_SOURCE']),
+  environmentId: z.string().min(1),
+  description: z.string().optional(),
+});
+
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const environmentId = searchParams.get('environmentId');
+    const type = searchParams.get('type') as EnvironmentVariableType | null;
+
+    // Check if user has permission to read environment variables
+    const { userAbility } = await requireUserAbility(request);
+
+    if (!userAbility.can(PermissionAction.read, PermissionResource.EnvironmentVariable)) {
+      return NextResponse.json(
+        { success: false, error: 'Insufficient permissions to read environment variables' },
+        { status: 403 },
+      );
+    }
+
+    if (!environmentId) {
+      return NextResponse.json({ success: false, error: 'Environment ID is required' }, { status: 400 });
+    }
+
+    const environmentVariables = await getEnvironmentVariablesWithEnvironmentDetails(environmentId, type);
+
+    return NextResponse.json({
+      success: true,
+      environmentVariables,
+    });
+  } catch (error) {
+    logger.error('Failed to fetch environment variables:', error);
+    return NextResponse.json({ success: false, error: 'Failed to fetch environment variables' }, { status: 500 });
+  }
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const { userId, userAbility } = await requireUserAbility(request);
+
+    if (!userAbility.can(PermissionAction.create, PermissionResource.EnvironmentVariable)) {
+      return NextResponse.json({ success: false, error: 'Forbidden' }, { status: 403 });
+    }
+
+    const body = postBodySchema.parse(await request.json());
+
+    const { key, value, type, environmentId, description } = body;
+
+    // Check if user has access to this environment
+    if (!userAbility.can(PermissionAction.read, PermissionResource.Environment)) {
+      return NextResponse.json({ success: false, error: 'Access denied to this environment' }, { status: 403 });
+    }
+
+    // Check if environment variable with this key already exists
+    const existingEnvVar = await prisma.environmentVariable.findUnique({
+      where: {
+        key_environmentId: {
+          key,
+          environmentId,
+        },
+      },
+    });
+
+    if (existingEnvVar) {
+      return NextResponse.json(
+        { success: false, error: 'Environment variable with this key already exists' },
+        { status: 409 },
+      );
+    }
+
+    const environmentVariable = await createEnvironmentVariable(
+      key,
+      value,
+      type as EnvironmentVariableType,
+      environmentId,
+      userId,
+      description,
+    );
+
+    return NextResponse.json({
+      success: true,
+      environmentVariable,
+    });
+  } catch (error) {
+    logger.error('Failed to create environment variable:', error);
+    return NextResponse.json({ success: false, error: 'Failed to create environment variable' }, { status: 500 });
+  }
+}
diff --git a/app/components/@settings/core/ControlPanel.tsx b/app/components/@settings/core/ControlPanel.tsx
index 1e698ea7..6827b01a 100644
--- a/app/components/@settings/core/ControlPanel.tsx
+++ b/app/components/@settings/core/ControlPanel.tsx
@@ -24,6 +24,7 @@ import { AbilityContext } from '~/components/ability/AbilityProvider';
 import MembersTab from '~/components/@settings/tabs/users/UsersTab';
 import RolesTab from '~/components/@settings/tabs/roles/RolesTab';
 import EnvironmentsTab from '~/components/@settings/tabs/environments';
+import SecretsManagerTab from '~/components/@settings/tabs/secrets-manager';
 
 const LAST_ACCESSED_TAB_KEY = 'control-panel-last-tab';
 
@@ -167,6 +168,8 @@ export const ControlPanel = () => {
         return <DataTab />;
       case 'environments':
         return <EnvironmentsTab />;
+      case 'secrets-manager':
+        return <SecretsManagerTab />;
       case 'deployed-apps':
         return <DeployedAppsTab />;
       case 'github':
diff --git a/app/components/@settings/core/constants.ts b/app/components/@settings/core/constants.ts
index 0eff87df..8af81caf 100644
--- a/app/components/@settings/core/constants.ts
+++ b/app/components/@settings/core/constants.ts
@@ -1,5 +1,5 @@
 import type { TabType, TabVisibilityConfig } from './types';
-import { Database, GitBranch, type LucideIcon, Rocket, Users, Server, ShieldUser } from 'lucide-react';
+import { Database, GitBranch, type LucideIcon, Rocket, Users, Server, ShieldUser, Lock } from 'lucide-react';
 
 export const TAB_ICONS: Record<TabType, string | LucideIcon> = {
   data: Database,
@@ -8,6 +8,7 @@ export const TAB_ICONS: Record<TabType, string | LucideIcon> = {
   members: Users,
   roles: ShieldUser,
   environments: Server,
+  'secrets-manager': Lock,
 };
 
 export const TAB_LABELS: Record<TabType, string> = {
@@ -17,6 +18,7 @@ export const TAB_LABELS: Record<TabType, string> = {
   members: 'Members',
   roles: 'Roles',
   environments: 'Environments',
+  'secrets-manager': 'Secrets Manager',
 };
 
 export const TAB_DESCRIPTIONS: Record<TabType, string> = {
@@ -26,13 +28,15 @@ export const TAB_DESCRIPTIONS: Record<TabType, string> = {
   members: 'Manage your members',
   roles: 'Manage roles and permissions for users',
   environments: 'Manage your environments',
+  'secrets-manager': 'Manage environment variables and secrets',
 };
 
 export const DEFAULT_TAB_CONFIG: TabVisibilityConfig[] = [
   { id: 'data', visible: true, window: 'user', order: 0 },
   { id: 'environments', visible: true, window: 'user', order: 1 },
-  { id: 'github', visible: true, window: 'user', order: 2 },
-  { id: 'deployed-apps', visible: true, window: 'user', order: 3 },
+  { id: 'secrets-manager', visible: true, window: 'user', order: 2 },
+  { id: 'github', visible: true, window: 'user', order: 3 },
+  { id: 'deployed-apps', visible: true, window: 'user', order: 4 },
 
   { id: 'members', visible: true, window: 'admin', order: 1 },
   { id: 'roles', visible: true, window: 'admin', order: 2 },
diff --git a/app/components/@settings/core/types.ts b/app/components/@settings/core/types.ts
index 69e0bbcc..f88e6dbb 100644
--- a/app/components/@settings/core/types.ts
+++ b/app/components/@settings/core/types.ts
@@ -1,4 +1,4 @@
-export type TabType = 'data' | 'github' | 'deployed-apps' | 'members' | 'roles' | 'environments';
+export type TabType = 'data' | 'github' | 'deployed-apps' | 'members' | 'roles' | 'environments' | 'secrets-manager';
 
 export type WindowType = 'user' | 'admin';
 
@@ -31,4 +31,5 @@ export const TAB_LABELS: Record<TabType, string> = {
   members: 'Members',
   roles: 'Roles',
   environments: 'Environments',
+  'secrets-manager': 'Secrets Manager',
 };
diff --git a/app/components/@settings/tabs/data/forms/EditDataSourceForm.tsx b/app/components/@settings/tabs/data/forms/EditDataSourceForm.tsx
index 562de7d9..25f0c191 100644
--- a/app/components/@settings/tabs/data/forms/EditDataSourceForm.tsx
+++ b/app/components/@settings/tabs/data/forms/EditDataSourceForm.tsx
@@ -1,11 +1,10 @@
 import { classNames } from '~/utils/classNames';
 import { useEffect, useState } from 'react';
-import { AlertTriangle, CheckCircle, Info, Loader2, Plug, Save, Trash2, XCircle } from 'lucide-react';
+import { AlertTriangle, CheckCircle, Eye, EyeOff, Info, Loader2, Plug, Save, Trash2, XCircle } from 'lucide-react';
 import type { TestConnectionResponse } from '~/components/@settings/tabs/data/DataTab';
 import { toast } from 'sonner';
 import { BaseSelect } from '~/components/ui/Select';
 import { SelectDatabaseTypeOptions, SingleValueWithTooltip } from '~/components/database/SelectDatabaseTypeOptions';
-import { Eye, EyeSlash } from 'iconsax-reactjs';
 import {
   type DataSourceOption,
   DEFAULT_DATA_SOURCES,
@@ -364,7 +363,11 @@ export default function EditDataSourceForm({
                     tabIndex={-1}
                   >
                     <span className="text-gray-400 group-hover:text-white transition-colors">
-                      {showConnStr ? <EyeSlash variant="Bold" size={20} /> : <Eye variant="Bold" size={20} />}
+                      {showConnStr ? (
+                        <EyeOff className="w-4 h-4 text-gray-400" />
+                      ) : (
+                        <Eye className="w-4 h-4 text-gray-400" />
+                      )}
                     </span>
                   </button>
                 </div>
diff --git a/app/components/@settings/tabs/secrets-manager/SecretsManagerTab.tsx b/app/components/@settings/tabs/secrets-manager/SecretsManagerTab.tsx
new file mode 100644
index 00000000..0c8baa6c
--- /dev/null
+++ b/app/components/@settings/tabs/secrets-manager/SecretsManagerTab.tsx
@@ -0,0 +1,323 @@
+import { useEffect, useState } from 'react';
+import { ArrowLeft, ChevronRight, Lock, Plus } from 'lucide-react';
+import AddSecretForm from './forms/AddSecretForm';
+import EditSecretForm from './forms/EditSecretForm';
+import { classNames } from '~/utils/classNames';
+import { toast } from 'sonner';
+import type { EnvironmentVariableWithDetails } from '~/lib/stores/environmentVariables';
+import { useEnvironmentVariablesStore } from '~/lib/stores/environmentVariables';
+import { useEnvironmentsStore } from '~/lib/stores/environments';
+import { settingsPanelStore, useSettingsStore } from '~/lib/stores/settings';
+import { useStore } from '@nanostores/react';
+import type { EnvironmentWithRelations } from '~/lib/services/environmentService';
+import { BaseSelect } from '~/components/ui/Select';
+import { logger } from '~/utils/logger';
+import { EnvironmentVariableType } from '@prisma/client';
+
+interface EnvironmentVariablesResponse {
+  success: boolean;
+  environmentVariables: EnvironmentVariableWithDetails[];
+}
+
+interface EnvironmentsResponse {
+  success: boolean;
+  environments: EnvironmentWithRelations[];
+}
+
+interface EnvironmentOption {
+  label: string;
+  value: string;
+  description?: string;
+}
+
+export default function SecretsManagerTab() {
+  const { showAddForm } = useStore(settingsPanelStore);
+  const [showAddFormLocal, setShowAddFormLocal] = useState(showAddForm);
+  const [showEditForm, setShowEditForm] = useState(false);
+  const [selectedEnvironmentVariable, setSelectedEnvironmentVariable] = useState<EnvironmentVariableWithDetails | null>(
+    null,
+  );
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [selectedEnvironmentId, setSelectedEnvironmentId] = useState<string>('');
+  const [environmentOptions, setEnvironmentOptions] = useState<EnvironmentOption[]>([]);
+  const [isLoadingEnvironments, setIsLoadingEnvironments] = useState(true);
+  const { environmentVariables, setEnvironmentVariables, setLoading } = useEnvironmentVariablesStore();
+  const { environments, setEnvironments } = useEnvironmentsStore();
+  const { selectedTab } = useSettingsStore();
+
+  // Update local state when store changes
+  useEffect(() => {
+    setShowAddFormLocal(showAddForm);
+  }, [showAddForm]);
+
+  // Show add form when opened from chat
+  useEffect(() => {
+    if (selectedTab === 'secrets-manager') {
+      setShowAddFormLocal(true);
+    }
+  }, [selectedTab]);
+
+  // Load environments on mount
+  useEffect(() => {
+    const loadEnvironments = async () => {
+      try {
+        setIsLoadingEnvironments(true);
+
+        const response = await fetch('/api/environments');
+        const data = (await response.json()) as EnvironmentsResponse;
+
+        if (data.success) {
+          setEnvironments(data.environments);
+
+          // Transform environments to options
+          const options: EnvironmentOption[] = [
+            { label: 'All Environments', value: 'all', description: 'Global secrets from all environments' },
+            ...data.environments.map((env) => ({
+              label: env.name,
+              value: env.id,
+              description: env.description || undefined,
+            })),
+          ];
+          setEnvironmentOptions(options);
+
+          // Set "All" as default if environments are available
+          if (data.environments.length > 0) {
+            setSelectedEnvironmentId('all');
+          }
+        }
+      } catch (error) {
+        logger.error('Failed to load environments:', error);
+        toast.error('Failed to load environments');
+      } finally {
+        setIsLoadingEnvironments(false);
+      }
+    };
+
+    loadEnvironments();
+  }, [setEnvironments]);
+
+  const fetchEnvironmentVariables = async (showLoading = false) => {
+    if (!selectedEnvironmentId) {
+      return;
+    }
+
+    try {
+      if (showLoading) {
+        setLoading(true);
+      }
+
+      // We only show the GLOBAL environment variables (without the DATA_SOURCE environment variables)
+      const response = await fetch(
+        `/api/environment-variables?environmentId=${selectedEnvironmentId}&type=${EnvironmentVariableType.GLOBAL}`,
+      );
+      const data = (await response.json()) as EnvironmentVariablesResponse;
+
+      if (data.success) {
+        setEnvironmentVariables(data.environmentVariables);
+      }
+    } catch (error) {
+      logger.error('Failed to load environment variables:', error);
+      toast.error('Failed to load environment variables');
+    } finally {
+      if (showLoading) {
+        setLoading(false);
+      }
+    }
+  };
+
+  // Load environment variables when environment changes
+  useEffect(() => {
+    if (!selectedEnvironmentId) {
+      return;
+    }
+
+    fetchEnvironmentVariables(true);
+  }, [selectedEnvironmentId, setEnvironmentVariables, setLoading]);
+
+  const handleEnvironmentChange = (environmentId: string) => {
+    setSelectedEnvironmentId(environmentId);
+  };
+
+  const handleBack = () => {
+    setShowAddFormLocal(false);
+    setShowEditForm(false);
+    setSelectedEnvironmentVariable(null);
+  };
+
+  const handleAdd = () => {
+    setShowAddFormLocal(true);
+    setShowEditForm(false);
+    setSelectedEnvironmentVariable(null);
+  };
+
+  return (
+    <div className="space-y-6">
+      {!showEditForm && !showAddFormLocal && (
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <h2 className="text-lg font-medium text-primary">Secrets Manager</h2>
+              <p className="text-sm text-secondary">Manage your environment secrets</p>
+            </div>
+            <button
+              onClick={handleAdd}
+              className={classNames(
+                'inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
+                'bg-accent-500 hover:bg-accent-600',
+                'text-gray-950 dark:text-gray-950',
+              )}
+            >
+              <Plus className="w-4 h-4" />
+              <span>Add Secret</span>
+            </button>
+          </div>
+
+          {/* Environment Selector */}
+          {environmentOptions.length > 0 && (
+            <div className="mb-6">
+              <label className="mb-3 block text-sm font-medium text-secondary">Environment</label>
+              <BaseSelect
+                value={environmentOptions.find((opt) => opt.value === selectedEnvironmentId) || null}
+                onChange={(value: EnvironmentOption | null) => {
+                  if (value) {
+                    handleEnvironmentChange(value.value);
+                  }
+                }}
+                options={environmentOptions}
+                placeholder={isLoadingEnvironments ? 'Loading environments...' : 'Select environment'}
+                isDisabled={isLoadingEnvironments}
+                width="100%"
+                minWidth="100%"
+                isSearchable={false}
+                menuPlacement={'bottom'}
+              />
+              {environmentOptions.find((opt) => opt.value === selectedEnvironmentId)?.description && (
+                <div className="text-gray-400 text-sm mt-2">
+                  {environmentOptions.find((opt) => opt.value === selectedEnvironmentId)?.description}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+
+      {showAddFormLocal && (
+        <div className="space-y-6">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-4">
+              <button
+                onClick={handleBack}
+                className={classNames(
+                  'inline-flex items-center gap-2 p-2 text-sm font-medium rounded-lg transition-colors',
+                  'dark:bg-gray-900 dark:text-gray-300',
+                  'hover:bg-gray-100 dark:hover:bg-gray-800',
+                )}
+              >
+                <ArrowLeft className="w-4 h-4" />
+              </button>
+              <div>
+                <h2 className="text-lg font-medium text-primary">Create Secret</h2>
+                <p className="text-sm text-secondary">Add a new environment secret</p>
+              </div>
+            </div>
+          </div>
+          <AddSecretForm
+            isSubmitting={isSubmitting}
+            setIsSubmitting={setIsSubmitting}
+            onSuccess={async () => {
+              await fetchEnvironmentVariables();
+              handleBack();
+            }}
+            selectedEnvironmentId={selectedEnvironmentId === 'all' ? environments[0].id : selectedEnvironmentId}
+            availableEnvironments={environments}
+          />
+        </div>
+      )}
+
+      {/* Edit Form */}
+      {showEditForm && selectedEnvironmentVariable && (
+        <div className="space-y-6">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-4">
+              <button
+                onClick={() => {
+                  setShowEditForm(false);
+                  setSelectedEnvironmentVariable(null);
+                }}
+                className={classNames(
+                  'inline-flex items-center gap-2 p-2 text-sm font-medium rounded-lg transition-colors',
+                  'dark:bg-gray-900 dark:text-gray-300',
+                  'hover:bg-gray-100 dark:hover:bg-gray-800',
+                )}
+              >
+                <ArrowLeft className="w-4 h-4" />
+              </button>
+              <div>
+                <h2 className="text-lg font-medium text-primary">Edit Secret</h2>
+                <p className="text-sm text-secondary">Update the environment secret</p>
+              </div>
+            </div>
+          </div>
+
+          <EditSecretForm
+            environmentVariable={selectedEnvironmentVariable}
+            isSubmitting={isSubmitting}
+            setIsSubmitting={setIsSubmitting}
+            availableEnvironments={environments}
+            onSuccess={async () => {
+              await fetchEnvironmentVariables();
+              setShowEditForm(false);
+              setSelectedEnvironmentVariable(null);
+            }}
+            onDelete={async () => {
+              await fetchEnvironmentVariables();
+              setShowEditForm(false);
+              setSelectedEnvironmentVariable(null);
+            }}
+          />
+        </div>
+      )}
+
+      {!showEditForm && !showAddFormLocal && (
+        <div className="space-y-4">
+          {/* Environment Variables List */}
+          {environmentVariables.length > 0 ? (
+            <div className="space-y-2">
+              {environmentVariables.map((environmentVariable) => (
+                <div
+                  key={environmentVariable.id}
+                  className="flex items-center justify-between p-3 border-b border-gray-200 dark:border-gray-700 transition-colors cursor-pointer"
+                  onClick={() => {
+                    setSelectedEnvironmentVariable(environmentVariable);
+                    setShowEditForm(true);
+                  }}
+                >
+                  <div className="flex items-center gap-3">
+                    <div>
+                      <div className="font-medium text-gray-900 dark:text-white">{environmentVariable.key}</div>
+                      <div className="text-sm text-gray-500 dark:text-gray-400">
+                        {environmentVariable.environment.name}
+                        {environmentVariable.type === 'DATA_SOURCE' && (
+                          <span className="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
+                            Data Source
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                  <ChevronRight className="w-4 h-4 text-gray-400" />
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="text-center py-12">
+              <Lock className="w-12 h-12 text-gray-400 mx-auto mb-4" />
+              <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">No secrets found</h3>
+              <p className="text-gray-500 dark:text-gray-400 mb-4">No secrets have been created yet</p>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/app/components/@settings/tabs/secrets-manager/forms/AddSecretForm.tsx b/app/components/@settings/tabs/secrets-manager/forms/AddSecretForm.tsx
new file mode 100644
index 00000000..411b52c3
--- /dev/null
+++ b/app/components/@settings/tabs/secrets-manager/forms/AddSecretForm.tsx
@@ -0,0 +1,210 @@
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { Eye, EyeOff, Lock } from 'lucide-react';
+import { classNames } from '~/utils/classNames';
+import { toast } from 'sonner';
+import { EnvironmentVariableType } from '@prisma/client';
+
+interface AddSecretFormProps {
+  isSubmitting: boolean;
+  setIsSubmitting: (isSubmitting: boolean) => void;
+  onSuccess: () => void;
+  selectedEnvironmentId: string;
+  showEnvironmentSelector?: boolean;
+  availableEnvironments?: Array<{ id: string; name: string }>;
+}
+
+export default function AddSecretForm({
+  isSubmitting,
+  setIsSubmitting,
+  onSuccess,
+  selectedEnvironmentId,
+  availableEnvironments = [],
+}: AddSecretFormProps) {
+  const [key, setKey] = useState('');
+  const [value, setValue] = useState('');
+  const [description, setDescription] = useState('');
+  const [showValue, setShowValue] = useState(false);
+  const [environmentId, setEnvironmentId] = useState(selectedEnvironmentId);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!key.trim() || !value.trim() || !environmentId) {
+      toast.error('Please fill in all required fields');
+      return;
+    }
+
+    // Validate a key format (alphanumeric and underscores only)
+    if (!/^[A-Z0-9_]+$/.test(key.trim())) {
+      toast.error('Secret key can only contain uppercase letters, numbers, and underscores');
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      const response = await fetch('/api/environment-variables', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          key: key.trim().toUpperCase(),
+          value: value.trim(),
+          type: EnvironmentVariableType.GLOBAL,
+          environmentId,
+          description: description.trim() || undefined,
+        }),
+      });
+
+      const data = (await response.json()) as { success: boolean; error?: string; environmentVariable?: any };
+
+      if (data.success) {
+        toast.success('Secret created successfully');
+        onSuccess();
+      } else {
+        toast.error(data.error || 'Failed to create secret');
+      }
+    } catch (error) {
+      console.error('Failed to create secret:', error);
+      toast.error('Failed to create secret');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const toggleShowValue = () => {
+    setShowValue(!showValue);
+  };
+
+  return (
+    <motion.form
+      onSubmit={handleSubmit}
+      className="space-y-6"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.2 }}
+    >
+      {/* Environment */}
+      <div className="space-y-2">
+        <label htmlFor="environment" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+          Environment <span className="text-red-500">*</span>
+        </label>
+        <select
+          id="environment"
+          value={environmentId}
+          onChange={(e) => setEnvironmentId(e.target.value)}
+          className={classNames(
+            'w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg',
+            'bg-white dark:bg-gray-800 text-gray-900 dark:text-white',
+            'focus:ring-2 focus:ring-accent-500 focus:border-transparent',
+          )}
+          required
+        >
+          {availableEnvironments.map((env) => (
+            <option key={env.id} value={env.id}>
+              {env.name}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {/* Key */}
+      <div className="space-y-2">
+        <label htmlFor="key" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+          Key <span className="text-red-500">*</span>
+        </label>
+        <input
+          type="text"
+          id="key"
+          value={key}
+          onChange={(e) => setKey(e.target.value)}
+          placeholder="MY_SECRET_KEY"
+          className={classNames(
+            'w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg',
+            'bg-white dark:bg-gray-800 text-gray-900 dark:text-white',
+            'focus:ring-2 focus:ring-accent-500 focus:border-transparent',
+            'placeholder-gray-500 dark:placeholder-gray-400',
+          )}
+          required
+        />
+        <p className="text-xs text-gray-500 dark:text-gray-400">Use uppercase letters, numbers, and underscores only</p>
+      </div>
+
+      {/* Value */}
+      <div className="space-y-2">
+        <label htmlFor="value" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+          Value <span className="text-red-500">*</span>
+        </label>
+        <div className="relative">
+          <input
+            type={showValue ? 'text' : 'password'}
+            id="value"
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            placeholder="Enter your secret value"
+            className={classNames(
+              'w-full px-3 py-2 pr-10 border border-gray-300 dark:border-gray-600 rounded-lg',
+              'bg-white dark:bg-gray-800 text-gray-900 dark:text-white',
+              'focus:ring-2 focus:ring-accent-500 focus:border-transparent',
+              'placeholder-gray-500 dark:placeholder-gray-400',
+            )}
+            required
+          />
+          <button type="button" onClick={toggleShowValue} className="absolute inset-y-0 right-0 pr-3 flex items-center">
+            {showValue ? <EyeOff className="w-4 h-4 text-gray-400" /> : <Eye className="w-4 h-4 text-gray-400" />}
+          </button>
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-400">This value will be encrypted before storage</p>
+      </div>
+
+      {/* Description */}
+      <div className="space-y-2">
+        <label htmlFor="description" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+          Description
+        </label>
+        <textarea
+          id="description"
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          placeholder="Optional description of what this secret is used for"
+          rows={3}
+          className={classNames(
+            'w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg',
+            'bg-white dark:bg-gray-800 text-gray-900 dark:text-white',
+            'focus:ring-2 focus:ring-accent-500 focus:border-transparent',
+            'placeholder-gray-500 dark:placeholder-gray-400',
+            'resize-none',
+          )}
+        />
+      </div>
+
+      {/* Submit Button */}
+      <div className="flex justify-end">
+        <button
+          type="submit"
+          disabled={isSubmitting}
+          className={classNames(
+            'inline-flex items-center gap-2 px-6 py-2 text-sm font-medium rounded-lg transition-colors',
+            'bg-accent-500 hover:bg-accent-600 disabled:bg-accent-300',
+            'text-gray-950 dark:text-gray-950 disabled:text-gray-600',
+            'focus:outline-none focus:ring-2 focus:ring-accent-500 focus:ring-offset-2',
+          )}
+        >
+          {isSubmitting ? (
+            <>
+              <div className="w-4 h-4 border-2 border-gray-600 border-t-transparent rounded-full animate-spin" />
+              <span>Creating...</span>
+            </>
+          ) : (
+            <>
+              <Lock className="w-4 h-4" />
+              <span>Create Secret</span>
+            </>
+          )}
+        </button>
+      </div>
+    </motion.form>
+  );
+}
diff --git a/app/components/@settings/tabs/secrets-manager/forms/EditSecretForm.tsx b/app/components/@settings/tabs/secrets-manager/forms/EditSecretForm.tsx
new file mode 100644
index 00000000..5dcaa8b6
--- /dev/null
+++ b/app/components/@settings/tabs/secrets-manager/forms/EditSecretForm.tsx
@@ -0,0 +1,326 @@
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { EyeOff, Lock, Eye } from 'lucide-react';
+import { classNames } from '~/utils/classNames';
+import { toast } from 'sonner';
+import type { EnvironmentVariableWithDetails } from '~/lib/stores/environmentVariables';
+import { EnvironmentVariableType } from '@prisma/client';
+
+interface EditSecretFormProps {
+  environmentVariable: EnvironmentVariableWithDetails;
+  isSubmitting: boolean;
+  setIsSubmitting: (isSubmitting: boolean) => void;
+  onSuccess: () => void;
+  onDelete: () => void;
+  availableEnvironments: Array<{ id: string; name: string }>;
+}
+
+export default function EditSecretForm({
+  environmentVariable,
+  isSubmitting,
+  setIsSubmitting,
+  onSuccess,
+  onDelete,
+  availableEnvironments,
+}: EditSecretFormProps) {
+  const [key, setKey] = useState(environmentVariable.key);
+  const [value, setValue] = useState(environmentVariable.value);
+  const [description, setDescription] = useState(environmentVariable.description || '');
+  const [environmentId, setEnvironmentId] = useState(environmentVariable.environment.id);
+  const [showValue, setShowValue] = useState(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!key.trim() || !value.trim() || !environmentId) {
+      toast.error('Please fill in all required fields');
+      return;
+    }
+
+    // Validate key format (alphanumeric and underscores only)
+    if (!/^[A-Z0-9_]+$/.test(key.trim())) {
+      toast.error('Secret key can only contain uppercase letters, numbers, and underscores');
+      return;
+    }
+
+    // Check if any changes were made
+    const hasChanges =
+      key.trim().toUpperCase() !== environmentVariable.key ||
+      value.trim() !== environmentVariable.value ||
+      description.trim() !== (environmentVariable.description || '') ||
+      environmentId !== environmentVariable.environment.id;
+
+    if (!hasChanges) {
+      toast.info('No changes were made');
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      const response = await fetch(`/api/environment-variables/${environmentVariable.id}`, {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          key: key.trim().toUpperCase(),
+          value: value.trim(),
+          type: EnvironmentVariableType.GLOBAL,
+          environmentId,
+          description: description.trim() || undefined,
+        }),
+      });
+
+      const data = (await response.json()) as { success: boolean; error?: string };
+
+      if (data.success) {
+        toast.success('Secret updated successfully');
+        onSuccess();
+      } else {
+        toast.error(data.error || 'Failed to update secret');
+      }
+    } catch (error) {
+      console.error('Failed to update secret:', error);
+      toast.error('Failed to update secret');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    // Prevent deletion of DATA_SOURCE type environment variables
+    if (environmentVariable.type === EnvironmentVariableType.DATA_SOURCE) {
+      toast.error('Cannot delete data source secrets from here. Please manage them in the Data Sources tab.');
+      setShowDeleteConfirm(false);
+
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      const response = await fetch(`/api/environment-variables/${environmentVariable.id}`, {
+        method: 'DELETE',
+      });
+
+      const data = (await response.json()) as { success: boolean; error?: string };
+
+      if (data.success) {
+        toast.success('Secret deleted successfully');
+        onDelete();
+      } else {
+        toast.error(data.error || 'Failed to delete secret');
+      }
+    } catch (error) {
+      console.error('Failed to delete secret:', error);
+      toast.error('Failed to delete secret');
+    } finally {
+      setIsSubmitting(false);
+      setShowDeleteConfirm(false);
+    }
+  };
+
+  const toggleShowValue = () => {
+    setShowValue(!showValue);
+  };
+
+  if (showDeleteConfirm) {
+    return (
+      <motion.div
+        className="space-y-6"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.2 }}
+      >
+        <div className="text-center">
+          <h2 className="text-lg font-medium text-red-600 dark:text-red-400 mb-2">Delete Secret</h2>
+          <p className="text-gray-600 dark:text-gray-400">
+            Are you sure you want to delete the secret "{environmentVariable.key}"? This action cannot be undone.
+          </p>
+        </div>
+
+        <div className="flex justify-center gap-3">
+          <button
+            type="button"
+            onClick={() => setShowDeleteConfirm(false)}
+            disabled={isSubmitting}
+            className={classNames(
+              'px-4 py-2 text-sm font-medium rounded-lg transition-colors',
+              'bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700',
+              'text-gray-700 dark:text-gray-300',
+            )}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={handleDelete}
+            disabled={isSubmitting}
+            className={classNames(
+              'px-4 py-2 text-sm font-medium rounded-lg transition-colors',
+              'bg-red-600 hover:bg-red-700 disabled:bg-red-400',
+              'text-white',
+            )}
+          >
+            {isSubmitting ? 'Deleting...' : 'Delete Secret'}
+          </button>
+        </div>
+      </motion.div>
+    );
+  }
+
+  return (
+    <motion.form
+      onSubmit={handleSubmit}
+      className="space-y-6"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.2 }}
+    >
+      {/* Environment */}
+      <div className="space-y-2">
+        <label htmlFor="environment" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+          Environment <span className="text-red-500">*</span>
+        </label>
+        <select
+          id="environment"
+          value={environmentId}
+          onChange={(e) => setEnvironmentId(e.target.value)}
+          className={classNames(
+            'w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg',
+            'bg-white dark:bg-gray-800 text-gray-900 dark:text-white',
+            'focus:ring-2 focus:ring-accent-500 focus:border-transparent',
+          )}
+          required
+        >
+          {availableEnvironments.map((env) => (
+            <option key={env.id} value={env.id}>
+              {env.name}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {/* Key */}
+      <div className="space-y-2">
+        <label htmlFor="key" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+          Key <span className="text-red-500">*</span>
+        </label>
+        <input
+          type="text"
+          id="key"
+          value={key}
+          onChange={(e) => setKey(e.target.value)}
+          placeholder="MY_SECRET_KEY"
+          className={classNames(
+            'w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg',
+            'bg-white dark:bg-gray-800 text-gray-900 dark:text-white',
+            'focus:ring-2 focus:ring-accent-500 focus:border-transparent',
+            'placeholder-gray-500 dark:placeholder-gray-400',
+          )}
+          required
+        />
+        <p className="text-xs text-gray-500 dark:text-gray-400">Use uppercase letters, numbers, and underscores only</p>
+      </div>
+
+      {/* Value Input */}
+      <div className="space-y-2">
+        <label htmlFor="value" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+          Value <span className="text-red-500">*</span>
+        </label>
+        <div className="relative">
+          <input
+            type={showValue ? 'text' : 'password'}
+            id="value"
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            placeholder="Enter secret value"
+            className={classNames(
+              'w-full px-4 py-2.5 pr-12 border border-gray-300 dark:border-gray-600 rounded-lg',
+              'bg-white dark:bg-gray-800 text-gray-900 dark:text-white',
+              'focus:ring-2 focus:ring-accent-500 focus:border-transparent',
+              'placeholder-gray-500 dark:placeholder-gray-400',
+            )}
+            required
+          />
+          <button
+            type="button"
+            onClick={toggleShowValue}
+            className="absolute right-3 top-1/2 -translate-y-1/2 rounded group"
+            tabIndex={-1}
+          >
+            <span className="text-gray-400 group-hover:text-white transition-colors">
+              {showValue ? <EyeOff className="w-4 h-4 text-gray-400" /> : <Eye className="w-4 h-4 text-gray-400" />}
+            </span>
+          </button>
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-400">This value will be encrypted before storage</p>
+      </div>
+
+      {/* Description */}
+      <div className="space-y-2">
+        <label htmlFor="description" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+          Description
+        </label>
+        <textarea
+          id="description"
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          placeholder="Optional description of what this secret is used for"
+          rows={3}
+          className={classNames(
+            'w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg',
+            'bg-white dark:bg-gray-800 text-gray-900 dark:text-white',
+            'focus:ring-2 focus:ring-accent-500 focus:border-transparent',
+            'placeholder-gray-500 dark:placeholder-gray-400',
+            'resize-none',
+          )}
+        />
+      </div>
+
+      {/* Submit Button */}
+      <div className="flex items-center justify-between">
+        {/* Delete Button - Only show for non-DATA_SOURCE types */}
+        {environmentVariable.type !== 'DATA_SOURCE' && (
+          <button
+            type="button"
+            onClick={() => setShowDeleteConfirm(true)}
+            disabled={isSubmitting}
+            className={classNames(
+              'px-4 py-2 text-sm font-medium rounded-lg transition-colors',
+              'bg-red-600 hover:bg-red-700 disabled:bg-red-400',
+              'text-white',
+            )}
+          >
+            Delete Secret
+          </button>
+        )}
+
+        <button
+          type="submit"
+          disabled={isSubmitting || !key.trim()}
+          className={classNames(
+            'inline-flex items-center gap-2 px-6 py-2 text-sm font-medium rounded-lg transition-colors',
+            'bg-accent-500 hover:bg-accent-600 disabled:bg-accent-300',
+            'text-gray-950 dark:text-gray-950 disabled:text-gray-600',
+            'focus:outline-none focus:ring-2 focus:ring-accent-500 focus:ring-offset-2',
+          )}
+        >
+          {isSubmitting ? (
+            <>
+              <div className="w-4 h-4 border-2 border-gray-600 border-t-transparent rounded-full animate-spin" />
+              <span>Updating...</span>
+            </>
+          ) : (
+            <>
+              <Lock className="w-4 h-4" />
+              <span>Update Secret</span>
+            </>
+          )}
+        </button>
+      </div>
+    </motion.form>
+  );
+}
diff --git a/app/components/@settings/tabs/secrets-manager/index.ts b/app/components/@settings/tabs/secrets-manager/index.ts
new file mode 100644
index 00000000..e52c4c0a
--- /dev/null
+++ b/app/components/@settings/tabs/secrets-manager/index.ts
@@ -0,0 +1 @@
+export { default } from './SecretsManagerTab';
diff --git a/app/components/DataLoader.tsx b/app/components/DataLoader.tsx
index 6ed94ade..b96d7ed1 100644
--- a/app/components/DataLoader.tsx
+++ b/app/components/DataLoader.tsx
@@ -9,14 +9,17 @@ import { useDataSourceTypesStore } from '~/lib/stores/dataSourceTypes';
 import { useRouter } from 'next/navigation';
 import type { PluginAccessMap } from '~/lib/plugins/types';
 import { useUserStore } from '~/lib/stores/user';
+import { useEnvironmentVariablesStore } from '~/lib/stores/environmentVariables';
 import { DATA_SOURCE_CONNECTION_ROUTE, TELEMETRY_CONSENT_ROUTE } from '~/lib/constants/routes';
 import { initializeClientTelemetry } from '~/lib/telemetry/telemetry-client';
 import type { UserProfile } from '~/lib/services/userService';
 import { useAuthProvidersPlugin } from '~/lib/hooks/plugins/useAuthProvidersPlugin';
+import type { EnvironmentVariableWithDetails } from '~/lib/stores/environmentVariables';
 
 export interface RootData {
   user: UserProfile | null;
   environmentDataSources: EnvironmentDataSource[];
+  environmentVariables: EnvironmentVariableWithDetails[];
   pluginAccess: PluginAccessMap;
   dataSourceTypes: DataSourceType[];
 }
@@ -32,6 +35,7 @@ export function DataLoader({ children, rootData }: DataLoaderProps) {
   const { setPluginAccess } = usePluginStore();
   const { setDataSourceTypes } = useDataSourceTypesStore();
   const { setUser } = useUserStore();
+  const { setEnvironmentVariables } = useEnvironmentVariablesStore();
   const { anonymousProvider } = useAuthProvidersPlugin();
   const router = useRouter();
   const isLoggingIn = useRef(false);
@@ -45,7 +49,18 @@ export function DataLoader({ children, rootData }: DataLoaderProps) {
     if (rootData.dataSourceTypes) {
       setDataSourceTypes(rootData.dataSourceTypes);
     }
-  }, [rootData.pluginAccess, rootData.dataSourceTypes, setPluginAccess, setDataSourceTypes]);
+
+    if (rootData.environmentVariables) {
+      setEnvironmentVariables(rootData.environmentVariables);
+    }
+  }, [
+    rootData.pluginAccess,
+    rootData.dataSourceTypes,
+    rootData.environmentVariables,
+    setPluginAccess,
+    setDataSourceTypes,
+    setEnvironmentVariables,
+  ]);
 
   useEffect(() => {
     const loadUserData = async () => {
@@ -117,6 +132,17 @@ export function DataLoader({ children, rootData }: DataLoaderProps) {
         setEnvironmentDataSources(currentEnvironmentDataSources);
       }
 
+      // Handle environment variables
+      let currentEnvironmentVariables = rootData.environmentVariables || [];
+
+      if ((!rootData.environmentVariables || rootData.environmentVariables.length === 0) && session?.user) {
+        console.debug('🔄 Fetching environment variables...');
+        currentEnvironmentVariables = await fetchEnvironmentVariables();
+        setEnvironmentVariables(currentEnvironmentVariables);
+      } else if (rootData.environmentVariables) {
+        setEnvironmentVariables(currentEnvironmentVariables);
+      }
+
       // Handle user onboarding flow with telemetry and data sources
       if (currentUser) {
         // Redirect to telemetry consent screen if user hasn't answered yet
@@ -195,6 +221,49 @@ export function DataLoader({ children, rootData }: DataLoaderProps) {
     }
   };
 
+  const fetchEnvironmentVariables = async (): Promise<EnvironmentVariableWithDetails[]> => {
+    try {
+      // For now, we'll fetch environment variables for all environments the user has access to
+      // In the future, this could be optimized to fetch only what's needed
+      const environmentsResponse = await fetch('/api/environments');
+
+      if (!environmentsResponse.ok) {
+        throw new Error('Failed to fetch environments');
+      }
+
+      const environmentsData = (await environmentsResponse.json()) as {
+        success: boolean;
+        environments: Array<{ id: string }>;
+      };
+
+      if (!environmentsData.success || environmentsData.environments.length === 0) {
+        return [];
+      }
+
+      // Fetch environment variables for the first environment (could be enhanced to fetch for all)
+      const firstEnvironmentId = environmentsData.environments[0].id;
+      const environmentVariablesResponse = await fetch(
+        `/api/environment-variables?environmentId=${firstEnvironmentId}`,
+      );
+
+      if (!environmentVariablesResponse.ok) {
+        throw new Error('Failed to fetch environment variables');
+      }
+
+      const environmentVariablesData = (await environmentVariablesResponse.json()) as {
+        success: boolean;
+        environmentVariables: EnvironmentVariableWithDetails[];
+      };
+
+      console.log('✅ Environment variables fetched successfully');
+
+      return environmentVariablesData.environmentVariables || [];
+    } catch (error) {
+      console.error('❌ Failed to fetch environment variables:', error);
+      return [];
+    }
+  };
+
   const loginAnonymous = async () => {
     if (isLoggingIn.current) {
       console.debug('⏳ Login already in progress, skipping...');
diff --git a/app/layout.tsx b/app/layout.tsx
index c4e0f0e2..ebeeb3b6 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -10,6 +10,7 @@ import { headers } from 'next/headers';
 import { auth } from '~/auth/auth-config';
 import type { Session } from '~/auth/session';
 import { getUserAbility } from '~/lib/casl/user-ability';
+import { getEnvironmentVariables } from '~/lib/services/environmentVariablesService';
 
 // Force dynamic rendering to prevent static generation issues with headers
 export const dynamic = 'force-dynamic';
@@ -39,6 +40,7 @@ async function getRootData() {
 
     let user = null;
     let environmentDataSources: any[] = [];
+    let environmentVariables: any[] = [];
     let dataSourceTypes: any[] = [];
 
     if (typedSession?.user) {
@@ -50,6 +52,8 @@ async function getRootData() {
 
       // Get data sources for the user
       environmentDataSources = await getEnvironmentDataSources(userAbility);
+
+      environmentVariables = await getEnvironmentVariables();
     }
 
     // Initialize plugin manager
@@ -63,6 +67,7 @@ async function getRootData() {
     return {
       user,
       environmentDataSources,
+      environmentVariables,
       pluginAccess,
       dataSourceTypes,
     };
@@ -71,6 +76,7 @@ async function getRootData() {
     return {
       user: null,
       environmentDataSources: [],
+      environmentVariables: [],
       pluginAccess: FREE_PLUGIN_ACCESS,
       dataSourceTypes: [],
     };
diff --git a/app/lib/services/environmentVariablesService.ts b/app/lib/services/environmentVariablesService.ts
index 2bdffa71..2f0af869 100644
--- a/app/lib/services/environmentVariablesService.ts
+++ b/app/lib/services/environmentVariablesService.ts
@@ -1,6 +1,6 @@
 import { prisma } from '~/lib/prisma';
 import type { EnvironmentVariable, EnvironmentVariableType } from '@prisma/client';
-import { encryptData, decryptData } from '@liblab/encryption/encryption';
+import { decryptData, encryptData } from '@liblab/encryption/encryption';
 import { env } from '~/env';
 import { logger } from '~/utils/logger';
 
@@ -18,9 +18,8 @@ export async function getEnvironmentVariable(id: string): Promise<EnvironmentVar
   return envVar ? decryptEnvironmentVariable(envVar) : null;
 }
 
-export async function getEnvironmentVariables(environmentId: string): Promise<EnvironmentVariable[]> {
+export async function getEnvironmentVariables(): Promise<EnvironmentVariable[]> {
   const envVars = await prisma.environmentVariable.findMany({
-    where: { environmentId },
     include: {
       environment: true,
       createdBy: true,
@@ -31,6 +30,51 @@ export async function getEnvironmentVariables(environmentId: string): Promise<En
   return envVars.map(decryptEnvironmentVariable);
 }
 
+export async function getEnvironmentVariablesWithEnvironmentDetails(
+  environmentId: string | 'all',
+  type?: EnvironmentVariableType | null,
+): Promise<
+  Array<
+    EnvironmentVariable & {
+      environment: { id: string; name: string };
+      createdBy: { id: string; name: string; email: string };
+    }
+  >
+> {
+  // Build the where clause
+  const whereClause: any = {};
+
+  if (environmentId !== 'all') {
+    whereClause.environmentId = environmentId;
+  }
+
+  if (type) {
+    whereClause.type = type;
+  }
+
+  const envVars = await prisma.environmentVariable.findMany({
+    where: Object.keys(whereClause).length > 0 ? whereClause : undefined,
+    include: {
+      environment: {
+        select: {
+          id: true,
+          name: true,
+        },
+      },
+      createdBy: {
+        select: {
+          id: true,
+          name: true,
+          email: true,
+        },
+      },
+    },
+    orderBy: [{ environment: { name: 'asc' } }, { key: 'asc' }],
+  });
+
+  return envVars.map(decryptEnvironmentVariableWithRelations);
+}
+
 export async function createEnvironmentVariable(
   key: string,
   value: string,
@@ -63,6 +107,7 @@ export async function updateEnvironmentVariable(
   key: string,
   value: string,
   type: EnvironmentVariableType,
+  environmentId: string,
   description?: string,
 ): Promise<EnvironmentVariable> {
   const valueToStore = encryptValue(value);
@@ -74,6 +119,7 @@ export async function updateEnvironmentVariable(
       value: valueToStore,
       description: description || null,
       type,
+      environmentId,
     },
   });
 
@@ -140,3 +186,24 @@ function decryptValue(encryptedValue: string): string {
 
   return decryptedBuffer.toString();
 }
+
+function decryptEnvironmentVariableWithRelations(
+  envVar: EnvironmentVariable & {
+    environment: { id: string; name: string };
+    createdBy: { id: string; name: string; email: string };
+  },
+): EnvironmentVariable & {
+  environment: { id: string; name: string };
+  createdBy: { id: string; name: string; email: string };
+} {
+  try {
+    return {
+      ...envVar,
+      value: decryptValue(envVar.value),
+    };
+  } catch (error) {
+    logger.error('Failed to decrypt environment variable:', envVar.id, error);
+
+    throw new Error(`Failed to decrypt environment variable: ${envVar.key}`);
+  }
+}
diff --git a/app/lib/stores/environmentVariables.ts b/app/lib/stores/environmentVariables.ts
new file mode 100644
index 00000000..ecdfce6d
--- /dev/null
+++ b/app/lib/stores/environmentVariables.ts
@@ -0,0 +1,87 @@
+import { create } from 'zustand';
+import type { EnvironmentVariable } from '@prisma/client';
+
+export interface EnvironmentVariableWithDetails extends EnvironmentVariable {
+  environment: {
+    id: string;
+    name: string;
+  };
+  createdBy: {
+    id: string;
+    name: string;
+    email: string;
+  };
+}
+
+interface EnvironmentVariablesState {
+  environmentVariables: EnvironmentVariableWithDetails[];
+  isLoading: boolean;
+  error: string | null;
+  setEnvironmentVariables: (environmentVariables: EnvironmentVariableWithDetails[]) => void;
+  addEnvironmentVariable: (environmentVariable: EnvironmentVariableWithDetails) => void;
+  updateEnvironmentVariable: (id: string, updates: Partial<EnvironmentVariableWithDetails>) => void;
+  removeEnvironmentVariable: (id: string) => void;
+  setLoading: (isLoading: boolean) => void;
+  setError: (error: string | null) => void;
+  clearError: () => void;
+  clearEnvironmentVariables: () => void;
+}
+
+export const useEnvironmentVariablesStore = create<EnvironmentVariablesState>((set, get) => ({
+  environmentVariables: [],
+  isLoading: false,
+  error: null,
+
+  setEnvironmentVariables: (environmentVariables) =>
+    set({
+      environmentVariables,
+      error: null,
+    }),
+
+  addEnvironmentVariable: (environmentVariable) => {
+    const current = get().environmentVariables;
+    set({
+      environmentVariables: [...current, environmentVariable],
+      error: null,
+    });
+  },
+
+  updateEnvironmentVariable: (id, updates) => {
+    const current = get().environmentVariables;
+    const updated = current.map((envVar) => (envVar.id === id ? { ...envVar, ...updates } : envVar));
+    set({
+      environmentVariables: updated,
+      error: null,
+    });
+  },
+
+  removeEnvironmentVariable: (id) => {
+    const current = get().environmentVariables;
+    const filtered = current.filter((envVar) => envVar.id !== id);
+    set({
+      environmentVariables: filtered,
+      error: null,
+    });
+  },
+
+  setLoading: (isLoading) =>
+    set({
+      isLoading,
+    }),
+
+  setError: (error) =>
+    set({
+      error,
+    }),
+
+  clearError: () =>
+    set({
+      error: null,
+    }),
+
+  clearEnvironmentVariables: () =>
+    set({
+      environmentVariables: [],
+      error: null,
+    }),
+}));
diff --git a/app/utils/selectStarterTemplate.ts b/app/utils/selectStarterTemplate.ts
index b6af10e4..24b9a176 100644
--- a/app/utils/selectStarterTemplate.ts
+++ b/app/utils/selectStarterTemplate.ts
@@ -54,8 +54,6 @@ async function writeSensitiveDataToEnvFile(files: FileMap, databaseUrl: string):
 
 export const getStarterTemplateFiles = async (databaseUrl?: string): Promise<FileMap> => {
   try {
-    logger.info('fetching starter template files from API with databaseUrl:', databaseUrl);
-
     workbenchStore.previewsStore.loadingText.set('Fetching project assets...');
 
     const response = await fetch('/api/starter-template');