diff --git a/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/project/[projectSlug]/(specific-project-pages)/TFVarTable.tsx b/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/project/[projectSlug]/(specific-project-pages)/TFVarTable.tsx
index 9e5727fa..0a163fc1 100644
--- a/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/project/[projectSlug]/(specific-project-pages)/TFVarTable.tsx
+++ b/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/project/[projectSlug]/(specific-project-pages)/TFVarTable.tsx
@@ -1,303 +1,186 @@
+'use client'
+
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { useSAToastMutation } from '@/hooks/useSAToastMutation';
-import { AnimatePresence, motion } from "framer-motion";
-import { Copy, Edit, Eye, EyeOff, Plus, Trash } from 'lucide-react';
+import { Textarea } from "@/components/ui/textarea";
+import { EnvVar } from "@/types/userTypes";
+import { Copy, Edit, Trash } from 'lucide-react';
 import moment from 'moment';
-import React, { useCallback, useState } from 'react';
-import { toast } from 'sonner';
-import EmptyState from "./EmptyTFVarState";
-
-type TFVar = {
-    name: string;
-    value: string;
-    updated_at: string;
-}
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
 
 type TFVarTableProps = {
-    initialVariables: string;
-    onUpdate: (variables: string) => Promise<void>;
-}
+    envVars: EnvVar[];
+    onUpdate: (name: string, value: string, isSecret: boolean) => Promise<EnvVar[]>;
+    onDelete: (name: string) => Promise<EnvVar[]>;
+    onBulkUpdate: (vars: EnvVar[]) => Promise<EnvVar[]>;
+};
 
-const TFVarTable: React.FC<TFVarTableProps> = ({ initialVariables, onUpdate }) => {
-    const [tfvars, setTfvars] = useState<TFVar[]>(() => {
-        try {
-            return JSON.parse(initialVariables);
-        } catch (error) {
-            console.error("Failed to parse initial variables:", error);
-            return [];
-        }
-    });
-    const [editingState, setEditingState] = useState<{
-        index: number | null;
-        var: TFVar | null;
-    }>({
-        index: null,
-        var: null,
-    });
-    const [showSecrets, setShowSecrets] = useState<{ [key: string]: boolean }>({});
+export default function TFVarTable({ envVars, onUpdate, onDelete, onBulkUpdate }: TFVarTableProps) {
+    const [editingVar, setEditingVar] = useState<EnvVar | null>(null);
+    const [newVar, setNewVar] = useState<Omit<EnvVar, 'updated_at'>>({ name: '', value: '', is_secret: false });
     const [bulkEditMode, setBulkEditMode] = useState(false);
-    const [bulkEditValue, setBulkEditValue] = useState(initialVariables);
+    const [bulkEditValue, setBulkEditValue] = useState<string>('');
+    const [isLoading, setIsLoading] = useState(false);
+    const router = useRouter();
 
-    const { mutate: updateTFVar } = useSAToastMutation<string, Error, TFVar[]>(
-        async (updatedVars) => {
-            const jsonString = JSON.stringify(updatedVars);
-            await onUpdate(jsonString);
-            return { status: 'success', data: jsonString };
-        },
-        {
-            loadingMessage: 'Updating TF variables...',
-            successMessage: 'Variables updated successfully',
-            errorMessage: 'Failed to update TF variables',
-            onSuccess: (response) => {
-                const updatedVars = JSON.parse(response.data) as TFVar[];
-                setTfvars(updatedVars);
-            },
+    const handleEdit = (envVar: EnvVar) => {
+        if (!envVar.is_secret) {
+            setEditingVar(envVar);
         }
-    );
-
-    const handleEdit = (index: number) => {
-        setEditingState({
-            index,
-            var: { ...tfvars[index] },
-        });
     };
 
-    const handleSave = () => {
-        if (editingState.index === null || editingState.var === null) return;
-
-        const updatedVar = {
-            ...editingState.var,
-            updated_at: new Date().toISOString(),
-        };
-
-        const isDuplicate = tfvars.some((v, i) =>
-            i !== editingState.index && v.name === updatedVar.name
-        );
-
-        if (isDuplicate) {
-            toast.error('Variable with this name already exists');
-            return;
+    const handleSave = async () => {
+        if (editingVar) {
+            setIsLoading(true);
+            await onUpdate(editingVar.name, editingVar.value, editingVar.is_secret);
+            setIsLoading(false);
+            setEditingVar(null);
+            router.refresh();
         }
-
-        const newTFVars = [...tfvars];
-        newTFVars[editingState.index] = updatedVar;
-        updateTFVar(newTFVars);
-        setEditingState({ index: null, var: null });
     };
 
-    const handleDelete = (index: number) => {
-        const updatedTFVars = tfvars.filter((_, i) => i !== index);
-        updateTFVar(updatedTFVars);
-        toast.success(`Variable ${tfvars[index].name} deleted`);
+    const handleAddNew = async () => {
+        if (newVar.name && newVar.value) {
+            setIsLoading(true);
+            await onUpdate(newVar.name, newVar.value, newVar.is_secret);
+            setIsLoading(false);
+            setNewVar({ name: '', value: '', is_secret: false });
+            router.refresh();
+        }
     };
 
-    const handleAddVariable = () => {
-        const now = new Date().toISOString();
-        const newVar: TFVar = {
-            name: `NEW_VARIABLE_${tfvars.length + 1}`,
-            value: 'ENV_VALUE',
-            updated_at: now,
-        };
-        const newIndex = tfvars.length;
-        setTfvars([...tfvars, newVar]);
-        setEditingState({
-            index: newIndex,
-            var: newVar,
-        });
+    const handleDeleteVar = async (name: string) => {
+        setIsLoading(true);
+        await onDelete(name);
+        setIsLoading(false);
+        router.refresh();
     };
-    const handleBulkEdit = () => {
+
+    const handleBulkEdit = async () => {
         try {
             const parsedVars = JSON.parse(bulkEditValue);
-            const validatedVars = parsedVars.map(({ name, value }) => {
-                if (!name || typeof value === 'undefined') {
-                    throw new Error(`Invalid variable: ${JSON.stringify({ name, value })}`);
-                }
-                const existingVar = tfvars.find(v => v.name === name);
-                return {
-                    name,
-                    value,
-                    updated_at: existingVar ? existingVar.updated_at : new Date().toISOString()
-                };
-            });
-
-            const names = new Set();
-            validatedVars.forEach(v => {
-                if (names.has(v.name)) {
-                    throw new Error(`Duplicate variable name: ${v.name}`);
-                }
-                names.add(v.name);
-            });
-
-            updateTFVar(validatedVars);
-            setBulkEditMode(false);
-            toast.success('Bulk edit successful');
+            if (Array.isArray(parsedVars)) {
+                setIsLoading(true);
+                await onBulkUpdate(parsedVars.filter(v => !v.is_secret));
+                setIsLoading(false);
+                setBulkEditMode(false);
+                router.refresh();
+            }
         } catch (error) {
-            toast.error(`Invalid JSON format: ${error.message}`);
+            console.error('Error parsing JSON:', error);
         }
     };
 
     const toggleBulkEdit = () => {
         if (!bulkEditMode) {
-            const filteredVars = tfvars.map(({ name, value }) => ({ name, value }));
-            setBulkEditValue(JSON.stringify(filteredVars, null, 2));
+            setBulkEditValue(JSON.stringify(envVars.filter(v => !v.is_secret), null, 2));
         }
         setBulkEditMode(!bulkEditMode);
     };
 
-    const copyToClipboard = useCallback((tfvar: TFVar) => {
-        navigator.clipboard.writeText(JSON.stringify(tfvar, null, 2));
-        toast.success('Copied to clipboard');
-    }, []);
-
-    const handleInputChange = (field: 'name' | 'value', value: string) => {
-        if (editingState.var) {
-            setEditingState(prev => ({
-                ...prev,
-                var: {
-                    ...prev.var!,
-                    [field]: field === 'name' ? value.toUpperCase() : value
-                }
-            }));
-        }
+    const handleCopy = (value: string) => {
+        navigator.clipboard.writeText(value);
     };
 
-    return (
-        <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-        >
-            {!bulkEditMode ? (
-                <>
-                    <Table>
-                        <TableHeader>
-                            <TableRow>
-                                <TableHead>Name</TableHead>
-                                <TableHead>Value</TableHead>
-                                <TableHead>Secret</TableHead>
-                                <TableHead>Last Updated</TableHead>
-                                <TableHead>Copy</TableHead>
-                                <TableHead>Edit</TableHead>
-                                <TableHead>Delete</TableHead>
-                            </TableRow>
-                        </TableHeader>
-                        {tfvars.length > 0 ? (
-                            <TableBody>
-                                <AnimatePresence>
-                                    {tfvars.map((tfvar, index) => (
-                                        <motion.tr
-                                            key={tfvar.name}
-                                            initial={{ opacity: 0 }}
-                                            animate={{ opacity: 1 }}
-                                            exit={{ opacity: 0 }}
-                                            transition={{ duration: 0.2 }}
-                                        >
-                                            <TableCell>
-                                                {editingState.index === index ? (
-                                                    <Input
-                                                        value={editingState.var?.name}
-                                                        onChange={(e) => handleInputChange('name', e.target.value)}
-                                                        onBlur={(e) => handleInputChange('name', e.target.value.toUpperCase())}
-                                                    />
-                                                ) : tfvar.name}
-                                            </TableCell>
-                                            <TableCell>
-                                                {editingState.index === index ? (
-                                                    <Input
-                                                        value={editingState.var?.value}
-                                                        onChange={(e) => handleInputChange('value', e.target.value)}
-                                                    />
-                                                ) : (
-                                                    <span
-                                                        className={showSecrets[tfvar.name] ? '' : 'filter blur-sm select-none'}
-                                                        style={{ userSelect: showSecrets[tfvar.name] ? 'auto' : 'none' }}
-                                                    >
-                                                        {tfvar.value}
-                                                    </span>
-                                                )}
-                                            </TableCell>
-                                            <TableCell>
-                                                <Button
-                                                    variant="ghost"
-                                                    size="icon"
-                                                    onClick={() => setShowSecrets((prev) => ({ ...prev, [tfvar.name]: !prev[tfvar.name] }))}
-                                                >
-                                                    {showSecrets[tfvar.name] ? <EyeOff size={16} /> : <Eye size={16} />}
-                                                </Button>
-                                            </TableCell>
-                                            <TableCell>{moment(tfvar.updated_at).fromNow()}</TableCell>
-                                            <TableCell>
-                                                <Button
-                                                    variant="ghost"
-                                                    size="icon"
-                                                    onClick={() => copyToClipboard(tfvar)}
-                                                >
-                                                    <Copy size={16} />
-                                                </Button>
-                                            </TableCell>
-                                            <TableCell>
-                                                {editingState.index === index ? (
-                                                    <Button onClick={handleSave}>Save</Button>
-                                                ) : (
-                                                    <Button variant="ghost" size="icon" onClick={() => handleEdit(index)}>
-                                                        <Edit size={16} />
-                                                    </Button>
-                                                )}
-                                            </TableCell>
-                                            <TableCell>
-                                                <Button variant="ghost" size="icon" onClick={() => handleDelete(index)}>
-                                                    <Trash size={16} className="text-destructive" />
-                                                </Button>
-                                            </TableCell>
-                                        </motion.tr>
-                                    ))}
-                                </AnimatePresence>
-                            </TableBody>
-                        ) : (<TableBody>
-                            <TableRow className=" hover:bg-transparent">
-                                <TableCell colSpan={7} className="h-24 text-center">
-                                    <EmptyState onAddVariable={handleAddVariable} />
-                                </TableCell>
-                            </TableRow>
-                        </TableBody>)}
-                    </Table>
-                    {tfvars.length > 0 && (
-                        <div className="mt-4 flex justify-end">
-                            <Button variant="ghost" onClick={handleAddVariable}>
-                                <Plus className="mr-2 h-4 w-4" /> Add Environment Variable
-                            </Button>
-                        </div>
-                    )}
-                </>
-            ) : (
-                <div className="mt-4">
-                    <textarea
-                        className="w-full h-[400px] p-2 border rounded font-mono text-sm"
-                        value={bulkEditValue}
-                        onChange={(e) => setBulkEditValue(e.target.value)}
-                    />
-                    <div className="mt-4 flex justify-end space-x-2">
-                        <Button variant="outline" onClick={() => setBulkEditMode(false)}>Cancel</Button>
-                        <Button onClick={handleBulkEdit}>Apply Bulk Edit</Button>
-                    </div>
-                </div>
-            )}
-
-            {tfvars.length > 0 && (
-                <div className="mt-8">
-                    <h3 className="text-lg font-semibold">Bulk Edit Environment Variables</h3>
-                    <p className="text-sm text-gray-600 mb-2">
-                        Edit all environment variables at once in JSON format. Be careful with this operation.
-                    </p>
-                    <Button variant="secondary" className="w-full" onClick={toggleBulkEdit}>
-                        {bulkEditMode ? 'Cancel Bulk Edit' : 'Bulk Edit'}
+    if (bulkEditMode) {
+        return (
+            <div className="space-y-4">
+                <Textarea
+                    value={bulkEditValue}
+                    onChange={(e) => setBulkEditValue(e.target.value)}
+                    rows={10}
+                    className="font-mono"
+                />
+                <div className="space-x-2">
+                    <Button onClick={handleBulkEdit} disabled={isLoading}>
+                        {isLoading ? 'Applying...' : 'Apply Bulk Edit'}
                     </Button>
+                    <Button variant="outline" onClick={toggleBulkEdit}>Cancel</Button>
                 </div>
-            )}
-        </motion.div>
-    );
-};
+            </div>
+        );
+    }
 
-export default TFVarTable;
\ No newline at end of file
+    return (
+        <div className="space-y-4">
+            <div className="flex gap-2">
+                <Input
+                    placeholder="New variable name"
+                    value={newVar.name}
+                    onChange={(e) => setNewVar({ ...newVar, name: e.target.value })}
+                />
+                <Input
+                    placeholder="New variable value"
+                    type={newVar.is_secret ? "password" : "text"}
+                    value={newVar.value}
+                    onChange={(e) => setNewVar({ ...newVar, value: e.target.value })}
+                />
+                <Switch
+                    checked={newVar.is_secret}
+                    onCheckedChange={(checked) => setNewVar({ ...newVar, is_secret: checked })}
+                />
+                <Button onClick={handleAddNew} disabled={isLoading || !newVar.name || !newVar.value}>
+                    {isLoading ? 'Adding...' : 'Add'}
+                </Button>
+            </div>
+            <Table>
+                <TableHeader>
+                    <TableRow>
+                        <TableHead>Name</TableHead>
+                        <TableHead>Value</TableHead>
+                        <TableHead>Secret</TableHead>
+                        <TableHead>Last Updated</TableHead>
+                        <TableHead>Actions</TableHead>
+                    </TableRow>
+                </TableHeader>
+                <TableBody>
+                    {envVars.map((envVar) => (
+                        <TableRow key={envVar.name}>
+                            <TableCell>{envVar.name}</TableCell>
+                            <TableCell>
+                                {editingVar && editingVar.name === envVar.name ? (
+                                    <Input
+                                        value={editingVar.value}
+                                        onChange={(e) => setEditingVar({ ...editingVar, value: e.target.value })}
+                                    />
+                                ) : (
+                                    <span>{envVar.is_secret ? '********' : envVar.value}</span>
+                                )}
+                            </TableCell>
+                            <TableCell>
+                                <Switch
+                                    checked={envVar.is_secret}
+                                    onCheckedChange={async (checked) => {
+                                        await onUpdate(envVar.name, envVar.value, checked);
+                                        router.refresh();
+                                    }}
+                                    disabled={isLoading}
+                                />
+                            </TableCell>
+                            <TableCell>{moment(envVar.updated_at).fromNow()}</TableCell>
+                            <TableCell>
+                                <Button variant="ghost" size="icon" onClick={() => handleCopy(envVar.value)}>
+                                    <Copy className="h-4 w-4" />
+                                </Button>
+                                {!envVar.is_secret && (
+                                    <Button variant="ghost" size="icon" onClick={() => handleEdit(envVar)}>
+                                        <Edit className="h-4 w-4" />
+                                    </Button>
+                                )}
+                                <Button variant="ghost" size="icon" onClick={() => handleDeleteVar(envVar.name)} disabled={isLoading}>
+                                    <Trash className="h-4 w-4 text-destructive" />
+                                </Button>
+                            </TableCell>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+            <div className="flex justify-end">
+                <Button onClick={toggleBulkEdit}>Bulk Edit</Button>
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/project/[projectSlug]/(specific-project-pages)/TFVarsDetails.tsx b/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/project/[projectSlug]/(specific-project-pages)/TFVarsDetails.tsx
index edc83cc3..686cfa05 100644
--- a/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/project/[projectSlug]/(specific-project-pages)/TFVarsDetails.tsx
+++ b/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/project/[projectSlug]/(specific-project-pages)/TFVarsDetails.tsx
@@ -1,48 +1,23 @@
 'use client'
 
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-// Adjust the import path as needed
-import { upsertTFVarsByProjectId } from "@/data/user/runs";
-import { Json } from '@/lib/database.types'; // Import the Json type from your database types
+import { EnvVar } from "@/types/userTypes";
 import { motion } from "framer-motion";
-import { useState } from "react";
 import TFVarTable from "./TFVarTable";
 
 type TFVarsDetailsProps = {
     tfvarsdata: {
         id: string;
         project_id: string;
-        tfvars: Json;
+        tfvars: EnvVar[];
         updated_at: string;
-    } | null;
-    projectId: string;
-}
-
-function parseTFVars(tfvars: Json): string {
-    if (typeof tfvars === 'string') {
-        return tfvars;
-    } else if (tfvars === null) {
-        return '[]';
-    } else {
-        return JSON.stringify(tfvars);
-    }
-}
-
-export default function TFVarsDetails({ tfvarsdata, projectId }: TFVarsDetailsProps) {
-    const [tfvars, setTfvars] = useState<string>(
-        tfvarsdata ? parseTFVars(tfvarsdata.tfvars) : '[]'
-    );
-
-    const handleUpdate = async (updatedTFVarsJSON: string): Promise<void> => {
-        try {
-            await upsertTFVarsByProjectId(projectId, { tfvars: updatedTFVarsJSON });
-            setTfvars(updatedTFVarsJSON);
-        } catch (error) {
-            console.error("Failed to update TF variables:", error);
-            throw error;
-        }
     };
+    onUpdate: (name: string, value: string, isSecret: boolean) => Promise<EnvVar[]>;
+    onDelete: (name: string) => Promise<EnvVar[]>;
+    onBulkUpdate: (vars: EnvVar[]) => Promise<EnvVar[]>;
+}
 
+export default function TFVarsDetails({ tfvarsdata, onUpdate, onDelete, onBulkUpdate }: TFVarsDetailsProps) {
     return (
         <motion.div
             initial={{ opacity: 0, y: 10 }}
@@ -51,24 +26,17 @@ export default function TFVarsDetails({ tfvarsdata, projectId }: TFVarsDetailsPr
             transition={{ duration: 0.1 }}
         >
             <Card className="w-full">
-                <motion.div
-                    initial={{ opacity: 0, y: -5 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.15, delay: 0.1 }}
-                >
-                    <CardHeader>
-                        <CardTitle>Terraform Variables</CardTitle>
-                        <CardDescription>Manage Terraform variables for project</CardDescription>
-                    </CardHeader>
-                </motion.div>
+                <CardHeader>
+                    <CardTitle>Terraform Variables</CardTitle>
+                    <CardDescription>Manage Terraform variables for project</CardDescription>
+                </CardHeader>
                 <CardContent>
-                    <motion.div
-                        initial={{ opacity: 0 }}
-                        animate={{ opacity: 1 }}
-                        transition={{ duration: 0.15, delay: 0.2 }}
-                    >
-                        <TFVarTable initialVariables={tfvars} onUpdate={handleUpdate} />
-                    </motion.div>
+                    <TFVarTable
+                        envVars={tfvarsdata.tfvars}
+                        onUpdate={onUpdate}
+                        onDelete={onDelete}
+                        onBulkUpdate={onBulkUpdate}
+                    />
                 </CardContent>
             </Card>
         </motion.div>
diff --git a/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/project/[projectSlug]/(specific-project-pages)/tfvars/page.tsx b/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/project/[projectSlug]/(specific-project-pages)/tfvars/page.tsx
index 00d47ea8..a9eed3ef 100644
--- a/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/project/[projectSlug]/(specific-project-pages)/tfvars/page.tsx
+++ b/src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/project/[projectSlug]/(specific-project-pages)/tfvars/page.tsx
@@ -1,18 +1,13 @@
+import { deleteEnvVar, getAllEnvVars, storeEncryptedEnvVar } from "@/data/admin/encryption";
 import { getSlimProjectBySlug } from "@/data/user/projects";
-import { getTFVarsByProjectId } from "@/data/user/runs";
+import { EnvVar } from "@/types/userTypes";
 import { projectSlugParamSchema } from "@/utils/zod-schemas/params";
 import type { Metadata } from "next";
 import TFVarsDetails from '../TFVarsDetails';
 
-type TFVarsPageProps = {
-    params: {
-        projectSlug: string;
-    };
-};
-
 export async function generateMetadata({
     params,
-}: TFVarsPageProps): Promise<Metadata> {
+}: { params: { projectSlug: string } }): Promise<Metadata> {
     const { projectSlug } = projectSlugParamSchema.parse(params);
     const project = await getSlimProjectBySlug(projectSlug);
 
@@ -25,13 +20,51 @@ export async function generateMetadata({
 export default async function TFVarsPage({ params }: { params: unknown }) {
     const { projectSlug } = projectSlugParamSchema.parse(params);
     const project = await getSlimProjectBySlug(projectSlug);
-    const tfvars = await getTFVarsByProjectId(project.id);
-    const MASTER_PASSWORD = process.env.MASTER_PASSWORD || 'digger-password';
-    const ENCRYPTION_SALT = process.env.ENCRYPTION_SALT || 'digger-salt';
+
+    const MASTER_PASSWORD = process.env.MASTER_PASSWORD;
+    const ENCRYPTION_SALT = process.env.ENCRYPTION_SALT;
+
+    if (!MASTER_PASSWORD || !ENCRYPTION_SALT) {
+        throw new Error('MASTER_PASSWORD or ENCRYPTION_SALT is not set');
+    }
+
+    const envVars = await getAllEnvVars(project.id, MASTER_PASSWORD, ENCRYPTION_SALT);
+
+    async function handleUpdate(name: string, value: string, isSecret: boolean) {
+        'use server'
+        await storeEncryptedEnvVar(project.id, name, value, isSecret, MASTER_PASSWORD, ENCRYPTION_SALT);
+        return getAllEnvVars(project.id, MASTER_PASSWORD, ENCRYPTION_SALT);
+    }
+
+    async function handleDelete(name: string) {
+        'use server'
+        await deleteEnvVar(project.id, name);
+        return getAllEnvVars(project.id, MASTER_PASSWORD, ENCRYPTION_SALT);
+    }
+
+    async function handleBulkUpdate(vars: EnvVar[]) {
+        'use server'
+        for (const envVar of vars) {
+            if (!envVar.is_secret) {
+                await storeEncryptedEnvVar(project.id, envVar.name, envVar.value, envVar.is_secret, MASTER_PASSWORD, ENCRYPTION_SALT);
+            }
+        }
+        return getAllEnvVars(project.id, MASTER_PASSWORD, ENCRYPTION_SALT);
+    }
 
     return (
         <div className="flex flex-col space-y-4 max-w-5xl mt-2">
-            <TFVarsDetails tfvarsdata={tfvars} projectId={project.id} />
+            <TFVarsDetails
+                tfvarsdata={{
+                    id: project.id,
+                    project_id: project.id,
+                    tfvars: envVars,
+                    updated_at: new Date().toISOString()
+                }}
+                onUpdate={handleUpdate}
+                onDelete={handleDelete}
+                onBulkUpdate={handleBulkUpdate}
+            />
         </div>
     );
-}
+}
\ No newline at end of file
diff --git a/src/data/.DS_Store b/src/data/.DS_Store
new file mode 100644
index 00000000..5958890d
Binary files /dev/null and b/src/data/.DS_Store differ
diff --git a/src/data/admin/encryption.ts b/src/data/admin/encryption.ts
index 7839fece..fbf2ef57 100644
--- a/src/data/admin/encryption.ts
+++ b/src/data/admin/encryption.ts
@@ -1,39 +1,164 @@
-import {
-  createCipheriv,
-  createDecipheriv,
-  pbkdf2Sync,
-  randomBytes,
-} from 'crypto';
+import { supabaseAdminClient } from '@/supabase-clients/admin/supabaseAdminClient';
+import { EnvVar } from '@/types/userTypes';
+import { createCipheriv, createDecipheriv, randomBytes } from 'crypto';
 
-function deriveKey(password: string, salt: string): Buffer {
-  return pbkdf2Sync(password, salt, 100000, 32, 'sha256');
+import { scrypt } from 'crypto';
+import { promisify } from 'util';
+
+const scryptAsync = promisify(scrypt);
+
+async function deriveKey(projectId: string): Promise<Buffer> {
+  // Use a fixed salt or derive it from the projectId
+  const salt = 'fixed_salt_value'; // You can also use projectId.slice(0, 16) if it's long enough
+  return scryptAsync(projectId, salt, 32) as Promise<Buffer>;
 }
 
-function encrypt(
+export async function encrypt(
   text: string,
-  ENCRYPTION_SALT: string,
-  MASTER_PASSWORD: string,
-): { iv: string; encryptedData: string } {
-  const iv = randomBytes(16);
-  const key = deriveKey(MASTER_PASSWORD, ENCRYPTION_SALT);
-  const cipher = createCipheriv('aes-256-cbc', key, iv);
-  let encrypted = cipher.update(text, 'utf8', 'hex');
-  encrypted += cipher.final('hex');
-  return {
-    iv: iv.toString('hex'),
-    encryptedData: encrypted,
-  };
-}
-
-function decrypt(
-  iv: string,
-  encryptedData: string,
-  ENCRYPTION_SALT: string,
-  MASTER_PASSWORD: string,
-): string {
-  const key = deriveKey(MASTER_PASSWORD, ENCRYPTION_SALT);
-  const decipher = createDecipheriv('aes-256-cbc', key, Buffer.from(iv, 'hex'));
-  let decrypted = decipher.update(encryptedData, 'hex', 'utf8');
+  projectId: string,
+): Promise<string> {
+  const iv = randomBytes(12);
+  const key = await deriveKey(projectId);
+  const cipher = createCipheriv('aes-256-gcm', key, iv);
+  let encrypted = cipher.update(text, 'utf8', 'base64');
+  encrypted += cipher.final('base64');
+  const authTag = cipher.getAuthTag();
+
+  // Combine IV, auth tag, and encrypted data
+  return (
+    iv.toString('base64') + '.' + authTag.toString('base64') + '.' + encrypted
+  );
+}
+
+export async function decrypt(
+  encryptedText: string,
+  projectId: string,
+): Promise<string> {
+  const [ivBase64, authTagBase64, encryptedData] = encryptedText.split('.');
+  const iv = Buffer.from(ivBase64, 'base64');
+  const authTag = Buffer.from(authTagBase64, 'base64');
+  const key = await deriveKey(projectId);
+
+  const decipher = createDecipheriv('aes-256-gcm', key, iv);
+  decipher.setAuthTag(authTag);
+
+  let decrypted = decipher.update(encryptedData, 'base64', 'utf8');
   decrypted += decipher.final('utf8');
+
   return decrypted;
 }
+export async function storeEncryptedEnvVar(
+  projectId: string,
+  name: string,
+  value: string,
+  isSecret: boolean,
+  masterPassword: string,
+  salt: string,
+) {
+  console.log('Encryption: Storing encrypted var:', {
+    projectId,
+    name,
+    isSecret,
+  });
+  const encrypted = await encrypt(value, projectId);
+
+  const { data, error } = await supabaseAdminClient
+    .from('encrypted_env_vars')
+    .upsert(
+      {
+        project_id: projectId,
+        name,
+        encrypted_value: encrypted,
+        is_secret: isSecret,
+        updated_at: new Date().toISOString(),
+      },
+      {
+        onConflict: 'project_id,name',
+      },
+    );
+
+  if (error) {
+    console.error('Encryption: Error storing variable:', error);
+    throw error;
+  }
+  console.log('Encryption: Variable stored successfully');
+  return data;
+}
+export async function getDecryptedEnvVar(
+  projectId: string,
+  name: string,
+  masterPassword: string,
+) {
+  const { data, error } = await supabaseAdminClient
+    .from('encrypted_env_vars')
+    .select('encrypted_value, is_secret')
+    .eq('project_id', projectId)
+    .eq('name', name)
+    .single();
+
+  if (error) throw error;
+  if (data.is_secret) {
+    return { value: null, isSecret: true };
+  }
+  const decryptedValue = await decrypt(data.encrypted_value, projectId);
+  return { value: decryptedValue, isSecret: false };
+}
+
+export async function getAllEnvVarNames(projectId: string) {
+  const { data, error } = await supabaseAdminClient
+    .from('encrypted_env_vars')
+    .select('name, is_secret')
+    .eq('project_id', projectId);
+
+  if (error) throw error;
+  return data;
+}
+
+export async function deleteEnvVar(projectId: string, name: string) {
+  const { error } = await supabaseAdminClient
+    .from('encrypted_env_vars')
+    .delete()
+    .eq('project_id', projectId)
+    .eq('name', name);
+
+  if (error) throw error;
+}
+
+export async function getAllEnvVars(
+  projectId: string,
+  masterPassword: string,
+  salt: string,
+): Promise<EnvVar[]> {
+  const { data, error } = await supabaseAdminClient
+    .from('encrypted_env_vars')
+    .select('name, encrypted_value, is_secret, updated_at')
+    .eq('project_id', projectId);
+
+  if (error) throw error;
+
+  console.log('Fetched data:', data);
+  // convert bytea to string
+  return Promise.all(
+    data.map(async (item) => {
+      console.log(item.encrypted_value);
+      try {
+        return {
+          name: item.name,
+          value: item.is_secret
+            ? '********'
+            : await decrypt(item.encrypted_value, projectId),
+          is_secret: item.is_secret,
+          updated_at: item.updated_at,
+        };
+      } catch (error) {
+        console.error(`Error processing item ${item.name}:`, error);
+        return {
+          name: item.name,
+          value: '[Error: Unable to decrypt]',
+          is_secret: item.is_secret,
+          updated_at: item.updated_at,
+        };
+      }
+    }),
+  );
+}
diff --git a/src/environment.d.ts b/src/environment.d.ts
index 8a960cd7..8c875bbf 100644
--- a/src/environment.d.ts
+++ b/src/environment.d.ts
@@ -24,10 +24,11 @@ declare global {
       UNKEY_API_ID: string;
       TESTMAIL_PREFIX?: string;
       OPENAI_API_KEY?: string;
+      MASTER_PASSWORD: string;
+      ENCRYPTION_SALT: string;
     }
   }
 }
 
 // eslint-disable-next-line prettier/prettier
-export { };
-
+export {};
diff --git a/src/lib/database.types.ts b/src/lib/database.types.ts
index bffa1727..93568bdd 100644
--- a/src/lib/database.types.ts
+++ b/src/lib/database.types.ts
@@ -486,6 +486,41 @@ export type Database = {
           },
         ]
       }
+      encrypted_env_vars: {
+        Row: {
+          encrypted_value: string
+          id: string
+          is_secret: boolean
+          name: string
+          project_id: string
+          updated_at: string
+        }
+        Insert: {
+          encrypted_value?: string
+          id?: string
+          is_secret?: boolean
+          name: string
+          project_id: string
+          updated_at?: string
+        }
+        Update: {
+          encrypted_value?: string
+          id?: string
+          is_secret?: boolean
+          name?: string
+          project_id?: string
+          updated_at?: string
+        }
+        Relationships: [
+          {
+            foreignKeyName: "encrypted_env_vars_project_id_fkey"
+            columns: ["project_id"]
+            isOneToOne: false
+            referencedRelation: "projects"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
       github_app_installation_links: {
         Row: {
           created_at: string
diff --git a/src/types/userTypes.ts b/src/types/userTypes.ts
index d9535177..3a7e0486 100644
--- a/src/types/userTypes.ts
+++ b/src/types/userTypes.ts
@@ -5,3 +5,10 @@ export type UserRoles = {
 };
 
 export type UserRole = UserRoles[keyof UserRoles];
+
+export type EnvVar = {
+  name: string;
+  value: string;
+  is_secret: boolean;
+  updated_at: string;
+};
diff --git a/supabase/.DS_Store b/supabase/.DS_Store
new file mode 100644
index 00000000..3cf96671
Binary files /dev/null and b/supabase/.DS_Store differ
diff --git a/supabase/migrations/20240724080812_project_vars_table.sql b/supabase/migrations/20240724080812_project_vars_table.sql
index 05070492..bb9bfb9e 100644
--- a/supabase/migrations/20240724080812_project_vars_table.sql
+++ b/supabase/migrations/20240724080812_project_vars_table.sql
@@ -4,7 +4,7 @@ CREATE TABLE encrypted_env_vars (
     name VARCHAR(255) NOT NULL,
     encrypted_value BYTEA NOT NULL,
     iv BYTEA NOT NULL,
-    created_at TIMESTAMP WITH TIME ZONE DEFAULT now() NOT NULL,
     updated_at TIMESTAMP WITH TIME ZONE DEFAULT now() NOT NULL,
+    is_secret BOOLEAN NOT NULL DEFAULT FALSE,
     FOREIGN KEY (project_id) REFERENCES projects (id) ON DELETE CASCADE
 );
\ No newline at end of file
diff --git a/supabase/migrations/20240724115222_env_vars_policies.sql b/supabase/migrations/20240724115222_env_vars_policies.sql
new file mode 100644
index 00000000..03700e85
--- /dev/null
+++ b/supabase/migrations/20240724115222_env_vars_policies.sql
@@ -0,0 +1,29 @@
+ALTER TABLE encrypted_env_vars ENABLE ROW LEVEL SECURITY;
+
+-- Revoke all privileges on the encrypted_value column
+REVOKE ALL ON encrypted_env_vars FROM PUBLIC;
+
+-- Grant SELECT on non-secret rows
+CREATE POLICY "Allow select on non-secret vars" ON encrypted_env_vars
+FOR SELECT USING (auth.uid() = project_id AND NOT is_secret);
+
+-- Grant INSERT to authenticated users
+CREATE POLICY "Allow insert for authenticated users" ON encrypted_env_vars
+FOR INSERT TO authenticated WITH CHECK (auth.uid() = project_id);
+
+-- Grant UPDATE to authenticated users for non-encrypted_value columns
+CREATE POLICY "Allow update for authenticated users (non-encrypted)" ON encrypted_env_vars
+FOR UPDATE TO authenticated
+USING (auth.uid() = project_id)
+WITH CHECK (auth.uid() = project_id);
+
+-- Grant UPDATE to authenticated users for encrypted_value column only when not secret
+CREATE POLICY "Allow update encrypted_value for non-secret vars" ON encrypted_env_vars
+FOR UPDATE TO authenticated
+USING (auth.uid() = project_id AND NOT is_secret)
+WITH CHECK (auth.uid() = project_id AND NOT is_secret);
+
+-- Grant DELETE to authenticated users
+CREATE POLICY "Allow delete for authenticated users" ON encrypted_env_vars
+FOR DELETE TO authenticated USING (auth.uid() = project_id);
+
diff --git a/supabase/migrations/20240724121958_unique_project_var_name.sql b/supabase/migrations/20240724121958_unique_project_var_name.sql
new file mode 100644
index 00000000..acb0a551
--- /dev/null
+++ b/supabase/migrations/20240724121958_unique_project_var_name.sql
@@ -0,0 +1,2 @@
+ALTER TABLE encrypted_env_vars 
+ADD CONSTRAINT unique_project_var_name UNIQUE (project_id, name);
\ No newline at end of file