diff --git a/src/components/Instructions/InstructionItem.tsx b/src/components/Instructions/InstructionItem.tsx
index c52d9c1d..9260e5e6 100644
--- a/src/components/Instructions/InstructionItem.tsx
+++ b/src/components/Instructions/InstructionItem.tsx
@@ -1,4 +1,4 @@
-import { mapInstructionsArgsByType, valueToNumeralSystem } from "./utils";
+import { argType, mapInstructionsArgsByType, valueToBinary, valueToNumeralSystem } from "./utils";
 import classNames from "classnames";
 import { getStatusColor } from "../Registers/utils";
 import { ExpectedState, RegistersArray, Status } from "@/types/pvm";
@@ -86,7 +86,7 @@ export const InstructionItem = forwardRef(
       onClick(programRow);
     }, [programRow, onClick]);
 
-    const { backgroundColor, hasTooltip } = getHighlightStatus(workers, programRow, status);
+    const { backgroundColor, hasOpacity } = getHighlightStatus(workers, programRow, status);
 
     const renderContent = () => {
       return (
@@ -143,8 +143,16 @@ export const InstructionItem = forwardRef(
                 style={{ borderTop: programRow.block.isStart ? "2px solid #bbb" : undefined }}
               >
                 <span className="">
-                  {"args" in programRow &&
-                    mapInstructionsArgsByType(programRow.args, numeralSystem, programRow.counter)}
+                  {"args" in programRow && (
+                    <span
+                      dangerouslySetInnerHTML={{
+                        __html:
+                          mapInstructionsArgsByType(programRow.args, numeralSystem, programRow.counter)
+                            ?.map((instruction) => instruction.value)
+                            .join(", ") ?? "",
+                      }}
+                    />
+                  )}
                 </span>
               </TableCell>
             </>
@@ -153,7 +161,67 @@ export const InstructionItem = forwardRef(
       );
     };
 
-    return hasTooltip ? (
+    const renderTooltipContentInstructionInfo = () => {
+      return (
+        <div>
+          <div className="flex flex-row bg-white">
+            <div>
+              <div className="font-mono text-xs text-gray-500 pl-1 pb-1">opcode</div>
+              <div className="border-r-2 border-red-400 ">
+                <div className="font-mono text-md tracking-[0.2rem] bg-red-200 pl-1 text-right">
+                  {valueToBinary(programRow.instructionCode, 8)}
+                </div>
+                <div className="font-mono text-xs p-1 font-bold">
+                  {valueToNumeralSystem(programRow.instructionCode, numeralSystem)}
+                </div>
+              </div>
+            </div>
+
+            {"args" in programRow &&
+              mapInstructionsArgsByType(programRow.args, numeralSystem, programRow.counter)?.map(
+                (instruction, index) => (
+                  <div key={index}>
+                    <div className="font-mono text-xs text-gray-500 pl-1 pb-1 lowercase">{instruction.type}</div>
+                    <div
+                      className={classNames(
+                        "border-r-2",
+                        { "border-violet-400": instruction.type === argType.REGISTER },
+                        { "border-green-300": instruction.type !== argType.REGISTER },
+                      )}
+                    >
+                      <div
+                        className={classNames(
+                          "font-mono text-md tracking-[0.2rem] pl-1",
+                          {
+                            "bg-violet-200": instruction.type === argType.REGISTER,
+                          },
+                          { "bg-green-100": instruction.type !== argType.REGISTER },
+                        )}
+                      >
+                        {valueToBinary(
+                          instruction.value,
+                          instruction.type === argType.EXTENDED_WIDTH_IMMEDIATE ? 16 : 8,
+                        )}
+                      </div>
+                      <div
+                        className={classNames("text-xs p-1", {
+                          "font-sans": instruction.type === argType.REGISTER,
+                          "font-mono": instruction.type !== argType.REGISTER,
+                        })}
+                        dangerouslySetInnerHTML={{
+                          __html: instruction.value,
+                        }}
+                      />
+                    </div>
+                  </div>
+                ),
+              )}
+          </div>
+        </div>
+      );
+    };
+
+    return hasOpacity ? (
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger asChild>{renderContent()}</TooltipTrigger>
@@ -172,7 +240,12 @@ export const InstructionItem = forwardRef(
         </Tooltip>
       </TooltipProvider>
     ) : (
-      renderContent()
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>{renderContent()}</TooltipTrigger>
+          <TooltipContent side="bottom">{renderTooltipContentInstructionInfo()}</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
     );
   },
 );
@@ -197,7 +270,7 @@ function getHighlightStatus(workers: WorkerState[], programRow: ProgramRow, stat
 
   return {
     backgroundColor,
-    hasTooltip: bgOpacity > 0 && bgOpacity < 1,
+    hasOpacity: bgOpacity > 0 && bgOpacity < 1,
   };
 }
 
diff --git a/src/components/Instructions/utils.tsx b/src/components/Instructions/utils.tsx
index 0cad1ce9..97e42a48 100644
--- a/src/components/Instructions/utils.tsx
+++ b/src/components/Instructions/utils.tsx
@@ -15,84 +15,173 @@ export const valueToNumeralSystem = (
     : (value ?? 0).toString().padStart(padStartVal, "0");
 };
 
-export const mapInstructionsArgsByType = (args: Args | null, numeralSystem: NumeralSystem, counter: number) => {
+export const valueToBinary = (value?: number | bigint | string, padStartVal: number = 0): string => {
+  return ((Number(value) ?? 0) >>> 0).toString(2).padStart(padStartVal, "0");
+};
+
+export enum argType {
+  IMMEDIATE = "IMMEDIATE",
+  OFFSET = "OFFSET",
+  REGISTER = "REGISTER",
+  EXTENDED_WIDTH_IMMEDIATE = "EXTENDED_WIDTH_IMMEDIATE",
+}
+
+export const mapInstructionsArgsByType = (
+  args: Args | null,
+  numeralSystem: NumeralSystem,
+  counter: number,
+):
+  | {
+      type: argType;
+      value: string | number;
+    }[]
+  | null => {
   switch (args?.type) {
     case ArgumentType.NO_ARGUMENTS:
-      return "";
+      return [];
     case ArgumentType.ONE_IMMEDIATE:
-      return <span>{valueToNumeralSystem(args.immediateDecoder.getI64(), numeralSystem)}</span>;
+      return [{ type: argType.IMMEDIATE, value: valueToNumeralSystem(args.immediateDecoder.getI64(), numeralSystem) }];
     case ArgumentType.TWO_IMMEDIATES:
-      return (
-        <span>
-          {valueToNumeralSystem(args?.firstImmediateDecoder.getI64(), numeralSystem)},{" "}
-          {valueToNumeralSystem(args?.secondImmediateDecoder.getI64(), numeralSystem)}
-        </span>
-      );
+      return [
+        {
+          type: argType.IMMEDIATE,
+          value: valueToNumeralSystem(args?.firstImmediateDecoder.getI64(), numeralSystem),
+        },
+        {
+          type: argType.IMMEDIATE,
+          value: valueToNumeralSystem(args?.secondImmediateDecoder.getI64(), numeralSystem),
+        },
+      ];
     case ArgumentType.ONE_OFFSET:
-      return <span>{valueToNumeralSystem(args?.nextPc - counter, numeralSystem)}</span>;
+      return [{ type: argType.OFFSET, value: valueToNumeralSystem(args?.nextPc - counter, numeralSystem) }];
     case ArgumentType.ONE_REGISTER_ONE_IMMEDIATE:
-      return (
-        <span>
-          ω<sub>{args?.registerIndex}</sub>, {valueToNumeralSystem(args.immediateDecoder.getI64(), numeralSystem)}
-        </span>
-      );
+      return [
+        {
+          type: argType.REGISTER,
+          value: `ω<sub>${args?.registerIndex}</sub>`,
+        },
+        {
+          type: argType.IMMEDIATE,
+          value: valueToNumeralSystem(args.immediateDecoder.getI64(), numeralSystem),
+        },
+      ];
     case ArgumentType.ONE_REGISTER_TWO_IMMEDIATES:
-      return (
-        <span>
-          ω<sub>{args?.registerIndex}</sub>, {valueToNumeralSystem(args?.firstImmediateDecoder.getI64(), numeralSystem)}
-          , {valueToNumeralSystem(args?.secondImmediateDecoder.getI64(), numeralSystem)}
-        </span>
-      );
+      return [
+        {
+          type: argType.REGISTER,
+          value: `ω<sub>${args?.registerIndex}</sub>`,
+        },
+        {
+          type: argType.IMMEDIATE,
+          value: valueToNumeralSystem(args?.firstImmediateDecoder.getI64(), numeralSystem),
+        },
+        {
+          type: argType.IMMEDIATE,
+          value: valueToNumeralSystem(args?.secondImmediateDecoder.getI64(), numeralSystem),
+        },
+      ];
     case ArgumentType.ONE_REGISTER_ONE_IMMEDIATE_ONE_OFFSET:
-      return (
-        <span>
-          ω<sub>{args?.registerIndex}</sub>, {valueToNumeralSystem(args?.immediateDecoder.getI64(), numeralSystem)},{" "}
-          {valueToNumeralSystem(args?.nextPc - counter, numeralSystem)}
-        </span>
-      );
+      return [
+        {
+          type: argType.REGISTER,
+          value: `ω<sub>${args?.registerIndex}</sub>`,
+        },
+        {
+          type: argType.IMMEDIATE,
+          value: valueToNumeralSystem(args?.immediateDecoder.getI64(), numeralSystem),
+        },
+        {
+          type: argType.OFFSET,
+          value: valueToNumeralSystem(args?.nextPc - counter, numeralSystem),
+        },
+      ];
     case ArgumentType.ONE_REGISTER_ONE_EXTENDED_WIDTH_IMMEDIATE:
-      return (
-        <span>
-          ω<sub>{args?.registerIndex}</sub>, {valueToNumeralSystem(args?.immediateDecoder.getValue(), numeralSystem)}
-        </span>
-      );
+      return [
+        {
+          type: argType.REGISTER,
+          value: `ω<sub>${args?.registerIndex}</sub>`,
+        },
+        {
+          type: argType.EXTENDED_WIDTH_IMMEDIATE,
+          value: valueToNumeralSystem(args?.immediateDecoder.getValue(), numeralSystem),
+        },
+      ];
     case ArgumentType.TWO_REGISTERS:
-      return (
-        <span>
-          ω<sub>{args?.firstRegisterIndex}</sub>, ω<sub>{args?.secondRegisterIndex}</sub>
-        </span>
-      );
+      return [
+        {
+          type: argType.REGISTER,
+          value: `ω<sub>${args?.firstRegisterIndex}</sub>`,
+        },
+        {
+          type: argType.REGISTER,
+          value: `ω<sub>${args?.secondRegisterIndex}</sub>`,
+        },
+      ];
     case ArgumentType.TWO_REGISTERS_ONE_IMMEDIATE:
-      return (
-        <span>
-          ω<sub>{args?.firstRegisterIndex}</sub>, ω<sub>{args?.secondRegisterIndex}</sub>,{" "}
-          {valueToNumeralSystem(args?.immediateDecoder.getI64(), numeralSystem)}
-        </span>
-      );
+      return [
+        {
+          type: argType.REGISTER,
+          value: `ω<sub>${args?.firstRegisterIndex}</sub>`,
+        },
+        {
+          type: argType.REGISTER,
+          value: `ω<sub>${args?.secondRegisterIndex}</sub>`,
+        },
+        {
+          type: argType.IMMEDIATE,
+          value: valueToNumeralSystem(args?.immediateDecoder.getI64(), numeralSystem),
+        },
+      ];
     case ArgumentType.TWO_REGISTERS_ONE_OFFSET:
-      return (
-        <span>
-          ω<sub>{args?.firstRegisterIndex}</sub>, ω<sub>{args?.secondRegisterIndex}</sub>,{" "}
-          {valueToNumeralSystem(args?.nextPc - counter, numeralSystem)}
-        </span>
-      );
+      return [
+        {
+          type: argType.REGISTER,
+          value: `ω<sub>${args?.firstRegisterIndex}</sub>`,
+        },
+        {
+          type: argType.REGISTER,
+          value: `ω<sub>${args?.secondRegisterIndex}</sub>`,
+        },
+        {
+          type: argType.OFFSET,
+          value: valueToNumeralSystem(args?.nextPc - counter, numeralSystem),
+        },
+      ];
     case ArgumentType.TWO_REGISTERS_TWO_IMMEDIATES:
-      return (
-        <span>
-          ω<sub>{args?.firstRegisterIndex}</sub>, ω<sub>{args?.secondRegisterIndex}</sub>,{" "}
-          {valueToNumeralSystem(args?.firstImmediateDecoder.getI64(), numeralSystem)},{" "}
-          {valueToNumeralSystem(args?.secondImmediateDecoder.getI64(), numeralSystem)}
-        </span>
-      );
+      return [
+        {
+          type: argType.REGISTER,
+          value: `ω<sub>${args?.firstRegisterIndex}</sub>`,
+        },
+        {
+          type: argType.REGISTER,
+          value: `ω<sub>${args?.secondRegisterIndex}</sub>`,
+        },
+        {
+          type: argType.IMMEDIATE,
+          value: valueToNumeralSystem(args?.firstImmediateDecoder.getI64(), numeralSystem),
+        },
+        {
+          type: argType.IMMEDIATE,
+          value: valueToNumeralSystem(args?.secondImmediateDecoder.getI64(), numeralSystem),
+        },
+      ];
     case ArgumentType.THREE_REGISTERS:
-      return (
-        <span>
-          ω<sub>{args?.firstRegisterIndex}</sub>, ω<sub>{args?.secondRegisterIndex}</sub>, ω
-          <sub>{args?.thirdRegisterIndex}</sub>
-        </span>
-      );
-
+      return [
+        {
+          type: argType.REGISTER,
+          value: `ω<sub>${args?.firstRegisterIndex}</sub>`,
+        },
+        {
+          type: argType.REGISTER,
+          value: `ω<sub>${args?.secondRegisterIndex}</sub>`,
+        },
+        {
+          type: argType.REGISTER,
+          value: `ω<sub>${args?.thirdRegisterIndex}</sub>`,
+        },
+      ];
     default:
-      return "err";
+      return null;
   }
 };
diff --git a/src/context/NumeralSystem.tsx b/src/context/NumeralSystem.tsx
index e9a6cb3d..a36c2bc6 100644
--- a/src/context/NumeralSystem.tsx
+++ b/src/context/NumeralSystem.tsx
@@ -1,4 +1,5 @@
 export enum NumeralSystem {
   DECIMAL,
   HEXADECIMAL,
+  BINARY,
 }