diff --git a/web-admin/src/features/projects/environment-variables/ActionsCell.svelte b/web-admin/src/features/projects/environment-variables/ActionsCell.svelte
index 2a2cf6b5ddb..c875613b19f 100644
--- a/web-admin/src/features/projects/environment-variables/ActionsCell.svelte
+++ b/web-admin/src/features/projects/environment-variables/ActionsCell.svelte
@@ -24,7 +24,7 @@
       <ThreeDot size="16px" />
     </IconButton>
   </DropdownMenu.Trigger>
-  <DropdownMenu.Content align="start">
+  <DropdownMenu.Content align="start" class="min-w-[95px]">
     <DropdownMenu.Item
       class="font-normal flex items-center"
       on:click={() => {
diff --git a/web-admin/src/features/projects/environment-variables/AddDialog.svelte b/web-admin/src/features/projects/environment-variables/AddDialog.svelte
index ce5692c7466..c413a2268ae 100644
--- a/web-admin/src/features/projects/environment-variables/AddDialog.svelte
+++ b/web-admin/src/features/projects/environment-variables/AddDialog.svelte
@@ -27,6 +27,7 @@
   import IconButton from "@rilldata/web-common/components/button/IconButton.svelte";
   import { Trash2Icon, UploadIcon } from "lucide-svelte";
   import { getCurrentEnvironment, isDuplicateKey } from "./utils";
+  import { parse as parseDotenv } from "dotenv";
 
   export let open = false;
   export let variableNames: VariableNames = [];
@@ -36,15 +37,16 @@
   let isDevelopment = true;
   let isProduction = true;
   let fileInput: HTMLInputElement;
+  let showEnvironmentError = false;
 
   $: organization = $page.params.organization;
   $: project = $page.params.project;
 
-  $: isEnvironmentSelected = isDevelopment || isProduction;
   $: hasExistingKeys = Object.values(inputErrors).some((error) => error);
   $: hasNewChanges = $form.variables.some(
     (variable) => variable.key !== "" || variable.value !== "",
   );
+  $: hasNoEnvironment = showEnvironmentError && !isDevelopment && !isProduction;
 
   const queryClient = useQueryClient();
   const updateProjectVariables = createAdminServiceUpdateProjectVariables();
@@ -72,11 +74,11 @@
     }),
   );
 
-  const { form, enhance, submit, submitting, errors, allErrors, reset } =
-    superForm(defaults(initialValues, schema), {
+  const { form, enhance, submit, submitting, errors, allErrors } = superForm(
+    defaults(initialValues, schema),
+    {
       SPA: true,
       validators: schema,
-      // See: https://superforms.rocks/concepts/nested-data
       dataType: "json",
       async onUpdate({ form }) {
         if (!form.valid) return;
@@ -85,11 +87,9 @@
         // Check for duplicates before proceeding
         const duplicates = checkForExistingKeys();
         if (duplicates > 0) {
-          // Early return without resetting the form
           return;
         }
 
-        // Only filter and process if there are no duplicates
         const filteredVariables = values.variables.filter(
           ({ key }) => key !== "",
         );
@@ -106,7 +106,8 @@
           console.error(error);
         }
       },
-    });
+    },
+  );
 
   async function handleUpdateProjectVariables(
     flatVariables: AdminServiceUpdateProjectVariablesBodyVariables,
@@ -144,6 +145,8 @@
   function handleKeyChange(index: number, event: Event) {
     const target = event.target as HTMLInputElement;
     $form.variables[index].key = target.value;
+    delete inputErrors[index];
+    isKeyAlreadyExists = false;
   }
 
   function handleValueChange(index: number, event: Event) {
@@ -157,31 +160,37 @@
   }
 
   function handleReset() {
-    reset();
+    $form = initialValues;
     isDevelopment = true;
     isProduction = true;
     inputErrors = {};
     isKeyAlreadyExists = false;
+    showEnvironmentError = false;
   }
 
   function checkForExistingKeys() {
     inputErrors = {};
     isKeyAlreadyExists = false;
 
-    const existingKeys = $form.variables.map((variable) => {
-      return {
-        environment: getCurrentEnvironment(isDevelopment, isProduction),
-        name: variable.key,
-      };
-    });
+    const existingKeys = $form.variables
+      .filter((variable) => variable.key.trim() !== "")
+      .map((variable) => {
+        return {
+          environment: getCurrentEnvironment(isDevelopment, isProduction),
+          name: variable.key,
+        };
+      });
 
     let duplicateCount = 0;
-    existingKeys.forEach((key, idx) => {
+    existingKeys.forEach((key, _idx) => {
       const variableEnvironment = key.environment;
       const variableKey = key.name;
 
       if (isDuplicateKey(variableEnvironment, variableKey, variableNames)) {
-        inputErrors[idx] = true;
+        const originalIndex = $form.variables.findIndex(
+          (v) => v.key === variableKey,
+        );
+        inputErrors[originalIndex] = true;
         isKeyAlreadyExists = true;
         duplicateCount++;
       }
@@ -190,55 +199,62 @@
     return duplicateCount;
   }
 
-  function handleFileUpload(event) {
-    const file = event.target.files[0];
+  function handleFileUpload(event: Event) {
+    const file = (event.target as HTMLInputElement).files?.[0];
     if (file) {
       const reader = new FileReader();
-      reader.onload = (e) => {
-        const contents = e.target.result;
-        parseFile(contents);
-        checkForExistingKeys();
+      reader.onload = (e: ProgressEvent<FileReader>) => {
+        const contents = e.target?.result;
+        if (typeof contents === "string") {
+          parseFile(contents);
+          checkForExistingKeys();
+        }
       };
       reader.readAsText(file);
     }
   }
 
-  function parseFile(contents) {
-    const lines = contents.split("\n");
+  function parseFile(contents: string) {
+    const parsedVariables = parseDotenv(contents);
 
-    lines.forEach((line) => {
-      // Trim the line and check if it starts with '#'
-      const trimmedLine = line.trim();
-      if (trimmedLine.startsWith("#")) {
-        return; // Skip comment lines
-      }
+    for (const [key, value] of Object.entries(parsedVariables)) {
+      const filteredVariables = $form.variables.filter(
+        (variable) =>
+          variable.key.trim() !== "" || variable.value.trim() !== "",
+      );
 
-      const [key, value] = trimmedLine.split("=");
-      if (key && value) {
-        if (key.trim() && value.trim()) {
-          const filteredVariables = $form.variables.filter(
-            (variable) =>
-              variable.key.trim() !== "" || variable.value.trim() !== "",
-          );
-
-          $form.variables = [
-            ...filteredVariables,
-            { key: key.trim(), value: value.trim() },
-          ];
-        }
-      }
-    });
+      $form.variables = [...filteredVariables, { key, value }];
+    }
   }
 
   function getKeyFromError(error: { path: string; messages: string[] }) {
     return error.path.split("[")[1].split("]")[0];
   }
+
+  function handleEnvironmentChange() {
+    showEnvironmentError = true;
+    checkForExistingKeys();
+  }
+
+  $: isSubmitDisabled =
+    $submitting ||
+    hasExistingKeys ||
+    !hasNewChanges ||
+    hasNoEnvironment ||
+    Object.values($form.variables).every((v) => !v.key.trim());
 </script>
 
 <Dialog
   bind:open
-  onOpenChange={() => handleReset()}
-  onOutsideClick={() => handleReset()}
+  onOpenChange={(isOpen) => {
+    if (!isOpen) {
+      handleReset();
+    }
+  }}
+  onOutsideClick={() => {
+    open = false;
+    handleReset();
+  }}
 >
   <DialogTrigger asChild>
     <div class="hidden"></div>
@@ -279,18 +295,25 @@
           <div class="text-sm font-medium text-gray-800">Environment</div>
           <div class="flex flex-row gap-4 mt-1">
             <Checkbox
-              inverse
               bind:checked={isDevelopment}
               id="development"
               label="Development"
+              onCheckedChange={handleEnvironmentChange}
             />
             <Checkbox
-              inverse
               bind:checked={isProduction}
               id="production"
               label="Production"
+              onCheckedChange={handleEnvironmentChange}
             />
           </div>
+          {#if hasNoEnvironment}
+            <div class="mt-1">
+              <p class="text-xs text-red-600 font-normal">
+                You must select at least one environment
+              </p>
+            </div>
+          {/if}
         </div>
         <div class="flex flex-col items-start gap-1">
           <div class="text-sm font-medium text-gray-800">Variables</div>
@@ -378,17 +401,18 @@
         on:click={() => {
           open = false;
           handleReset();
-        }}>Cancel</Button
+        }}
       >
+        Cancel
+      </Button>
       <Button
         type="primary"
         form={formId}
-        disabled={$submitting ||
-          hasExistingKeys ||
-          !hasNewChanges ||
-          !isEnvironmentSelected}
-        submitForm>Create</Button
+        disabled={isSubmitDisabled}
+        submitForm
       >
+        Create
+      </Button>
     </DialogFooter>
   </DialogContent>
 </Dialog>
diff --git a/web-admin/src/features/projects/environment-variables/EditDialog.svelte b/web-admin/src/features/projects/environment-variables/EditDialog.svelte
index f6c1f662021..50ccf108f1a 100644
--- a/web-admin/src/features/projects/environment-variables/EditDialog.svelte
+++ b/web-admin/src/features/projects/environment-variables/EditDialog.svelte
@@ -23,11 +23,9 @@
   import { object, string } from "yup";
   import { EnvironmentType, type VariableNames } from "./types";
   import Input from "@rilldata/web-common/components/forms/Input.svelte";
-  import {
-    getCurrentEnvironment,
-    getEnvironmentType,
-    isDuplicateKey,
-  } from "./utils";
+  import { getCurrentEnvironment, isDuplicateKey } from "./utils";
+  import { onMount } from "svelte";
+  import { debounce } from "lodash";
 
   export let open = false;
   export let id: string;
@@ -40,21 +38,22 @@
     isDevelopment: boolean;
     isProduction: boolean;
   };
-  let isDevelopment: boolean;
-  let isProduction: boolean;
+  let isDevelopment = false;
+  let isProduction = false;
   let isKeyAlreadyExists = false;
   let inputErrors: { [key: number]: boolean } = {};
+  let showEnvironmentError = false;
 
   $: organization = $page.params.organization;
   $: project = $page.params.project;
 
-  $: isEnvironmentSelected = isDevelopment || isProduction;
   $: hasNewChanges =
     $form.key !== initialValues.key ||
     $form.value !== initialValues.value ||
     initialEnvironment?.isDevelopment !== isDevelopment ||
     initialEnvironment?.isProduction !== isProduction;
   $: hasExistingKeys = Object.values(inputErrors).some((error) => error);
+  $: hasNoEnvironment = showEnvironmentError && !isDevelopment && !isProduction;
 
   const queryClient = useQueryClient();
   const updateProjectVariables = createAdminServiceUpdateProjectVariables();
@@ -79,40 +78,32 @@
     }),
   );
 
-  const {
-    form,
-    enhance,
-    formId,
-    submit,
-    errors,
-    allErrors,
-    submitting,
-    reset,
-  } = superForm(defaults(initialValues, schema), {
-    // See: https://superforms.rocks/concepts/multiple-forms#setting-id-on-the-client
-    id: id,
-    SPA: true,
-    validators: schema,
-    async onUpdate({ form }) {
-      if (!form.valid) return;
-      const values = form.data;
-
-      checkForExistingKeys();
-      if (isKeyAlreadyExists) return;
-
-      const flatVariable = {
-        [values.key]: values.value,
-      };
-
-      try {
-        await handleUpdateProjectVariables(flatVariable);
-        open = false;
-        handleReset();
-      } catch (error) {
-        console.error(error);
-      }
-    },
-  });
+  const { form, enhance, formId, submit, errors, allErrors, submitting } =
+    superForm(defaults(initialValues, schema), {
+      id: id,
+      SPA: true,
+      validators: schema,
+      resetForm: false,
+      async onUpdate({ form }) {
+        if (!form.valid) return;
+        const values = form.data;
+
+        checkForExistingKeys();
+        if (isKeyAlreadyExists) return;
+
+        const flatVariable = {
+          [values.key]: values.value,
+        };
+
+        try {
+          await handleUpdateProjectVariables(flatVariable);
+          open = false;
+          handleReset();
+        } catch (error) {
+          console.error(error);
+        }
+      },
+    });
 
   async function handleUpdateProjectVariables(
     flatVariable: AdminServiceUpdateProjectVariablesBodyVariables,
@@ -200,28 +191,30 @@
   }
 
   function handleReset() {
-    reset();
+    $form.environment = initialValues.environment;
+    $form.key = initialValues.key;
+    $form.value = initialValues.value;
     isDevelopment = false;
     isProduction = false;
     inputErrors = {};
     isKeyAlreadyExists = false;
+    showEnvironmentError = false;
   }
 
   function checkForExistingKeys() {
     inputErrors = {};
     isKeyAlreadyExists = false;
 
-    const existingKey = {
-      environment: getEnvironmentType(
-        getCurrentEnvironment(isDevelopment, isProduction),
-      ),
-      name: $form.key,
-    };
-
-    const variableEnvironment = existingKey.environment;
-    const variableKey = existingKey.name;
+    const newEnvironment = getCurrentEnvironment(isDevelopment, isProduction);
 
-    if (isDuplicateKey(variableEnvironment, variableKey, variableNames)) {
+    if (
+      isDuplicateKey(
+        newEnvironment,
+        $form.key,
+        variableNames,
+        initialValues.key,
+      )
+    ) {
       inputErrors[0] = true;
       isKeyAlreadyExists = true;
     }
@@ -240,19 +233,37 @@
       isDevelopment = true;
       isProduction = true;
     }
-  }
 
-  function handleDialogOpen() {
-    setInitialCheckboxState();
     initialEnvironment = {
       isDevelopment,
       isProduction,
     };
   }
 
+  function handleDialogOpen() {
+    handleReset();
+    setInitialCheckboxState();
+  }
+
+  function handleEnvironmentChange() {
+    showEnvironmentError = true;
+  }
+
+  onMount(() => {
+    handleDialogOpen();
+  });
+
   $: if (open) {
     handleDialogOpen();
   }
+
+  const debouncedCheckForExistingKeys = debounce(() => {
+    checkForExistingKeys();
+  }, 500);
+
+  $: if ($form.key) {
+    debouncedCheckForExistingKeys();
+  }
 </script>
 
 <Dialog
@@ -287,13 +298,22 @@
               bind:checked={isDevelopment}
               id="development"
               label="Development"
+              onCheckedChange={handleEnvironmentChange}
             />
             <Checkbox
               bind:checked={isProduction}
               id="production"
               label="Production"
+              onCheckedChange={handleEnvironmentChange}
             />
           </div>
+          {#if hasNoEnvironment}
+            <div class="mt-1">
+              <p class="text-xs text-red-600 font-normal">
+                You must select at least one environment
+              </p>
+            </div>
+          {/if}
         </div>
         <div class="flex flex-col items-start gap-1">
           <div class="text-sm font-medium text-gray-800">Variable</div>
@@ -349,11 +369,12 @@
         form={$formId}
         disabled={$submitting ||
           !hasNewChanges ||
-          !isEnvironmentSelected ||
           hasExistingKeys ||
-          $allErrors.length > 0}
-        submitForm>Edit</Button
+          hasNoEnvironment}
+        submitForm
       >
+        Edit
+      </Button>
     </DialogFooter>
   </DialogContent>
 </Dialog>
diff --git a/web-admin/src/features/projects/environment-variables/EnvironmentVariablesTable.svelte b/web-admin/src/features/projects/environment-variables/EnvironmentVariablesTable.svelte
index e896e6d9222..34bfbcb1996 100644
--- a/web-admin/src/features/projects/environment-variables/EnvironmentVariablesTable.svelte
+++ b/web-admin/src/features/projects/environment-variables/EnvironmentVariablesTable.svelte
@@ -42,7 +42,6 @@
     {
       header: "Activity",
       accessorFn: (row) => row.createdOn,
-      enableSorting: false,
       cell: ({ row }) => {
         return flexRender(ActivityCell, {
           updatedOn: row.original.updatedOn,
diff --git a/web-admin/src/features/projects/environment-variables/ValueCell.svelte b/web-admin/src/features/projects/environment-variables/ValueCell.svelte
index b37f8cf0284..3c9a1267e4a 100644
--- a/web-admin/src/features/projects/environment-variables/ValueCell.svelte
+++ b/web-admin/src/features/projects/environment-variables/ValueCell.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
+  import IconButton from "@rilldata/web-common/components/button/IconButton.svelte";
+  import Eye from "@rilldata/web-common/components/icons/Eye.svelte";
+  import EyeInvisible from "@rilldata/web-common/components/icons/EyeInvisible.svelte";
   import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
   import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte";
   import { copyToClipboard } from "@rilldata/web-common/lib/actions/copy-to-clipboard";
-  import { EyeIcon, EyeOffIcon } from "lucide-svelte";
 
   export let value: string;
 
@@ -50,9 +52,13 @@
 <div class="flex flex-row gap-[10px] items-center">
   <button on:click={toggleShowValue}>
     {#if !showValue}
-      <EyeIcon color="#94A3B8" size="16" />
+      <IconButton disableHover>
+        <Eye color="#374151" size="16px" />
+      </IconButton>
     {:else}
-      <EyeOffIcon color="#94A3B8" size="16" />
+      <IconButton disableHover>
+        <EyeInvisible color="#374151" size="16px" />
+      </IconButton>
     {/if}
   </button>
   <Tooltip distance={6} location="top" suppress={isValueHidden || isEmpty}>
diff --git a/web-admin/src/features/projects/environment-variables/utils.ts b/web-admin/src/features/projects/environment-variables/utils.ts
index 026a867c469..bb39195626c 100644
--- a/web-admin/src/features/projects/environment-variables/utils.ts
+++ b/web-admin/src/features/projects/environment-variables/utils.ts
@@ -17,43 +17,45 @@ export function getEnvironmentType(environment: string) {
  * 2. If a key exists in all environments (UNDEFINED), it cannot be created in dev or prod
  * 3. If a key exists in dev or prod, it cannot be created in all environments
  * 4. If a key exists in dev, it cannot be created in dev but CAN be created in prod
- *
- * Examples:
- * - If test[dev] exists:
- *   - Cannot create test[dev] (same environment)
- *   - Cannot create test[all] (key already used)
- *   - CAN create test[prod] (different environment)
- * - If test[all] exists:
- *   - Cannot create test[dev] (key used in all environments)
- *   - Cannot create test[prod] (key used in all environments)
- *
- * @param environment - The target environment ("development", "production", or "undefined" for all)
- * @param key - The environment variable key to check
- * @param variableNames - Existing environment variables
- * @returns true if the key would create a duplicate, false otherwise
+ * 5. Keys are case-insensitive across all environments
  */
 export function isDuplicateKey(
   environment: string,
   key: string,
-  variableNames: VariableNames,
+  existingVariables: VariableNames,
+  currentKey?: string,
 ): boolean {
-  return variableNames.some((variable) => {
-    // Only consider it a duplicate if the same key exists
-    if (variable.name === key) {
-      // If either the existing or new variable is for all environments, it's a duplicate
-      if (
-        variable.environment === EnvironmentType.UNDEFINED ||
-        environment === EnvironmentType.UNDEFINED
-      ) {
-        return true;
-      }
+  const normalizedKey = key.toLowerCase();
+  const normalizedCurrentKey = currentKey?.toLowerCase();
+
+  return existingVariables.some((variable) => {
+    const existingKey = variable.name.toLowerCase();
+
+    // Skip if this is the current variable being edited
+    if (
+      normalizedCurrentKey &&
+      existingKey === normalizedCurrentKey &&
+      variable.environment === environment
+    ) {
+      return false;
+    }
+
+    // Safety: Compares the lowercase keys for case-insensitive comparison
+    if (existingKey !== normalizedKey) {
+      return false;
+    }
 
-      // If trying to create in the same environment as existing variable
-      if (variable.environment === environment) {
-        return true;
-      }
+    // If the existing variable is in UNDEFINED (all environments),
+    // or we're trying to create in UNDEFINED, it's a duplicate
+    if (
+      variable.environment === EnvironmentType.UNDEFINED ||
+      environment === EnvironmentType.UNDEFINED
+    ) {
+      return true;
     }
-    return false;
+
+    // Otherwise, it's only a duplicate if it's in the same environment
+    return variable.environment === environment;
   });
 }
 
diff --git a/web-admin/src/routes/[organization]/[project]/-/settings/environment-variables/+page.svelte b/web-admin/src/routes/[organization]/[project]/-/settings/environment-variables/+page.svelte
index f209f81687b..a4f96926bd6 100644
--- a/web-admin/src/routes/[organization]/[project]/-/settings/environment-variables/+page.svelte
+++ b/web-admin/src/routes/[organization]/[project]/-/settings/environment-variables/+page.svelte
@@ -102,7 +102,7 @@
       <div class="flex flex-col gap-6 w-full">
         <div class="flex flex-col">
           <RadixLarge>Environment variables</RadixLarge>
-          <p class="text-base font-normal text-slate-700">
+          <p class="text-sm text-slate-700 font-medium">
             Manage your environment variables here. <a
               href="https://docs.rilldata.com/tutorials/administration/project/credentials-env-variable-management"
               target="_blank"
@@ -123,9 +123,13 @@
           />
           <DropdownMenu.Root>
             <DropdownMenu.Trigger
-              class="min-w-fit flex flex-row gap-1 items-center rounded-sm {isDropdownOpen
-                ? 'bg-slate-200'
-                : 'hover:bg-slate-100'} px-2 py-1"
+              class={`min-w-fit flex flex-row gap-1 items-center rounded-sm border border-slate-300 ${
+                isDropdownOpen ? "bg-slate-200" : "hover:bg-slate-100"
+              } px-2 py-1 ${
+                projectVariables.length === 0
+                  ? "opacity-50 cursor-not-allowed pointer-events-none"
+                  : ""
+              }`}
             >
               <span class="text-slate-600 font-medium">{environmentLabel}</span>
               {#if isDropdownOpen}
diff --git a/web-common/src/components/dropdown-menu/DropdownMenuContent.svelte b/web-common/src/components/dropdown-menu/DropdownMenuContent.svelte
index 398a892e840..5a8a675c916 100644
--- a/web-common/src/components/dropdown-menu/DropdownMenuContent.svelte
+++ b/web-common/src/components/dropdown-menu/DropdownMenuContent.svelte
@@ -17,7 +17,7 @@
   {transitionConfig}
   {sideOffset}
   class={cn(
-    "z-50 min-w-[8rem] rounded-[2px] border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none",
+    "z-50 min-w-[8rem] rounded-[2px] border bg-popover p-1.5 text-popover-foreground shadow-md focus:outline-none",
     className,
   )}
   {...$$restProps}
diff --git a/web-common/src/components/icons/Eye.svelte b/web-common/src/components/icons/Eye.svelte
index caf8d96b264..af20fca6f2b 100644
--- a/web-common/src/components/icons/Eye.svelte
+++ b/web-common/src/components/icons/Eye.svelte
@@ -1,12 +1,17 @@
+<script lang="ts">
+  export let size = "1em";
+  export let color = "#94A3B8";
+</script>
+
 <svg
-  width="22"
-  height="16"
-  viewBox="0 0 22 16"
+  width={size}
+  height={size}
+  viewBox="0 0 17 16"
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
 >
   <path
-    d="M8.28065 8C8.28065 8.69619 8.55722 9.36387 9.0495 9.85616C9.54178 10.3484 10.2095 10.625 10.9057 10.625C11.6018 10.625 12.2695 10.3484 12.7618 9.85616C13.2541 9.36387 13.5307 8.69619 13.5307 8C13.5307 7.30381 13.2541 6.63613 12.7618 6.14384C12.2695 5.65156 11.6018 5.375 10.9057 5.375C10.2095 5.375 9.54178 5.65156 9.0495 6.14384C8.55722 6.63613 8.28065 7.30381 8.28065 8ZM21.0822 7.39531C18.8603 2.71484 15.5017 0.359375 10.9994 0.359375C6.49472 0.359375 3.13847 2.71484 0.916591 7.39766C0.82747 7.58637 0.78125 7.79247 0.78125 8.00117C0.78125 8.20987 0.82747 8.41598 0.916591 8.60469C3.13847 13.2852 6.49706 15.6406 10.9994 15.6406C15.5041 15.6406 18.8603 13.2852 21.0822 8.60234C21.2627 8.22266 21.2627 7.78203 21.0822 7.39531ZM10.9057 12.125C8.62753 12.125 6.78065 10.2781 6.78065 8C6.78065 5.72188 8.62753 3.875 10.9057 3.875C13.1838 3.875 15.0307 5.72188 15.0307 8C15.0307 10.2781 13.1838 12.125 10.9057 12.125Z"
-    fill="#94A3B8"
+    d="M6.9371 8C6.9371 8.46413 7.12148 8.90925 7.44967 9.23744C7.77785 9.56563 8.22297 9.75 8.6871 9.75C9.15123 9.75 9.59635 9.56563 9.92454 9.23744C10.2527 8.90925 10.4371 8.46413 10.4371 8C10.4371 7.53587 10.2527 7.09075 9.92454 6.76256C9.59635 6.43437 9.15123 6.25 8.6871 6.25C8.22297 6.25 7.77785 6.43437 7.44967 6.76256C7.12148 7.09075 6.9371 7.53587 6.9371 8ZM15.4715 7.59688C13.9902 4.47656 11.7512 2.90625 8.7496 2.90625C5.74648 2.90625 3.50898 4.47656 2.02773 7.59844C1.96831 7.72425 1.9375 7.86165 1.9375 8.00078C1.9375 8.13991 1.96831 8.27732 2.02773 8.40312C3.50898 11.5234 5.74804 13.0938 8.7496 13.0938C11.7527 13.0938 13.9902 11.5234 15.4715 8.40156C15.5918 8.14844 15.5918 7.85469 15.4715 7.59688ZM8.6871 10.75C7.16835 10.75 5.9371 9.51875 5.9371 8C5.9371 6.48125 7.16835 5.25 8.6871 5.25C10.2059 5.25 11.4371 6.48125 11.4371 8C11.4371 9.51875 10.2059 10.75 8.6871 10.75Z"
+    fill={color}
   />
 </svg>
diff --git a/web-common/src/components/icons/EyeInvisible.svelte b/web-common/src/components/icons/EyeInvisible.svelte
index 649cfb79c61..fe3f60f59ad 100644
--- a/web-common/src/components/icons/EyeInvisible.svelte
+++ b/web-common/src/components/icons/EyeInvisible.svelte
@@ -1,16 +1,21 @@
+<script lang="ts">
+  export let size = "1em";
+  export let color = "#94A3B8";
+</script>
+
 <svg
-  width="24"
-  height="24"
-  viewBox="0 0 36 36"
+  width={size}
+  height={size}
+  viewBox="0 0 17 16"
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
 >
   <path
-    d="M17.8597 21.9376C18.904 21.9376 19.9055 21.5228 20.6439 20.7843C21.3824 20.0459 21.7972 19.0444 21.7972 18.0001C21.7972 17.8848 21.7919 17.7705 21.7821 17.6577L17.5173 21.9225C17.6301 21.9323 17.744 21.9376 17.8597 21.9376ZM30.8928 5.82057L29.391 4.3201C29.3382 4.2674 29.2667 4.23779 29.1921 4.23779C29.1176 4.23779 29.0461 4.2674 28.9933 4.3201L25.1501 8.16444C23.0299 7.08092 20.6467 6.53917 18.0003 6.53917C11.2433 6.53917 6.20189 10.0583 2.87611 17.0966C2.74243 17.3797 2.6731 17.6888 2.6731 18.0019C2.6731 18.3149 2.74243 18.6241 2.87611 18.9071C4.20501 21.7063 5.80521 23.9498 7.67669 25.6378L3.95751 29.3556C3.90481 29.4083 3.8752 29.4798 3.8752 29.5544C3.8752 29.6289 3.90481 29.7005 3.95751 29.7532L5.45833 31.254C5.51107 31.3067 5.58258 31.3363 5.65714 31.3363C5.7317 31.3363 5.80321 31.3067 5.85595 31.254L30.8928 6.21854C30.919 6.19242 30.9397 6.1614 30.9539 6.12726C30.968 6.09312 30.9753 6.05652 30.9753 6.01956C30.9753 5.9826 30.968 5.946 30.9539 5.91186C30.9397 5.87771 30.919 5.84669 30.8928 5.82057ZM11.6722 18.0001C11.6721 16.9314 11.9488 15.8808 12.4754 14.9508C13.002 14.0208 13.7605 13.2431 14.677 12.6934C15.5935 12.1436 16.6368 11.8407 17.7051 11.814C18.7735 11.7873 19.8306 12.0378 20.7735 12.541L19.0642 14.2503C18.3748 14.0296 17.638 14.003 16.9345 14.1735C16.2311 14.344 15.5882 14.7049 15.0763 15.2168C14.5645 15.7286 14.2036 16.3715 14.0331 17.0749C13.8626 17.7784 13.8892 18.5152 14.1099 19.2046L12.4006 20.9139C11.921 20.0176 11.6707 19.0166 11.6722 18.0001Z"
-    fill="#94A3B8"
+    d="M8.6871 9.74939C9.15123 9.74939 9.59635 9.56502 9.92454 9.23683C10.2527 8.90864 10.4371 8.46352 10.4371 7.9994C10.4371 7.94815 10.4348 7.89736 10.4304 7.84721L8.53492 9.74268C8.58507 9.74705 8.6357 9.74939 8.6871 9.74939ZM14.4796 2.58627L13.8121 1.9194C13.7887 1.89597 13.7569 1.88281 13.7237 1.88281C13.6906 1.88281 13.6588 1.89597 13.6354 1.9194L11.9273 3.62799C10.985 3.14643 9.92575 2.90565 8.7496 2.90565C5.74648 2.90565 3.50585 4.46971 2.02773 7.59783C1.96831 7.72364 1.9375 7.86104 1.9375 8.00018C1.9375 8.13931 1.96831 8.27671 2.02773 8.40252C2.61835 9.64658 3.32955 10.6437 4.16132 11.3939L2.50835 13.0463C2.48493 13.0697 2.47177 13.1015 2.47177 13.1346C2.47177 13.1678 2.48493 13.1995 2.50835 13.223L3.17538 13.89C3.19882 13.9134 3.2306 13.9266 3.26374 13.9266C3.29688 13.9266 3.32866 13.9134 3.3521 13.89L14.4796 2.76315C14.4912 2.75154 14.5004 2.73775 14.5067 2.72258C14.513 2.7074 14.5163 2.69113 14.5163 2.67471C14.5163 2.65828 14.513 2.64201 14.5067 2.62684C14.5004 2.61167 14.4912 2.59788 14.4796 2.58627ZM5.9371 7.9994C5.93706 7.5244 6.06005 7.0575 6.29408 6.64417C6.52812 6.23084 6.86523 5.88517 7.27256 5.64085C7.6799 5.39652 8.14357 5.26187 8.61841 5.25C9.09325 5.23814 9.56308 5.34947 9.9821 5.57314L9.22242 6.33283C8.91604 6.23473 8.58856 6.22292 8.27592 6.29868C7.96327 6.37445 7.67753 6.53487 7.45006 6.76235C7.22258 6.98982 7.06216 7.27556 6.98639 7.58821C6.91062 7.90086 6.92244 8.22833 7.02054 8.53471L6.26085 9.2944C6.04767 8.89608 5.93644 8.45117 5.9371 7.9994V7.9994Z"
+    fill={color}
   />
   <path
-    d="M33.1237 17.0929C31.8862 14.4866 30.4133 12.3614 28.7049 10.7173L23.6375 15.7851C24.0647 16.9017 24.1593 18.1181 23.9101 19.2874C23.6609 20.4566 23.0784 21.5287 22.233 22.3741C21.3877 23.2194 20.3156 23.8019 19.1463 24.0511C17.9771 24.3004 16.7606 24.2057 15.644 23.7785L11.3458 28.0767C13.3399 28.9995 15.5578 29.4608 17.9995 29.4608C24.7565 29.4608 29.7979 25.9417 33.1237 18.9034C33.2574 18.6204 33.3268 18.3112 33.3268 17.9981C33.3268 17.6851 33.2574 17.3759 33.1237 17.0929Z"
-    fill="#94A3B8"
+    d="M15.472 7.59727C14.922 6.43893 14.2674 5.4944 13.5081 4.76367L11.2559 7.01602C11.4458 7.51229 11.4879 8.05292 11.3771 8.57259C11.2663 9.09226 11.0074 9.56874 10.6317 9.94446C10.256 10.3202 9.77953 10.5791 9.25986 10.6898C8.74018 10.8006 8.19955 10.7585 7.70328 10.5687L5.79297 12.479C6.67922 12.8891 7.66495 13.0941 8.75016 13.0941C11.7533 13.0941 13.9939 11.5301 15.472 8.40195C15.5315 8.27615 15.5623 8.13874 15.5623 7.99961C15.5623 7.86048 15.5315 7.72307 15.472 7.59727V7.59727Z"
+    fill={color}
   />
 </svg>
diff --git a/web-common/src/components/table/BasicTable.svelte b/web-common/src/components/table/BasicTable.svelte
index 664606bbe23..9c7056df558 100644
--- a/web-common/src/components/table/BasicTable.svelte
+++ b/web-common/src/components/table/BasicTable.svelte
@@ -81,7 +81,7 @@
                   style={`margin-left: ${marginLeft};`}
                   class:cursor-pointer={header.column.getCanSort()}
                   class:select-none={header.column.getCanSort()}
-                  class="font-semibold text-gray-500 flex flex-row items-center gap-x-1 truncate"
+                  class="font-semibold text-gray-500 flex flex-row items-center gap-x-1 truncate text-sm"
                 >
                   <svelte:component
                     this={flexRender(