diff --git a/apps/platform/src/app/(main)/project/[project]/@variable/page.tsx b/apps/platform/src/app/(main)/project/[project]/@variable/page.tsx
index 6338dd46..3c628736 100644
--- a/apps/platform/src/app/(main)/project/[project]/@variable/page.tsx
+++ b/apps/platform/src/app/(main)/project/[project]/@variable/page.tsx
@@ -33,11 +33,17 @@ import {
   ContextMenuTrigger
 } from '@/components/ui/context-menu'
 import EditVariableDialog from '@/components/ui/edit-variable-dialog'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 
 interface VariablePageProps {
   currentProject: Project | undefined
 }
 
+interface EditVariableDetails {
+  variableName: string;
+  variableNote: string;
+}
+
 function VariablePage({
   currentProject
 }: VariablePageProps): React.JSX.Element {
@@ -49,6 +55,10 @@ function VariablePage({
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState<boolean>(false)
   const [isEditDialogOpen, setIsEditDialogOpen] = useState<boolean>(false)
   const [selectedVariableSlug, setSelectedVariableSlug] = useState<string | null>(null)
+  const [editVariableDetails, setEditVariableDetails] = useState<EditVariableDetails>({
+    variableName: '',
+    variableNote: '',
+  })
 
   //Environments table toggle logic
   const toggleSection = (id: string) => {
@@ -65,25 +75,24 @@ function VariablePage({
 
   const toggleDeleteDialog = (variableSlug: string) => {
     setIsDeleteDialogOpen(!isDeleteDialogOpen)
-    if( selectedVariableSlug === null ){
+    if (selectedVariableSlug === null) {
       setSelectedVariableSlug(variableSlug)
-    }
-    else{
+    } else {
       setSelectedVariableSlug(null)
     }
   }
 
-  const toggleEditDialog = (variableSlug: string) => {
+  const toggleEditDialog = (variableSlug: string, variableName: string, variableNote: string | null) => {
     setIsEditDialogOpen(!isEditDialogOpen)
-    if( selectedVariableSlug === null ){
+    if (selectedVariableSlug === null) {
       setSelectedVariableSlug(variableSlug)
-    }
-    else{
+      setEditVariableDetails({ variableName, variableNote: variableNote ?? '' })
+    } else {
       setSelectedVariableSlug(null)
+      setEditVariableDetails({variableName: '', variableNote: ''})
     }
   }
 
-
   useEffect(() => {
     const getAllVariables = async () => {
       if (!currentProject) {
@@ -154,7 +163,18 @@ function VariablePage({
                       <span className="h-[2.375rem] text-2xl font-normal text-zinc-100">
                         {variable.variable.name}
                       </span>
-                      <MessageSVG height="40" width="40" />
+                      {variable.variable.note ? (
+                        <TooltipProvider>
+                          <Tooltip>
+                            <TooltipTrigger>
+                              <MessageSVG height="40" width="40" />
+                            </TooltipTrigger>
+                            <TooltipContent className="border-white/20 bg-white/10 text-white backdrop-blur-xl">
+                              <p>{variable.variable.note}</p>
+                            </TooltipContent>
+                          </Tooltip>
+                        </TooltipProvider>
+                      ) : null}
                     </div>
                     <div className="flex h-[6.5rem] w-[18.188rem] items-center justify-center gap-x-[3.125rem]">
                       <div className="flex h-[2.063rem] w-[13.563rem] items-center justify-center gap-x-3">
@@ -237,7 +257,7 @@ function VariablePage({
                   Show Version History
                 </ContextMenuItem>
                 <ContextMenuItem
-                  onSelect={() => toggleEditDialog(variable.variable.slug)}
+                  onSelect={() => toggleEditDialog(variable.variable.slug, variable.variable.name, variable.variable.note)}
                   className="h-[33%] w-[15.938rem] text-xs font-semibold tracking-wide"
                 >
                   Edit
@@ -264,14 +284,15 @@ function VariablePage({
 
           {/* Edit variable dialog */}
           {isEditDialogOpen && (
-            <EditVariableDialog 
+            <EditVariableDialog
               isOpen={isEditDialogOpen}
-              //Passing an empty string just to bypass the error -- we don't need the variableSlug while closing the dialog
-              onClose={() => toggleEditDialog('')}
+              //Passing empty strings just to bypass the error -- we don't need the arguments while closing the dialog
+              onClose={() => toggleEditDialog('', '', '')}
               variableSlug={selectedVariableSlug}
+              variableName={editVariableDetails.variableName}
+              variableNote={editVariableDetails.variableNote}
             />
           )}
-
         </div>
       )}
     </div>
diff --git a/apps/platform/src/components/ui/edit-variable-dialog.tsx b/apps/platform/src/components/ui/edit-variable-dialog.tsx
index 8b96cd13..96786072 100644
--- a/apps/platform/src/components/ui/edit-variable-dialog.tsx
+++ b/apps/platform/src/components/ui/edit-variable-dialog.tsx
@@ -1,102 +1,108 @@
 'use client'
 
 import { useState } from 'react'
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Textarea } from "@/components/ui/textarea"
-import { Label } from "@/components/ui/label"
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
+import { Label } from '@/components/ui/label'
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
-  DialogDescription,
-} from "@/components/ui/dialog"
+  DialogDescription
+} from '@/components/ui/dialog'
 import { UpdateVariableRequest } from '@keyshade/schema'
 import ControllerInstance from '@/lib/controller-instance'
 import { toast } from 'sonner'
 
 function EditVariableDialog({
-    isOpen,
-    onClose,
-    variableSlug
+  isOpen,
+  onClose,
+  variableSlug,
+  variableName,
+  variableNote,
 }: {
-    isOpen: boolean
-    onClose: () => void
-    variableSlug: string | null
+  isOpen: boolean
+  onClose: () => void
+  variableSlug: string | null
+  variableName: string
+  variableNote: string
 }) {
-
-  const [variableName, setVariableName] = useState<string>("")
-  const [extraNote, setExtraNote] = useState<string>("")
+  const [newVariableName, setNewVariableName] = useState<string>(variableName)
+  const [extraNote, setExtraNote] = useState<string>(variableNote)
 
   const updateVariable = async () => {
-
-    if( variableSlug === null ){
-        return
+    if (variableSlug === null) {
+      return
     }
 
     const request: UpdateVariableRequest = {
-        variableSlug,
-        name: variableName === '' ? undefined : variableName,
-        note: extraNote === '' ? undefined : extraNote,
-        entries: undefined,
+      variableSlug,
+      name: newVariableName === variableName ? undefined : newVariableName,
+      note: extraNote === '' ? undefined : extraNote,
+      entries: undefined
     }
 
-    const { success, error } = await ControllerInstance.getInstance().variableController.updateVariable(
+    const { success, error } =
+      await ControllerInstance.getInstance().variableController.updateVariable(
         request,
         {}
-    )
+      )
 
-    if( success ){
-        toast.success('Variable edited successfully', {
-            // eslint-disable-next-line react/no-unstable-nested-components -- we need to nest the description
-            description: () => (
-              <p className="text-xs text-emerald-300">
-                You successfully edited the variable
-              </p>
-            )
-        })
+    if (success) {
+      toast.success('Variable edited successfully', {
+        // eslint-disable-next-line react/no-unstable-nested-components -- we need to nest the description
+        description: () => (
+          <p className="text-xs text-emerald-300">
+            You successfully edited the variable
+          </p>
+        )
+      })
     }
-    if( error ){
-        // eslint-disable-next-line no-console -- we need to log the error
-        console.error("Error while updating variable: ", error)
+    if (error) {
+      // eslint-disable-next-line no-console -- we need to log the error
+      console.error('Error while updating variable: ', error)
     }
 
     onClose()
-
   }
 
   return (
     <div className="p-4">
       <Dialog open={isOpen} onOpenChange={onClose}>
-        <DialogContent className="bg-[#18181B] text-white sm:max-w-[506px] p-6">
+        <DialogContent className="bg-[#18181B] p-6 text-white sm:max-w-[506px]">
           <DialogHeader>
-            <DialogTitle className='text-base font-bold text-white'>Edit this variable</DialogTitle>
+            <DialogTitle className="text-base font-bold text-white">
+              Edit this variable
+            </DialogTitle>
             <DialogDescription className="text-sm font-normal text-white/60">
               Edit the variable name or the note
             </DialogDescription>
           </DialogHeader>
           <div className="space-y-6 pt-4">
-            <div className="w-full flex justify-between items-center gap-6">
-              <Label 
-                className="text-base font-semibold text-white w-[7.125rem]"
-                htmlFor="variable-name">
+            <div className="flex w-full items-center justify-between gap-6">
+              <Label
+                className="w-[7.125rem] text-base font-semibold text-white"
+                htmlFor="variable-name"
+              >
                 Variable Name
               </Label>
-              <Input 
+              <Input
                 id="variable-name"
-                value={variableName}
-                onChange={(e) => setVariableName(e.target.value)}
+                value={newVariableName}
+                onChange={(e) => setNewVariableName(e.target.value)}
                 className="w-[20rem] bg-[#262626] text-base font-normal text-white"
               />
             </div>
-            <div className="w-full flex justify-between items-center gap-6">
-              <Label 
-                className="text-base font-semibold text-white w-[7.125rem]" 
-                htmlFor="extra-note">
+            <div className="flex w-full items-center justify-between gap-6">
+              <Label
+                className="w-[7.125rem] text-base font-semibold text-white"
+                htmlFor="extra-note"
+              >
                 Extra Note
               </Label>
-              <Textarea 
+              <Textarea
                 id="extra-note"
                 value={extraNote}
                 onChange={(e) => setExtraNote(e.target.value)}
@@ -104,10 +110,11 @@ function EditVariableDialog({
               />
             </div>
             <div className="flex justify-end">
-              <Button 
-                onClick={updateVariable} 
-                variant="secondary" 
-                className="bg-[#E0E0E0] border-white/10 hover:bg-gray-200 rounded-lg text-xs font-semibold text-black">
+              <Button
+                onClick={updateVariable}
+                variant="secondary"
+                className="rounded-lg border-white/10 bg-[#E0E0E0] text-xs font-semibold text-black hover:bg-gray-200"
+              >
                 Save Variable
               </Button>
             </div>
@@ -118,4 +125,4 @@ function EditVariableDialog({
   )
 }
 
-export default EditVariableDialog
\ No newline at end of file
+export default EditVariableDialog