diff --git a/apps/warp-protocol/src/pages/job-new/variable-drawer/VariableDrawer.module.sass b/apps/warp-protocol/src/pages/job-new/variable-drawer/VariableDrawer.module.sass
index 53cc64ab..8c4b3536 100644
--- a/apps/warp-protocol/src/pages/job-new/variable-drawer/VariableDrawer.module.sass
+++ b/apps/warp-protocol/src/pages/job-new/variable-drawer/VariableDrawer.module.sass
@@ -15,6 +15,7 @@
   background: var(--section-background-color)
   transform: rotate(270deg)
   top: 240px
+  backdrop-filter: blur(50px)
 
 .variables
   width: 280px
diff --git a/apps/warp-protocol/src/pages/job-new/variable-drawer/VariableDrawer.tsx b/apps/warp-protocol/src/pages/job-new/variable-drawer/VariableDrawer.tsx
index 4f849201..bc8c1adb 100644
--- a/apps/warp-protocol/src/pages/job-new/variable-drawer/VariableDrawer.tsx
+++ b/apps/warp-protocol/src/pages/job-new/variable-drawer/VariableDrawer.tsx
@@ -7,11 +7,16 @@ import { useState } from 'react';
 import styles from './VariableDrawer.module.sass';
 import { variableName } from 'utils/variable';
 import { useCachedVariables } from '../useCachedVariables';
+import { useVariableDisplayDialog } from 'pages/job-page/panels/Condition/typed-expressions/dialogs/useVariableDisplayDialog';
 
-type VariableDrawerProps = UIElementProps & {};
+type VariableDrawerProps = UIElementProps & {
+  readOnly?: boolean;
+  open?: boolean;
+};
 
 export const VariableDrawer = (props: VariableDrawerProps) => {
-  const [drawerOpen, setDrawerOpen] = useState<boolean>(true);
+  const { readOnly, open = true } = props;
+  const [drawerOpen, setDrawerOpen] = useState<boolean>(open);
   const onToggleDrawer = () => {
     setDrawerOpen((open) => !open);
   };
@@ -19,6 +24,7 @@ export const VariableDrawer = (props: VariableDrawerProps) => {
   const { variables, saveVariable, removeVariable, updateVariable } = useCachedVariables();
 
   const openEditVariableDialog = useEditVariableDialog();
+  const openVariableDisplayDialog = useVariableDisplayDialog();
 
   return (
     <Drawer
@@ -35,13 +41,18 @@ export const VariableDrawer = (props: VariableDrawerProps) => {
       <Nav
         className={styles.variables}
         variables={variables}
+        readOnly={readOnly}
         saveVariable={(v) => saveVariable(v)}
         deleteVariable={(v) => removeVariable(variableName(v))}
         onVariableClick={async (v) => {
-          const resp = await openEditVariableDialog(v);
+          if (readOnly) {
+            await openVariableDisplayDialog(v, variables);
+          } else {
+            const resp = await openEditVariableDialog(v);
 
-          if (resp) {
-            updateVariable(resp, v);
+            if (resp) {
+              updateVariable(resp, v);
+            }
           }
         }}
       />
diff --git a/apps/warp-protocol/src/pages/job-page/JobPage.tsx b/apps/warp-protocol/src/pages/job-page/JobPage.tsx
index a994d615..4ec3b354 100644
--- a/apps/warp-protocol/src/pages/job-page/JobPage.tsx
+++ b/apps/warp-protocol/src/pages/job-page/JobPage.tsx
@@ -7,26 +7,31 @@ import { Job } from 'types/job';
 import { JobDetailsPanel } from './panels/JobDetailsPanel';
 import { JobMessagePanel } from './panels/JobMessagePanel';
 import { JobConditionsPanel } from './panels/JobConditionsPanel';
+import { CachedVariablesSession } from 'pages/job-new/CachedVariablesSession';
+import { VariableDrawer } from 'pages/job-new/variable-drawer/VariableDrawer';
 
 const JobContent = (props: { job: Job }) => {
   const { job } = props;
 
   return (
-    <Container direction="column" className={styles.content}>
-      <Container className={styles.title_container}>
-        <Text variant="heading1" className={styles.title}>
-          {job.info.name}
-        </Text>
-        <Link className={styles.back} to={-1}>
-          Back
-        </Link>
+    <CachedVariablesSession input={job.vars}>
+      <Container direction="column" className={styles.content}>
+        <Container className={styles.title_container}>
+          <Text variant="heading1" className={styles.title}>
+            {job.info.name}
+          </Text>
+          <Link className={styles.back} to={-1}>
+            Back
+          </Link>
+        </Container>
+        <Container className={styles.bottom} direction="row">
+          <JobDetailsPanel job={job} className={styles.left} />
+          <JobMessagePanel job={job} className={styles.middle} />
+          <JobConditionsPanel job={job} className={styles.right} />
+          <VariableDrawer readOnly={true} open={false} />
+        </Container>
       </Container>
-      <Container className={styles.bottom} direction="row">
-        <JobDetailsPanel job={job} className={styles.left} />
-        <JobMessagePanel job={job} className={styles.middle} />
-        <JobConditionsPanel job={job} className={styles.right} />
-      </Container>
-    </Container>
+    </CachedVariablesSession>
   );
 };
 
diff --git a/apps/warp-protocol/src/pages/variables/nav/Nav.tsx b/apps/warp-protocol/src/pages/variables/nav/Nav.tsx
index 82176247..8bd9b488 100644
--- a/apps/warp-protocol/src/pages/variables/nav/Nav.tsx
+++ b/apps/warp-protocol/src/pages/variables/nav/Nav.tsx
@@ -17,10 +17,11 @@ type NavProps = UIElementProps & {
   saveVariable: (v: warp_resolver.Variable) => void;
   deleteVariable: (v: warp_resolver.Variable) => void;
   onVariableClick: (variable: warp_resolver.Variable) => void;
+  readOnly?: boolean;
 };
 
 export const Nav = (props: NavProps) => {
-  const { className, variables, selectedVariable, onVariableClick, saveVariable, deleteVariable } = props;
+  const { className, variables, selectedVariable, onVariableClick, saveVariable, deleteVariable, readOnly } = props;
 
   const openNewVariableDialog = useNewVariableDialog();
 
@@ -43,28 +44,32 @@ export const Nav = (props: NavProps) => {
                 {variableName(v)}
               </Text>
               <VariablePill className={styles.pill} variable={v} />
-              <DropdownMenu menuClass={styles.menu} action={<MoreVertIcon className={styles.menu_btn} />}>
-                <MenuAction onClick={() => onVariableClick(v)}>Edit</MenuAction>
-                <MenuAction onClick={() => deleteVariable(v)}>Delete</MenuAction>
-              </DropdownMenu>
+              {!readOnly && (
+                <DropdownMenu menuClass={styles.menu} action={<MoreVertIcon className={styles.menu_btn} />}>
+                  <MenuAction onClick={() => onVariableClick(v)}>Edit</MenuAction>
+                  <MenuAction onClick={() => deleteVariable(v)}>Delete</MenuAction>
+                </DropdownMenu>
+              )}
             </div>
           ))}
         </Container>
       )}
       {variables.length === 0 && <div className={styles.empty}>No variables created yet.</div>}
-      <Button
-        variant="secondary"
-        className={styles.new}
-        onClick={async () => {
-          const v = await openNewVariableDialog({});
+      {!readOnly && (
+        <Button
+          variant="secondary"
+          className={styles.new}
+          onClick={async () => {
+            const v = await openNewVariableDialog({});
 
-          if (v) {
-            saveVariable(v);
-          }
-        }}
-      >
-        New
-      </Button>
+            if (v) {
+              saveVariable(v);
+            }
+          }}
+        >
+          New
+        </Button>
+      )}
     </Panel>
   );
 };
diff --git a/yarn.lock b/yarn.lock
index 51f0d61d..644ecb29 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4346,7 +4346,7 @@ __metadata:
     "@mui/material": ^5.10.2
     "@terra-money/feather.js": 1.0.11
     "@terra-money/wallet-kit": 1.0.11
-    "@terra-money/warp-sdk": ^0.2.16
+    "@terra-money/warp-sdk": ^0.2.18
     "@testing-library/jest-dom": ^5.16.5
     "@testing-library/react": ^13.3.0
     "@testing-library/user-event": ^13.5.0
@@ -4521,9 +4521,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@terra-money/warp-sdk@npm:^0.2.16":
-  version: 0.2.16
-  resolution: "@terra-money/warp-sdk@npm:0.2.16"
+"@terra-money/warp-sdk@npm:^0.2.18":
+  version: 0.2.18
+  resolution: "@terra-money/warp-sdk@npm:0.2.18"
   dependencies:
     "@terra-money/feather.js": 1.0.11
     "@types/node": ^16.11.56
@@ -4536,7 +4536,7 @@ __metadata:
     lodash: ^4.17.21
     pino: ^8.4.2
     typescript: ^4.8.2
-  checksum: fe6143e68446e09f17148efe4035e7bb4b566bdc4e32ba00349616ac62ca715523bc3b8c4d8769493c77d803453e77da7b66f450e1fb183783ec76d88c6a598e
+  checksum: e6da4e8210c0164786b733d946785eae8657614ba75ff4c8861313c8ae5752c7a8500cce4864d06e00a4e1f986a9489ca1de0d1460137eb3f8c9c465636632d5
   languageName: node
   linkType: hard
 
@@ -5628,7 +5628,7 @@ __metadata:
     "@terra-money/feather.js": 1.0.11
     "@terra-money/terra-station-mobile": 1.0.8
     "@terra-money/wallet-kit": 1.0.11
-    "@terra-money/warp-sdk": ^0.2.16
+    "@terra-money/warp-sdk": ^0.2.18
     "@testing-library/jest-dom": ^5.16.5
     "@testing-library/react": ^13.3.0
     "@testing-library/user-event": ^13.5.0
@@ -5708,7 +5708,7 @@ __metadata:
     "@aws-sdk/client-dynamodb": ^3.159.0
     "@aws-sdk/util-dynamodb": ^3.159.0
     "@terra-money/feather.js": 1.0.11
-    "@terra-money/warp-sdk": ^0.2.16
+    "@terra-money/warp-sdk": ^0.2.18
     "@types/d3-array": ^3.0.3
     "@types/node": ^16.11.56
     axios: ^1.1.2