diff --git a/src/components/run-code.tsx b/src/components/run-code.tsx
index 6e4af52..d1b920c 100644
--- a/src/components/run-code.tsx
+++ b/src/components/run-code.tsx
@@ -1,6 +1,11 @@
+"use client";
+
 import { cn } from "@/lib/utils";
-import { PlayIcon } from "lucide-react";
+import { useState } from "react";
+import { judge } from "@/app/actions/judge";
 import { Button } from "@/components/ui/button";
+import { LoaderCircleIcon, PlayIcon } from "lucide-react";
+import { useCodeEditorState } from "@/store/useCodeEditor";
 
 interface RunCodeProps {
   className?: string;
@@ -10,14 +15,44 @@ export default function RunCode({
   className,
   ...props
 }: RunCodeProps) {
+  const { language, editor } = useCodeEditorState();
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const handleJudge = async () => {
+    if (!editor) return;
+
+    const code = editor.getValue() || "";
+    setIsLoading(true);
+
+    try {
+      const judgeResult = await judge(language, code);
+      console.log(judgeResult);
+    } catch (error) {
+      console.error("Error occurred while judging the code:");
+      console.error(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   return (
     <Button
       {...props}
       variant="secondary"
       className={cn("h-8 px-3 py-1.5", className)}
+      onClick={handleJudge}
+      disabled={isLoading}
     >
-      <PlayIcon className="-ms-1 opacity-60" size={16} aria-hidden="true" />
-      Run
+      {isLoading ? (
+        <LoaderCircleIcon
+          className="-ms-1 opacity-60 animate-spin"
+          size={16}
+          aria-hidden="true"
+        />
+      ) : (
+        <PlayIcon className="-ms-1 opacity-60" size={16} aria-hidden="true" />
+      )}
+      {isLoading ? "Running..." : "Run"}
     </Button>
   );
 }