diff --git a/.github/workflows/e2e-tests.yml b/.github/workflows/e2e-tests.yml
index 405f59e4..d92d3b91 100644
--- a/.github/workflows/e2e-tests.yml
+++ b/.github/workflows/e2e-tests.yml
@@ -15,7 +15,7 @@ jobs:
   e2e-tests:
     name: 🧪 Run E2E Tests
     runs-on: ubuntu-latest
-    timeout-minutes: 10
+    timeout-minutes: 25
 
     steps:
       - name: 📥 Checkout code
diff --git a/app/api/[resource]/[resourceId]/members/route.ts b/app/api/[resource]/[resourceId]/members/route.ts
index be04af47..e3fc4963 100644
--- a/app/api/[resource]/[resourceId]/members/route.ts
+++ b/app/api/[resource]/[resourceId]/members/route.ts
@@ -1,7 +1,7 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { z } from 'zod';
-import { userService, type UserProfile } from '~/lib/services/userService';
-import { getDataSource } from '~/lib/services/datasourceService';
+import { type UserProfile, userService } from '~/lib/services/userService';
+import { getDataSource } from '~/lib/services/dataSourceService';
 import { getEnvironment } from '~/lib/services/environmentService';
 import { getWebsite } from '~/lib/services/websiteService';
 import { getPermissionLevelDetails, type PermissionLevel } from '~/lib/services/permissionService';
diff --git a/app/api/chat/route.ts b/app/api/chat/route.ts
index 042d7d0b..ab5c6b40 100644
--- a/app/api/chat/route.ts
+++ b/app/api/chat/route.ts
@@ -10,11 +10,9 @@ import { messageService } from '~/lib/services/messageService';
 import { MESSAGE_ROLE } from '~/types/database';
 import { createId } from '@paralleldrive/cuid2';
 import { conversationService } from '~/lib/services/conversationService';
-import type { StarterPluginId } from '~/lib/plugins/types';
 import type { FileMap } from '~/lib/stores/files';
 import { getTelemetry } from '~/lib/telemetry/telemetry-manager';
 import { TelemetryEventType } from '~/lib/telemetry/telemetry-types';
-import { prisma } from '~/lib/prisma';
 import { LLMManager } from '~/lib/modules/llm/manager';
 import { DataSourcePluginManager } from '~/lib/plugins/data-access/data-access-plugin-manager';
 import { type UserProfile, userService } from '~/lib/services/userService';
@@ -23,6 +21,7 @@ import { getDatabaseSchema } from '~/lib/schema';
 import { requireUserId } from '~/auth/session';
 import { formatDbSchemaForLLM } from '~/lib/.server/llm/database-source';
 import { AI_SDK_INVALID_KEY_ERROR } from '~/utils/constants';
+import { getDatabaseUrl } from '~/lib/services/dataSourceService';
 
 const WORK_DIR = '/home/project';
 
@@ -201,8 +200,13 @@ async function chatAction(request: NextRequest) {
             };
             dataStream.writeData(currentProgressAnnotation);
 
-            const dataSource = await conversationService.getConversationDataSource(conversationId);
-            const databaseSchema = await getDatabaseSchema(dataSource.id, userId);
+            const environmentDataSource =
+              await conversationService.getConversationEnvironmentDataSource(conversationId);
+            const databaseSchema = await getDatabaseSchema(
+              environmentDataSource.dataSourceId,
+              environmentDataSource.environmentId,
+              userId,
+            );
 
             implementationPlan = await createImplementationPlan({
               isFirstUserMessage: !!userMessageProperties.isFirstUserMessage,
@@ -280,6 +284,7 @@ async function chatAction(request: NextRequest) {
 
                 const userId = await requireUserId(request);
                 const user = await userService.getUser(userId);
+
                 await trackChatPrompt(conversationId, currentModel, user, userMessageProperties.content);
               } catch (error) {
                 logger.error('Failed to save prompt', error);
@@ -325,7 +330,7 @@ async function chatAction(request: NextRequest) {
             options,
             files,
             promptId,
-            starterId: conversation?.starterId as StarterPluginId,
+            conversation: conversation!,
             contextOptimization,
             contextFiles: filteredFiles,
             summary,
@@ -430,36 +435,33 @@ async function trackChatPrompt(
   userMessage: string,
 ): Promise<void> {
   try {
-    const conversationWithDataSource = await prisma.conversation.findUnique({
-      where: { id: conversationId },
-      include: {
-        dataSource: {
-          select: {
-            connectionString: true,
-          },
-        },
-      },
-    });
+    const environmentDataSource = await conversationService.getConversationEnvironmentDataSource(conversationId);
+    const dataSourceUrl = await getDatabaseUrl(
+      user.id,
+      environmentDataSource.dataSourceId,
+      environmentDataSource.environmentId,
+    );
 
-    if (conversationWithDataSource?.dataSource.connectionString) {
-      const pluginId = DataSourcePluginManager.getAccessorPluginId(
-        conversationWithDataSource.dataSource.connectionString,
-      );
-
-      const telemetry = await getTelemetry();
-      await telemetry.trackTelemetryEvent(
-        {
-          eventType: TelemetryEventType.USER_CHAT_PROMPT,
-          properties: {
-            conversationId,
-            dataSourceType: pluginId,
-            llmModel,
-            userMessage,
-          },
-        },
-        user,
-      );
+    if (!dataSourceUrl) {
+      logger.warn('No data source URL found for telemetry tracking');
+      return;
     }
+
+    const pluginId = DataSourcePluginManager.getAccessorPluginId(dataSourceUrl);
+
+    const telemetry = await getTelemetry();
+    await telemetry.trackTelemetryEvent(
+      {
+        eventType: TelemetryEventType.USER_CHAT_PROMPT,
+        properties: {
+          conversationId,
+          dataSourceType: pluginId,
+          llmModel,
+          userMessage,
+        },
+      },
+      user,
+    );
   } catch (telemetryError) {
     logger.error('Failed to track telemetry event', telemetryError);
   }
diff --git a/app/api/conversations/[conversationId]/route.ts b/app/api/conversations/[conversationId]/route.ts
index e84cbc6e..7f043317 100644
--- a/app/api/conversations/[conversationId]/route.ts
+++ b/app/api/conversations/[conversationId]/route.ts
@@ -108,6 +108,8 @@ async function handleDelete(conversationId: string, userId: string) {
 
 const UPDATE_CONVERSATION_SCHEMA = z.object({
   description: z.string().nullable().optional(),
+  environmentId: z.string().optional(),
+  dataSourceId: z.string().optional(),
 });
 
 async function handlePatch(conversationId: string, userId: string, request: NextRequest) {
@@ -115,11 +117,7 @@ async function handlePatch(conversationId: string, userId: string, request: Next
     const body = await request.json();
     const updateData = UPDATE_CONVERSATION_SCHEMA.parse(body);
 
-    const updatedConversation = await conversationService.updateConversationDescription(
-      conversationId,
-      userId,
-      updateData,
-    );
+    const updatedConversation = await conversationService.updateConversation(conversationId, userId, updateData);
 
     if (!updatedConversation) {
       return NextResponse.json({ error: 'Conversation not found' }, { status: 404 });
diff --git a/app/api/conversations/[conversationId]/snapshots/message/[messageId]/route.ts b/app/api/conversations/[conversationId]/snapshots/message/[messageId]/route.ts
new file mode 100644
index 00000000..82029635
--- /dev/null
+++ b/app/api/conversations/[conversationId]/snapshots/message/[messageId]/route.ts
@@ -0,0 +1,94 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { z } from 'zod';
+import { conversationService } from '~/lib/services/conversationService';
+import { StorageServiceFactory } from '~/lib/services/storage/storage-service-factory';
+import { snapshotService } from '~/lib/services/snapshotService';
+import { logger } from '~/utils/logger';
+import { requireUserId } from '~/auth/session';
+
+// Zod schema for the request body
+const UPDATE_SNAPSHOT_SCHEMA = z.object({
+  fileMap: z.record(
+    z.string(),
+    z
+      .union([
+        z.object({
+          type: z.literal('file'),
+          content: z.string(),
+          isBinary: z.boolean(),
+        }),
+        z.object({
+          type: z.literal('folder'),
+        }),
+      ])
+      .optional(),
+  ),
+});
+
+export async function PUT(
+  request: NextRequest,
+  { params }: { params: Promise<{ conversationId: string; messageId: string }> },
+) {
+  const { conversationId, messageId } = await params;
+
+  const userId = await requireUserId(request);
+
+  const conversation = await conversationService.getConversation(conversationId);
+
+  if (!conversation) {
+    return NextResponse.json({ error: 'Conversation not found' }, { status: 404 });
+  }
+
+  // Check if the conversation belongs to the authenticated user
+  if (conversation.userId !== userId) {
+    return NextResponse.json({ error: 'Conversation not found' }, { status: 404 });
+  }
+
+  try {
+    // Find the snapshot associated with this message ID
+    const snapshot = await snapshotService.getSnapshotByMessageId(messageId);
+
+    if (!snapshot) {
+      logger.error(`Snapshot not found for message ${messageId}`);
+      return NextResponse.json({ error: 'Snapshot not found' }, { status: 404 });
+    }
+
+    if (snapshot.conversationId !== conversationId) {
+      logger.error(`Snapshot ${snapshot.id} does not belong to conversation ${conversationId}`);
+      return NextResponse.json({ error: 'Snapshot does not belong to this conversation' }, { status: 403 });
+    }
+
+    const storageService = StorageServiceFactory.get();
+    const data = await storageService.get(snapshot.storageKey);
+    const fileMap = JSON.parse(data.toString());
+
+    if (!fileMap) {
+      logger.error(`No snapshot files found for snapshot ${snapshot.id}`);
+      return NextResponse.json({ error: 'No snapshot files found' }, { status: 404 });
+    }
+
+    // Validate and parse the request body
+    const body = await request.json();
+    const requestData = UPDATE_SNAPSHOT_SCHEMA.parse(body);
+    const updatedFileMap = { ...fileMap, ...requestData.fileMap };
+
+    const serializedData = Buffer.from(JSON.stringify(updatedFileMap, null, 2));
+    await storageService.save(snapshot.storageKey, serializedData);
+
+    return NextResponse.json({
+      success: true,
+      snapshot: {
+        ...snapshot,
+        fileMap: updatedFileMap,
+      },
+    });
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      return NextResponse.json({ error: 'Invalid request body', details: error.errors }, { status: 400 });
+    }
+
+    logger.error('Failed to update snapshot:', error);
+
+    return NextResponse.json({ error: 'Failed to update snapshot' }, { status: 500 });
+  }
+}
diff --git a/app/api/conversations/route.ts b/app/api/conversations/route.ts
index c0f9c1d1..547f9666 100644
--- a/app/api/conversations/route.ts
+++ b/app/api/conversations/route.ts
@@ -16,6 +16,7 @@ export async function POST(request: NextRequest) {
       dataSourceId: string;
       description?: string;
       messages?: Message[];
+      environmentId: string;
     };
 
     if (!body?.dataSourceId) {
@@ -27,6 +28,7 @@ export async function POST(request: NextRequest) {
 
       const conversation = await conversationService.createConversation(
         body.dataSourceId,
+        body.environmentId,
         userId,
         body.description,
         tx,
diff --git a/app/api/data-sources/[id]/route.ts b/app/api/data-sources/[id]/route.ts
index 21a1f966..e5b4125e 100644
--- a/app/api/data-sources/[id]/route.ts
+++ b/app/api/data-sources/[id]/route.ts
@@ -2,35 +2,47 @@ import { NextRequest, NextResponse } from 'next/server';
 import {
   deleteDataSource,
   getConversationCount,
-  getDataSource,
+  getEnvironmentDataSource,
   updateDataSource,
-} from '~/lib/services/datasourceService';
+} from '~/lib/services/dataSourceService';
 import { requireUserId } from '~/auth/session';
 
 export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
   const userId = await requireUserId(request);
 
   const { id } = await params;
+  const { searchParams } = new URL(request.url);
+  const environmentId = searchParams.get('environmentId');
 
-  const dataSource = await getDataSource(id);
+  if (!environmentId) {
+    return NextResponse.json({ success: false, error: 'Environment ID is required' }, { status: 400 });
+  }
+
+  const environmentDataSource = await getEnvironmentDataSource(id, userId, environmentId);
 
-  if (!dataSource) {
+  if (!environmentDataSource) {
     return NextResponse.json({ success: false, error: 'Data source not found' }, { status: 404 });
   }
 
   const conversationCount = await getConversationCount(id, userId);
 
-  return NextResponse.json({ success: true, dataSource, conversationCount });
+  return NextResponse.json({ success: true, environmentDataSource, conversationCount });
 }
 
 export async function PUT(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
   const userId = await requireUserId(request);
 
   const { id } = await params;
+  const { searchParams } = new URL(request.url);
+  const environmentId = searchParams.get('environmentId');
+
+  if (!environmentId) {
+    return NextResponse.json({ success: false, error: 'Environment ID is required' }, { status: 400 });
+  }
 
-  const dataSource = await getDataSource(id);
+  const environmentDataSource = await getEnvironmentDataSource(id, userId, environmentId);
 
-  if (!dataSource) {
+  if (!environmentDataSource) {
     return NextResponse.json({ success: false, error: 'Data source not found' }, { status: 404 });
   }
 
@@ -53,10 +65,16 @@ export async function PUT(request: NextRequest, { params }: { params: Promise<{
 export async function DELETE(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
   const userId = await requireUserId(request);
   const { id } = await params;
+  const { searchParams } = new URL(request.url);
+  const environmentId = searchParams.get('environmentId');
+
+  if (!environmentId) {
+    return NextResponse.json({ success: false, error: 'Environment ID is required' }, { status: 400 });
+  }
 
-  const dataSource = await getDataSource(id);
+  const environmentDataSource = await getEnvironmentDataSource(id, userId, environmentId);
 
-  if (!dataSource) {
+  if (!environmentDataSource) {
     return NextResponse.json({ success: false, error: 'Data source not found' }, { status: 404 });
   }
 
diff --git a/app/api/data-sources/[id]/url/route.ts b/app/api/data-sources/[id]/url/route.ts
index aa99a309..24d1e418 100644
--- a/app/api/data-sources/[id]/url/route.ts
+++ b/app/api/data-sources/[id]/url/route.ts
@@ -1,11 +1,24 @@
 import { NextRequest, NextResponse } from 'next/server';
-import { getDatabaseUrl } from '~/lib/services/datasourceService';
+import { getDatabaseUrl } from '~/lib/services/dataSourceService';
 import { requireUserId } from '~/auth/session';
 
 export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
   const userId = await requireUserId(request);
   const { id } = await params;
-  const url = await getDatabaseUrl(userId, id);
+  const { searchParams } = new URL(request.url);
+  const environmentId = searchParams.get('environmentId');
 
-  return NextResponse.json({ url, success: true });
+  if (!environmentId) {
+    return NextResponse.json({ success: false, error: 'Environment ID is required' }, { status: 400 });
+  }
+
+  try {
+    const url = await getDatabaseUrl(userId, id, environmentId);
+    return NextResponse.json({ url, success: true });
+  } catch (error) {
+    return NextResponse.json(
+      { success: false, error: error instanceof Error ? error.message : 'Failed to get database URL' },
+      { status: 404 },
+    );
+  }
 }
diff --git a/app/api/data-sources/example/route.ts b/app/api/data-sources/example/route.ts
index 18d3f6ad..e800f843 100644
--- a/app/api/data-sources/example/route.ts
+++ b/app/api/data-sources/example/route.ts
@@ -1,11 +1,19 @@
 import { prisma } from '~/lib/prisma';
 import { NextRequest, NextResponse } from 'next/server';
 import { requireUserId } from '~/auth/session';
+import { createSampleDataSource } from '~/lib/services/dataSourceService';
 
 export async function POST(request: NextRequest) {
   const userId = await requireUserId(request);
 
   try {
+    const body = await request.json();
+    const { environmentId } = body as { environmentId: string };
+
+    if (!environmentId) {
+      return NextResponse.json({ success: false, error: 'Environment ID is required' }, { status: 400 });
+    }
+
     const existingSampleDatabase = await prisma.dataSource.findFirst({
       where: {
         createdById: userId,
@@ -17,12 +25,9 @@ export async function POST(request: NextRequest) {
       return NextResponse.json({ success: false, error: 'Sample database already exists' }, { status: 400 });
     }
 
-    const dataSource = await prisma.dataSource.create({
-      data: {
-        createdById: userId,
-        name: 'Sample Database',
-        connectionString: 'sqlite://sample.db',
-      },
+    const dataSource = await createSampleDataSource({
+      createdById: userId,
+      environmentId,
     });
 
     return NextResponse.json({ success: true, dataSource });
diff --git a/app/api/data-sources/route.ts b/app/api/data-sources/route.ts
index d5491a81..8f442703 100644
--- a/app/api/data-sources/route.ts
+++ b/app/api/data-sources/route.ts
@@ -1,5 +1,5 @@
 import { NextRequest, NextResponse } from 'next/server';
-import { createDataSource, getDataSources } from '~/lib/services/datasourceService';
+import { createDataSource, getEnvironmentDataSources } from '~/lib/services/dataSourceService';
 import { requireUserAbility } from '~/auth/session';
 import { PermissionAction, PermissionResource } from '@prisma/client';
 
@@ -10,9 +10,9 @@ export async function GET(request: NextRequest) {
     return NextResponse.json({ success: false, error: 'Forbidden' }, { status: 403 });
   }
 
-  const dataSources = await getDataSources(userAbility);
+  const environmentDataSources = await getEnvironmentDataSources(userAbility);
 
-  return NextResponse.json({ success: true, dataSources });
+  return NextResponse.json({ success: true, environmentDataSources });
 }
 
 export async function POST(request: NextRequest) {
@@ -25,12 +25,18 @@ export async function POST(request: NextRequest) {
   const formData = await request.formData();
   const connectionString = formData.get('connectionString') as string;
   const name = formData.get('name') as string;
+  const environmentId = formData.get('environmentId') as string;
+
+  if (!environmentId) {
+    return NextResponse.json({ success: false, error: 'Environment ID is required' }, { status: 400 });
+  }
 
   try {
     const dataSource = await createDataSource({
       name,
-      connectionString,
       createdById: userId,
+      environmentId,
+      connectionString,
     });
 
     return NextResponse.json({ success: true, dataSource });
diff --git a/app/api/environments/route.ts b/app/api/environments/route.ts
index 7168b5d5..14382d9e 100644
--- a/app/api/environments/route.ts
+++ b/app/api/environments/route.ts
@@ -4,6 +4,23 @@ import { organizationService } from '~/lib/services/organizationService';
 import { requireUserAbility } from '~/auth/session';
 import { PermissionAction, PermissionResource, Prisma } from '@prisma/client';
 
+export type CreateEnvironmentResponse =
+  | {
+      success: true;
+      environment?: {
+        id: string;
+        name: string;
+        description?: string;
+        organizationId: string;
+        createdAt: string;
+        updatedAt: string;
+      };
+    }
+  | {
+      success: false;
+      error: string;
+    };
+
 export async function GET(request: NextRequest) {
   const { userAbility } = await requireUserAbility(request);
 
diff --git a/app/api/format-query/route.ts b/app/api/format-query/route.ts
deleted file mode 100644
index 1a1ebfcd..00000000
--- a/app/api/format-query/route.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server';
-import { z } from 'zod';
-import { DataAccessor } from '@liblab/data-access/dataAccessor';
-import { getConnectionProtocol } from '@liblab/data-access/utils/connection';
-import { requireUserId } from '~/auth/session';
-import { prisma } from '~/lib/prisma';
-
-const requestSchema = z.object({
-  query: z.string(),
-  dataSourceId: z.string(),
-});
-
-export async function POST(request: NextRequest) {
-  const userId = await requireUserId(request);
-
-  try {
-    const body = await request.json();
-    const { query, dataSourceId } = requestSchema.parse(body);
-
-    // Get the data source to determine the database type
-    const dataSource = await prisma.dataSource.findUniqueOrThrow({
-      where: { id: dataSourceId, createdById: userId },
-    });
-
-    const type = getConnectionProtocol(dataSource.connectionString);
-    const accessor = DataAccessor.getByDatabaseType(type);
-
-    if (!accessor) {
-      return NextResponse.json({ error: 'Unsupported database type' }, { status: 400 });
-    }
-
-    const formattedQuery = accessor.formatQuery(query);
-
-    return NextResponse.json({ formattedQuery });
-  } catch (error) {
-    console.error('Error formatting query:', error);
-    return NextResponse.json(
-      { error: error instanceof Error ? error.message : 'Failed to format query' },
-      { status: 500 },
-    );
-  }
-}
diff --git a/app/api/generate-query/route.ts b/app/api/generate-query/route.ts
deleted file mode 100644
index 740ff680..00000000
--- a/app/api/generate-query/route.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { getDatabaseSchema } from '~/lib/schema';
-import { NextRequest, NextResponse } from 'next/server';
-import { generateSqlQueries } from '~/lib/.server/llm/database-source';
-import { createScopedLogger } from '~/utils/logger';
-import { z } from 'zod';
-import { prisma } from '~/lib/prisma';
-import { requireUserId } from '~/auth/session';
-
-const logger = createScopedLogger('generate-sql');
-
-const requestSchema = z.object({
-  prompt: z.string(),
-  existingQuery: z.string().optional(),
-  dataSourceId: z.string(),
-  suggestedDatabaseType: z.string().optional(),
-});
-
-export async function POST(request: NextRequest) {
-  const userId = await requireUserId(request);
-
-  try {
-    const body = await request.json();
-    const { prompt, existingQuery, dataSourceId } = requestSchema.parse(body);
-    const existingQueries = existingQuery ? [existingQuery] : [];
-
-    const schema = await getDatabaseSchema(dataSourceId, userId);
-
-    const dataSource = await prisma.dataSource.findUniqueOrThrow({
-      where: { id: dataSourceId, createdById: userId },
-    });
-
-    const queries = await generateSqlQueries({
-      schema,
-      userPrompt: prompt,
-      connectionString: dataSource.connectionString,
-      existingQueries,
-    });
-
-    if (!queries || queries.length === 0) {
-      return NextResponse.json({ error: 'Failed to generate SQL query' }, { status: 500 });
-    }
-
-    return NextResponse.json(queries[0].query);
-  } catch (error) {
-    logger.error('Error generating SQL:', error);
-    return NextResponse.json(
-      { error: error instanceof Error ? error.message : 'Failed to generate SQL query' },
-      { status: 500 },
-    );
-  }
-}
diff --git a/app/api/suggestions/route.ts b/app/api/suggestions/route.ts
index 4a00876e..74cc5e83 100644
--- a/app/api/suggestions/route.ts
+++ b/app/api/suggestions/route.ts
@@ -1,26 +1,42 @@
 import { NextRequest, NextResponse } from 'next/server';
-import { getDataSource } from '~/lib/services/datasourceService';
+import { getEnvironmentDataSource } from '~/lib/services/dataSourceService';
 import { generateSchemaBasedSuggestions } from '~/lib/services/suggestionService';
 import { SAMPLE_DATABASE_NAME } from '@liblab/data-access/accessors/sqlite';
 import { logger } from '~/utils/logger';
+import { DataSourcePropertyType } from '@prisma/client';
+import { requireUserId } from '~/auth/session';
 
 export async function POST(request: NextRequest) {
   try {
-    const { dataSourceId } = await request.json<{ dataSourceId: string }>();
+    const userId = await requireUserId(request);
+    const { dataSourceId, environmentId } = await request.json<{ dataSourceId: string; environmentId: string }>();
 
     if (!dataSourceId) {
       return NextResponse.json({ success: false, error: 'Data source ID is required' }, { status: 400 });
     }
 
-    // Fetch the data source using the service
-    const dataSource = await getDataSource(dataSourceId);
+    if (!environmentId) {
+      return NextResponse.json({ success: false, error: 'Environment ID is required' }, { status: 400 });
+    }
+
+    // Fetch the environment data source using the service
+    const environmentDataSource = await getEnvironmentDataSource(dataSourceId, userId, environmentId);
 
-    if (!dataSource) {
+    if (!environmentDataSource) {
       return NextResponse.json({ success: false, error: 'Data source not found' }, { status: 404 });
     }
 
-    // Check if it's the sample database
-    const isSampleDatabase = dataSource.connectionString === `sqlite://${SAMPLE_DATABASE_NAME}`;
+    const dataSourceProperty = environmentDataSource.dataSourceProperties.find(
+      (dsp) => dsp.type === DataSourcePropertyType.CONNECTION_URL,
+    );
+
+    if (!dataSourceProperty) {
+      return NextResponse.json({ success: false, error: 'Data source property not found' }, { status: 404 });
+    }
+
+    const connectionUrl = dataSourceProperty.environmentVariable.value;
+
+    const isSampleDatabase = connectionUrl === `sqlite://${SAMPLE_DATABASE_NAME}`;
 
     let suggestions: string[];
 
@@ -32,7 +48,17 @@ export async function POST(request: NextRequest) {
       ];
     } else {
       // Generate schema-based suggestions for non-sample databases
-      suggestions = await generateSchemaBasedSuggestions(dataSource);
+      // Create a compatible dataSource object for the suggestion service
+      const dataSourceForSuggestions = {
+        id: environmentDataSource.dataSource.id,
+        name: environmentDataSource.dataSource.name,
+        connectionString: connectionUrl || '',
+        environmentId: environmentDataSource.environmentId,
+        environmentName: environmentDataSource.environment.name,
+        createdAt: environmentDataSource.dataSource.createdAt,
+        updatedAt: environmentDataSource.dataSource.updatedAt,
+      };
+      suggestions = await generateSchemaBasedSuggestions(dataSourceForSuggestions);
     }
 
     return NextResponse.json({
diff --git a/app/components/@settings/core/ControlPanel.tsx b/app/components/@settings/core/ControlPanel.tsx
index e359c058..cb5d4501 100644
--- a/app/components/@settings/core/ControlPanel.tsx
+++ b/app/components/@settings/core/ControlPanel.tsx
@@ -24,6 +24,7 @@ import { DeprecatedRole } from '@prisma/client';
 import OrganizationTab from '~/components/@settings/tabs/organization/OrganizationTab';
 import MembersTab from '~/components/@settings/tabs/members/MembersTab';
 import RolesTab from '~/components/@settings/tabs/roles/RolesTab';
+import EnvironmentsTab from '~/components/@settings/tabs/environments';
 
 const LAST_ACCESSED_TAB_KEY = 'control-panel-last-tab';
 
@@ -167,6 +168,8 @@ export const ControlPanel = () => {
     switch (tabId) {
       case 'data':
         return <DataTab />;
+      case 'environments':
+        return <EnvironmentsTab />;
       case 'deployed-apps':
         return <DeployedAppsTab />;
       case 'github':
diff --git a/app/components/@settings/core/constants.ts b/app/components/@settings/core/constants.ts
index 8cdb7ce3..cc240671 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 { Building, Database, GitBranch, type LucideIcon, Rocket, Users, ShieldUser } from 'lucide-react';
+import { Building, Database, GitBranch, type LucideIcon, Rocket, Users, Server, ShieldUser } 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> = {
   organization: Building,
   members: Users,
   roles: ShieldUser,
+  environments: Server,
 };
 
 export const TAB_LABELS: Record<TabType, string> = {
@@ -17,6 +18,7 @@ export const TAB_LABELS: Record<TabType, string> = {
   organization: 'Organization',
   members: 'Members',
   roles: 'Roles',
+  environments: 'Environments',
 };
 
 export const TAB_DESCRIPTIONS: Record<TabType, string> = {
@@ -26,12 +28,14 @@ export const TAB_DESCRIPTIONS: Record<TabType, string> = {
   organization: 'Manage your organization',
   members: 'Manage your organization members',
   roles: 'Manage roles and permissions for organization members',
+  environments: 'Manage your environments',
 };
 
 export const DEFAULT_TAB_CONFIG: TabVisibilityConfig[] = [
   { id: 'data', visible: true, window: 'user', order: 0 },
-  { id: 'github', visible: true, window: 'user', order: 1 },
-  { id: 'deployed-apps', visible: true, window: 'user', order: 2 },
+  { 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: 'organization', visible: true, window: 'admin', order: 0 },
   { id: 'members', visible: true, window: 'admin', order: 1 },
diff --git a/app/components/@settings/core/types.ts b/app/components/@settings/core/types.ts
index 43729c0a..9e73c62a 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' | 'organization' | 'members' | 'roles';
+export type TabType = 'data' | 'github' | 'deployed-apps' | 'organization' | 'members' | 'roles' | 'environments';
 
 export type WindowType = 'user' | 'admin';
 
@@ -31,4 +31,5 @@ export const TAB_LABELS: Record<TabType, string> = {
   organization: 'Organization',
   members: 'Members',
   roles: 'Roles',
+  environments: 'Environments',
 };
diff --git a/app/components/@settings/tabs/data/DataTab.tsx b/app/components/@settings/tabs/data/DataTab.tsx
index 421778b3..2750a527 100644
--- a/app/components/@settings/tabs/data/DataTab.tsx
+++ b/app/components/@settings/tabs/data/DataTab.tsx
@@ -6,21 +6,13 @@ import AddDataSourceForm from './forms/AddDataSourceForm';
 import EditDataSourceForm from './forms/EditDataSourceForm';
 import { classNames } from '~/utils/classNames';
 import { toast } from 'sonner';
-import { useDataSourcesStore } from '~/lib/stores/dataSources';
+import { type EnvironmentDataSource, useEnvironmentDataSourcesStore } from '~/lib/stores/environmentDataSources';
 import { settingsPanelStore, useSettingsStore } from '~/lib/stores/settings';
 import { useStore } from '@nanostores/react';
 
-export interface DataSource {
-  id: string;
-  name: string;
-  connectionString: string;
-  createdAt: string;
-  updatedAt: string;
-}
-
-interface DataSourcesResponse {
+interface EnvironmentDataSourcesResponse {
   success: boolean;
-  dataSources: DataSource[];
+  environmentDataSources: EnvironmentDataSource[];
 }
 
 export interface TestConnectionResponse {
@@ -33,10 +25,12 @@ export default function DataTab() {
   const [showAddFormLocal, setShowAddFormLocal] = useState(showAddForm);
   const [showEditForm, setShowEditForm] = useState(false);
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
-  const [selectedDataSource, setSelectedDataSource] = useState<DataSource | null>(null);
+  const [selectedEnvironmentDataSource, setSelectedEnvironmentDataSource] = useState<EnvironmentDataSource | null>(
+    null,
+  );
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [conversationCount, setConversationCount] = useState<number>(0);
-  const { dataSources, setDataSources } = useDataSourcesStore();
+  const { environmentDataSources, setEnvironmentDataSources } = useEnvironmentDataSourcesStore();
   const { selectedTab } = useSettingsStore();
 
   // Update local state when store changes
@@ -56,10 +50,10 @@ export default function DataTab() {
     const loadDataSources = async () => {
       try {
         const response = await fetch('/api/data-sources');
-        const data = (await response.json()) as DataSourcesResponse;
+        const data = (await response.json()) as EnvironmentDataSourcesResponse;
 
         if (data.success) {
-          setDataSources(data.dataSources);
+          setEnvironmentDataSources(data.environmentDataSources);
         }
       } catch (error) {
         console.error('Failed to load data sources:', error);
@@ -67,16 +61,19 @@ export default function DataTab() {
     };
 
     loadDataSources();
-  }, [setDataSources]);
+  }, [setEnvironmentDataSources]);
 
   const handleDelete = async () => {
-    if (!selectedDataSource) {
+    if (!selectedEnvironmentDataSource) {
       return;
     }
 
-    const response = await fetch(`/api/data-sources/${selectedDataSource.id}`, {
-      method: 'DELETE',
-    });
+    const response = await fetch(
+      `/api/data-sources/${selectedEnvironmentDataSource.dataSourceId}?environmentId=${selectedEnvironmentDataSource.environmentId}`,
+      {
+        method: 'DELETE',
+      },
+    );
 
     const data = (await response.json()) as { success: boolean; error?: string };
 
@@ -85,33 +82,35 @@ export default function DataTab() {
 
       // Reload data sources
       const reloadResponse = await fetch('/api/data-sources');
-      const reloadData = (await reloadResponse.json()) as DataSourcesResponse;
+      const reloadData = (await reloadResponse.json()) as EnvironmentDataSourcesResponse;
 
       if (reloadData.success) {
-        setDataSources(reloadData.dataSources);
+        setEnvironmentDataSources(reloadData.environmentDataSources);
       }
 
       setShowDeleteConfirm(false);
       setShowEditForm(false);
-      setSelectedDataSource(null);
+      setSelectedEnvironmentDataSource(null);
     } else {
       toast.error(data.error || 'Failed to delete data source');
     }
   };
 
-  const handleEdit = (dataSource: DataSource) => {
-    setSelectedDataSource(dataSource);
+  const handleEdit = (environmentDataSource: EnvironmentDataSource) => {
+    setSelectedEnvironmentDataSource(environmentDataSource);
     setShowEditForm(true);
     setShowAddFormLocal(false);
   };
 
   const handleDeleteClick = async () => {
-    if (!selectedDataSource) {
+    if (!selectedEnvironmentDataSource) {
       return;
     }
 
     try {
-      const response = await fetch(`/api/data-sources/${selectedDataSource.id}`);
+      const response = await fetch(
+        `/api/data-sources/${selectedEnvironmentDataSource.dataSourceId}?environmentId=${selectedEnvironmentDataSource.environmentId}`,
+      );
       const data = await response.json<{ success: boolean; conversationCount?: number }>();
 
       if (data.success) {
@@ -131,13 +130,13 @@ export default function DataTab() {
   const handleBack = () => {
     setShowEditForm(false);
     setShowAddFormLocal(false);
-    setSelectedDataSource(null);
+    setSelectedEnvironmentDataSource(null);
   };
 
   const handleAdd = () => {
     setShowAddFormLocal(true);
     setShowEditForm(false);
-    setSelectedDataSource(null);
+    setSelectedEnvironmentDataSource(null);
   };
 
   return (
@@ -191,10 +190,10 @@ export default function DataTab() {
               reloadResponse
                 .then((response) => response.json())
                 .then((data: unknown) => {
-                  const typedData = data as DataSourcesResponse;
+                  const typedData = data as EnvironmentDataSourcesResponse;
 
                   if (typedData.success) {
-                    setDataSources(typedData.dataSources);
+                    setEnvironmentDataSources(typedData.environmentDataSources);
                   }
                 })
                 .catch((error) => console.error('Failed to reload data sources after add:', error));
@@ -204,7 +203,7 @@ export default function DataTab() {
         </div>
       )}
 
-      {showEditForm && selectedDataSource && (
+      {showEditForm && selectedEnvironmentDataSource && (
         <div className="space-y-6">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-4">
@@ -225,7 +224,7 @@ export default function DataTab() {
             </div>
           </div>
           <EditDataSourceForm
-            selectedDataSource={selectedDataSource}
+            selectedDataSource={selectedEnvironmentDataSource}
             isSubmitting={isSubmitting}
             setIsSubmitting={setIsSubmitting}
             onSuccess={() => {
@@ -234,10 +233,10 @@ export default function DataTab() {
               reloadResponse
                 .then((response) => response.json())
                 .then((data: unknown) => {
-                  const typedData = data as DataSourcesResponse;
+                  const typedData = data as EnvironmentDataSourcesResponse;
 
                   if (typedData.success) {
-                    setDataSources(typedData.dataSources);
+                    setEnvironmentDataSources(typedData.environmentDataSources);
                   }
                 })
                 .catch((error) => console.error('Failed to reload data sources after edit:', error));
@@ -250,7 +249,7 @@ export default function DataTab() {
 
       {!showEditForm && !showAddFormLocal && (
         <div className="space-y-4">
-          {dataSources.length === 0 ? (
+          {environmentDataSources.length === 0 ? (
             <div className="text-center py-12">
               <Database className="w-12 h-12 text-gray-400 mx-auto mb-4" />
               <h4 className="text-lg font-medium text-gray-900 dark:text-white mb-2">No Data Sources</h4>
@@ -259,9 +258,9 @@ export default function DataTab() {
               </p>
             </div>
           ) : (
-            dataSources.map((dataSource) => (
+            environmentDataSources.map((environmentDataSource) => (
               <motion.div
-                key={dataSource.id}
+                key={`${environmentDataSource.environmentId}-${environmentDataSource.dataSourceId}`}
                 className="border-b border-gray-200 dark:border-gray-700"
                 initial={{ opacity: 0, y: 10 }}
                 animate={{ opacity: 1, y: 0 }}
@@ -269,17 +268,19 @@ export default function DataTab() {
                 <div
                   role="button"
                   tabIndex={0}
-                  onClick={() => handleEdit(dataSource)}
+                  onClick={() => handleEdit(environmentDataSource)}
                   onKeyDown={(e) => {
                     if (e.key === 'Enter' || e.key === ' ') {
-                      handleEdit(dataSource);
+                      handleEdit(environmentDataSource);
                     }
                   }}
                   className="w-full flex items-center justify-between p-4 hover:bg-gray-50 dark:hover:bg-gray-900 transition-all duration-200 cursor-pointer"
                 >
                   <div className="flex items-center gap-3">
                     <Database className="w-5 h-5 text-accent-500" />
-                    <h4 className="font-medium text-gray-900 dark:text-white">{dataSource.name}</h4>
+                    <h4 className="font-medium text-gray-900 dark:text-white">
+                      {environmentDataSource.dataSource.name}
+                    </h4>
                   </div>
                   <div className={classNames('flex items-center gap-2 transition-transform duration-200')}>
                     <ChevronRight className="w-4 h-4 text-gray-500 dark:text-gray-400" />
@@ -309,8 +310,8 @@ export default function DataTab() {
 
               <div className="space-y-4">
                 <p className="text-sm text-secondary">
-                  Are you sure you want to delete the data source "{selectedDataSource?.name}"? This will remove all
-                  associated data and cannot be undone.
+                  Are you sure you want to delete the data source "{selectedEnvironmentDataSource?.dataSource.name}"?
+                  This will This will remove all associated data and cannot be undone.
                 </p>
 
                 {conversationCount > 0 && (
diff --git a/app/components/@settings/tabs/data/forms/AddDataSourceForm.tsx b/app/components/@settings/tabs/data/forms/AddDataSourceForm.tsx
index d1e25d4e..ee67d7ea 100644
--- a/app/components/@settings/tabs/data/forms/AddDataSourceForm.tsx
+++ b/app/components/@settings/tabs/data/forms/AddDataSourceForm.tsx
@@ -1,5 +1,5 @@
 import { classNames } from '~/utils/classNames';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { toast } from 'sonner';
 import { CheckCircle, Loader2, Plug, Save, XCircle } from 'lucide-react';
 import type { TestConnectionResponse } from '~/components/@settings/tabs/data/DataTab';
@@ -22,6 +22,24 @@ interface DataSourceResponse {
   };
 }
 
+interface Environment {
+  id: string;
+  name: string;
+  description?: string;
+}
+
+interface EnvironmentOption {
+  label: string;
+  value: string;
+  description?: string;
+}
+
+interface EnvironmentsResponse {
+  success: boolean;
+  environments: Environment[];
+  error?: string;
+}
+
 const testConnectionResponseSchema = z.object({
   success: z.boolean(),
   message: z.string(),
@@ -33,15 +51,53 @@ interface AddDataSourceFormProps {
   onSuccess: () => void;
 }
 
+// TODO: @skos update the form to use EnvironmentDataSource
 export default function AddDataSourceForm({ isSubmitting, setIsSubmitting, onSuccess }: AddDataSourceFormProps) {
   const [dbType, setDbType] = useState<DataSourceOption>(DEFAULT_DATA_SOURCES[0]);
   const [dbName, setDbName] = useState('');
   const [connStr, setConnStr] = useState('');
+  const [selectedEnvironment, setSelectedEnvironment] = useState<EnvironmentOption | null>(null);
+  const [environmentOptions, setEnvironmentOptions] = useState<EnvironmentOption[]>([]);
+  const [isLoadingEnvironments, setIsLoadingEnvironments] = useState(true);
   const [isTestingConnection, setIsTestingConnection] = useState(false);
   const [testResult, setTestResult] = useState<DataSourceResponse | null>(null);
   const [error, setError] = useState<string | null>(null);
   const { availableDataSourceOptions } = useDataSourceTypesPlugin();
 
+  // Fetch environments on component mount
+  useEffect(() => {
+    const fetchEnvironments = async () => {
+      try {
+        const response = await fetch('/api/environments');
+        const result: EnvironmentsResponse = await response.json();
+
+        if (result.success) {
+          // Transform environments to options
+          const options: EnvironmentOption[] = result.environments.map((env) => ({
+            label: env.name,
+            value: env.id,
+            description: env.description,
+          }));
+          setEnvironmentOptions(options);
+
+          // Auto-select first environment if available
+          if (options.length > 0) {
+            setSelectedEnvironment(options[0]);
+          }
+        } else {
+          setError(result.error || 'Failed to fetch environments');
+        }
+      } catch (error) {
+        setError('Failed to fetch environments');
+        console.error('Error fetching environments:', error);
+      } finally {
+        setIsLoadingEnvironments(false);
+      }
+    };
+
+    fetchEnvironments();
+  }, []);
+
   const handleTestConnection = async () => {
     setIsTestingConnection(true);
     setTestResult(null);
@@ -54,6 +110,11 @@ export default function AddDataSourceForm({ isSubmitting, setIsSubmitting, onSuc
           return;
         }
 
+        if (!selectedEnvironment) {
+          setError('Please select an environment');
+          return;
+        }
+
         const formData = new FormData();
         formData.append('connectionString', connStr);
 
@@ -97,8 +158,19 @@ export default function AddDataSourceForm({ isSubmitting, setIsSubmitting, onSuc
     setIsSubmitting(true);
 
     try {
+      if (!selectedEnvironment) {
+        setError('Please select an environment');
+        setTestResult(null);
+
+        return;
+      }
+
       const response = await fetch('/api/data-sources/example', {
         method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ environmentId: selectedEnvironment.value }),
       });
 
       const result = (await response.json()) as DataSourceResponse;
@@ -126,6 +198,13 @@ export default function AddDataSourceForm({ isSubmitting, setIsSubmitting, onSuc
       return;
     }
 
+    if (!selectedEnvironment) {
+      setError('Please select an environment');
+      setTestResult(null);
+
+      return;
+    }
+
     if (!dbName) {
       setError('Please enter the data source name');
       setTestResult(null);
@@ -148,6 +227,7 @@ export default function AddDataSourceForm({ isSubmitting, setIsSubmitting, onSuc
       const formData = new FormData();
       formData.append('name', dbName);
       formData.append('connectionString', connStr);
+      formData.append('environmentId', selectedEnvironment.value);
 
       const response = await fetch('/api/data-sources', {
         method: 'POST',
@@ -203,6 +283,27 @@ export default function AddDataSourceForm({ isSubmitting, setIsSubmitting, onSuc
             </div>
           </div>
 
+          <div className="mb-6">
+            <label className="mb-3 block text-sm font-medium text-secondary">Environment</label>
+            <BaseSelect
+              value={selectedEnvironment}
+              onChange={(value: EnvironmentOption | null) => {
+                setSelectedEnvironment(value);
+                setError(null);
+                setTestResult(null);
+              }}
+              options={environmentOptions}
+              placeholder={isLoadingEnvironments ? 'Loading environments...' : 'Select environment'}
+              isDisabled={isLoadingEnvironments}
+              width="100%"
+              minWidth="100%"
+              isSearchable={false}
+            />
+            {selectedEnvironment?.description && (
+              <div className="text-gray-400 text-sm mt-2">{selectedEnvironment.description}</div>
+            )}
+          </div>
+
           {dbType.value !== SAMPLE_DATABASE && (
             <>
               <div>
@@ -290,7 +391,7 @@ export default function AddDataSourceForm({ isSubmitting, setIsSubmitting, onSuc
                     e.preventDefault();
                     await handleTestConnection();
                   }}
-                  disabled={isTestingConnection || isSubmitting || !connStr}
+                  disabled={isTestingConnection || isSubmitting || !connStr || !selectedEnvironment}
                   className={classNames(
                     'inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
                     'bg-depth-1 bg-depth-1/50 ',
@@ -316,7 +417,7 @@ export default function AddDataSourceForm({ isSubmitting, setIsSubmitting, onSuc
               <button
                 type="button"
                 onClick={handleSubmit}
-                disabled={isSubmitting || (dbType.value !== SAMPLE_DATABASE && !connStr)}
+                disabled={isSubmitting || !selectedEnvironment || (dbType.value !== SAMPLE_DATABASE && !connStr)}
                 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',
diff --git a/app/components/@settings/tabs/data/forms/EditDataSourceForm.tsx b/app/components/@settings/tabs/data/forms/EditDataSourceForm.tsx
index cb36c56e..c27d3e78 100644
--- a/app/components/@settings/tabs/data/forms/EditDataSourceForm.tsx
+++ b/app/components/@settings/tabs/data/forms/EditDataSourceForm.tsx
@@ -1,8 +1,7 @@
 import { classNames } from '~/utils/classNames';
 import { useEffect, useState } from 'react';
-import { Info, XCircle, CheckCircle, Loader2, Plug, Trash2, Save, AlertTriangle } from 'lucide-react';
+import { AlertTriangle, CheckCircle, Info, Loader2, Plug, Save, Trash2, XCircle } from 'lucide-react';
 import type { TestConnectionResponse } from '~/components/@settings/tabs/data/DataTab';
-import { type DataSource } from '~/components/@settings/tabs/data/DataTab';
 import { toast } from 'sonner';
 import { BaseSelect } from '~/components/ui/Select';
 import { SelectDatabaseTypeOptions, SingleValueWithTooltip } from '~/components/database/SelectDatabaseTypeOptions';
@@ -13,6 +12,9 @@ import {
   SAMPLE_DATABASE,
   useDataSourceTypesPlugin,
 } from '~/lib/hooks/plugins/useDataSourceTypesPlugin';
+import type { EnvironmentDataSource } from '~/lib/stores/environmentDataSources';
+import { getDataSourceUrl } from '~/components/@settings/utils/data-sources';
+import { getConnectionProtocol } from '@liblab/data-access/utils/connection';
 
 interface DataSourceResponse {
   success: boolean;
@@ -20,14 +22,38 @@ interface DataSourceResponse {
   error?: string;
 }
 
+interface Environment {
+  id: string;
+  name: string;
+  description?: string;
+}
+
+interface EnvironmentOption {
+  label: string;
+  value: string;
+  description?: string;
+}
+
+interface EnvironmentsResponse {
+  success: boolean;
+  environments: Environment[];
+  error?: string;
+}
+
+// TODO: @skos update the form to use EnvironmentDataSource
 interface EditDataSourceFormProps {
-  selectedDataSource: DataSource | null;
+  selectedDataSource: EnvironmentDataSource | null;
   isSubmitting: boolean;
   setIsSubmitting: (isSubmitting: boolean) => void;
   onSuccess: () => void;
   onDelete: () => void;
 }
 
+function getDataSourceType(databaseUrl: string) {
+  const protocol = getConnectionProtocol(databaseUrl);
+  return protocol === 'postgresql' ? 'postgres' : protocol;
+}
+
 export default function EditDataSourceForm({
   selectedDataSource,
   isSubmitting,
@@ -40,37 +66,86 @@ export default function EditDataSourceForm({
   const [dbType, setDbType] = useState<DataSourceOption>({} as DataSourceOption);
   const [dbName, setDbName] = useState('');
   const [connStr, setConnStr] = useState('');
+  const [selectedEnvironment, setSelectedEnvironment] = useState<EnvironmentOption | null>(null);
+  const [environmentOptions, setEnvironmentOptions] = useState<EnvironmentOption[]>([]);
+  const [isLoadingEnvironments, setIsLoadingEnvironments] = useState(true);
   const [isTestingConnection, setIsTestingConnection] = useState(false);
   const [testResult, setTestResult] = useState<DataSourceResponse | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [showSaveConfirmation, setShowSaveConfirmation] = useState(false);
   const [showConnStr, setShowConnStr] = useState(false);
 
+  // Fetch environments on component mount
+  useEffect(() => {
+    const fetchEnvironments = async () => {
+      try {
+        const response = await fetch('/api/environments');
+        const result: EnvironmentsResponse = await response.json();
+
+        if (result.success) {
+          // Transform environments to options
+          const options: EnvironmentOption[] = result.environments.map((env) => ({
+            label: env.name,
+            value: env.id,
+            description: env.description || undefined,
+          }));
+          setEnvironmentOptions(options);
+
+          // Auto-select first environment if available
+          if (options.length > 0) {
+            setSelectedEnvironment(options[0]);
+          }
+        } else {
+          setError(result.error || 'Failed to fetch environments');
+        }
+      } catch (error) {
+        setError('Failed to fetch environments');
+        console.error('Error fetching environments:', error);
+      } finally {
+        setIsLoadingEnvironments(false);
+      }
+    };
+
+    fetchEnvironments();
+  }, []);
+
   useEffect(() => {
     if (!selectedDataSource) {
       return;
     }
 
-    if (selectedDataSource.name === 'Sample Database') {
+    // Set the current environment from the selected data source
+    const currentEnvironment: EnvironmentOption = {
+      label: selectedDataSource.environment.name,
+      value: selectedDataSource.environment.id,
+      description: selectedDataSource.environment.description || undefined,
+    };
+    setSelectedEnvironment(currentEnvironment);
+
+    if (selectedDataSource.dataSource.name === 'Sample Database') {
       setDbType(DEFAULT_DATA_SOURCES[0]);
       setDbName('');
       setConnStr('');
     } else {
-      const connectionDetails = new URL(selectedDataSource.connectionString);
-      const type = connectionDetails.protocol.replace(':', '');
+      // For non-sample databases, we need to get the connection string from the API
+      // since it's not stored in the EnvironmentDataSource object
+      // This will be handled when we need to update the data source
 
-      // Find matching option (handle postgresql -> postgres mapping specifically)
-      const normalizedType = type === 'postgresql' ? 'postgres' : type;
-      const matchingOption = availableDataSourceOptions.find((opt) => opt.value === normalizedType);
+      setDbName(selectedDataSource.dataSource.name);
 
-      setDbType(matchingOption || DEFAULT_DATA_SOURCES[0]);
-      setDbName(selectedDataSource.name);
-      setConnStr(selectedDataSource.connectionString);
+      getDataSourceUrl(selectedDataSource.dataSource.id, currentEnvironment.value).then((databaseUrl) => {
+        setConnStr(databaseUrl);
+
+        const type = getDataSourceType(databaseUrl);
+        const matchingOption = availableDataSourceOptions.find((opt) => opt.value === type);
+
+        setDbType(matchingOption || DEFAULT_DATA_SOURCES[0]);
+      });
     }
 
     setError(null);
     setTestResult(null);
-  }, [selectedDataSource?.id, selectedDataSource?.name]);
+  }, [selectedDataSource?.dataSourceId, selectedDataSource?.dataSource.name, selectedDataSource?.environment]);
 
   const handleTestConnection = async () => {
     setIsTestingConnection(true);
@@ -84,6 +159,11 @@ export default function EditDataSourceForm({
           return;
         }
 
+        if (!selectedEnvironment) {
+          setError('Please select an environment');
+          return;
+        }
+
         const formData = new FormData();
         formData.append('name', dbName);
         formData.append('connectionString', connStr);
@@ -129,6 +209,13 @@ export default function EditDataSourceForm({
       return;
     }
 
+    if (!selectedEnvironment) {
+      setError('Please select an environment');
+      setTestResult(null);
+
+      return;
+    }
+
     setIsSubmitting(true);
     setError(null);
     setTestResult(null);
@@ -139,10 +226,13 @@ export default function EditDataSourceForm({
       formData.append('name', dbName);
       formData.append('connectionString', connStr);
 
-      const response = await fetch(`/api/data-sources/${selectedDataSource?.id}`, {
-        method: 'PUT',
-        body: formData,
-      });
+      const response = await fetch(
+        `/api/data-sources/${selectedDataSource?.dataSourceId}?environmentId=${selectedEnvironment.value}`,
+        {
+          method: 'PUT',
+          body: formData,
+        },
+      );
 
       const data = await response.json<DataSourceResponse>();
 
@@ -204,6 +294,27 @@ export default function EditDataSourceForm({
             </div>
           </div>
 
+          <div className="mb-6">
+            <label className="mb-3 block text-sm font-medium text-secondary">Environment</label>
+            <BaseSelect
+              value={selectedEnvironment}
+              onChange={(value: EnvironmentOption | null) => {
+                setSelectedEnvironment(value);
+                setError(null);
+                setTestResult(null);
+              }}
+              options={environmentOptions}
+              placeholder={isLoadingEnvironments ? 'Loading environments...' : 'Select environment'}
+              isDisabled={isLoadingEnvironments}
+              width="100%"
+              minWidth="100%"
+              isSearchable={false}
+            />
+            {selectedEnvironment?.description && (
+              <div className="text-gray-400 text-sm mt-2">{selectedEnvironment.description}</div>
+            )}
+          </div>
+
           {dbType.value !== SAMPLE_DATABASE && (
             <>
               <div>
@@ -315,7 +426,7 @@ export default function EditDataSourceForm({
                     e.preventDefault();
                     await handleTestConnection();
                   }}
-                  disabled={isTestingConnection || isSubmitting || !connStr}
+                  disabled={isTestingConnection || isSubmitting || !connStr || !selectedEnvironment}
                   className={classNames(
                     'inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
                     'bg-blue-500 hover:bg-blue-600',
@@ -355,7 +466,9 @@ export default function EditDataSourceForm({
               <button
                 type="button"
                 onClick={handleSubmit}
-                disabled={isSubmitting || dbType.value === SAMPLE_DATABASE || !dbName || !connStr}
+                disabled={
+                  isSubmitting || dbType.value === SAMPLE_DATABASE || !dbName || !connStr || !selectedEnvironment
+                }
                 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',
diff --git a/app/components/@settings/tabs/environments/EnvironmentsTab.tsx b/app/components/@settings/tabs/environments/EnvironmentsTab.tsx
new file mode 100644
index 00000000..085bc92d
--- /dev/null
+++ b/app/components/@settings/tabs/environments/EnvironmentsTab.tsx
@@ -0,0 +1,357 @@
+import { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+import { AlertTriangle, ArrowLeft, Edit, Globe, Plus, Trash2 } from 'lucide-react';
+import { Dialog, DialogClose, DialogRoot, DialogTitle } from '~/components/ui/Dialog';
+import AddEnvironmentForm from './forms/AddEnvironmentForm';
+import EditEnvironmentForm from './forms/EditEnvironmentForm';
+import { classNames } from '~/utils/classNames';
+import { toast } from 'sonner';
+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 { logger } from '~/utils/logger';
+
+interface EnvironmentsResponse {
+  success: boolean;
+  environments: EnvironmentWithRelations[];
+}
+
+export default function EnvironmentsTab() {
+  const { showAddForm } = useStore(settingsPanelStore);
+  const [showAddFormLocal, setShowAddFormLocal] = useState(showAddForm);
+  const [showEditForm, setShowEditForm] = useState(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [selectedEnvironment, setSelectedEnvironment] = useState<EnvironmentWithRelations | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  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 === 'environments') {
+      setShowAddFormLocal(true);
+    }
+  }, [selectedTab]);
+
+  // Load environments on mount
+  useEffect(() => {
+    const loadEnvironments = async () => {
+      try {
+        const response = await fetch('/api/environments');
+        const data = (await response.json()) as EnvironmentsResponse;
+
+        if (data.success) {
+          setEnvironments(data.environments);
+        }
+      } catch (error) {
+        console.error('Failed to load environments:', error);
+      }
+    };
+
+    loadEnvironments();
+  }, [setEnvironments]);
+
+  const handleDelete = async () => {
+    if (!selectedEnvironment) {
+      return;
+    }
+
+    try {
+      const response = await fetch(`/api/environments/${selectedEnvironment.id}`, {
+        method: 'DELETE',
+      });
+
+      const data = (await response.json()) as { success: boolean; error?: string };
+
+      if (data.success) {
+        toast.success('Environment deleted successfully');
+
+        // Reload environments
+        const reloadResponse = await fetch('/api/environments');
+        const reloadData = (await reloadResponse.json()) as EnvironmentsResponse;
+
+        if (reloadData.success) {
+          setEnvironments(reloadData.environments);
+        }
+
+        setShowDeleteConfirm(false);
+        setShowEditForm(false);
+        setSelectedEnvironment(null);
+      } else {
+        toast.error(data.error || 'Failed to delete environment');
+      }
+    } catch (error) {
+      logger.error('Failed to load environments:', JSON.stringify(error));
+      toast.error('Failed to delete environment');
+    }
+  };
+
+  const handleEdit = (environment: EnvironmentWithRelations) => {
+    setSelectedEnvironment(environment);
+    setShowEditForm(true);
+    setShowAddFormLocal(false);
+  };
+
+  const handleDeleteClick = (environment: EnvironmentWithRelations) => {
+    setSelectedEnvironment(environment);
+    setShowDeleteConfirm(true);
+  };
+
+  const handleBack = () => {
+    setShowEditForm(false);
+    setShowAddFormLocal(false);
+    setSelectedEnvironment(null);
+  };
+
+  const handleAdd = () => {
+    setShowAddFormLocal(true);
+    setShowEditForm(false);
+    setSelectedEnvironment(null);
+  };
+
+  return (
+    <div className="space-y-6">
+      {!showEditForm && !showAddFormLocal && (
+        <div className="flex items-center justify-between">
+          <div>
+            <h2 className="text-lg font-medium text-primary">Environments</h2>
+            <p className="text-sm text-secondary">Manage your environments</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 Environment</span>
+          </button>
+        </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 Environment</h2>
+                <p className="text-sm text-secondary">Add a new environment</p>
+              </div>
+            </div>
+          </div>
+          <AddEnvironmentForm
+            isSubmitting={isSubmitting}
+            setIsSubmitting={setIsSubmitting}
+            onSuccess={() => {
+              // Reload environments
+              const reloadResponse = fetch('/api/environments');
+              reloadResponse
+                .then((response) => response.json())
+                .then((data: unknown) => {
+                  const typedData = data as EnvironmentsResponse;
+
+                  if (typedData.success) {
+                    setEnvironments(typedData.environments);
+                  }
+                })
+                .catch((error) => console.error('Failed to reload environments after add:', error));
+              handleBack();
+            }}
+          />
+        </div>
+      )}
+
+      {showEditForm && selectedEnvironment && (
+        <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">Edit Environment</h2>
+                <p className="text-sm text-secondary">Modify your environment settings</p>
+              </div>
+            </div>
+          </div>
+          <EditEnvironmentForm
+            environment={selectedEnvironment}
+            isSubmitting={isSubmitting}
+            setIsSubmitting={setIsSubmitting}
+            onSuccess={() => {
+              // Reload environments
+              const reloadResponse = fetch('/api/environments');
+              reloadResponse
+                .then((response) => response.json())
+                .then((data: unknown) => {
+                  const typedData = data as EnvironmentsResponse;
+
+                  if (typedData.success) {
+                    setEnvironments(typedData.environments);
+                  }
+                })
+                .catch((error) => console.error('Failed to reload environments after edit:', error));
+              handleBack();
+            }}
+            onDelete={() => handleDeleteClick(selectedEnvironment)}
+          />
+        </div>
+      )}
+
+      {!showEditForm && !showAddFormLocal && (
+        <div className="space-y-4">
+          {environments.length === 0 ? (
+            <div className="text-center py-12">
+              <Globe className="w-12 h-12 text-gray-400 mx-auto mb-4" />
+              <h4 className="text-lg font-medium text-gray-900 dark:text-white mb-2">No Environments</h4>
+              <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+                Get started by adding your first environment.
+              </p>
+            </div>
+          ) : (
+            environments.map((environment) => (
+              <motion.div
+                key={environment.id}
+                className="border-b border-gray-200 dark:border-gray-700"
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+              >
+                <div className="w-full flex items-center justify-between p-4">
+                  <div
+                    className="flex items-center gap-3 flex-1 cursor-pointer"
+                    onClick={() => handleEdit(environment)}
+                  >
+                    <Globe className="w-5 h-5 text-accent-500" />
+                    <div>
+                      <h4 className="font-medium text-gray-900 dark:text-white">{environment.name}</h4>
+                      {environment.description && (
+                        <p className="text-sm text-gray-600 dark:text-gray-400">{environment.description}</p>
+                      )}
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <button
+                      onClick={() => handleEdit(environment)}
+                      className={classNames(
+                        'inline-flex items-center gap-2 p-2 text-sm font-medium rounded-lg transition-colors',
+                        'text-gray-500 hover:text-accent-500',
+                        'hover:bg-accent-50 dark:hover:bg-accent-950/20',
+                      )}
+                    >
+                      <Edit className="w-4 h-4" />
+                    </button>
+                    <button
+                      onClick={() => handleDeleteClick(environment)}
+                      className={classNames(
+                        'inline-flex items-center gap-2 p-2 text-sm font-medium rounded-lg transition-colors',
+                        'text-gray-500 hover:text-red-500',
+                        'hover:bg-red-50 dark:hover:bg-red-950/20',
+                      )}
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </button>
+                  </div>
+                </div>
+              </motion.div>
+            ))
+          )}
+        </div>
+      )}
+
+      <DialogRoot open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
+        <Dialog>
+          <div className="rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] overflow-hidden">
+            <div className="p-6">
+              <div className="flex items-center justify-between mb-6">
+                <div className="flex items-center gap-3">
+                  <div className="p-2 rounded-lg bg-[#F5F5F5] dark:bg-[#1A1A1A] border border-[#E5E5E5] dark:border-[#1A1A1A]">
+                    <Trash2 className="w-5 h-5 text-tertiary" />
+                  </div>
+                  <div>
+                    <DialogTitle title="Delete Environment" />
+                    <p className="text-sm text-secondary">This action cannot be undone</p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="space-y-4">
+                <p className="text-sm text-secondary">
+                  Are you sure you want to delete the environment "{selectedEnvironment?.name}"? This will remove all
+                  associated data and cannot be undone.
+                </p>
+
+                {selectedEnvironment?.dataSources && selectedEnvironment.dataSources.length > 0 && (
+                  <div className="p-3 rounded-lg bg-amber-500/5 border border-amber-500/20">
+                    <div className="flex items-center gap-2">
+                      <AlertTriangle className="w-5 h-5 text-amber-500" />
+                      <div className="text-sm">
+                        <p className="text-amber-600 dark:text-amber-400 font-medium">
+                          Warning: This environment has {selectedEnvironment.dataSources.length} data source
+                          {selectedEnvironment.dataSources.length === 1 ? '' : 's'}!
+                        </p>
+                        <p className="text-amber-600 dark:text-amber-500 mt-1">
+                          All data sources and associated conversations will be permanently deleted.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              <div className="flex items-center justify-end gap-3 pt-4 mt-4 border-t border-[#E5E5E5] dark:border-[#1A1A1A]">
+                <DialogClose asChild>
+                  <button
+                    className={classNames(
+                      'inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
+                      'bg-[#F5F5F5] hover:bg-[#E5E5E5]',
+                      'dark:bg-[#1A1A1A] dark:hover:bg-[#2A2A2A]',
+                      'text-primary',
+                    )}
+                  >
+                    Cancel
+                  </button>
+                </DialogClose>
+                <button
+                  onClick={handleDelete}
+                  className={classNames(
+                    'inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
+                    'bg-red-500 hover:bg-red-600',
+                    'text-white',
+                  )}
+                >
+                  <Trash2 className="w-4 h-4" />
+                  <span>Delete</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </Dialog>
+      </DialogRoot>
+    </div>
+  );
+}
diff --git a/app/components/@settings/tabs/environments/forms/AddEnvironmentForm.tsx b/app/components/@settings/tabs/environments/forms/AddEnvironmentForm.tsx
new file mode 100644
index 00000000..b9e61659
--- /dev/null
+++ b/app/components/@settings/tabs/environments/forms/AddEnvironmentForm.tsx
@@ -0,0 +1,130 @@
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { classNames } from '~/utils/classNames';
+import { toast } from 'sonner';
+import type { CreateEnvironmentResponse } from '~/api/environments/route';
+
+interface AddEnvironmentFormProps {
+  isSubmitting: boolean;
+  setIsSubmitting: (value: boolean) => void;
+  onSuccess: () => void;
+}
+
+export default function AddEnvironmentForm({ isSubmitting, setIsSubmitting, onSuccess }: AddEnvironmentFormProps) {
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!name.trim()) {
+      toast.error('Environment name is required');
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      const response = await fetch('/api/environments', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          name: name.trim(),
+          description: description.trim() || undefined,
+        }),
+      });
+
+      const data = await response.json<CreateEnvironmentResponse>();
+
+      if (data.success) {
+        toast.success('Environment created successfully');
+        onSuccess();
+      } else {
+        toast.error(data.error || 'Failed to create environment');
+      }
+    } catch (error) {
+      console.error('Failed to create environment:', error);
+      toast.error('Failed to create environment');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <motion.form
+      onSubmit={handleSubmit}
+      className="space-y-6"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.2 }}
+    >
+      <div className="space-y-4">
+        <div>
+          <label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+            Environment Name *
+          </label>
+          <input
+            type="text"
+            id="name"
+            value={name}
+            onChange={(e) => setName(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:outline-none focus:ring-2 focus:ring-accent-500 focus:border-transparent',
+              'placeholder-gray-500 dark:placeholder-gray-400',
+            )}
+            placeholder="e.g., Development, Staging, Production"
+            disabled={isSubmitting}
+            required
+          />
+        </div>
+
+        <div>
+          <label htmlFor="description" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+            Description
+          </label>
+          <textarea
+            id="description"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            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:outline-none focus:ring-2 focus:ring-accent-500 focus:border-transparent',
+              'placeholder-gray-500 dark:placeholder-gray-400',
+              'resize-none',
+            )}
+            placeholder="Optional description of this environment"
+            disabled={isSubmitting}
+          />
+        </div>
+      </div>
+
+      <div className="flex items-center justify-end gap-3 pt-4">
+        <button
+          type="submit"
+          disabled={isSubmitting || !name.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',
+            'disabled:cursor-not-allowed',
+          )}
+        >
+          {isSubmitting ? (
+            <>
+              <div className="w-4 h-4 border-2 border-gray-600 border-t-transparent rounded-full animate-spin" />
+              <span>Creating...</span>
+            </>
+          ) : (
+            <span>Create Environment</span>
+          )}
+        </button>
+      </div>
+    </motion.form>
+  );
+}
diff --git a/app/components/@settings/tabs/environments/forms/EditEnvironmentForm.tsx b/app/components/@settings/tabs/environments/forms/EditEnvironmentForm.tsx
new file mode 100644
index 00000000..9d3e5f56
--- /dev/null
+++ b/app/components/@settings/tabs/environments/forms/EditEnvironmentForm.tsx
@@ -0,0 +1,244 @@
+import { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+import { ChevronRight, Database, Key, Monitor } from 'lucide-react';
+import { classNames } from '~/utils/classNames';
+import { toast } from 'sonner';
+import type { EnvironmentWithRelations } from '~/lib/services/environmentService';
+
+interface EditEnvironmentFormProps {
+  environment: EnvironmentWithRelations;
+  isSubmitting: boolean;
+  setIsSubmitting: (value: boolean) => void;
+  onSuccess: () => void;
+  onDelete: () => void;
+}
+
+export default function EditEnvironmentForm({
+  environment,
+  isSubmitting,
+  setIsSubmitting,
+  onSuccess,
+  onDelete,
+}: EditEnvironmentFormProps) {
+  const [name, setName] = useState(environment.name);
+  const [description, setDescription] = useState(environment.description || '');
+
+  useEffect(() => {
+    setName(environment.name);
+    setDescription(environment.description || '');
+  }, [environment]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!name.trim()) {
+      toast.error('Environment name is required');
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      const response = await fetch(`/api/environments/${environment.id}`, {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          name: name.trim(),
+          description: description.trim() || undefined,
+        }),
+      });
+
+      const data = (await response.json()) as { success: boolean; environment?: any; error?: string };
+
+      if (data.success) {
+        toast.success('Environment updated successfully');
+        onSuccess();
+      } else {
+        toast.error(data.error || 'Failed to update environment');
+      }
+    } catch (error) {
+      console.error('Failed to update environment:', error);
+      toast.error('Failed to update environment');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <motion.form
+      onSubmit={handleSubmit}
+      className="space-y-6"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.2 }}
+    >
+      <div className="space-y-4">
+        <div>
+          <label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+            Environment Name *
+          </label>
+          <input
+            type="text"
+            id="name"
+            value={name}
+            onChange={(e) => setName(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:outline-none focus:ring-2 focus:ring-accent-500 focus:border-transparent',
+              'placeholder-gray-500 dark:placeholder-gray-400',
+            )}
+            placeholder="e.g., Development, Staging, Production"
+            disabled={isSubmitting}
+            required
+          />
+        </div>
+
+        <div>
+          <label htmlFor="description" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+            Description
+          </label>
+          <textarea
+            id="description"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            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:outline-none focus:ring-2 focus:ring-accent-500 focus:border-transparent',
+              'placeholder-gray-500 dark:placeholder-gray-400',
+              'resize-none',
+            )}
+            placeholder="Optional description of this environment"
+            disabled={isSubmitting}
+          />
+        </div>
+      </div>
+
+      {/* Connected Entities Sections */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">Connected Entities</h3>
+
+        {/* Secrets Section */}
+        <div className="border border-gray-200 dark:border-gray-700 rounded-lg">
+          <div className="px-4 py-3 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
+            <div className="flex items-center gap-2">
+              <Key className="w-4 h-4 text-gray-500" />
+              <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Secrets</span>
+            </div>
+          </div>
+          <div className="p-4">
+            {environment.environmentVariables && environment.environmentVariables.length > 0 ? (
+              <div className="space-y-2">
+                {environment.environmentVariables.map((envVar) => (
+                  <div
+                    key={envVar.id}
+                    className="flex items-center justify-between p-2 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md transition-colors cursor-pointer"
+                  >
+                    <span className="text-sm text-gray-700 dark:text-gray-300">{envVar.key}</span>
+                    <ChevronRight className="w-4 h-4 text-gray-400" />
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <p className="text-sm text-gray-500 dark:text-gray-400">No secrets configured</p>
+            )}
+          </div>
+        </div>
+
+        {/* Data Sources Section */}
+        <div className="border border-gray-200 dark:border-gray-700 rounded-lg">
+          <div className="px-4 py-3 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
+            <div className="flex items-center gap-2">
+              <Database className="w-4 h-4 text-gray-500" />
+              <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Data Sources</span>
+            </div>
+          </div>
+          <div className="p-4">
+            {environment.dataSources && environment.dataSources.length > 0 ? (
+              <div className="space-y-2">
+                {environment.dataSources.map((dataSource) => (
+                  <div
+                    key={dataSource.id}
+                    className="flex items-center justify-between p-2 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md transition-colors cursor-pointer"
+                  >
+                    <span className="text-sm text-gray-700 dark:text-gray-300">{dataSource.name}</span>
+                    <ChevronRight className="w-4 h-4 text-gray-400" />
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <p className="text-sm text-gray-500 dark:text-gray-400">No data sources connected</p>
+            )}
+          </div>
+        </div>
+
+        {/* Apps Section */}
+        <div className="border border-gray-200 dark:border-gray-700 rounded-lg">
+          <div className="px-4 py-3 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
+            <div className="flex items-center gap-2">
+              <Monitor className="w-4 h-4 text-gray-500" />
+              <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Apps</span>
+            </div>
+          </div>
+          <div className="p-4">
+            {environment.websites && environment.websites.length > 0 ? (
+              <div className="space-y-2">
+                {environment.websites.map((website) => (
+                  <div
+                    key={website.id}
+                    className="flex items-center justify-between p-2 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md transition-colors cursor-pointer"
+                  >
+                    <span className="text-sm text-gray-700 dark:text-gray-300">
+                      {website.siteName || website.siteUrl || `Website ${website.id.slice(0, 8)}`}
+                    </span>
+                    <ChevronRight className="w-4 h-4 text-gray-400" />
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <p className="text-sm text-gray-500 dark:text-gray-400">No apps deployed</p>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div className="flex items-center justify-between pt-4">
+        <button
+          type="button"
+          onClick={onDelete}
+          className={classNames(
+            'inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
+            'text-red-600 hover:text-red-700',
+            'hover:bg-red-50 dark:hover:bg-red-950/20',
+          )}
+        >
+          Delete Environment
+        </button>
+
+        <button
+          type="submit"
+          disabled={isSubmitting || !name.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',
+            'disabled:cursor-not-allowed',
+          )}
+        >
+          {isSubmitting ? (
+            <>
+              <div className="w-4 h-4 border-2 border-gray-600 border-t-transparent rounded-full animate-spin" />
+              <span>Updating...</span>
+            </>
+          ) : (
+            <span>Update Environment</span>
+          )}
+        </button>
+      </div>
+    </motion.form>
+  );
+}
diff --git a/app/components/@settings/tabs/environments/index.ts b/app/components/@settings/tabs/environments/index.ts
new file mode 100644
index 00000000..50a4add6
--- /dev/null
+++ b/app/components/@settings/tabs/environments/index.ts
@@ -0,0 +1 @@
+export { default } from './EnvironmentsTab';
diff --git a/app/components/@settings/utils/data-sources.ts b/app/components/@settings/utils/data-sources.ts
new file mode 100644
index 00000000..1971fe4e
--- /dev/null
+++ b/app/components/@settings/utils/data-sources.ts
@@ -0,0 +1,15 @@
+export async function getDataSourceUrl(dataSourceId: string, environmentId: string) {
+  const response = await fetch(`/api/data-sources/${dataSourceId}/url?environmentId=${environmentId}`);
+
+  if (!response.ok) {
+    throw new Error('Failed to get connection string');
+  }
+
+  const data = (await response.json()) as { success: boolean; url?: string; error?: string };
+
+  if (!data.success || !data.url) {
+    throw new Error(data.error || 'No connection string available');
+  }
+
+  return data.url;
+}
diff --git a/app/components/DataLoader.tsx b/app/components/DataLoader.tsx
index c91cf38d..7a259081 100644
--- a/app/components/DataLoader.tsx
+++ b/app/components/DataLoader.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useRef } from 'react';
 import { signIn, useSession } from '~/auth/auth-client';
-import { useDataSourcesStore } from '~/lib/stores/dataSources';
+import { type EnvironmentDataSource, useEnvironmentDataSourcesStore } from '~/lib/stores/environmentDataSources';
 import { usePluginStore } from '~/lib/plugins/plugin-store';
 import type { DataSourceType } from '~/lib/stores/dataSourceTypes';
 import { useDataSourceTypesStore } from '~/lib/stores/dataSourceTypes';
@@ -13,17 +13,10 @@ import { DATA_SOURCE_CONNECTION_ROUTE, TELEMETRY_CONSENT_ROUTE } from '~/lib/con
 import { initializeClientTelemetry } from '~/lib/telemetry/telemetry-client';
 import type { UserProfile } from '~/lib/services/userService';
 import { useAuthProvidersPlugin } from '~/lib/hooks/plugins/useAuthProvidersPlugin';
-import type { DataSource } from '~/components/@settings/tabs/data/DataTab';
 
 export interface RootData {
   user: UserProfile | null;
-  dataSources: Array<{
-    id: string;
-    name: string;
-    connectionString: string;
-    createdAt: string;
-    updatedAt: string;
-  }>;
+  environmentDataSources: EnvironmentDataSource[];
   pluginAccess: PluginAccessMap;
   dataSourceTypes: DataSourceType[];
 }
@@ -35,7 +28,8 @@ interface DataLoaderProps {
 
 export function DataLoader({ children, rootData }: DataLoaderProps) {
   const { data: session } = useSession();
-  const { setDataSources } = useDataSourcesStore();
+  // TODO: @skos this is the main idea, keep it this way but fetch envId, envName and connectionUrl
+  const { setEnvironmentDataSources } = useEnvironmentDataSourcesStore();
   const { setPluginAccess } = usePluginStore();
   const { setDataSourceTypes } = useDataSourceTypesStore();
   const { setUser } = useUserStore();
@@ -89,15 +83,15 @@ export function DataLoader({ children, rootData }: DataLoaderProps) {
         setUser(currentUser);
       }
 
-      // Handle data sources
-      let currentDataSources = rootData.dataSources || [];
+      // Handle environment data sources
+      let currentEnvironmentDataSources = rootData.environmentDataSources || [];
 
-      if ((!rootData.dataSources || rootData.dataSources.length === 0) && session?.user) {
+      if ((!rootData.environmentDataSources || rootData.environmentDataSources.length === 0) && session?.user) {
         console.debug('🔄 Fetching data sources...');
-        currentDataSources = await fetchDataSources();
-        setDataSources(currentDataSources);
-      } else if (rootData.dataSources) {
-        setDataSources(currentDataSources);
+        currentEnvironmentDataSources = await fetchEnvironmentDataSources();
+        setEnvironmentDataSources(currentEnvironmentDataSources);
+      } else if (rootData.environmentDataSources) {
+        setEnvironmentDataSources(rootData.environmentDataSources);
       }
 
       // Handle user onboarding flow with telemetry and data sources
@@ -118,7 +112,7 @@ export function DataLoader({ children, rootData }: DataLoaderProps) {
         }
 
         // Redirect to data source connection if no data sources exist
-        if (currentDataSources.length === 0) {
+        if (currentEnvironmentDataSources.length === 0) {
           const currentPath = window.location.pathname;
 
           if (currentPath !== DATA_SOURCE_CONNECTION_ROUTE) {
@@ -156,22 +150,22 @@ export function DataLoader({ children, rootData }: DataLoaderProps) {
     }
   };
 
-  const fetchDataSources = async (): Promise<DataSource[]> => {
+  const fetchEnvironmentDataSources = async (): Promise<EnvironmentDataSource[]> => {
     try {
-      const dataSourcesResponse = await fetch('/api/data-sources');
+      const environmentDataSourcesResponse = await fetch('/api/data-sources');
 
-      if (!dataSourcesResponse.ok) {
+      if (!environmentDataSourcesResponse.ok) {
         throw new Error('Failed to fetch data sources');
       }
 
-      const dataSourcesData = (await dataSourcesResponse.json()) as {
+      const environmentDataSourcesData = (await environmentDataSourcesResponse.json()) as {
         success: boolean;
-        dataSources: DataSource[];
+        environmentDataSources: EnvironmentDataSource[];
       };
 
       console.log('✅ Data sources fetched successfully');
 
-      return dataSourcesData.dataSources;
+      return environmentDataSourcesData.environmentDataSources;
     } catch (error) {
       console.error('❌ Failed to fetch data sources:', error);
       throw new Error('Failed to fetch data sources');
diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index 69a250d7..180ea16c 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -10,12 +10,16 @@ import { Workbench, WorkbenchProvider } from '~/components/workbench/Workbench.c
 import { classNames } from '~/utils/classNames';
 import { Messages } from './Messages.client';
 import * as Tooltip from '@radix-ui/react-tooltip';
-import { useDataSourcesStore } from '~/lib/stores/dataSources';
+import { useEnvironmentDataSourcesStore } from '~/lib/stores/environmentDataSources';
+import { DataSourceChangeWarningModal } from './DataSourceChangeWarningModal';
+import { toast } from 'sonner';
+import { chatId } from '~/lib/persistence/useConversationHistory';
+import { updateConversation } from '~/lib/persistence/conversations';
 
 import type { CodeError } from '~/types/actions';
 import ProgressCompilation from './ProgressCompilation';
 import type { ProgressAnnotation } from '~/types/context';
-import type { ActionRunner } from '~/lib/runtime/action-runner';
+import { ActionRunner } from '~/lib/runtime/action-runner';
 import { ChatTextarea } from './ChatTextarea';
 import { AUTOFIX_ATTEMPT_EVENT } from '~/lib/error-handler';
 import { useSession } from '~/auth/auth-client';
@@ -23,12 +27,16 @@ import type { SendMessageFn } from './Chat.client';
 import { workbenchStore } from '~/lib/stores/workbench';
 import { type BrowserInfo, detectBrowser } from '~/lib/utils/browser-detection';
 import { BrowserCompatibilityModal } from '~/components/ui/BrowserCompatibilityModal';
+import { getDataSourceUrl } from '~/components/@settings/utils/data-sources';
+import { updateLatestSnapshot } from '~/lib/persistence/snapshots';
+import { MessageRole } from '~/utils/constants';
+import { logger } from '~/utils/logger';
 
 export interface PendingPrompt {
   input: string;
   files: string[];
   images: string[];
-  dataSourceId: string | null;
+  environmentDataSource: { dataSourceId: string | null; environmentId: string | null };
 }
 
 const TEXTAREA_MIN_HEIGHT = 100;
@@ -89,8 +97,18 @@ export const BaseChat = ({
   const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
 
   const [progressAnnotations, setProgressAnnotations] = useState<ProgressAnnotation[]>([]);
-  const { dataSources } = useDataSourcesStore();
+  const { environmentDataSources } = useEnvironmentDataSourcesStore();
   const { data: session } = useSession();
+
+  const [showDataSourceChangeModal, setShowDataSourceChangeModal] = useState(false);
+  const [pendingDataSourceChange, setPendingDataSourceChange] = useState<{
+    dataSourceId: string;
+    environmentId: string;
+    dataSourceName: string;
+    environmentName: string;
+  } | null>(null);
+  const [isUpdatingDataSource, setIsUpdatingDataSource] = useState(false);
+
   const [browserInfo, setBrowserInfo] = useState<BrowserInfo>(() => ({
     name: 'Other',
     version: 'unknown',
@@ -101,6 +119,80 @@ export const BaseChat = ({
     setBrowserInfo(detectBrowser());
   }, []);
 
+  // Data source change handlers
+  const handleDataSourceChangeRequest = (
+    dataSourceId: string,
+    environmentId: string,
+    dataSourceName: string,
+    environmentName: string,
+  ) => {
+    setPendingDataSourceChange({
+      dataSourceId,
+      environmentId,
+      dataSourceName,
+      environmentName,
+    });
+    setShowDataSourceChangeModal(true);
+  };
+
+  const handleDataSourceChangeConfirm = async () => {
+    if (!pendingDataSourceChange) {
+      setShowDataSourceChangeModal(false);
+      setPendingDataSourceChange(null);
+
+      return;
+    }
+
+    setIsUpdatingDataSource(true);
+
+    try {
+      const url = await getDataSourceUrl(pendingDataSourceChange.dataSourceId, pendingDataSourceChange.environmentId);
+
+      const encodedConnectionString = encodeURIComponent(url);
+      const updatedEnvContent = await ActionRunner.updateEnvironmentVariable('DATABASE_URL', encodedConnectionString);
+
+      const { setSelectedEnvironmentDataSource } = useEnvironmentDataSourcesStore.getState();
+      setSelectedEnvironmentDataSource(pendingDataSourceChange.dataSourceId, pendingDataSourceChange.environmentId);
+
+      const currentChatId = chatId.get();
+
+      if (currentChatId) {
+        try {
+          await updateConversation(currentChatId, {
+            environmentId: pendingDataSourceChange.environmentId,
+            dataSourceId: pendingDataSourceChange.dataSourceId,
+          });
+
+          const lastUserMessage = messages
+            ?.slice()
+            .reverse()
+            .find((msg) => msg.role === MessageRole.User);
+
+          if (lastUserMessage?.id) {
+            await updateLatestSnapshot(currentChatId, '.env', updatedEnvContent);
+          }
+        } catch (error) {
+          logger.error(error);
+          toast.error("Failed to update the conversation's data source.");
+        }
+      }
+
+      toast.success('Data source changed successfully. Please restart your application.');
+    } catch (error) {
+      console.error('Failed to change data source:', error);
+      toast.error('Failed to change data source. Please try again.');
+    } finally {
+      setIsUpdatingDataSource(false);
+      setShowDataSourceChangeModal(false);
+      setPendingDataSourceChange(null);
+    }
+  };
+
+  const handleDataSourceChangeCancel = () => {
+    setShowDataSourceChangeModal(false);
+    setPendingDataSourceChange(null);
+  };
+
   useEffect(() => {
     if (data) {
       const progressList = data.filter(
@@ -173,7 +265,7 @@ export const BaseChat = ({
       return;
     }
 
-    if (!dataSources.length) {
+    if (!environmentDataSources.length) {
       return;
     }
 
@@ -227,7 +319,7 @@ export const BaseChat = ({
     } finally {
       sessionStorage.removeItem('pendingPrompt');
     }
-  }, [dataSources]);
+  }, [environmentDataSources]);
 
   useEffect(() => {
     const handleAutofixAttempt = ({ detail: { errors } }: CustomEvent<{ errors: CodeError[] }>) => {
@@ -354,6 +446,7 @@ export const BaseChat = ({
                   onSend={handleSendMessage}
                   isStreaming={isStreaming}
                   handleStop={handleStop}
+                  onDataSourceChange={handleDataSourceChangeRequest}
                 />
               )}
             </div>
@@ -376,6 +469,16 @@ export const BaseChat = ({
 
       {/* Browser Compatibility Modal */}
       <BrowserCompatibilityModal isOpen={!browserInfo.supportsWebContainers} />
+
+      {/* Data Source Change Warning Modal */}
+      <DataSourceChangeWarningModal
+        isOpen={showDataSourceChangeModal}
+        onClose={handleDataSourceChangeCancel}
+        onConfirm={handleDataSourceChangeConfirm}
+        newDataSourceName={pendingDataSourceChange?.dataSourceName || ''}
+        newEnvironmentName={pendingDataSourceChange?.environmentName || ''}
+        isLoading={isUpdatingDataSource}
+      />
     </div>
   );
 
diff --git a/app/components/chat/Chat.client.tsx b/app/components/chat/Chat.client.tsx
index 17ce6fc3..d593d885 100644
--- a/app/components/chat/Chat.client.tsx
+++ b/app/components/chat/Chat.client.tsx
@@ -21,9 +21,7 @@ import { createSampler } from '~/utils/sampler';
 import { getStarterTemplateFiles, getStarterTemplateMessages } from '~/utils/selectStarterTemplate';
 import { streamingState } from '~/lib/stores/streaming';
 import { filesToArtifacts } from '~/utils/fileUtils';
-import { type OutputAppEvent, OutputAppEventType } from '~/utils/output-app';
-import { QueryModal } from '~/components/chat/query-modal/QueryModal';
-import { useDataSourcesStore } from '~/lib/stores/dataSources';
+import { useEnvironmentDataSourcesStore } from '~/lib/stores/environmentDataSources';
 import { type Message, useChat } from '@ai-sdk/react';
 import { generateId } from 'ai';
 import { useGitPullSync } from '~/lib/stores/git';
@@ -39,10 +37,7 @@ import { useTrackStreamProgress } from '~/components/chat/useTrackStreamProgress
 import type { ProgressAnnotation } from '~/types/context';
 import { trackTelemetryEvent } from '~/lib/telemetry/telemetry-client';
 import { TelemetryEventType } from '~/lib/telemetry/telemetry-types';
-
-type DatabaseUrlResponse = {
-  url: string;
-};
+import { getDataSourceUrl } from '~/components/@settings/utils/data-sources';
 
 interface ChatProps {
   id?: string;
@@ -130,7 +125,7 @@ export const ChatImpl = ({
     chatStore.setKey('started', chatStarted);
   }, [chatStarted]);
 
-  const { selectedDataSourceId } = useDataSourcesStore();
+  const { selectedEnvironmentDataSource } = useEnvironmentDataSourcesStore();
 
   const { showChat } = useStore(chatStore);
 
@@ -317,7 +312,15 @@ export const ChatImpl = ({
     if (!chatStarted) {
       setChatStarted(true);
       await workbenchStore.initialize();
-      await startChatWithInitialMessage(messageContent, selectedDataSourceId!, files, dataList);
+      await startChatWithInitialMessage(
+        messageContent,
+        {
+          dataSourceId: selectedEnvironmentDataSource.dataSourceId!,
+          environmentId: selectedEnvironmentDataSource.environmentId!,
+        },
+        files,
+        dataList,
+      );
 
       return;
     }
@@ -338,7 +341,10 @@ export const ChatImpl = ({
           role: 'user',
           content: formatMessageWithModelInfo({
             messageContent: userUpdateArtifact + messageContent,
-            dataSourceId: selectedDataSourceId!,
+            environmentDataSource: {
+              dataSourceId: selectedEnvironmentDataSource.dataSourceId!,
+              environmentId: selectedEnvironmentDataSource.environmentId!,
+            },
             dataList,
           }),
           annotations: isFixMessage ? [FIX_ANNOTATION] : undefined,
@@ -358,7 +364,10 @@ export const ChatImpl = ({
           role: 'user',
           content: formatMessageWithModelInfo({
             messageContent,
-            dataSourceId: selectedDataSourceId!,
+            environmentDataSource: {
+              dataSourceId: selectedEnvironmentDataSource.dataSourceId!,
+              environmentId: selectedEnvironmentDataSource.environmentId!,
+            },
             dataList,
           }),
           annotations: isFixMessage ? [FIX_ANNOTATION] : undefined,
@@ -427,7 +436,10 @@ export const ChatImpl = ({
         annotations: ['hidden', FIX_ANNOTATION],
         content: formatMessageWithModelInfo({
           messageContent: `${userUpdateArtifact}${message}`,
-          dataSourceId: selectedDataSourceId!,
+          environmentDataSource: {
+            dataSourceId: selectedEnvironmentDataSource.dataSourceId!,
+            environmentId: selectedEnvironmentDataSource.environmentId!,
+          },
         }),
       },
     ]);
@@ -451,7 +463,7 @@ export const ChatImpl = ({
 
   async function startChatWithInitialMessage(
     messageContent: string,
-    datasourceId: string,
+    environmentDataSource: { dataSourceId: string; environmentId: string },
     files: File[],
     dataList: string[],
   ) {
@@ -461,28 +473,25 @@ export const ChatImpl = ({
     let conversationId = chatId.get();
 
     if (!conversationId) {
-      conversationId = await createConversation(datasourceId);
+      conversationId = await createConversation(
+        environmentDataSource.dataSourceId,
+        environmentDataSource.environmentId,
+      );
       chatId.set(conversationId);
 
       // Don't update URL during active chat - causes component unmounting
       // Store the conversation ID for potential future navigation
     }
 
-    const dataSourceUrlResponse = await fetch(`/api/data-sources/${datasourceId}/url`);
-
-    if (!dataSourceUrlResponse.ok) {
-      console.error('Failed to fetch database URL:', dataSourceUrlResponse.status);
-      toast.error('Failed to fetch database URL');
-
-      return;
-    }
-
-    const dataSourceUrlJson = await dataSourceUrlResponse.json<DatabaseUrlResponse>();
+    logger.info('Environment data source for new chat:', JSON.stringify(environmentDataSource));
 
-    const databaseUrl = dataSourceUrlJson.url;
-    setDataSourceUrl(databaseUrl);
+    const dataSourceUrl = await getDataSourceUrl(
+      environmentDataSource.dataSourceId,
+      environmentDataSource.environmentId,
+    );
+    setDataSourceUrl(dataSourceUrl);
 
-    const starterTemplateMessages = await getStarterTemplateMessages(messageContent, databaseUrl).catch((e) => {
+    const starterTemplateMessages = await getStarterTemplateMessages(messageContent, dataSourceUrl).catch((e) => {
       if (e.message.includes('rate limit')) {
         toast.warning('Rate limit exceeded. Skipping starter template\n Continuing with blank template');
       } else {
@@ -499,7 +508,10 @@ export const ChatImpl = ({
       content: formatMessageWithModelInfo({
         messageContent,
         firstUserMessage: true,
-        dataSourceId: selectedDataSourceId!,
+        environmentDataSource: {
+          dataSourceId: selectedEnvironmentDataSource.dataSourceId!,
+          environmentId: selectedEnvironmentDataSource.environmentId!,
+        },
         dataList,
       }),
       experimental_attachments: createExperimentalAttachments(dataList, files),
@@ -575,9 +587,6 @@ export const ChatImpl = ({
     }
   }, []);
 
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [selectedQueryId, setSelectedQueryId] = useState<string | number | null>(null);
-
   const handleRetry = async (errorMessage: string) => {
     const messagesWithoutLastAssistant = messages.filter(
       (message, index) => !(message.role === 'assistant' && index === messages.length - 1),
@@ -605,25 +614,6 @@ export const ChatImpl = ({
     });
   };
 
-  useEffect(() => {
-    const handleIframeMessage = (event: MessageEvent<OutputAppEvent>) => {
-      try {
-        const data = event.data;
-
-        if (data.eventType === OutputAppEventType.EDIT_QUERY) {
-          setSelectedQueryId(data.queryId);
-          setIsModalOpen(true);
-        }
-      } catch (error) {
-        console.error('Error handling iframe message:', error);
-      }
-    };
-
-    window.addEventListener('message', handleIframeMessage);
-
-    return () => window.removeEventListener('message', handleIframeMessage);
-  }, []);
-
   return (
     <>
       <BaseChat
@@ -666,21 +656,13 @@ export const ChatImpl = ({
         setMessages={setMessages}
         onRetry={handleRetry}
       />
-      {selectedQueryId && (
-        <QueryModal
-          isOpen={isModalOpen}
-          onOpenChange={setIsModalOpen}
-          queryId={selectedQueryId}
-          dataSourceId={selectedDataSourceId!}
-        />
-      )}
     </>
   );
 };
 
 interface MessageWithModelInfo {
   messageContent: string;
-  dataSourceId: string;
+  environmentDataSource: { dataSourceId: string; environmentId: string };
   firstUserMessage?: boolean;
   dataList?: string[];
 }
@@ -694,7 +676,7 @@ const createExperimentalAttachments = (dataList: string[], files: File[]) =>
 
 const formatMessageWithModelInfo = ({
   messageContent,
-  dataSourceId,
+  environmentDataSource,
   firstUserMessage,
   dataList,
 }: MessageWithModelInfo) => {
@@ -704,7 +686,8 @@ const formatMessageWithModelInfo = ({
     formattedMessage += `\n\n[FirstUserMessage: true]`;
   }
 
-  formattedMessage += `\n\n[DataSourceId: ${dataSourceId}]`;
+  formattedMessage += `\n\n[DataSourceId: ${environmentDataSource.dataSourceId}]`;
+  formattedMessage += `\n\n[EnvironmentId: ${environmentDataSource.environmentId}]`;
 
   if (dataList) {
     formattedMessage += `\n\n[Files: ${dataList.join('## ')}]`;
diff --git a/app/components/chat/ChatTextarea.tsx b/app/components/chat/ChatTextarea.tsx
index 967483a2..400350b4 100644
--- a/app/components/chat/ChatTextarea.tsx
+++ b/app/components/chat/ChatTextarea.tsx
@@ -5,7 +5,7 @@ import { IconButton } from '~/components/ui/IconButton';
 import WithTooltip from '~/components/ui/Tooltip';
 import FilePreview from './FilePreview';
 import { ScreenshotStateManager } from './ScreenshotStateManager';
-import { useDataSourcesStore } from '~/lib/stores/dataSources';
+import { useEnvironmentDataSourcesStore } from '~/lib/stores/environmentDataSources';
 import { openSettingsPanel } from '~/lib/stores/settings';
 import { SendButton } from './SendButton.client';
 import { processImageFile } from '~/utils/fileUtils';
@@ -31,6 +31,12 @@ interface ChatTextareaProps {
   onSend: (e: React.UIEvent) => void;
   isStreaming?: boolean;
   handleStop?: () => void;
+  onDataSourceChange?: (
+    dataSourceId: string,
+    environmentId: string,
+    dataSourceName: string,
+    environmentName: string,
+  ) => void;
 }
 
 export const ChatTextarea = forwardRef<HTMLTextAreaElement, ChatTextareaProps>(
@@ -53,10 +59,11 @@ export const ChatTextarea = forwardRef<HTMLTextAreaElement, ChatTextareaProps>(
       onSend,
       isStreaming = false,
       handleStop,
+      onDataSourceChange,
     },
     ref,
   ) => {
-    const { dataSources } = useDataSourcesStore();
+    const { environmentDataSources } = useEnvironmentDataSourcesStore();
 
     const handleConnectDataSource = () => {
       openSettingsPanel('data', true);
@@ -157,8 +164,13 @@ export const ChatTextarea = forwardRef<HTMLTextAreaElement, ChatTextareaProps>(
         </div>
         <div className="flex justify-between items-center text-sm mt-2">
           <div className="flex gap-1 items-center">
-            {dataSources.length > 0 ? (
-              <DataSourcePicker onAddNew={handleConnectDataSource} disabled={true} />
+            {environmentDataSources.length > 0 ? (
+              <DataSourcePicker
+                onAddNew={handleConnectDataSource}
+                disabled={false}
+                onDataSourceChange={onDataSourceChange}
+                placement={'top'}
+              />
             ) : (
               <button
                 onClick={handleConnectDataSource}
diff --git a/app/components/chat/DataSourceChangeWarningModal.tsx b/app/components/chat/DataSourceChangeWarningModal.tsx
new file mode 100644
index 00000000..c5599f4a
--- /dev/null
+++ b/app/components/chat/DataSourceChangeWarningModal.tsx
@@ -0,0 +1,93 @@
+import React from 'react';
+import { AlertTriangle, Database } from 'lucide-react';
+import { classNames } from '~/utils/classNames';
+
+interface DataSourceChangeWarningModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  newDataSourceName: string;
+  newEnvironmentName: string;
+  isLoading?: boolean;
+}
+
+export const DataSourceChangeWarningModal: React.FC<DataSourceChangeWarningModalProps> = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  newDataSourceName,
+  newEnvironmentName,
+  isLoading = false,
+}) => {
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-depth-1 rounded-lg p-6 max-w-md w-full mx-4 border border-depth-3">
+        <div className="flex items-center gap-3 mb-4">
+          <div className="p-2 rounded-lg bg-accent/10 border border-accent/20">
+            <AlertTriangle className="w-6 h-6 text-accent" />
+          </div>
+          <div>
+            <h3 className="text-lg font-semibold text-primary">Change Data Source?</h3>
+            <p className="text-sm text-secondary">This action may break your application</p>
+          </div>
+        </div>
+
+        <div className="space-y-4 mb-6">
+          <div className="p-3 rounded-lg bg-accent/5 border border-accent/20">
+            <div className="flex items-center gap-2 mb-2">
+              <Database className="w-4 h-4 text-accent" />
+              <span className="text-sm font-medium text-accent">Switching to: {newDataSourceName}</span>
+            </div>
+            <p className="text-xs text-accent/80">Environment: {newEnvironmentName}</p>
+          </div>
+
+          <div className="text-sm text-secondary space-y-2">
+            <p>
+              <strong>Warning:</strong> Changing data sources can break your application if the database schemas don't
+              match.
+            </p>
+            <p>This will:</p>
+            <ul className="list-disc list-inside ml-2 space-y-1">
+              <li>Update the DATABASE_URL in your .env file</li>
+              <li>Potentially cause runtime errors if schemas are incompatible</li>
+              <li>Require you to restart your application</li>
+            </ul>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-end gap-3">
+          <button
+            type="button"
+            onClick={onClose}
+            disabled={isLoading}
+            className={classNames(
+              'px-4 py-2 text-sm font-medium rounded-lg transition-colors',
+              'bg-depth-2 hover:bg-depth-3',
+              'text-tertiary hover:text-primary',
+              'disabled:opacity-50 disabled:cursor-not-allowed',
+            )}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={onConfirm}
+            disabled={isLoading}
+            className={classNames(
+              'px-4 py-2 text-sm font-medium rounded-lg transition-colors',
+              'bg-accent hover:bg-accent/80',
+              'text-white',
+              'disabled:opacity-50 disabled:cursor-not-allowed',
+            )}
+          >
+            {isLoading ? 'Updating...' : 'Change Data Source'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/app/components/chat/DataSourcePicker.tsx b/app/components/chat/DataSourcePicker.tsx
index b7af7592..04cf1f5f 100644
--- a/app/components/chat/DataSourcePicker.tsx
+++ b/app/components/chat/DataSourcePicker.tsx
@@ -1,22 +1,40 @@
 import React from 'react';
-import { useDataSourcesStore } from '~/lib/stores/dataSources';
-import type { SelectOption } from '~/components/ui/Select';
+import { useEnvironmentDataSourcesStore } from '~/lib/stores/environmentDataSources';
+import type { SelectOption as BaseSelectOption } from '~/components/ui/Select';
 import { BaseSelect } from '~/components/ui/Select';
 import { components } from 'react-select';
 import IcDatabase from '~/icons/ic_database.svg';
 
+interface SelectOption extends BaseSelectOption {
+  environmentName?: string;
+}
+
 interface DataSourcePickerProps {
   onAddNew?: () => void;
   disabled?: boolean;
+  placement?: 'top' | 'bottom';
+  onDataSourceChange?: (
+    dataSourceId: string,
+    environmentId: string,
+    dataSourceName: string,
+    environmentName: string,
+  ) => void;
 }
 
-export const DataSourcePicker: React.FC<DataSourcePickerProps> = ({ onAddNew, disabled }) => {
-  const { dataSources, selectedDataSourceId, setSelectedDataSourceId } = useDataSourcesStore();
+export const DataSourcePicker: React.FC<DataSourcePickerProps> = ({
+  onAddNew,
+  disabled,
+  onDataSourceChange,
+  placement = 'bottom',
+}) => {
+  const { environmentDataSources, selectedEnvironmentDataSource, setSelectedEnvironmentDataSource } =
+    useEnvironmentDataSourcesStore();
 
   const options: SelectOption[] = [
-    ...dataSources.map((ds) => ({
-      value: ds.id,
-      label: ds.name,
+    ...environmentDataSources.map((eds) => ({
+      value: `${eds.dataSourceId}:${eds.environmentId}`,
+      label: eds.dataSource.name,
+      environmentName: eds.environment.name,
     })),
     {
       value: 'add-new',
@@ -25,6 +43,45 @@ export const DataSourcePicker: React.FC<DataSourcePickerProps> = ({ onAddNew, di
     },
   ];
 
+  const handleDataSourceChange = async (option: SelectOption | null) => {
+    if (option?.value === 'add-new') {
+      onAddNew?.();
+      return;
+    }
+
+    if (!option?.value) {
+      setSelectedEnvironmentDataSource(null, null);
+      return;
+    }
+
+    const [dataSourceId, environmentId] = option.value.split(':');
+    const dataSource = environmentDataSources.find(
+      (eds) => eds.dataSourceId === dataSourceId && eds.environmentId === environmentId,
+    );
+
+    if (!dataSource) {
+      return;
+    }
+
+    // Check if this is actually a change
+    if (
+      selectedEnvironmentDataSource.dataSourceId === dataSourceId &&
+      selectedEnvironmentDataSource.environmentId === environmentId
+    ) {
+      return; // No change needed
+    }
+
+    setSelectedEnvironmentDataSource(dataSourceId, environmentId);
+
+    // Call the prop function to handle the change
+    onDataSourceChange?.(
+      dataSourceId,
+      environmentId,
+      dataSource.dataSource.name,
+      dataSource.environment.name || 'Unknown',
+    );
+  };
+
   const DropdownIndicator = (props: any) => {
     if (disabled) {
       return null;
@@ -33,6 +90,34 @@ export const DataSourcePicker: React.FC<DataSourcePickerProps> = ({ onAddNew, di
     return <components.DropdownIndicator {...props} />;
   };
 
+  const Option = (props: any) => {
+    const { data } = props;
+    return (
+      <components.Option {...props}>
+        <div className="flex items-center justify-between w-full">
+          <span>{data.label}</span>
+          {data.environmentName && (
+            <span className="text-xs bg-gray-600 text-gray-200 px-2 py-1 rounded-full">{data.environmentName}</span>
+          )}
+        </div>
+      </components.Option>
+    );
+  };
+
+  const SingleValue = (props: any) => {
+    const { data } = props;
+    return (
+      <components.SingleValue {...props}>
+        <div className="flex items-center gap-2">
+          <span>{data.label}</span>
+          {data.environmentName && (
+            <span className="text-xs bg-gray-600 text-gray-200 px-2 py-1 rounded-full">{data.environmentName}</span>
+          )}
+        </div>
+      </components.SingleValue>
+    );
+  };
+
   const customStyles = {
     control: (base: any) => ({
       ...base,
@@ -47,8 +132,9 @@ export const DataSourcePicker: React.FC<DataSourcePickerProps> = ({ onAddNew, di
       },
       paddingLeft: '4px',
       gap: '8px',
-      minWidth: 'auto',
-      maxWidth: '250px',
+      minWidth: '200px',
+      maxWidth: '400px',
+      width: 'auto',
     }),
     valueContainer: (base: any) => ({
       ...base,
@@ -63,7 +149,7 @@ export const DataSourcePicker: React.FC<DataSourcePickerProps> = ({ onAddNew, di
     }),
     menu: (base: any) => ({
       ...base,
-      minWidth: '200px',
+      minWidth: '250px',
       borderRadius: '1rem',
       backgroundColor: 'var(--color-depth-2)',
       boxShadow: '0 4px 6px 2px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
@@ -102,27 +188,25 @@ export const DataSourcePicker: React.FC<DataSourcePickerProps> = ({ onAddNew, di
     }),
   };
 
+  // Find the currently selected option based on dataSourceId and environmentId
+  const selectedValue =
+    selectedEnvironmentDataSource.dataSourceId && selectedEnvironmentDataSource.environmentId
+      ? `${selectedEnvironmentDataSource.dataSourceId}:${selectedEnvironmentDataSource.environmentId}`
+      : null;
+
   return (
     <div className="flex items-center gap-2">
       <BaseSelect
-        value={options.find((option) => option.value === selectedDataSourceId)}
-        onChange={(option) => {
-          if (option?.value === 'add-new') {
-            onAddNew?.();
-            return;
-          }
-
-          setSelectedDataSourceId(option?.value || null);
-        }}
+        value={options.find((option) => option.value === selectedValue)}
+        onChange={handleDataSourceChange}
         options={options}
-        width="auto"
-        minWidth="auto"
         isSearchable={false}
         controlIcon={<IcDatabase className="text-xl" />}
         isDisabled={disabled}
-        components={{ DropdownIndicator }}
+        components={{ DropdownIndicator, Option, SingleValue }}
         styles={customStyles}
-        menuPlacement="bottom"
+        menuPlacement={placement}
+        dataTestId={'data-source-picker-select'}
       />
     </div>
   );
diff --git a/app/components/chat/HomepageTextarea.tsx b/app/components/chat/HomepageTextarea.tsx
index 52392d9f..7e82c16d 100644
--- a/app/components/chat/HomepageTextarea.tsx
+++ b/app/components/chat/HomepageTextarea.tsx
@@ -3,7 +3,7 @@ import { classNames } from '~/utils/classNames';
 import { DataSourcePicker } from './DataSourcePicker';
 import FilePreview from './FilePreview';
 import { ScreenshotStateManager } from './ScreenshotStateManager';
-import { useDataSourcesStore } from '~/lib/stores/dataSources';
+import { useEnvironmentDataSourcesStore } from '~/lib/stores/environmentDataSources';
 import { openSettingsPanel } from '~/lib/stores/settings';
 import { ClientOnly } from '~/components/ui/ClientOnly';
 import { processImageFile } from '~/utils/fileUtils';
@@ -45,7 +45,7 @@ export const HomepageTextarea = forwardRef<HTMLTextAreaElement, HomepageTextarea
     },
     ref,
   ) => {
-    const { dataSources, selectedDataSourceId } = useDataSourcesStore();
+    const { environmentDataSources, selectedEnvironmentDataSource } = useEnvironmentDataSourcesStore();
     const [suggestions, setSuggestions] = useState<string[]>([]);
     const [showSuggestions, setShowSuggestions] = useState(false);
     const [isLoadingSuggestions, setIsLoadingSuggestions] = useState(false);
@@ -55,7 +55,7 @@ export const HomepageTextarea = forwardRef<HTMLTextAreaElement, HomepageTextarea
     };
 
     const fetchSuggestions = async () => {
-      if (!selectedDataSourceId) {
+      if (!selectedEnvironmentDataSource) {
         console.warn('No data source selected');
         return;
       }
@@ -68,7 +68,7 @@ export const HomepageTextarea = forwardRef<HTMLTextAreaElement, HomepageTextarea
           headers: {
             'Content-Type': 'application/json',
           },
-          body: JSON.stringify({ dataSourceId: selectedDataSourceId }),
+          body: JSON.stringify({ dataSourceId: selectedEnvironmentDataSource }),
         });
 
         const data = await response.json<
@@ -163,7 +163,7 @@ export const HomepageTextarea = forwardRef<HTMLTextAreaElement, HomepageTextarea
             <div className="absolute bottom-6 left-6">
               <div className="flex items-center text-sm mt-2">
                 <div className="flex items-center gap-4">
-                  {selectedDataSourceId && (
+                  {selectedEnvironmentDataSource && (
                     <button
                       className="flex justify-center cursor-pointer items-center text-white opacity-80 hover:opacity-100 bg-transparent p-1 transition-all"
                       onClick={fetchSuggestions}
@@ -179,7 +179,9 @@ export const HomepageTextarea = forwardRef<HTMLTextAreaElement, HomepageTextarea
             </div>
             <div className="absolute bottom-6 right-6 flex">
               <div className="flex gap-1 items-center mr-4">
-                {dataSources.length > 0 && <DataSourcePicker onAddNew={handleConnectDataSource} disabled={false} />}
+                {environmentDataSources.length > 0 && (
+                  <DataSourcePicker onAddNew={handleConnectDataSource} disabled={false} />
+                )}
               </div>
               <button
                 data-testid="send-message-button"
diff --git a/app/components/chat/UserMessage.tsx b/app/components/chat/UserMessage.tsx
index 4c661b22..7cf3b69b 100644
--- a/app/components/chat/UserMessage.tsx
+++ b/app/components/chat/UserMessage.tsx
@@ -2,7 +2,7 @@
  * @ts-nocheck
  * Preventing TS checks with files presented in the video for a better presentation.
  */
-import { DATA_SOURCE_ID_REGEX, FILES_REGEX, FIRST_USER_MESSAGE_REGEX } from '~/utils/constants';
+import { DATA_SOURCE_ID_REGEX, ENVIRONMENT_ID_REGEX, FILES_REGEX, FIRST_USER_MESSAGE_REGEX } from '~/utils/constants';
 import { Markdown } from './Markdown';
 
 interface UserMessageProps {
@@ -45,5 +45,6 @@ function stripMetadata(content: string) {
     .replace(artifactRegex, '')
     .replace(FIRST_USER_MESSAGE_REGEX, '')
     .replace(DATA_SOURCE_ID_REGEX, '')
+    .replace(ENVIRONMENT_ID_REGEX, '')
     .replace(FILES_REGEX, '');
 }
diff --git a/app/components/chat/query-modal/AiGeneration.tsx b/app/components/chat/query-modal/AiGeneration.tsx
deleted file mode 100644
index cbb1799e..00000000
--- a/app/components/chat/query-modal/AiGeneration.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Sparkles } from 'lucide-react';
-import { Button } from '~/components/ui/Button';
-
-interface AiGenerationProps {
-  userPrompt: string;
-  onPromptChange: (prompt: string) => void;
-  onGenerateQuery: () => void;
-  isGenerating: boolean;
-}
-
-export const AiGeneration = ({ userPrompt, onPromptChange, onGenerateQuery, isGenerating }: AiGenerationProps) => (
-  <div className="flex gap-3">
-    <input
-      type="text"
-      placeholder="Describe what you want to query..."
-      className="flex-1 px-4 bg-[#1E1E1E] text-white rounded-lg border border-[#2E2E2E] focus:outline-none focus:border-accent placeholder:text-gray-500"
-      value={userPrompt}
-      onChange={(e) => onPromptChange(e.target.value)}
-    />
-    <Button
-      variant="secondary"
-      onClick={onGenerateQuery}
-      disabled={isGenerating || !userPrompt.trim()}
-      className="flex items-center gap-2"
-    >
-      <Sparkles className="w-5 h-5" />
-      {isGenerating ? 'Generating...' : 'Generate Query with AI'}
-    </Button>
-  </div>
-);
diff --git a/app/components/chat/query-modal/QueryEditor.tsx b/app/components/chat/query-modal/QueryEditor.tsx
deleted file mode 100644
index 72395e8c..00000000
--- a/app/components/chat/query-modal/QueryEditor.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { List, Play } from 'lucide-react';
-import { CodeMirrorEditor } from '~/components/editor/codemirror/CodeMirrorEditor';
-import { Button } from '~/components/ui/Button';
-
-export interface QueryEditorProps {
-  query: string | undefined;
-  onQueryChange: (query: string) => void;
-  onFormatQuery: () => void;
-  onTestQuery: () => void;
-  isTesting: boolean;
-  queryId: string | number;
-}
-
-export const QueryEditor = ({
-  query,
-  onQueryChange,
-  onFormatQuery,
-  onTestQuery,
-  isTesting,
-  queryId,
-}: QueryEditorProps) => (
-  <div className="flex-1 relative rounded-lg border border-[#1E1E1E] flex flex-col">
-    <div className="bg-[#1E1E1E] p-3 text-xs text-gray-400 flex justify-between items-center h-12">
-      <span>Query</span>
-      <div className="flex gap-2">
-        <Button
-          className="text-xs bg-[#2E2E2E] text-[#A78BFA] hover:bg-[#3E3E3E] hover:text-[#A78BFA] px-2 py-1 flex items-center gap-1"
-          onClick={onFormatQuery}
-        >
-          <List className="w-4 h-4" />
-          Format
-        </Button>
-        <Button
-          className="text-xs bg-[#2E2E2E] text-[#A78BFA] hover:bg-[#3E3E3E] hover:text-[#A78BFA] px-2 py-1 flex items-center gap-1"
-          onClick={onTestQuery}
-          disabled={isTesting}
-        >
-          <Play className="w-4 h-4" />
-          {isTesting ? 'Running...' : 'Run Test Query'}
-        </Button>
-      </div>
-    </div>
-    <div className="flex-1 overflow-hidden">
-      <CodeMirrorEditor
-        editable={true}
-        settings={{
-          fontSize: '14px',
-          tabSize: 2,
-        }}
-        doc={{
-          value: query || '',
-          filePath: `query-${queryId}.sql`,
-          isBinary: false,
-        }}
-        onChange={({ content }) => onQueryChange(content)}
-      />
-    </div>
-  </div>
-);
diff --git a/app/components/chat/query-modal/QueryModal.tsx b/app/components/chat/query-modal/QueryModal.tsx
deleted file mode 100644
index aa43b75a..00000000
--- a/app/components/chat/query-modal/QueryModal.tsx
+++ /dev/null
@@ -1,272 +0,0 @@
-import { useEffect, useState } from 'react';
-import * as RadixDialog from '@radix-ui/react-dialog';
-import { Button } from '~/components/ui/Button';
-import type { ApiError } from '~/types/api-error';
-import { AiGeneration } from '~/components/chat/query-modal/AiGeneration';
-import { QueryResults } from '~/components/chat/query-modal/QueryResults';
-import { QueryEditor } from '~/components/chat/query-modal/QueryEditor';
-import type { DataSource } from '~/lib/services/datasourceService';
-
-interface QueryModalProps {
-  isOpen: boolean;
-  onOpenChange: (open: boolean) => void;
-  queryId: string | number;
-  onUpdateAndRegenerate?: (updatedQuery: string) => void;
-  dataSourceId: string;
-}
-
-export const QueryModal = ({ isOpen, onOpenChange, queryId, onUpdateAndRegenerate, dataSourceId }: QueryModalProps) => {
-  const [query, setQuery] = useState<string>();
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [queryResult, setQueryResult] = useState<unknown | null>(null);
-  const [isTesting, setIsTesting] = useState(false);
-  const [userPrompt, setUserPrompt] = useState('');
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [dataSource, setDataSource] = useState<DataSource | null>(null);
-
-  async function fetchDataSource() {
-    try {
-      const response = await fetch(`/api/data-sources/${dataSourceId}`);
-
-      if (!response.ok) {
-        throw new Error('Failed to fetch data source');
-      }
-
-      const dataSourceData = (await response.json()) as DataSource;
-      setDataSource(dataSourceData);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to fetch data source');
-    }
-  }
-
-  useEffect(() => {
-    fetchDataSource();
-  }, [dataSourceId]);
-
-  useEffect(() => {
-    if (isOpen) {
-      fetchQuery();
-    } else {
-      // Reset state when modal is closed
-      setQuery(undefined);
-      setQueryResult(null);
-      setUserPrompt('');
-      setError(null);
-    }
-  }, [isOpen, queryId]);
-
-  const formatQuery = async (query: string): Promise<string> => {
-    if (!dataSource || !query) {
-      return query;
-    }
-
-    try {
-      const response = await fetch('/api/format-query', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          query,
-          dataSourceId: dataSource.id,
-        }),
-      });
-
-      if (!response.ok) {
-        throw new Error('Failed to format query');
-      }
-
-      const { formattedQuery } = (await response.json()) as { formattedQuery: string };
-
-      return formattedQuery;
-    } catch (err) {
-      console.error('Failed to format query:', err);
-
-      // Return unformatted query on error
-      return query;
-    }
-  };
-
-  const fetchQuery = async () => {
-    try {
-      setIsLoading(true);
-      setError(null);
-
-      const response = await fetch(`/api/queries/${queryId}`);
-
-      if (!response.ok) {
-        throw new Error('Failed to fetch query');
-      }
-
-      const data = (await response.json()) as string;
-      const formatted = await formatQuery(data);
-      setQuery(formatted);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to fetch query');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleRegenerateComponent = async () => {
-    try {
-      setError(null);
-
-      const formattedQuery = await formatQuery(query || '');
-      const response = await fetch(`/api/queries/${queryId}`, {
-        method: 'PUT',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ content: formattedQuery }),
-      });
-
-      if (!response.ok) {
-        throw new Error('Failed to update query');
-      }
-
-      const updatedQuery = (await response.json()) as string;
-      const formatted = await formatQuery(updatedQuery);
-      setQuery(formatted);
-
-      if (onUpdateAndRegenerate) {
-        onUpdateAndRegenerate(updatedQuery);
-      }
-
-      onOpenChange(false);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to update query');
-    }
-  };
-
-  const handleTestQuery = async () => {
-    if (!query) {
-      return;
-    }
-
-    try {
-      setIsTesting(true);
-      setError(null);
-      setQueryResult(null);
-
-      const response = await fetch(`/api/execute-query?query=${encodeURIComponent(query)}`, {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-      });
-
-      const responseClone = response.clone();
-
-      if (!response.ok) {
-        const body = (await responseClone.json()) as ApiError;
-        setError(body?.error || 'Failed to execute query');
-      }
-
-      const results = (await response.json()) as { data: unknown };
-      setQueryResult(results.data);
-    } catch {
-      setError('Failed to execute query');
-      setQueryResult(null);
-    } finally {
-      setIsTesting(false);
-    }
-  };
-
-  const handleGenerateQuery = async (dataSourceId: string) => {
-    if (!userPrompt.trim()) {
-      return;
-    }
-
-    try {
-      setIsGenerating(true);
-      setError(null);
-
-      const response = await fetch('/api/generate-query', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ prompt: userPrompt, existingQuery: query, dataSourceId }),
-      });
-
-      if (!response.ok) {
-        throw new Error('Failed to generate query');
-      }
-
-      const data = (await response.json()) as string;
-      const formatted = await formatQuery(data);
-      setQuery(formatted);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to generate query');
-    } finally {
-      setIsGenerating(false);
-    }
-  };
-
-  const handleFormatQuery = async () => {
-    if (!query) {
-      return;
-    }
-
-    try {
-      const formatted = await formatQuery(query);
-      setQuery(formatted);
-    } catch (err) {
-      console.error('Failed to format query:', err);
-    }
-  };
-
-  return (
-    <RadixDialog.Root open={isOpen} onOpenChange={onOpenChange}>
-      <RadixDialog.Portal>
-        <RadixDialog.Overlay className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[9999]" />
-        <RadixDialog.Content
-          className={`fixed top-[50%] left-[50%] -translate-x-1/2 -translate-y-1/2 ${queryResult || error ? 'w-[95vw]' : 'w-[90vw] md:w-[800px]'} max-w-[1200px] h-[80vh] flex flex-col bg-white dark:bg-[#0A0A0A] rounded-xl shadow-xl z-[9999] border border-[#E5E5E5] dark:border-[#1A1A1A] transition-all duration-300 ease-in-out`}
-        >
-          <div className="p-6 flex flex-col h-full">
-            {isLoading ? (
-              <div className="flex items-center justify-center flex-1">
-                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
-              </div>
-            ) : (
-              <>
-                <div className="flex-1 mt-4 min-h-0 flex gap-4">
-                  <QueryEditor
-                    query={query}
-                    onQueryChange={setQuery}
-                    onFormatQuery={handleFormatQuery}
-                    onTestQuery={handleTestQuery}
-                    isTesting={isTesting}
-                    queryId={queryId}
-                  />
-
-                  {(queryResult !== null || error) && <QueryResults results={queryResult} error={error} />}
-                </div>
-
-                <div className="flex flex-col gap-4 mt-6 pt-4 border-t border-[#1E1E1E]">
-                  <AiGeneration
-                    userPrompt={userPrompt}
-                    onPromptChange={setUserPrompt}
-                    onGenerateQuery={() => handleGenerateQuery(dataSourceId)}
-                    isGenerating={isGenerating}
-                  />
-
-                  <div className="flex justify-end gap-3 mt-3">
-                    <Button onClick={() => onOpenChange(false)} size="lg" variant="outline">
-                      Cancel
-                    </Button>
-                    <Button onClick={handleRegenerateComponent} size="lg" variant="primary">
-                      Save Query & Regenerate Component
-                    </Button>
-                  </div>
-                </div>
-              </>
-            )}
-          </div>
-        </RadixDialog.Content>
-      </RadixDialog.Portal>
-    </RadixDialog.Root>
-  );
-};
diff --git a/app/components/chat/query-modal/QueryResults.tsx b/app/components/chat/query-modal/QueryResults.tsx
deleted file mode 100644
index 728cf966..00000000
--- a/app/components/chat/query-modal/QueryResults.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { CodeMirrorEditor } from '~/components/editor/codemirror/CodeMirrorEditor';
-
-export interface QueryResultsProps {
-  results: unknown;
-  error: string | null;
-}
-
-export const QueryResults = ({ results, error }: QueryResultsProps) => (
-  <div className="flex-1 relative rounded-lg border border-[#1E1E1E] flex flex-col">
-    <div className="bg-[#1E1E1E] p-3 text-xs text-gray-400 h-12 flex items-center">Query Results</div>
-    <div className="flex-1 overflow-hidden">
-      {error ? (
-        <div className="p-4 text-red-500 bg-[#1E1E1E] h-full">{error}</div>
-      ) : (
-        <CodeMirrorEditor
-          editable={false}
-          settings={{
-            fontSize: '14px',
-            tabSize: 2,
-          }}
-          doc={{
-            value: JSON.stringify(results, null, 2),
-            filePath: 'results.json',
-            isBinary: false,
-          }}
-        />
-      )}
-    </div>
-  </div>
-);
diff --git a/app/components/header/HeaderActionButtons.client.tsx b/app/components/header/HeaderActionButtons.client.tsx
index 816defa7..fcc2a100 100644
--- a/app/components/header/HeaderActionButtons.client.tsx
+++ b/app/components/header/HeaderActionButtons.client.tsx
@@ -4,7 +4,7 @@ import { toast } from 'sonner';
 import useViewport from '~/lib/hooks';
 import { chatStore } from '~/lib/stores/chat';
 import { workbenchStore } from '~/lib/stores/workbench';
-import { useDataSourcesStore } from '~/lib/stores/dataSources';
+import { useEnvironmentDataSourcesStore } from '~/lib/stores/environmentDataSources';
 import {
   addDeploymentLog,
   addErrorLogs,
@@ -25,6 +25,7 @@ import { PublishProgressModal } from '~/components/publish/PublishProgressModal.
 import JSZip from 'jszip';
 import type { NetlifySiteInfo } from '~/types/netlify';
 import { AlertTriangle, CodeXml, Lock, MessageCircle, Rocket, Settings } from 'lucide-react';
+import { getDataSourceUrl } from '~/components/@settings/utils/data-sources';
 
 interface ProgressData {
   step: number;
@@ -59,7 +60,7 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
   const devMode = useStore(workbenchStore.devMode);
   const { showChat } = useStore(chatStore);
   const { website } = useStore(websiteStore);
-  const { dataSources, selectedDataSourceId } = useDataSourcesStore();
+  const { environmentDataSources, selectedEnvironmentDataSource } = useEnvironmentDataSourcesStore();
   const isSmallViewport = useViewport(1024);
   const dropdownRef = useRef<HTMLDivElement>(null);
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -69,10 +70,14 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
   const chatDescription = useStore(description);
   const [modalMode, setModalMode] = useState<'publish' | 'settings' | 'initializing'>('publish');
   const [hasNetlifyToken, setHasNetlifyToken] = useState(false);
+  const [isPublishingDisabled, setIsPublishingDisabled] = useState(false);
 
   // we want to disable sqlite deployments since we do not support remote sqlite nor do we copy the source file yet
-  const currentDataSource = dataSources.find(({ id }) => id === selectedDataSourceId);
-  const isCurrentDataSourceSQLite = currentDataSource?.connectionString?.startsWith('sqlite://') || false;
+  const currentDataSource = environmentDataSources.find(
+    ({ environmentId, dataSourceId }) =>
+      environmentId === selectedEnvironmentDataSource.environmentId &&
+      dataSourceId === selectedEnvironmentDataSource.dataSourceId,
+  );
 
   useEffect(() => {
     async function checkNetlifyConfig() {
@@ -89,6 +94,16 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
     }
 
     checkNetlifyConfig();
+
+    async function checkPublishingCapability() {
+      if (!currentDataSource || !currentDataSource.dataSourceId || !currentDataSource.environmentId) {
+        setIsPublishingDisabled(true);
+      } else {
+        const url = await getDataSourceUrl(currentDataSource.dataSourceId, currentDataSource.environmentId);
+        setIsPublishingDisabled(url.startsWith('sqlite'));
+      }
+    }
+    checkPublishingCapability();
   }, []);
 
   useEffect(() => {
@@ -378,18 +393,16 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
       <>
         <button
           onClick={handlePublishClick}
-          disabled={isCurrentDataSourceSQLite}
+          disabled={isPublishingDisabled}
           className={classNames(
             'w-full px-4 py-2 text-left text-sm bg-white dark:bg-[#111111] text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 flex items-center gap-2',
             {
-              'opacity-50 cursor-not-allowed': isCurrentDataSourceSQLite,
-              'hover:bg-gray-100 dark:hover:bg-gray-800': !isCurrentDataSourceSQLite,
+              'opacity-50 cursor-not-allowed': isPublishingDisabled,
+              'hover:bg-gray-100 dark:hover:bg-gray-800': !isPublishingDisabled,
             },
           )}
           title={
-            isCurrentDataSourceSQLite
-              ? 'SQLite database publishing is not supported'
-              : 'Publish new version of your site'
+            isPublishingDisabled ? 'SQLite database publishing is not supported' : 'Publish new version of your site'
           }
         >
           <Rocket className="w-4 h-4" />
@@ -412,19 +425,17 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
         <div className="relative" ref={dropdownRef}>
           <div className="flex border border-depth-3 rounded-md overflow-hidden mr-2 text-sm">
             <Button
-              active={!isCurrentDataSourceSQLite}
-              disabled={isCurrentDataSourceSQLite}
+              active={!isPublishingDisabled}
+              disabled={isPublishingDisabled}
               title={
-                isCurrentDataSourceSQLite
-                  ? 'SQLite database publishing is not supported'
-                  : 'Publish your site to the web'
+                isPublishingDisabled ? 'SQLite database publishing is not supported' : 'Publish your site to the web'
               }
-              onClick={() => !isCurrentDataSourceSQLite && setIsDropdownOpen(!isDropdownOpen)}
+              onClick={() => !isPublishingDisabled && setIsDropdownOpen(!isDropdownOpen)}
               className={classNames('px-4 flex items-center gap-2', {
-                'opacity-50 grayscale': isCurrentDataSourceSQLite,
+                'opacity-50 grayscale': isPublishingDisabled,
               })}
             >
-              {isCurrentDataSourceSQLite ? <Lock className="w-4 h-4" /> : <Rocket className="w-4 h-4" />}
+              {isPublishingDisabled ? <Lock className="w-4 h-4" /> : <Rocket className="w-4 h-4" />}
               Publish
             </Button>
           </div>
diff --git a/app/data-source-connection/page.tsx b/app/data-source-connection/page.tsx
index 5f6ce41e..a30098df 100644
--- a/app/data-source-connection/page.tsx
+++ b/app/data-source-connection/page.tsx
@@ -1,13 +1,13 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { CheckCircle, Lock } from 'lucide-react';
 import { Button } from '~/components/ui/Button';
 import { Input } from '~/components/ui/Input';
 import { Label } from '~/components/ui/Label';
 import { BaseSelect } from '~/components/ui/Select';
 import { SelectDatabaseTypeOptions, SingleValueWithTooltip } from '~/components/database/SelectDatabaseTypeOptions';
-import { useDataSourceActions, useDataSourcesStore } from '~/lib/stores/dataSources';
+import { useDataSourceActions, useEnvironmentDataSourcesStore } from '~/lib/stores/environmentDataSources';
 import { useRouter } from 'next/navigation';
 import { Header } from '~/components/header/Header';
 import {
@@ -26,25 +26,84 @@ interface ApiResponse {
   };
 }
 
+interface Environment {
+  id: string;
+  name: string;
+  description?: string;
+}
+
+interface EnvironmentOption {
+  label: string;
+  value: string;
+  description?: string;
+}
+
+interface EnvironmentsResponse {
+  success: boolean;
+  environments: Environment[];
+  error?: string;
+}
+
 export default function DataSourceConnectionPage() {
   const [dbType, setDbType] = useState<DataSourceOption>(DEFAULT_DATA_SOURCES[0]);
   const [dbName, setDbName] = useState('');
   const [connStr, setConnStr] = useState('');
+  const [selectedEnvironment, setSelectedEnvironment] = useState<EnvironmentOption | null>(null);
+  const [environmentOptions, setEnvironmentOptions] = useState<EnvironmentOption[]>([]);
+  const [isLoadingEnvironments, setIsLoadingEnvironments] = useState(true);
   const [isTesting, setIsTesting] = useState(false);
   const [isConnecting, setIsConnecting] = useState(false);
   const [isSuccess, setIsSuccess] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const { setSelectedDataSourceId } = useDataSourcesStore();
-  const { refetchDataSources } = useDataSourceActions();
+  const { setSelectedEnvironmentDataSource } = useEnvironmentDataSourcesStore();
+  const { refetchEnvironmentDataSources } = useDataSourceActions();
   const router = useRouter();
 
   const { availableDataSourceOptions } = useDataSourceTypesPlugin();
 
+  useEffect(() => {
+    const fetchEnvironments = async () => {
+      try {
+        const response = await fetch('/api/environments');
+        const result: EnvironmentsResponse = await response.json();
+
+        if (result.success) {
+          // Transform environments to options
+          const options: EnvironmentOption[] = result.environments.map((env) => ({
+            label: env.name,
+            value: env.id,
+            description: env.description,
+          }));
+          setEnvironmentOptions(options);
+
+          // Auto-select first environment if available
+          if (options.length > 0) {
+            setSelectedEnvironment(options[0]);
+          }
+        } else {
+          setError(result.error || 'Failed to fetch environments');
+        }
+      } catch (error) {
+        setError('Failed to fetch environments');
+        console.error('Error fetching environments:', error);
+      } finally {
+        setIsLoadingEnvironments(false);
+      }
+    };
+
+    fetchEnvironments();
+  }, []);
+
   const handleFormSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setIsTesting(true);
     setError(null);
 
+    if (!selectedEnvironment) {
+      setError('Please select an environment');
+      return;
+    }
+
     if (!dbName) {
       setError('Please enter a database name');
       return;
@@ -86,6 +145,7 @@ export default function DataSourceConnectionPage() {
       const formData = new FormData();
       formData.append('name', dbName);
       formData.append('connectionString', connStr);
+      formData.append('environmentId', selectedEnvironment!.value);
 
       const response = await fetch('/api/data-sources', {
         method: 'POST',
@@ -96,8 +156,8 @@ export default function DataSourceConnectionPage() {
 
       if (result.success && result.dataSource) {
         setIsSuccess(true);
-        refetchDataSources();
-        setSelectedDataSourceId(result.dataSource.id);
+        refetchEnvironmentDataSources();
+        setSelectedEnvironmentDataSource(result.dataSource.id, selectedEnvironment!.value);
         setTimeout(() => {
           router.push('/');
         }, 1000);
@@ -113,17 +173,30 @@ export default function DataSourceConnectionPage() {
     setError(null);
     setIsConnecting(true);
 
+    if (!selectedEnvironment) {
+      setError('Please select an environment');
+      setIsConnecting(false);
+
+      return;
+    }
+
     try {
-      const response = await fetch('/api/data-sources/example', {
+      const response = await fetch(`/api/data-sources/example?environmentId=${selectedEnvironment.value}`, {
         method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          environmentId: selectedEnvironment.value,
+        }),
       });
 
       const result = (await response.json()) as ApiResponse;
 
       if (result.success && result.dataSource) {
         setIsSuccess(true);
-        refetchDataSources();
-        setSelectedDataSourceId(result.dataSource.id);
+        refetchEnvironmentDataSources();
+        setSelectedEnvironmentDataSource(result.dataSource.id, selectedEnvironment!.value);
         setTimeout(() => {
           router.push('/');
         }, 1000);
@@ -175,6 +248,25 @@ export default function DataSourceConnectionPage() {
               />
             </div>
           </div>
+          <div className="mb-6">
+            <Label className="mb-3 block text-gray-300">Environment</Label>
+            <BaseSelect
+              value={selectedEnvironment}
+              onChange={(value: EnvironmentOption | null) => {
+                setSelectedEnvironment(value);
+                setError(null);
+              }}
+              options={environmentOptions}
+              placeholder={isLoadingEnvironments ? 'Loading environments...' : 'Select environment'}
+              isDisabled={isLoadingEnvironments}
+              width="100%"
+              minWidth="100%"
+              isSearchable={false}
+            />
+            {selectedEnvironment?.description && (
+              <div className="text-gray-400 text-sm mt-2">{selectedEnvironment.description}</div>
+            )}
+          </div>
           {dbType.value !== 'sample' && (
             <form onSubmit={handleFormSubmit} className="flex flex-col gap-6">
               <div>
@@ -207,7 +299,7 @@ export default function DataSourceConnectionPage() {
                 type="submit"
                 variant="primary"
                 className={`min-w-[150px] max-w-[220px] transition-all duration-300 ${isSuccess ? 'bg-green-500 hover:bg-green-500 !disabled:opacity-100' : ''}`}
-                disabled={!dbName || !connStr || isTesting || isSuccess}
+                disabled={!selectedEnvironment || !dbName || !connStr || isTesting || isSuccess}
               >
                 {isSuccess ? (
                   <div className="flex items-center gap-2">
@@ -241,7 +333,7 @@ export default function DataSourceConnectionPage() {
                 variant="primary"
                 className={`min-w-[150px] transition-all duration-300 ${isSuccess ? 'bg-green-500 hover:bg-green-500 !disabled:opacity-100' : ''}`}
                 onClick={handleSampleDatabase}
-                disabled={isSuccess}
+                disabled={!selectedEnvironment || isSuccess}
               >
                 {isSuccess ? (
                   <div className="flex items-center gap-2">
diff --git a/app/layout.tsx b/app/layout.tsx
index d1ee7f5b..c7008df9 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -2,7 +2,7 @@ import './styles/index.scss';
 import type { ReactNode } from 'react';
 import { ClientProviders } from './components/ClientProviders';
 import './globals.css';
-import { getDataSources } from '~/lib/services/datasourceService';
+import { getEnvironmentDataSources } from '~/lib/services/dataSourceService';
 import { userService } from '~/lib/services/userService';
 import { getUserAbility } from './lib/casl/user-ability';
 import PluginManager, { FREE_PLUGIN_ACCESS } from '~/lib/plugins/plugin-manager';
@@ -35,7 +35,7 @@ async function getRootData() {
     const typedSession = session as Session;
 
     let user = null;
-    let dataSources: any[] = [];
+    let environmentDataSources: any[] = [];
     let dataSourceTypes: any[] = [];
 
     if (typedSession?.user) {
@@ -44,7 +44,7 @@ async function getRootData() {
 
       // Get data sources for the user
       const userAbility = await getUserAbility(typedSession.user.id);
-      dataSources = await getDataSources(userAbility);
+      environmentDataSources = await getEnvironmentDataSources(userAbility);
     }
 
     // Initialize plugin manager
@@ -57,7 +57,7 @@ async function getRootData() {
 
     return {
       user,
-      dataSources,
+      environmentDataSources,
       pluginAccess,
       dataSourceTypes,
     };
@@ -65,7 +65,7 @@ async function getRootData() {
     console.error('Error loading root data:', error);
     return {
       user: null,
-      dataSources: [],
+      environmentDataSources: [],
       pluginAccess: FREE_PLUGIN_ACCESS,
       dataSourceTypes: [],
     };
diff --git a/app/lib/.server/llm/stream-text.ts b/app/lib/.server/llm/stream-text.ts
index 19d459a4..27aad24e 100644
--- a/app/lib/.server/llm/stream-text.ts
+++ b/app/lib/.server/llm/stream-text.ts
@@ -12,9 +12,10 @@ import { generateSqlQueries, shouldGenerateSqlQueries } from '~/lib/.server/llm/
 import { getDatabaseSchema } from '~/lib/schema';
 import { mapSqlQueriesToPrompt } from '~/lib/common/prompts/sql';
 import { getLlm } from '~/lib/.server/llm/get-llm';
-import { prisma } from '~/lib/prisma';
 import { requireUserId } from '~/auth/session';
 import type { StarterPluginId } from '~/lib/plugins/types';
+import { type Conversation } from '@prisma/client';
+import { getDatabaseUrl } from '~/lib/services/dataSourceService';
 
 export type Messages = Message[];
 
@@ -27,7 +28,7 @@ export async function streamText(props: {
   options?: StreamingOptions;
   files?: FileMap;
   promptId?: string;
-  starterId?: StarterPluginId;
+  conversation: Conversation;
   contextOptimization?: boolean;
   contextFiles?: FileMap;
   summary?: string;
@@ -40,19 +41,18 @@ export async function streamText(props: {
     options,
     files,
     promptId,
-    starterId,
+    conversation,
     contextOptimization,
     contextFiles,
     summary,
     implementationPlan,
     request,
   } = props;
-  let currentDataSourceId: string | undefined = '';
+  const currentDataSourceId: string | undefined = conversation.dataSourceId;
 
   let processedMessages = messages.map((message) => {
     if (message.role === MessageRole.User) {
-      const { content, isFirstUserMessage, dataSourceId } = extractPropertiesFromMessage(message);
-      currentDataSourceId = dataSourceId;
+      const { content, isFirstUserMessage } = extractPropertiesFromMessage(message);
 
       return { ...message, content, isFirstUserMessage };
     } else if (message.role == MessageRole.Assistant) {
@@ -75,7 +75,7 @@ export async function streamText(props: {
   let systemPrompt =
     (await PromptLibrary.getPromptFromLibrary(promptId || 'default', {
       cwd: WORK_DIR,
-      starterId,
+      starterId: conversation.starterId as StarterPluginId,
       allowedHtmlElements: allowedHTMLElements,
       modificationTagName: MODIFICATIONS_TAG_NAME,
     })) ?? (await getSystemPrompt());
@@ -131,15 +131,15 @@ ${props.summary}
 
   if (isFirstUserMessage(processedMessages) || (await shouldGenerateSqlQueries(lastUserMessage, existingQueries))) {
     const userId = await requireUserId(request);
-    const schema = await getDatabaseSchema(currentDataSourceId, userId);
-    const dataSource = await prisma.dataSource.findUniqueOrThrow({
-      where: { id: currentDataSourceId, createdById: userId },
-    });
+
+    const schema = await getDatabaseSchema(currentDataSourceId, conversation.environmentId, userId);
+
+    const databaseUrl = await getDatabaseUrl(userId, currentDataSourceId, conversation.environmentId);
 
     const sqlQueries = await generateSqlQueries({
       schema,
       userPrompt: lastUserMessage,
-      connectionString: dataSource.connectionString,
+      connectionString: databaseUrl!,
       implementationPlan,
       existingQueries,
     });
diff --git a/app/lib/.server/llm/utils.ts b/app/lib/.server/llm/utils.ts
index 745cd430..0fda7152 100644
--- a/app/lib/.server/llm/utils.ts
+++ b/app/lib/.server/llm/utils.ts
@@ -1,5 +1,5 @@
 import { type Message } from 'ai';
-import { DATA_SOURCE_ID_REGEX, FILES_REGEX, FIRST_USER_MESSAGE_REGEX, FIX_ANNOTATION } from '~/utils/constants';
+import { FILES_REGEX, FIRST_USER_MESSAGE_REGEX, FIX_ANNOTATION } from '~/utils/constants';
 import { type FileMap, IGNORE_PATTERNS } from './constants';
 import ignore from 'ignore';
 import type { ContextAnnotation } from '~/types/context';
@@ -7,7 +7,6 @@ import { freeEmailDomains } from 'free-email-domains-typescript';
 
 export function extractPropertiesFromMessage(message: Omit<Message, 'id'>): {
   isFirstUserMessage?: boolean;
-  dataSourceId?: string;
   content: string;
   isFixMessage: boolean;
 } {
@@ -16,32 +15,26 @@ export function extractPropertiesFromMessage(message: Omit<Message, 'id'>): {
     : message.content;
 
   const isFirstUserMessageMatch = textContent.match(FIRST_USER_MESSAGE_REGEX);
-  const dataSourceIdMatch = textContent.match(DATA_SOURCE_ID_REGEX);
 
   const isFixMessage = !!message.annotations?.includes(FIX_ANNOTATION);
 
   const isFirstUserMessage = isFirstUserMessageMatch ? isFirstUserMessageMatch[1] === 'true' : false;
-  const dataSourceId = dataSourceIdMatch ? dataSourceIdMatch[1] : undefined;
   const cleanedContent = Array.isArray(message.content)
     ? message.content.map((item) => {
         if (item.type === 'text') {
           return {
             type: 'text',
-            text: item.text
-              ?.replace(FIRST_USER_MESSAGE_REGEX, '')
-              .replace(DATA_SOURCE_ID_REGEX, '')
-              .replace(FILES_REGEX, ''),
+            text: item.text?.replace(FIRST_USER_MESSAGE_REGEX, '').replace(FILES_REGEX, ''),
           };
         }
 
         return item; // Preserve image_url and other types as is
       })
-    : textContent.replace(FIRST_USER_MESSAGE_REGEX, '').replace(DATA_SOURCE_ID_REGEX, '').replace(FILES_REGEX, '');
+    : textContent.replace(FIRST_USER_MESSAGE_REGEX, '').replace(FILES_REGEX, '');
 
   return {
     content: cleanedContent,
     isFirstUserMessage,
-    dataSourceId,
     isFixMessage,
   };
 }
diff --git a/app/lib/persistence/conversations.ts b/app/lib/persistence/conversations.ts
index 9e64de04..f5410c53 100644
--- a/app/lib/persistence/conversations.ts
+++ b/app/lib/persistence/conversations.ts
@@ -33,12 +33,15 @@ type ConversationResponse = {
   createdAt: number;
   updatedAt: number;
   dataSourceId: string;
+  environmentId: string;
 };
 
 export type SimpleConversationResponse = Omit<ConversationResponse, 'messages'>;
 
 export type UpdateConversationRequest = {
   description?: string;
+  environmentId?: string;
+  dataSourceId?: string;
 };
 
 type UIConversation = Omit<ConversationResponse, 'messages'> & {
@@ -87,13 +90,18 @@ export async function getConversation(id: string): Promise<UIConversation> {
   };
 }
 
-export async function createConversation(dataSourceId: string, messages?: MessageRequest[]): Promise<string> {
+export async function createConversation(
+  dataSourceId: string,
+  environmentId: string,
+  messages?: MessageRequest[],
+): Promise<string> {
   const response = await fetch(CONVERSATIONS_API, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
     },
     body: JSON.stringify({
+      environmentId, // This should be set based on your application logic
       dataSourceId,
       messages,
     }),
@@ -166,7 +174,11 @@ export async function forkConversation(conversationId: string, messageId: string
     snapshot: undefined,
   }));
 
-  const forkedConversationId = await createConversation(conversation.dataSourceId, messages);
+  const forkedConversationId = await createConversation(
+    conversation.dataSourceId,
+    conversation.environmentId,
+    messages,
+  );
 
   await trackTelemetryEvent({
     eventType: TelemetryEventType.USER_CHAT_FORK,
diff --git a/app/lib/persistence/useConversationHistory.ts b/app/lib/persistence/useConversationHistory.ts
index b9977a7e..ca7f08d3 100644
--- a/app/lib/persistence/useConversationHistory.ts
+++ b/app/lib/persistence/useConversationHistory.ts
@@ -5,7 +5,7 @@ import { useEffect, useRef, useState } from 'react';
 import { atom } from 'nanostores';
 import { type Message } from 'ai';
 import { toast } from 'sonner';
-import { useDataSourcesStore } from '~/lib/stores/dataSources';
+import { useEnvironmentDataSourcesStore } from '~/lib/stores/environmentDataSources';
 import { saveSnapshot, type SnapshotResponse } from '~/lib/persistence/snapshots';
 import { createCommandsMessage, detectProjectCommandsFromFileMap } from '~/utils/projectCommands';
 import { loadFileMapIntoContainer } from '~/lib/webcontainer/load-file-map';
@@ -35,7 +35,7 @@ export const description = atom<string | undefined>(undefined);
 
 export function useConversationHistory(id?: string) {
   const router = useRouter();
-  const { selectedDataSourceId, setSelectedDataSourceId } = useDataSourcesStore();
+  const { selectedEnvironmentDataSource, setSelectedEnvironmentDataSource } = useEnvironmentDataSourcesStore();
 
   const [initialMessages, setInitialMessages] = useState<Message[]>([]);
   const [commandMessage, setCommandMessage] = useState<Message>();
@@ -81,8 +81,8 @@ export function useConversationHistory(id?: string) {
             logger.error('Failed to load snapshot into container', reason);
           });
 
-        if (conversation.dataSourceId && conversation.dataSourceId !== selectedDataSourceId) {
-          setSelectedDataSourceId(conversation.dataSourceId);
+        if (conversation.dataSourceId && conversation.dataSourceId !== selectedEnvironmentDataSource.dataSourceId) {
+          setSelectedEnvironmentDataSource(conversation.dataSourceId, conversation.environmentId);
         }
 
         chatId.set(conversation.id);
@@ -97,7 +97,7 @@ export function useConversationHistory(id?: string) {
         // Redirect to main chat page if conversation not found
         router.replace('/chat');
       });
-  }, [id, router, selectedDataSourceId, setSelectedDataSourceId]);
+  }, [id, router, selectedEnvironmentDataSource, setSelectedEnvironmentDataSource]);
 
   return {
     ready: !id || ready,
diff --git a/app/lib/runtime/action-runner.ts b/app/lib/runtime/action-runner.ts
index 49af8f4a..c06ea6db 100644
--- a/app/lib/runtime/action-runner.ts
+++ b/app/lib/runtime/action-runner.ts
@@ -108,6 +108,62 @@ export class ActionRunner {
     return pid;
   }
 
+  static async updateEnvironmentVariable(envName: string, envValue: string): Promise<string> {
+    try {
+      const webcontainer = await webcontainerPromise();
+      const envFilePath = '.env';
+
+      // Check if .env file exists
+      let currentContent = '';
+
+      try {
+        currentContent = await webcontainer.fs.readFile(envFilePath, 'utf-8');
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      } catch (_error) {
+        // .env file doesn't exist, create it
+        currentContent = '';
+      }
+
+      // Parse existing environment variables
+      const envLines = currentContent.split('\n');
+      const envMap = new Map<string, string>();
+
+      // Parse existing variables
+      envLines.forEach((line) => {
+        const trimmedLine = line.trim();
+
+        if (trimmedLine && !trimmedLine.startsWith('#')) {
+          const equalIndex = trimmedLine.indexOf('=');
+
+          if (equalIndex > 0) {
+            const key = trimmedLine.substring(0, equalIndex);
+            const value = trimmedLine.substring(equalIndex + 1);
+            envMap.set(key, value);
+          }
+        }
+      });
+
+      // Update or add the new environment variable
+      envMap.set(envName, envValue);
+
+      // Reconstruct the .env file content
+      const newContent = Array.from(envMap.entries())
+        .map(([key, value]) => `${key}=${value}`)
+        .join('\n');
+
+      // Write the updated .env file
+      await webcontainer.fs.writeFile(envFilePath, newContent);
+      logger.debug(`Updated environment variable ${envName} in .env file`);
+
+      return newContent;
+    } catch (error) {
+      logger.error('Failed to update environment variable:', error);
+      throw new Error(
+        `Failed to update environment variable ${envName}: ${error instanceof Error ? error.message : 'Unknown error'}`,
+      );
+    }
+  }
+
   static #getCommandPid(targetCommand: string, psOutput?: string): number | null {
     if (!psOutput) {
       return null;
@@ -201,19 +257,6 @@ export class ActionRunner {
     return;
   }
 
-  async getFileHistory(filePath: string): Promise<FileHistory | null> {
-    try {
-      const webcontainer = await webcontainerPromise();
-      const historyPath = this.#getHistoryPath(filePath);
-      const content = await webcontainer.fs.readFile(historyPath, 'utf-8');
-
-      return JSON.parse(content);
-    } catch (error) {
-      logger.error('Failed to get file history:', error);
-      return null;
-    }
-  }
-
   async saveFileHistory(filePath: string, history: FileHistory) {
     const historyPath = this.#getHistoryPath(filePath);
 
@@ -468,7 +511,7 @@ export class ActionRunner {
     this.actions.setKey(id, { ...actions[id], ...newState });
   }
 
-  #getHistoryPath(filePath: string) {
+  async #getHistoryPath(filePath: string) {
     return nodePath.join('.history', filePath);
   }
 
diff --git a/app/lib/schema.ts b/app/lib/schema.ts
index 89dc688d..efec08ff 100644
--- a/app/lib/schema.ts
+++ b/app/lib/schema.ts
@@ -3,7 +3,7 @@ import { createScopedLogger } from '~/utils/logger';
 import { prisma } from '~/lib/prisma';
 import crypto from 'crypto';
 
-import { getDatabaseUrl } from '~/lib/services/datasourceService';
+import { getDatabaseUrl } from '~/lib/services/dataSourceService';
 import { DataSourcePluginManager } from '~/lib/plugins/data-access/data-access-plugin-manager';
 
 // Cache duration in seconds (31 days)
@@ -11,8 +11,12 @@ const SCHEMA_CACHE_TTL = 60 * 60 * 24 * 31;
 
 const logger = createScopedLogger('get-database-schema');
 
-export const getDatabaseSchema = async (dataSourceId: string, userId: string): Promise<Table[]> => {
-  const connectionUrl = await getDatabaseUrl(userId, dataSourceId);
+export const getDatabaseSchema = async (
+  dataSourceId: string,
+  environmentId: string,
+  userId: string,
+): Promise<Table[]> => {
+  const connectionUrl = await getDatabaseUrl(userId, dataSourceId, environmentId);
 
   if (!connectionUrl) {
     throw new Error('Missing required connection parameters');
diff --git a/app/lib/services/conversationService.ts b/app/lib/services/conversationService.ts
index f8713cd7..0bdfa546 100644
--- a/app/lib/services/conversationService.ts
+++ b/app/lib/services/conversationService.ts
@@ -1,5 +1,5 @@
 import { prisma } from '~/lib/prisma';
-import type { Conversation, Prisma } from '@prisma/client';
+import { type Conversation, type EnvironmentDataSource, type Prisma } from '@prisma/client';
 import { StarterPluginManager } from '~/lib/plugins/starter/starter-plugin-manager';
 
 export const conversationService = {
@@ -9,16 +9,17 @@ export const conversationService = {
     });
   },
 
-  async getConversationDataSource(conversationId: string) {
+  async getConversationEnvironmentDataSource(conversationId: string): Promise<EnvironmentDataSource> {
     return await prisma.conversation
       .findUniqueOrThrow({
         where: { id: conversationId },
       })
-      .dataSource();
+      .environmentDataSource();
   },
 
   async createConversation(
     dataSourceId: string,
+    environmentId: string,
     userId: string,
     description?: string,
     tx?: Prisma.TransactionClient,
@@ -30,8 +31,13 @@ export const conversationService = {
         User: {
           connect: { id: userId },
         },
-        dataSource: {
-          connect: { id: dataSourceId },
+        environmentDataSource: {
+          connect: {
+            environmentId_dataSourceId: {
+              environmentId,
+              dataSourceId,
+            },
+          },
         },
         description,
         starterId,
@@ -39,7 +45,7 @@ export const conversationService = {
     });
   },
 
-  async updateConversationDescription(
+  async updateConversation(
     conversationId: string,
     userId: string,
     data: Partial<Conversation>,
@@ -56,11 +62,13 @@ export const conversationService = {
         id: true,
         description: true,
         starterId: true,
-        dataSourceId: true,
+        environmentDataSource: true,
         snapshots: true,
         userId: true,
         createdAt: true,
         updatedAt: true,
+        dataSourceId: true,
+        environmentId: true,
       },
       where: {
         userId,
diff --git a/app/lib/services/dataSourceService.ts b/app/lib/services/dataSourceService.ts
new file mode 100644
index 00000000..5e68df44
--- /dev/null
+++ b/app/lib/services/dataSourceService.ts
@@ -0,0 +1,306 @@
+import { prisma } from '~/lib/prisma';
+import { DataSourcePluginManager } from '~/lib/plugins/data-access/data-access-plugin-manager';
+import { buildResourceWhereClause } from '@/lib/casl/prisma-helpers';
+import {
+  DataSourcePropertyType,
+  type EnvironmentDataSource,
+  EnvironmentVariableType,
+  PermissionAction,
+  PermissionResource,
+  Prisma,
+} from '@prisma/client';
+import type { AppAbility } from '~/lib/casl/user-ability';
+import { createEnvironmentVariable, decryptEnvironmentVariable } from './environmentVariablesService';
+import { getEnvironmentName } from './environmentService';
+
+export interface DataSource {
+  id: string;
+  name: string;
+  connectionString: string;
+  environmentId: string;
+  environmentName: string;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+const SAMPLE_DATABASE_CONNECTION_STRING = 'sqlite://sample.db';
+
+export async function getEnvironmentDataSources(userAbility: AppAbility): Promise<EnvironmentDataSource[]> {
+  // TODO: @skos Update specific permissions
+  const whereClause = buildResourceWhereClause(
+    userAbility,
+    PermissionAction.read,
+    PermissionResource.DataSource,
+  ) as Prisma.DataSourceWhereInput;
+
+  const environmentDataSources = await prisma.environmentDataSource.findMany({
+    where: {
+      dataSource: whereClause,
+    },
+    include: {
+      environment: true,
+      dataSource: true,
+      dataSourceProperties: {
+        include: {
+          environmentVariable: true,
+        },
+      },
+      conversations: true,
+    },
+    orderBy: [{ environment: { name: 'asc' } }, { dataSource: { name: 'asc' } }],
+  });
+
+  return environmentDataSources.map((eds) => ({
+    ...eds,
+    dataSourceProperties: eds.dataSourceProperties.map((dsp) => ({
+      ...dsp,
+      environmentVariable: decryptEnvironmentVariable(dsp.environmentVariable),
+    })),
+  }));
+}
+
+export async function getEnvironmentDataSource(dataSourceId: string, userId: string, environmentId: string) {
+  const environmentDataSource = await prisma.environmentDataSource.findUnique({
+    where: {
+      environmentId_dataSourceId: {
+        environmentId,
+        dataSourceId,
+      },
+    },
+    include: {
+      environment: true,
+      dataSource: true,
+      dataSourceProperties: {
+        include: {
+          environmentVariable: true,
+        },
+      },
+      conversations: true,
+    },
+  });
+
+  // TODO: @skos Update specific permissions
+  // Verify user has access to this data source
+  if (!environmentDataSource || environmentDataSource.dataSource.createdById !== userId) {
+    return null;
+  }
+
+  return {
+    ...environmentDataSource,
+    dataSourceProperties: environmentDataSource.dataSourceProperties.map((dsp) => ({
+      ...dsp,
+      environmentVariable: decryptEnvironmentVariable(dsp.environmentVariable),
+    })),
+  };
+}
+
+export async function createDataSource(data: {
+  name: string;
+  createdById: string;
+  environmentId: string;
+  connectionString: string;
+}): Promise<DataSource> {
+  validateDataSource(data.connectionString);
+
+  // Get environment details for naming
+  const environmentName = await getEnvironmentName(data.environmentId);
+
+  if (!environmentName) {
+    throw new Error('Environment not found');
+  }
+
+  // Use Prisma transaction to ensure full atomicity
+  return prisma.$transaction(async (tx) => {
+    // Create data source
+    const dataSource = await tx.dataSource.create({
+      data: {
+        name: data.name,
+        createdById: data.createdById,
+      },
+      select: {
+        id: true,
+        name: true,
+        createdAt: true,
+        updatedAt: true,
+      },
+    });
+
+    // Create EnvironmentDataSource relationship
+    await tx.environmentDataSource.create({
+      data: {
+        environmentId: data.environmentId,
+        dataSourceId: dataSource.id,
+      },
+    });
+
+    // Create environment variable for connection url (if provided)
+    const envVarKey = `${environmentName}_${data.name}_${DataSourcePropertyType.CONNECTION_URL}`
+      .toUpperCase()
+      .replace(/\s+/g, '_');
+
+    const environmentVariable = await createEnvironmentVariable(
+      envVarKey,
+      data.connectionString!,
+      EnvironmentVariableType.DATA_SOURCE,
+      data.environmentId,
+      data.createdById,
+      `Database connection URL for ${data.name} in ${environmentName}`,
+      dataSource.id,
+      tx, // Pass transaction for atomicity
+    );
+
+    await tx.dataSourceProperty.create({
+      data: {
+        type: DataSourcePropertyType.CONNECTION_URL,
+        environmentId: data.environmentId,
+        dataSourceId: dataSource.id,
+        environmentVariableId: environmentVariable.id,
+      },
+    });
+
+    return {
+      ...dataSource,
+      connectionString: data.connectionString!,
+      environmentId: data.environmentId,
+      environmentName,
+    };
+  });
+}
+
+export async function createSampleDataSource(data: {
+  createdById: string;
+  environmentId: string;
+}): Promise<DataSource> {
+  const environmentName = await getEnvironmentName(data.environmentId);
+
+  if (!environmentName) {
+    throw new Error('Environment not found');
+  }
+
+  return prisma.$transaction(async (tx) => {
+    // Create data source
+    const dataSource = await tx.dataSource.create({
+      data: {
+        name: 'Sample Database',
+        createdById: data.createdById,
+      },
+      select: {
+        id: true,
+        name: true,
+        createdAt: true,
+        updatedAt: true,
+      },
+    });
+
+    await tx.environmentDataSource.create({
+      data: {
+        environmentId: data.environmentId,
+        dataSourceId: dataSource.id,
+      },
+    });
+
+    // Create environment variable for sample db connection url
+    const envVarKey = `${environmentName}_SAMPLE_${DataSourcePropertyType.CONNECTION_URL}`
+      .toUpperCase()
+      .replace(/\s+/g, '_');
+
+    const environmentVariable = await createEnvironmentVariable(
+      envVarKey,
+      SAMPLE_DATABASE_CONNECTION_STRING,
+      EnvironmentVariableType.DATA_SOURCE,
+      data.environmentId,
+      data.createdById,
+      `Database connection URL for Sample Database in ${environmentName}`,
+      dataSource.id,
+      tx, // Pass transaction for atomicity
+    );
+
+    await tx.dataSourceProperty.create({
+      data: {
+        type: DataSourcePropertyType.CONNECTION_URL,
+        environmentId: data.environmentId,
+        dataSourceId: dataSource.id,
+        environmentVariableId: environmentVariable.id,
+      },
+    });
+
+    return {
+      ...dataSource,
+      connectionString: SAMPLE_DATABASE_CONNECTION_STRING,
+      environmentId: data.environmentId,
+      environmentName,
+    };
+  });
+}
+
+export function getDataSource(id: string) {
+  return prisma.dataSource.findUnique({ where: { id } });
+}
+
+// TODO: @skos update this and the routes and UI
+export async function updateDataSource(data: { id: string; name: string; connectionString: string; userId: string }) {
+  validateDataSource(data.connectionString);
+
+  return prisma.dataSource.update({
+    where: { id: data.id, createdById: data.userId },
+    data: { name: data.name },
+  });
+}
+
+// TODO: @skos update this with environmentId (routes and UI as well)
+export async function deleteDataSource(id: string, userId: string) {
+  return prisma.dataSource.delete({ where: { id, createdById: userId } });
+}
+
+export async function getDatabaseUrl(
+  userId: string,
+  dataSourceId: string,
+  environmentId: string,
+): Promise<string | null> {
+  const eds = await prisma.environmentDataSource.findFirst({
+    where: {
+      environmentId,
+      dataSourceId,
+      dataSource: {
+        createdById: userId, // ownership check
+      },
+    },
+    include: {
+      dataSourceProperties: {
+        where: {
+          type: DataSourcePropertyType.CONNECTION_URL, // only connection URL property
+        },
+        include: {
+          environmentVariable: true, // pull the encrypted env var
+        },
+      },
+    },
+  });
+
+  if (!eds || eds.dataSourceProperties.length === 0) {
+    return null;
+  }
+
+  const connectionProperty = eds.dataSourceProperties[0];
+  const envVar = connectionProperty.environmentVariable;
+
+  if (!envVar) {
+    return null;
+  }
+
+  return decryptEnvironmentVariable(envVar).value;
+}
+
+export async function getConversationCount(dataSourceId: string, userId: string): Promise<number> {
+  return prisma.conversation.count({
+    where: {
+      dataSourceId,
+      userId,
+    },
+  });
+}
+
+function validateDataSource(connectionString: string) {
+  const accessor = DataSourcePluginManager.getAccessor(connectionString);
+  accessor.validate(connectionString);
+}
diff --git a/app/lib/services/datasourceService.ts b/app/lib/services/datasourceService.ts
deleted file mode 100644
index c3c2c4d1..00000000
--- a/app/lib/services/datasourceService.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-import { prisma } from '~/lib/prisma';
-import { DataSourcePluginManager } from '~/lib/plugins/data-access/data-access-plugin-manager';
-import { buildResourceWhereClause } from '@/lib/casl/prisma-helpers';
-import { PermissionAction, PermissionResource, Prisma } from '@prisma/client';
-import type { AppAbility } from '~/lib/casl/user-ability';
-
-export interface DataSource {
-  id: string;
-  name: string;
-  connectionString: string;
-  createdById: string;
-  createdAt: Date;
-  updatedAt: Date;
-}
-
-export async function getDataSource(id: string): Promise<DataSource | null> {
-  return prisma.dataSource.findUnique({
-    where: { id },
-    select: {
-      id: true,
-      name: true,
-      connectionString: true,
-      createdById: true,
-      createdAt: true,
-      updatedAt: true,
-    },
-  });
-}
-
-export async function getDataSources(userAbility: AppAbility): Promise<DataSource[]> {
-  const whereClause = buildResourceWhereClause(
-    userAbility,
-    PermissionAction.read,
-    PermissionResource.DataSource,
-  ) as Prisma.DataSourceWhereInput;
-
-  return prisma.dataSource.findMany({
-    where: whereClause,
-    select: {
-      id: true,
-      name: true,
-      connectionString: true,
-      createdById: true,
-      createdAt: true,
-      updatedAt: true,
-    },
-  });
-}
-
-export async function createDataSource(data: {
-  name: string;
-  connectionString: string;
-  createdById: string;
-}): Promise<DataSource> {
-  validateDataSource(data.connectionString);
-
-  return prisma.dataSource.create({
-    data: {
-      name: data.name,
-      connectionString: data.connectionString,
-      createdById: data.createdById,
-    },
-  });
-}
-
-export async function updateDataSource(data: { id: string; name: string; connectionString: string; userId: string }) {
-  validateDataSource(data.connectionString);
-
-  return prisma.dataSource.update({
-    where: { id: data.id, createdById: data.userId },
-    data: { name: data.name, connectionString: data.connectionString },
-  });
-}
-
-export async function deleteDataSource(id: string, userId: string) {
-  return prisma.dataSource.delete({ where: { id, createdById: userId } });
-}
-
-export async function getDatabaseUrl(userId: string, datasourceId: string) {
-  const dataSource = await prisma.dataSource.findUnique({
-    where: { id: datasourceId, createdById: userId },
-    select: {
-      connectionString: true,
-    },
-  });
-
-  if (!dataSource) {
-    throw new Error('Data source not found');
-  }
-
-  return dataSource.connectionString;
-}
-
-export async function getConversationCount(dataSourceId: string, userId: string): Promise<number> {
-  return prisma.conversation.count({
-    where: {
-      dataSourceId,
-      userId,
-    },
-  });
-}
-
-function validateDataSource(connectionString: string) {
-  const accessor = DataSourcePluginManager.getAccessor(connectionString);
-  accessor.validate(connectionString);
-}
diff --git a/app/lib/services/environmentService.ts b/app/lib/services/environmentService.ts
index 9d38f58a..b1f2e0f1 100644
--- a/app/lib/services/environmentService.ts
+++ b/app/lib/services/environmentService.ts
@@ -1,23 +1,55 @@
 import { prisma } from '~/lib/prisma';
 import type { Environment } from '@prisma/client';
 
-export async function getEnvironment(id: string): Promise<Environment | null> {
+export interface EnvironmentWithRelations extends Environment {
+  dataSources: any[];
+  websites: any[];
+  environmentVariables: any[];
+}
+
+export async function getEnvironment(id: string): Promise<EnvironmentWithRelations | null> {
   return prisma.environment.findUnique({
     where: { id },
     include: {
       dataSources: true,
       websites: true,
+      environmentVariables: true,
+    },
+  });
+}
+
+export async function getEnvironmentName(id: string): Promise<string | null> {
+  const env = await prisma.environment.findUnique({
+    where: { id },
+    select: {
+      name: true,
     },
   });
+
+  return env?.name ?? null;
 }
 
-export async function getEnvironments(): Promise<Environment[]> {
-  return prisma.environment.findMany({
+export async function getEnvironments(): Promise<EnvironmentWithRelations[]> {
+  const environments = await prisma.environment.findMany({
     include: {
-      dataSources: true,
+      dataSources: {
+        include: {
+          dataSource: true,
+        },
+      },
       websites: true,
+      environmentVariables: true,
     },
+    orderBy: { name: 'asc' },
   });
+
+  return environments.map((env) => ({
+    ...env,
+    // flatten dataSources
+    dataSources: env.dataSources.map((ds) => ({
+      ...ds.dataSource,
+    })),
+  }));
 }
 
 export async function createEnvironment(
diff --git a/app/lib/services/environmentVariablesService.ts b/app/lib/services/environmentVariablesService.ts
new file mode 100644
index 00000000..2bdffa71
--- /dev/null
+++ b/app/lib/services/environmentVariablesService.ts
@@ -0,0 +1,142 @@
+import { prisma } from '~/lib/prisma';
+import type { EnvironmentVariable, EnvironmentVariableType } from '@prisma/client';
+import { encryptData, decryptData } from '@liblab/encryption/encryption';
+import { env } from '~/env';
+import { logger } from '~/utils/logger';
+
+type PrismaTransaction = Omit<typeof prisma, '$connect' | '$disconnect' | '$on' | '$transaction' | '$use' | '$extends'>;
+
+export async function getEnvironmentVariable(id: string): Promise<EnvironmentVariable | null> {
+  const envVar = await prisma.environmentVariable.findUnique({
+    where: { id },
+    include: {
+      environment: true,
+      createdBy: true,
+    },
+  });
+
+  return envVar ? decryptEnvironmentVariable(envVar) : null;
+}
+
+export async function getEnvironmentVariables(environmentId: string): Promise<EnvironmentVariable[]> {
+  const envVars = await prisma.environmentVariable.findMany({
+    where: { environmentId },
+    include: {
+      environment: true,
+      createdBy: true,
+    },
+    orderBy: { key: 'asc' },
+  });
+
+  return envVars.map(decryptEnvironmentVariable);
+}
+
+export async function createEnvironmentVariable(
+  key: string,
+  value: string,
+  type: EnvironmentVariableType,
+  environmentId: string,
+  createdById: string,
+  description?: string,
+  dataSourceId?: string,
+  tx?: PrismaTransaction,
+): Promise<EnvironmentVariable> {
+  const encryptedValue = encryptValue(value);
+  const client = tx || prisma;
+
+  const envVar = await client.environmentVariable.create({
+    data: {
+      key,
+      value: encryptedValue,
+      description: description || null,
+      type,
+      environmentId,
+      createdById,
+    },
+  });
+
+  return decryptEnvironmentVariable(envVar);
+}
+
+export async function updateEnvironmentVariable(
+  id: string,
+  key: string,
+  value: string,
+  type: EnvironmentVariableType,
+  description?: string,
+): Promise<EnvironmentVariable> {
+  const valueToStore = encryptValue(value);
+
+  const envVar = await prisma.environmentVariable.update({
+    where: { id },
+    data: {
+      key,
+      value: valueToStore,
+      description: description || null,
+      type,
+    },
+  });
+
+  return decryptEnvironmentVariable(envVar);
+}
+
+export async function deleteEnvironmentVariable(id: string) {
+  return prisma.environmentVariable.delete({ where: { id } });
+}
+
+export async function getEnvironmentVariableByKey(
+  key: string,
+  environmentId: string,
+): Promise<EnvironmentVariable | null> {
+  const envVar = await prisma.environmentVariable.findUnique({
+    where: {
+      key_environmentId: {
+        key,
+        environmentId,
+      },
+    },
+    include: {
+      environment: true,
+      createdBy: true,
+    },
+  });
+
+  return envVar ? decryptEnvironmentVariable(envVar) : null;
+}
+
+export function decryptEnvironmentVariable(envVar: EnvironmentVariable): EnvironmentVariable {
+  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}`);
+  }
+}
+
+function encryptValue(value: string): string {
+  const encryptionKey = env.server.ENCRYPTION_KEY;
+
+  if (!encryptionKey) {
+    throw new Error('Encryption key not found');
+  }
+
+  const dataBuffer = Buffer.from(value);
+
+  return encryptData(encryptionKey, dataBuffer);
+}
+
+function decryptValue(encryptedValue: string): string {
+  const encryptionKey = env.server.ENCRYPTION_KEY;
+
+  if (!encryptionKey) {
+    throw new Error('Encryption key not found');
+  }
+
+  const decryptedBuffer = decryptData(encryptionKey, encryptedValue);
+
+  return decryptedBuffer.toString();
+}
diff --git a/app/lib/services/snapshotService.ts b/app/lib/services/snapshotService.ts
index 6ae601f2..297f2a5d 100644
--- a/app/lib/services/snapshotService.ts
+++ b/app/lib/services/snapshotService.ts
@@ -59,4 +59,15 @@ export const snapshotService = {
       },
     });
   },
+
+  async getSnapshotByMessageId(messageId: string) {
+    return prisma.snapshot.findUnique({
+      where: {
+        messageId,
+      },
+      include: {
+        message: true,
+      },
+    });
+  },
 };
diff --git a/app/lib/services/suggestionService.ts b/app/lib/services/suggestionService.ts
index 0c1834c8..644e9f66 100644
--- a/app/lib/services/suggestionService.ts
+++ b/app/lib/services/suggestionService.ts
@@ -1,7 +1,7 @@
 import { generateObject } from 'ai';
 import { z } from 'zod';
 import { DataAccessor } from 'shared/src/data-access/dataAccessor';
-import { type DataSource } from './datasourceService';
+import { type DataSource } from './dataSourceService';
 import { getLlm } from '~/lib/.server/llm/get-llm';
 
 import { logger } from '~/utils/logger';
diff --git a/app/lib/stores/dataSources.ts b/app/lib/stores/dataSources.ts
deleted file mode 100644
index b36bd3f0..00000000
--- a/app/lib/stores/dataSources.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import { create } from 'zustand';
-import { useRouter } from 'next/navigation';
-import { persist } from 'zustand/middleware';
-import { DATA_SOURCE_CONNECTION_ROUTE } from '~/lib/constants/routes';
-
-interface DataSource {
-  id: string;
-  name: string;
-  connectionString: string;
-  createdAt: string;
-  updatedAt: string;
-}
-
-interface DataSourcesState {
-  dataSources: DataSource[];
-  selectedDataSourceId: string | null;
-  setDataSources: (dataSources: DataSource[]) => void;
-  setSelectedDataSourceId: (id: string | null) => void;
-  clearDataSources: () => void;
-}
-
-export const useDataSourcesStore = create<DataSourcesState>()(
-  persist(
-    (set, getState) => ({
-      dataSources: [],
-      selectedDataSourceId: null,
-      setDataSources: (dataSources) => {
-        set({ dataSources });
-
-        if (dataSources.length === 0) {
-          getState().setSelectedDataSourceId(null);
-          return;
-        }
-
-        const selectedDataSourceId = getState().selectedDataSourceId;
-
-        if (selectedDataSourceId && dataSources.some((dataSource) => dataSource.id === selectedDataSourceId)) {
-          return;
-        }
-
-        getState().setSelectedDataSourceId(dataSources[0].id);
-      },
-      setSelectedDataSourceId: (id) => set({ selectedDataSourceId: id }),
-      clearDataSources: () => set({ dataSources: [] }),
-    }),
-    {
-      name: 'data-sources-storage',
-    },
-  ),
-);
-
-export const useDataSourceActions = () => {
-  const { setDataSources } = useDataSourcesStore();
-  const router = useRouter();
-
-  const refetchDataSources = async () => {
-    try {
-      const response = await fetch('/api/data-sources');
-      const data = (await response.json()) as { success: boolean; dataSources: DataSource[] };
-
-      if (data.success) {
-        setDataSources(data.dataSources);
-
-        if (!data.dataSources?.length) {
-          router.push(DATA_SOURCE_CONNECTION_ROUTE);
-        }
-      }
-    } catch (error) {
-      console.error('Failed to fetch data sources:', error);
-    }
-  };
-
-  return {
-    refetchDataSources,
-  };
-};
diff --git a/app/lib/stores/environmentDataSources.ts b/app/lib/stores/environmentDataSources.ts
new file mode 100644
index 00000000..537a60e6
--- /dev/null
+++ b/app/lib/stores/environmentDataSources.ts
@@ -0,0 +1,120 @@
+import { create } from 'zustand';
+import { useRouter } from 'next/navigation';
+import { persist } from 'zustand/middleware';
+import { DATA_SOURCE_CONNECTION_ROUTE } from '~/lib/constants/routes';
+
+// TODO: @skos we could reassign the prisma types in lib/ to a variable and import here as a type
+export interface EnvironmentVariable {
+  id: string;
+  key: string;
+  value: string;
+  description: string | null;
+  // TODO: @skos the type should be EnvironmentVariableType (but can't import directly from prisma)
+  type: any;
+  environmentId: string;
+  dataSourceId: string | null;
+  createdById: string;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+export interface EnvironmentDataSource {
+  createdAt: Date;
+  updatedAt: Date;
+  dataSourceId: string;
+  environmentId: string;
+  environment: {
+    id: string;
+    name: string;
+    description: string | null;
+  };
+  dataSource: {
+    id: string;
+    name: string;
+    createdAt: Date;
+    updatedAt: Date;
+  };
+  dataSourceProperties: [
+    {
+      type: any;
+      environmentVariables: EnvironmentVariable[];
+    },
+  ];
+  // TODO: @skos this should be DataSourcePropertyType (but can't import from prisma directly)
+}
+
+interface EnvironmentDataSourcesStore {
+  environmentDataSources: EnvironmentDataSource[];
+  selectedEnvironmentDataSource: { dataSourceId: string | null; environmentId: string | null };
+  setEnvironmentDataSources: (environmentDataSources: EnvironmentDataSource[]) => void;
+  setSelectedEnvironmentDataSource: (dataSourceId: string | null, environmentId: string | null) => void;
+  clearEnvironmentDataSources: () => void;
+}
+
+export const useEnvironmentDataSourcesStore = create<EnvironmentDataSourcesStore>()(
+  persist(
+    (set, getState) => ({
+      environmentDataSources: [],
+      selectedEnvironmentDataSource: { dataSourceId: null, environmentId: null },
+      setEnvironmentDataSources: (environmentDataSources) => {
+        set({ environmentDataSources });
+
+        if (environmentDataSources.length === 0) {
+          getState().setSelectedEnvironmentDataSource(null, null);
+          return;
+        }
+
+        const selectedEnvironmentDataSource = getState().selectedEnvironmentDataSource;
+
+        if (
+          selectedEnvironmentDataSource.dataSourceId &&
+          selectedEnvironmentDataSource.environmentId &&
+          environmentDataSources.some(
+            (eds) =>
+              eds.dataSourceId === selectedEnvironmentDataSource.dataSourceId &&
+              eds.environmentId === selectedEnvironmentDataSource.environmentId,
+          )
+        ) {
+          return;
+        }
+
+        getState().setSelectedEnvironmentDataSource(
+          environmentDataSources[0].dataSourceId,
+          environmentDataSources[0].environmentId,
+        );
+      },
+      setSelectedEnvironmentDataSource: (dataSourceId: string | null, environmentId: string | null) =>
+        set({ selectedEnvironmentDataSource: { dataSourceId, environmentId } }),
+      clearEnvironmentDataSources: () => set({ environmentDataSources: [] }),
+    }),
+    {
+      name: 'data-sources-storage',
+    },
+  ),
+);
+
+export const useDataSourceActions = () => {
+  const { setEnvironmentDataSources } = useEnvironmentDataSourcesStore();
+  const router = useRouter();
+
+  const refetchEnvironmentDataSources = async () => {
+    try {
+      const response = await fetch('/api/data-sources');
+      const data = (await response.json()) as { success: boolean; environmentDataSources: EnvironmentDataSource[] };
+
+      if (data.success) {
+        setEnvironmentDataSources(data.environmentDataSources);
+
+        if (!data.environmentDataSources?.length) {
+          router.push(DATA_SOURCE_CONNECTION_ROUTE);
+        }
+      }
+    } catch (error) {
+      console.error('Failed to fetch data sources:', error);
+    }
+  };
+
+  return {
+    refetchEnvironmentDataSources,
+  };
+};
diff --git a/app/lib/stores/environments.ts b/app/lib/stores/environments.ts
new file mode 100644
index 00000000..bfb55346
--- /dev/null
+++ b/app/lib/stores/environments.ts
@@ -0,0 +1,29 @@
+import { create } from 'zustand';
+import type { EnvironmentWithRelations } from '~/lib/services/environmentService';
+
+interface EnvironmentsStore {
+  environments: EnvironmentWithRelations[];
+  setEnvironments: (environments: EnvironmentWithRelations[]) => void;
+  addEnvironment: (environment: EnvironmentWithRelations) => void;
+  updateEnvironment: (id: string, updates: Partial<EnvironmentWithRelations>) => void;
+  removeEnvironment: (id: string) => void;
+}
+
+export const useEnvironmentsStore = create<EnvironmentsStore>((set, get) => ({
+  environments: [],
+  setEnvironments: (environments) => set({ environments }),
+  addEnvironment: (environment) => {
+    const current = get().environments;
+    set({ environments: [...current, environment] });
+  },
+  updateEnvironment: (id, updates) => {
+    const current = get().environments;
+    const updated = current.map((env) => (env.id === id ? { ...env, ...updates } : env));
+    set({ environments: updated });
+  },
+  removeEnvironment: (id) => {
+    const current = get().environments;
+    const filtered = current.filter((env) => env.id !== id);
+    set({ environments: filtered });
+  },
+}));
diff --git a/app/page.tsx b/app/page.tsx
index 278262c4..90b62217 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -5,7 +5,7 @@ import { Header } from '~/components/header/Header';
 import { Background } from '~/components/ui/Background';
 import React, { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
-import { useDataSourcesStore } from '~/lib/stores/dataSources';
+import { useEnvironmentDataSourcesStore } from '~/lib/stores/environmentDataSources';
 import { Menu } from '~/components/sidebar/Menu.client';
 import * as Tooltip from '@radix-ui/react-tooltip';
 import type { PendingPrompt } from '~/components/chat/BaseChat';
@@ -19,7 +19,7 @@ import { toast } from 'sonner';
 
 export default function Index() {
   const router = useRouter();
-  const { selectedDataSourceId, dataSources } = useDataSourcesStore();
+  const { selectedEnvironmentDataSource, environmentDataSources } = useEnvironmentDataSourcesStore();
   const [input, setInput] = useState('');
   const [uploadedFiles, setUploadedFiles] = useState<File[]>([]);
   const [imageDataList, setImageDataList] = useState<string[]>([]);
@@ -55,7 +55,7 @@ export default function Index() {
       input,
       files: uploadedFiles.map((f) => f.name),
       images: imageDataList,
-      dataSourceId: selectedDataSourceId,
+      environmentDataSource: selectedEnvironmentDataSource,
     };
 
     sessionStorage.setItem('pendingPrompt', JSON.stringify(pendingPrompt));
@@ -66,7 +66,7 @@ export default function Index() {
       return;
     }
 
-    if (dataSources.length === 0 || !selectedDataSourceId) {
+    if (environmentDataSources.length === 0 || !selectedEnvironmentDataSource) {
       router.push(DATA_SOURCE_CONNECTION_ROUTE);
 
       return;
diff --git a/app/utils/constants.ts b/app/utils/constants.ts
index 9cbbf659..bf3ae667 100644
--- a/app/utils/constants.ts
+++ b/app/utils/constants.ts
@@ -4,6 +4,7 @@ export const MODIFICATIONS_TAG_NAME = 'liblab_file_modifications';
 export const FIRST_USER_MESSAGE_REGEX = /\[FirstUserMessage: (.*?)\]\n\n/;
 export const PROMPT_COOKIE_KEY = 'cachedPrompt';
 export const DATA_SOURCE_ID_REGEX = /\[DataSourceId: (.*?)\]\n\n/;
+export const ENVIRONMENT_ID_REGEX = /\[EnvironmentId: (.*?)\]\n\n/;
 export const FILES_REGEX = /\[Files: (.*?)\]\n\n/;
 export const PROJECT_SETUP_ANNOTATION = 'project-setup';
 export const FIX_ANNOTATION = 'fix';
diff --git a/app/utils/output-app.ts b/app/utils/output-app.ts
deleted file mode 100644
index c84f2f93..00000000
--- a/app/utils/output-app.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export enum OutputAppEventType {
-  EDIT_QUERY = 'edit_query',
-}
-
-export interface OutputAppEvent {
-  eventType: OutputAppEventType;
-  queryId: string | number;
-}
-
-export enum BuilderAppEventType {
-  SQL_INSPECTOR_TOGGLE = 'sql_inspector_toggle',
-}
-
-export interface BuilderAppEvent {
-  eventType: BuilderAppEventType;
-  enabled: boolean;
-}
diff --git a/prisma/migrations/20250826135503_add_environment_variables_and_data_source_properties_and_environment_support/migration.sql b/prisma/migrations/20250826135503_add_environment_variables_and_data_source_properties_and_environment_support/migration.sql
new file mode 100644
index 00000000..4378dac1
--- /dev/null
+++ b/prisma/migrations/20250826135503_add_environment_variables_and_data_source_properties_and_environment_support/migration.sql
@@ -0,0 +1,143 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `dataSourceId` on the `conversation` table. All the data in the column will be lost.
+  - You are about to drop the column `connection_string` on the `data_source` table. All the data in the column will be lost.
+  - Added the required column `data_source_id` to the `conversation` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `environment_id` to the `conversation` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `updated_at` to the `environment_data_source` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- CreateEnum
+CREATE TYPE "public"."DataSourcePropertyType" AS ENUM ('CONNECTION_URL', 'ACCESS_TOKEN', 'REFRESH_TOKEN', 'CLIENT_ID', 'CLIENT_SECRET', 'API_KEY');
+
+-- CreateEnum
+CREATE TYPE "public"."EnvironmentVariableType" AS ENUM ('GLOBAL', 'DATA_SOURCE');
+
+-- AlterEnum
+ALTER TYPE "public"."PermissionResource" ADD VALUE 'EnvironmentVariable';
+
+-- DropForeignKey
+ALTER TABLE "public"."conversation" DROP CONSTRAINT "conversation_dataSourceId_fkey";
+
+-- AlterTable
+ALTER TABLE "public"."conversation"
+  ADD COLUMN     "data_source_id" TEXT,
+ADD COLUMN     "environment_id" TEXT;
+
+
+
+UPDATE "public"."conversation"
+SET data_source_id = "dataSourceId";
+
+-- First, try to update conversations where users have organizations with Development environments
+WITH user_orgs AS (
+  SELECT u.id as user_id, u."organizationId" as organization_id
+  FROM "public"."user" u
+  WHERE u."organizationId" IS NOT NULL
+),
+     dev_envs AS (
+       SELECT e.id as env_id, e.organization_id
+       FROM "public"."environment" e
+       WHERE e.name = 'Development'
+     )
+UPDATE "public"."conversation" c
+SET environment_id = dev_envs.env_id
+  FROM user_orgs, dev_envs
+WHERE c."userId" = user_orgs.user_id
+  AND user_orgs.organization_id = dev_envs.organization_id;
+
+-- Then, for any remaining conversations without environment_id,
+-- find any available environment (prioritizing Development if available)
+UPDATE "public"."conversation" c
+SET environment_id = (
+  SELECT e.id
+  FROM "public"."environment" e
+  WHERE e.organization_id = (
+    SELECT u."organizationId"
+    FROM "public"."user" u
+    WHERE u.id = c."userId"
+  )
+  ORDER BY CASE WHEN e.name = 'Development' THEN 0 ELSE 1 END, e.name
+  LIMIT 1
+  )
+WHERE c.environment_id IS NULL;
+
+-- If still no environment_id, use the first available environment
+UPDATE "public"."conversation" c
+SET environment_id = (
+  SELECT e.id
+  FROM "public"."environment" e
+  LIMIT 1
+  )
+WHERE c.environment_id IS NULL;
+
+
+ALTER TABLE "public"."conversation" ALTER COLUMN "data_source_id" SET NOT NULL;
+ALTER TABLE "public"."conversation" ALTER COLUMN "environment_id" SET NOT NULL;
+
+ALTER TABLE "public"."conversation" DROP COLUMN "dataSourceId";
+
+-- AlterTable
+ALTER TABLE "public"."data_source" DROP COLUMN "connection_string";
+
+-- AlterTable
+ALTER TABLE "public"."environment_data_source" ADD COLUMN     "updated_at" TIMESTAMP(3) NOT NULL;
+
+-- Insert missing environment_data_source rows for existing conversations
+INSERT INTO "public"."environment_data_source" ("environment_id", "data_source_id", "created_at", "updated_at")
+SELECT DISTINCT c.environment_id, c.data_source_id, NOW(), NOW()
+FROM "public"."conversation" c
+WHERE c.environment_id IS NOT NULL
+  AND c.data_source_id IS NOT NULL
+  AND NOT EXISTS (
+  SELECT 1 FROM "public"."environment_data_source" eds
+  WHERE eds.environment_id = c.environment_id
+    AND eds.data_source_id = c.data_source_id
+);
+
+-- CreateTable
+CREATE TABLE "public"."data_source_property" (
+                                               "id" TEXT NOT NULL,
+                                               "type" "DataSourcePropertyType" NOT NULL,
+                                               "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+                                               "updated_at" TIMESTAMP(3) NOT NULL,
+                                               "environment_variable_id" TEXT NOT NULL,
+                                               "environment_id" TEXT NOT NULL,
+                                               "data_source_id" TEXT NOT NULL,
+
+                                               CONSTRAINT "data_source_property_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "public"."environment_variable" (
+                                               "id" TEXT NOT NULL,
+                                               "key" TEXT NOT NULL,
+                                               "value" TEXT NOT NULL,
+                                               "description" TEXT,
+                                               "type" "public"."EnvironmentVariableType" NOT NULL,
+                                               "environment_id" TEXT NOT NULL,
+                                               "created_by_id" TEXT NOT NULL,
+                                               "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+                                               "updated_at" TIMESTAMP(3) NOT NULL,
+
+                                               CONSTRAINT "environment_variable_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "environment_variable_key_environment_id_key" ON "public"."environment_variable"("key", "environment_id");
+
+-- AddForeignKey
+ALTER TABLE "public"."data_source_property" ADD CONSTRAINT "data_source_property_environment_variable_id_fkey" FOREIGN KEY ("environment_variable_id") REFERENCES "public"."environment_variable"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "public"."data_source_property" ADD CONSTRAINT "data_source_property_environment_id_data_source_id_fkey" FOREIGN KEY ("environment_id", "data_source_id") REFERENCES "public"."environment_data_source"("environment_id", "data_source_id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "public"."environment_variable" ADD CONSTRAINT "environment_variable_environment_id_fkey" FOREIGN KEY ("environment_id") REFERENCES "public"."environment"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "public"."environment_variable" ADD CONSTRAINT "environment_variable_created_by_id_fkey" FOREIGN KEY ("created_by_id") REFERENCES "public"."user"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "public"."conversation" ADD CONSTRAINT "conversation_environment_id_data_source_id_fkey" FOREIGN KEY ("environment_id", "data_source_id") REFERENCES "public"."environment_data_source"("environment_id", "data_source_id") ON DELETE RESTRICT ON UPDATE CASCADE;
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 8f942af5..2a3bea7d 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -16,34 +16,57 @@ datasource db {
 }
 
 model DataSource {
-  id               String         @id @default(cuid())
-  name             String
-  connectionString String         @map("connection_string")
-  createdAt        DateTime       @default(now()) @map("created_at")
-  updatedAt        DateTime       @updatedAt @map("updated_at")
-  createdBy        User           @relation(fields: [createdById], references: [id], onDelete: Cascade)
-  createdById      String         @map("created_by_id")
-  conversations    Conversation[]
-  environments     EnvironmentDataSource[]
+  id           String                  @id @default(cuid())
+  name         String
+  createdAt    DateTime                @default(now()) @map("created_at")
+  updatedAt    DateTime                @updatedAt @map("updated_at")
+  createdBy    User                    @relation(fields: [createdById], references: [id], onDelete: Cascade)
+  createdById  String                  @map("created_by_id")
+  environments EnvironmentDataSource[]
 
   directPermissions Permission[]
 
   @@map("data_source")
 }
 
+enum DataSourcePropertyType {
+  CONNECTION_URL
+  ACCESS_TOKEN
+  REFRESH_TOKEN
+  CLIENT_ID
+  CLIENT_SECRET
+  API_KEY
+}
+
+model DataSourceProperty {
+  id        String                 @id @default(cuid())
+  type      DataSourcePropertyType
+  createdAt DateTime               @default(now()) @map("created_at")
+  updatedAt DateTime               @updatedAt @map("updated_at")
+
+  environmentVariableId String              @map("environment_variable_id")
+  environmentVariable   EnvironmentVariable @relation(fields: [environmentVariableId], references: [id], onDelete: Cascade)
+
+  environmentId         String                @map("environment_id")
+  dataSourceId          String                @map("data_source_id")
+  environmentDataSource EnvironmentDataSource @relation(fields: [environmentId, dataSourceId], references: [environmentId, dataSourceId])
+
+  @@map("data_source_property")
+}
+
 model Website {
-  id            String        @id @default(cuid())
-  siteId        String?       @map("site_id")
-  siteName      String?       @map("site_name")
-  siteUrl       String?       @map("site_url")
-  chatId        String        @map("chat_id")
-  createdAt     DateTime      @default(now()) @map("created_at")
-  updatedAt     DateTime      @updatedAt @map("updated_at")
-  isPublic      Boolean       @default(false) @map("is_public")
-  createdBy     User          @relation(fields: [createdById], references: [id], onDelete: Cascade)
-  createdById   String        @map("created_by_id")
-  environment   Environment?  @relation(fields: [environmentId], references: [id], onDelete: Cascade)
-  environmentId String?       @map("environment_id")
+  id            String       @id @default(cuid())
+  siteId        String?      @map("site_id")
+  siteName      String?      @map("site_name")
+  siteUrl       String?      @map("site_url")
+  chatId        String       @map("chat_id")
+  createdAt     DateTime     @default(now()) @map("created_at")
+  updatedAt     DateTime     @updatedAt @map("updated_at")
+  isPublic      Boolean      @default(false) @map("is_public")
+  createdBy     User         @relation(fields: [createdById], references: [id], onDelete: Cascade)
+  createdById   String       @map("created_by_id")
+  environmentId String?      @map("environment_id")
+  environment   Environment? @relation(fields: [environmentId], references: [id], onDelete: Cascade)
 
   directPermissions Permission[]
 
@@ -51,29 +74,63 @@ model Website {
 }
 
 model Environment {
-  id             String         @id @default(cuid())
-  name           String
-  description    String?
-  organizationId String?        @map("organization_id")
-  organization   Organization?  @relation(fields: [organizationId], references: [id], onDelete: Cascade)
-  dataSources    EnvironmentDataSource[]
-  websites       Website[]
-  createdAt      DateTime       @default(now()) @map("created_at")
-  updatedAt      DateTime       @updatedAt @map("updated_at")
-
-  directPermissions  Permission[]
+  id                   String                  @id @default(cuid())
+  name                 String
+  description          String?
+  createdAt            DateTime                @default(now()) @map("created_at")
+  updatedAt            DateTime                @updatedAt @map("updated_at")
+  organizationId       String?                 @map("organization_id")
+  organization         Organization?           @relation(fields: [organizationId], references: [id], onDelete: Cascade)
+  dataSources          EnvironmentDataSource[]
+  websites             Website[]
+  environmentVariables EnvironmentVariable[]
+  directPermissions    Permission[]
 
   @@unique([name, organizationId])
   @@index([organizationId], name: "idx_environment_organization_id")
   @@map("environment")
 }
 
+enum EnvironmentVariableType {
+  GLOBAL
+  DATA_SOURCE
+}
+
+model EnvironmentVariable {
+  id          String                  @id @default(cuid())
+  key         String
+  value       String
+  description String?
+  type        EnvironmentVariableType
+
+  environmentId String      @map("environment_id")
+  environment   Environment @relation(fields: [environmentId], references: [id], onDelete: Cascade)
+
+  createdById String @map("created_by_id")
+  createdBy   User   @relation(fields: [createdById], references: [id], onDelete: Cascade)
+
+  createdAt DateTime @default(now()) @map("created_at")
+  updatedAt DateTime @updatedAt @map("updated_at")
+
+  dataSourceProperties DataSourceProperty[]
+
+  @@unique([key, environmentId])
+  @@map("environment_variable")
+}
+
 model EnvironmentDataSource {
   environmentId String      @map("environment_id")
   environment   Environment @relation(fields: [environmentId], references: [id], onDelete: Cascade)
-  dataSourceId  String      @map("data_source_id")
-  dataSource    DataSource  @relation(fields: [dataSourceId], references: [id], onDelete: Cascade)
-  createdAt     DateTime    @default(now()) @map("created_at")
+
+  dataSourceId String     @map("data_source_id")
+  dataSource   DataSource @relation(fields: [dataSourceId], references: [id], onDelete: Cascade)
+
+  dataSourceProperties DataSourceProperty[]
+
+  conversations Conversation[]
+
+  createdAt DateTime @default(now()) @map("created_at")
+  updatedAt DateTime @updatedAt @map("updated_at")
 
   @@id([environmentId, dataSourceId])
   @@index([environmentId], name: "idx_environment_data_source_environment_id")
@@ -110,17 +167,20 @@ model Message {
 }
 
 model Conversation {
-  id           String     @id @default(cuid())
-  description  String?
-  starterId    String     @map("starter_id")
-  messages     Message[]
-  createdAt    DateTime   @default(now()) @map("created_at")
-  updatedAt    DateTime   @updatedAt @map("updated_at")
-  snapshots    Snapshot[]
-  dataSourceId String
-  dataSource   DataSource @relation(fields: [dataSourceId], references: [id], onDelete: Cascade)
-  User         User       @relation(fields: [userId], references: [id], onDelete: Cascade)
-  userId       String
+  id          String     @id @default(cuid())
+  description String?
+  starterId   String     @map("starter_id")
+  messages    Message[]
+  createdAt   DateTime   @default(now()) @map("created_at")
+  updatedAt   DateTime   @updatedAt @map("updated_at")
+  snapshots   Snapshot[]
+
+  environmentId         String                @map("environment_id")
+  dataSourceId          String                @map("data_source_id")
+  environmentDataSource EnvironmentDataSource @relation(fields: [environmentId, dataSourceId], references: [environmentId, dataSourceId])
+
+  User   User   @relation(fields: [userId], references: [id], onDelete: Cascade)
+  userId String
 
   @@map("conversation")
 }
@@ -173,23 +233,24 @@ enum DeprecatedRole {
 }
 
 model User {
-  id             String          @id @default(uuid())
-  name           String
-  email          String
-  emailVerified  Boolean
-  image          String?
-  createdAt      DateTime
-  updatedAt      DateTime
-  sessions       Session[]
-  accounts       Account[]
-  conversations  Conversation[]
-  roles          UserRole[]
-  role           DeprecatedRole  @default(MEMBER)
-  dataSources    DataSource[]
-  websites       Website[]
-  organizationId String?
-  organization   Organization?   @relation(fields: [organizationId], references: [id], onDelete: Cascade)
-  telemetryEnabled Boolean?
+  id                   String                @id @default(uuid())
+  name                 String
+  email                String
+  emailVerified        Boolean
+  image                String?
+  createdAt            DateTime
+  updatedAt            DateTime
+  sessions             Session[]
+  accounts             Account[]
+  conversations        Conversation[]
+  roles                UserRole[]
+  role                 DeprecatedRole        @default(MEMBER)
+  dataSources          DataSource[]
+  websites             Website[]
+  environmentVariables EnvironmentVariable[]
+  organizationId       String?
+  organization         Organization?         @relation(fields: [organizationId], references: [id], onDelete: Cascade)
+  telemetryEnabled     Boolean?
 
   isAnonymous Boolean?
 
@@ -225,6 +286,7 @@ enum PermissionResource {
   Website
   BuilderApp
   AdminApp
+  EnvironmentVariable
 }
 
 model Permission {
diff --git a/prisma/seed.ts b/prisma/seed.ts
index 42e5d09a..ea983f8c 100644
--- a/prisma/seed.ts
+++ b/prisma/seed.ts
@@ -8,7 +8,7 @@ async function seed() {
   const initialUser = await seedInitialUser(organization.id);
   await seedInitialAccount(initialUser);
   await seedDefaultAdmin(initialUser.id, organization.id);
-  await seedDefaultEnvironment(organization.id);
+  await seedDefaultEnvironments(organization.id);
   await seedBuilderRole(organization.id);
   await seedOperatorRole(organization.id);
 
@@ -107,28 +107,39 @@ async function seedInitialAccount(initialUser: User): Promise<Account> {
   }
 }
 
-async function seedDefaultEnvironment(organizationId: string): Promise<Environment> {
+async function seedDefaultEnvironments(organizationId: string): Promise<void> {
   try {
-    let environment = await prisma.environment.findFirst({
-      where: { name: 'Default' },
-    });
+    const environments = [
+      {
+        name: 'Development',
+        description: 'Default development environment',
+      },
+      {
+        name: 'Production',
+        description: 'Default production environment',
+      },
+    ];
 
-    if (!environment) {
-      environment = await prisma.environment.create({
-        data: {
-          name: 'Default',
-          description: 'Default environment',
-          organizationId,
-        },
+    for (const envData of environments) {
+      let environment = await prisma.environment.findFirst({
+        where: { name: envData.name, organizationId },
       });
-      console.log('✅ Created default environment');
-    } else {
-      console.log('✅ Default environment already exists');
-    }
 
-    return environment;
+      if (!environment) {
+        environment = await prisma.environment.create({
+          data: {
+            name: envData.name,
+            description: envData.description,
+            organizationId,
+          },
+        });
+        console.log(`✅ Created default ${envData.name} environment`);
+      } else {
+        console.log(`✅ ${envData.name} environment already exists`);
+      }
+    }
   } catch (error) {
-    console.error('❌ Error creating default environment:', error);
+    console.error('❌ Error creating default environments:', error);
     throw error;
   }
 }
diff --git a/shared/src/data-access/accessors/postgres.ts b/shared/src/data-access/accessors/postgres.ts
index 2851fb97..1a5a8df1 100644
--- a/shared/src/data-access/accessors/postgres.ts
+++ b/shared/src/data-access/accessors/postgres.ts
@@ -59,7 +59,9 @@ export class PostgresAccessor implements BaseAccessor {
   }
 
   validate(connectionString: string): void {
-    const regex = /^postgres(?:ql)?:\/\/([a-zA-Z0-9_-]+):(.+)@([a-zA-Z0-9.-]+):([0-9]{1,5})\/([a-zA-Z0-9_-]+)(\?.*)?$/;
+    const regex =
+      /^postgres(?:ql)?:\/\/([a-zA-Z0-9_-]+):(.+)@([a-zA-Z0-9.-]+):([0-9]{1,5})\/([a-zA-Z0-9_\s%]+)(\?.*)?$/;
+
     const match = connectionString.match(regex);
 
     if (!match) {
diff --git a/tests/e2e/tests/user-onboarding-flow.spec.ts b/tests/e2e/tests/user-onboarding-flow.spec.ts
index 3d3a80e3..f7bc478f 100644
--- a/tests/e2e/tests/user-onboarding-flow.spec.ts
+++ b/tests/e2e/tests/user-onboarding-flow.spec.ts
@@ -62,6 +62,18 @@ test.describe('User Onboarding Flow Test', () => {
     await textarea.waitFor({ state: 'visible', timeout: 10000 });
     console.log('✅ Found homepage textarea');
 
+    const dataSourceSelect = page.locator('div[data-testid="data-source-picker-select"]');
+    await dataSourceSelect.waitFor({ state: 'visible', timeout: 10000 });
+    console.log('✅ Found data source select dropdown, selecting first option...');
+
+    await dataSourceSelect.click();
+
+    const sampleDataSourceSelector = page.getByText('Sample Database').first();
+    await sampleDataSourceSelector.waitFor({ state: 'visible', timeout: 1000 });
+    console.log('✅ Found sample data source select option.');
+
+    await sampleDataSourceSelector.click();
+
     // Step 5: Input the message and submit
     console.log('✍️ Filling textarea with message...');
     await textarea.fill('Build hello world application with Hello World! h1 title');
@@ -84,7 +96,7 @@ test.describe('User Onboarding Flow Test', () => {
     console.log('✅ Chat interface loaded');
 
     const iframe = page.locator('iframe[title="preview"]');
-    await iframe.waitFor({ state: 'visible', timeout: 90000 });
+    await iframe.waitFor({ state: 'visible', timeout: 120000 });
     console.log('✅ Iframe found, waiting for it to load...');
 
     await iframe.waitFor({ state: 'attached', timeout: 10000 });