diff --git a/web-devtools/.env.local.example b/web-devtools/.env.local.example
index 7e7efe9fa..acab203c2 100644
--- a/web-devtools/.env.local.example
+++ b/web-devtools/.env.local.example
@@ -2,4 +2,5 @@
 export NEXT_PUBLIC_ALCHEMY_API_KEY=
 export NEXT_PUBLIC_DEPLOYMENT=devnet
 export NEXT_PUBLIC_CORE_SUBGRAPH=https://api.studio.thegraph.com/query/61738/kleros-v2-core-devnet/version/latest
-export NEXT_PUBLIC_DRT_ARBSEPOLIA_SUBGRAPH=https://api.studio.thegraph.com/query/61738/kleros-v2-drt-arbisep-devnet/version/latest
\ No newline at end of file
+export NEXT_PUBLIC_DRT_ARBSEPOLIA_SUBGRAPH=https://api.studio.thegraph.com/query/61738/kleros-v2-drt-arbisep-devnet/version/latest
+export NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=
\ No newline at end of file
diff --git a/web-devtools/package.json b/web-devtools/package.json
index 4513cdc6b..b01cede32 100644
--- a/web-devtools/package.json
+++ b/web-devtools/package.json
@@ -30,19 +30,28 @@
     "@types/node": "^20",
     "@types/react": "18.2.0",
     "@types/react-dom": "^18.2.18",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
+    "@typescript-eslint/utils": "^5.62.0",
     "@wagmi/cli": "^2.0.3",
+    "eslint": "^8.56.0",
     "eslint-config-next": "^14.2.5",
+    "eslint-config-prettier": "^8.10.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "ts-node": "^10.9.2",
     "typescript": "^5.5.3"
   },
   "dependencies": {
     "@kleros/kleros-sdk": "workspace:^",
-    "@kleros/ui-components-library": "^2.10.0",
+    "@kleros/ui-components-library": "^2.15.0",
     "graphql": "^16.9.0",
     "next": "14.2.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-markdown": "^8.0.7",
+    "react-toastify": "^10.0.5",
     "typewriter-effect": "^2.21.0",
     "vanilla-jsoneditor": "^0.21.4",
     "viem": "^2.1.0",
diff --git a/web-devtools/src/app/(main)/layout.tsx b/web-devtools/src/app/(main)/layout.tsx
index dcd0d0f0f..3d754b11f 100644
--- a/web-devtools/src/app/(main)/layout.tsx
+++ b/web-devtools/src/app/(main)/layout.tsx
@@ -2,22 +2,35 @@
 import React from "react";
 import styled from "styled-components";
 
+import "react-toastify/dist/ReactToastify.css";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ToastContainer } from "react-toastify";
 
 import GraphqlBatcherProvider from "context/GraphqlBatcher";
+import Web3Provider from "context/Web3Provider";
 
 const Main = styled.main`
   min-height: calc(100vh - 130px);
 `;
 const queryClient = new QueryClient();
 
+const StyledToastContainer = styled(ToastContainer)`
+  padding: 16px;
+  padding-top: 70px;
+`;
+
 const Layout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
   return (
-    <QueryClientProvider client={queryClient}>
-      <GraphqlBatcherProvider>
-        <Main>{children}</Main>
-      </GraphqlBatcherProvider>
-    </QueryClientProvider>
+    <Web3Provider>
+      <QueryClientProvider client={queryClient}>
+        <GraphqlBatcherProvider>
+          <Main>
+            <StyledToastContainer />
+            {children}
+          </Main>
+        </GraphqlBatcherProvider>
+      </QueryClientProvider>
+    </Web3Provider>
   );
 };
 
diff --git a/web-devtools/src/app/(main)/ruler/ChangeDeveloper.tsx b/web-devtools/src/app/(main)/ruler/ChangeDeveloper.tsx
index 8d9624ff7..6b6f62edc 100644
--- a/web-devtools/src/app/(main)/ruler/ChangeDeveloper.tsx
+++ b/web-devtools/src/app/(main)/ruler/ChangeDeveloper.tsx
@@ -1,11 +1,20 @@
-import React from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import styled from "styled-components";
 
+import { Address, isAddress } from "viem";
+import { useAccount, usePublicClient } from "wagmi";
+
 import { Button } from "@kleros/ui-components-library";
 
+import { useRulerContext } from "context/RulerContext";
+import { useSimulateKlerosCoreRulerChangeRuler, useWriteKlerosCoreRulerChangeRuler } from "hooks/contracts/generated";
+import { isUndefined } from "utils/isUndefined";
+import { wrapWithToast } from "utils/wrapWithToast";
+
 import LabeledInput from "components/LabeledInput";
 
 import Header from "./Header";
+import { DEFAULT_CHAIN } from "consts/chains";
 
 const Container = styled.div`
   width: 100%;
@@ -25,14 +34,60 @@ const StyledLabel = styled.label`
 `;
 
 const ChangeDeveloper: React.FC = () => {
+  const { isConnected, chainId } = useAccount();
+  const { arbitrable, currentDeveloper, refetchData } = useRulerContext();
+  const [newDeveloper, setNewDeveloper] = useState("");
+  const [isChanging, setIsChanging] = useState(false);
+  const publicClient = usePublicClient();
+
+  const isValid = useMemo(() => newDeveloper === "" || isAddress(newDeveloper), [newDeveloper]);
+
+  const {
+    data: changeRulerConfig,
+    isLoading,
+    isError,
+  } = useSimulateKlerosCoreRulerChangeRuler({
+    query: {
+      enabled: !isUndefined(arbitrable) && !isUndefined(newDeveloper) && isAddress(newDeveloper),
+    },
+    args: [(arbitrable ?? "") as Address, newDeveloper as Address],
+  });
+
+  const { writeContractAsync: changeRuler } = useWriteKlerosCoreRulerChangeRuler();
+
+  const handleClick = useCallback(() => {
+    if (!publicClient || !changeRulerConfig) return;
+    setIsChanging(true);
+    wrapWithToast(async () => changeRuler(changeRulerConfig.request), publicClient)
+      .then(() => refetchData())
+      .finally(() => setIsChanging(false));
+  }, [publicClient, changeRulerConfig, changeRuler, refetchData]);
+
+  const isDisabled = useMemo(
+    () =>
+      !isConnected ||
+      chainId !== DEFAULT_CHAIN ||
+      !changeRulerConfig ||
+      isError ||
+      isLoading ||
+      isChanging ||
+      isUndefined(arbitrable) ||
+      !isValid,
+    [changeRulerConfig, isError, isLoading, isChanging, arbitrable, isValid, isConnected, chainId]
+  );
   return (
     <Container>
-      <Header text="Developer" />
+      <Header text="Developer" tooltipMsg="Address of the current ruler of the selected arbitrable" />
       <InputContainer>
-        <StyledLabel>Current Developer : 0xbe8d95497E53aB41d5A45CC8def90d0e59b49f99</StyledLabel>
-        <LabeledInput label="New Developer" />
+        <StyledLabel>Current Developer : {currentDeveloper ?? "None"}</StyledLabel>
+        <LabeledInput
+          label="New Developer"
+          onChange={(e) => setNewDeveloper(e.target.value)}
+          message={isValid ? "" : "Invalid Address"}
+          variant={isValid ? "" : "error"}
+        />
       </InputContainer>
-      <Button text="Update" />
+      <Button text="Update" onClick={handleClick} isLoading={isLoading || isChanging} disabled={isDisabled} />
     </Container>
   );
 };
diff --git a/web-devtools/src/app/(main)/ruler/Header.tsx b/web-devtools/src/app/(main)/ruler/Header.tsx
index bd462f1a1..0b86d0419 100644
--- a/web-devtools/src/app/(main)/ruler/Header.tsx
+++ b/web-devtools/src/app/(main)/ruler/Header.tsx
@@ -1,11 +1,25 @@
 import React from "react";
 import styled from "styled-components";
+import WithHelpTooltip from "components/WithHelpTooltip";
 
-const Container = styled.h2`
+const Container = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
   border-bottom: 1px solid ${({ theme }) => theme.klerosUIComponentsStroke};
   padding: 8px 0px;
 `;
 
-const Header: React.FC<{ text: string }> = ({ text }) => <Container>{text}</Container>;
+const Title = styled.h2`
+  margin: 0;
+`;
+
+const Header: React.FC<{ text: string; tooltipMsg: string }> = ({ text, tooltipMsg }) => (
+  <Container>
+    <WithHelpTooltip tooltipMsg={tooltipMsg} place="right">
+      <Title>{text}</Title>
+    </WithHelpTooltip>
+  </Container>
+);
 
 export default Header;
diff --git a/web-devtools/src/app/(main)/ruler/ManualRuling.tsx b/web-devtools/src/app/(main)/ruler/ManualRuling.tsx
index 477b1476f..0354fc7aa 100644
--- a/web-devtools/src/app/(main)/ruler/ManualRuling.tsx
+++ b/web-devtools/src/app/(main)/ruler/ManualRuling.tsx
@@ -1,11 +1,26 @@
-import React, { useState } from "react";
+"use client";
+import React, { useCallback, useMemo, useState } from "react";
 import styled from "styled-components";
 
+import { RULING_MODE } from "consts";
+import { useAccount, usePublicClient } from "wagmi";
+
 import { Button } from "@kleros/ui-components-library";
 
+import { useRulerContext } from "context/RulerContext";
+import {
+  useSimulateKlerosCoreRulerChangeRulingModeToManual,
+  useSimulateKlerosCoreRulerExecuteRuling,
+  useWriteKlerosCoreRulerChangeRulingModeToManual,
+  useWriteKlerosCoreRulerExecuteRuling,
+} from "hooks/contracts/generated";
+import { isUndefined } from "utils/isUndefined";
+import { wrapWithToast } from "utils/wrapWithToast";
+
 import LabeledInput from "components/LabeledInput";
 
 import Header from "./Header";
+import { DEFAULT_CHAIN } from "consts/chains";
 
 const Container = styled.div`
   width: 100%;
@@ -22,14 +37,75 @@ const SelectContainer = styled.div`
 `;
 
 const ManualRuling: React.FC = () => {
-  const [tie, setTie] = useState<boolean>(false);
-  const [overriden, setOverriden] = useState<boolean>(false);
+  const { isConnected, chainId } = useAccount();
+  const { arbitrable, arbitrableSettings } = useRulerContext();
+  const [isSending, setIsSending] = useState<boolean>(false);
+  const [tie, setTie] = useState(arbitrableSettings?.tied ?? false);
+  const [overridden, setOverridden] = useState(arbitrableSettings?.overridden ?? false);
+  const [ruling, setRuling] = useState(arbitrableSettings?.ruling);
   const [disputeId, setDisputeId] = useState<number>();
-  const [ruling, setRuling] = useState<number>();
+
+  const publicClient = usePublicClient();
+
+  const { data: manualModeConfig } = useSimulateKlerosCoreRulerChangeRulingModeToManual({
+    query: {
+      enabled: arbitrableSettings?.rulingMode !== RULING_MODE.Manual && !isUndefined(arbitrable),
+    },
+    args: [arbitrable as `0x${string}`],
+  });
+  const { writeContractAsync: changeToManualMode } = useWriteKlerosCoreRulerChangeRulingModeToManual();
+
+  const isDisabled = useMemo(() => {
+    return (
+      !isConnected ||
+      chainId !== DEFAULT_CHAIN ||
+      isUndefined(disputeId) ||
+      isUndefined(ruling) ||
+      isUndefined(arbitrable)
+    );
+  }, [disputeId, ruling, arbitrable, isConnected, chainId]);
+
+  const {
+    data: executeConfig,
+    isLoading: isLoadingExecuteConfig,
+    isError,
+  } = useSimulateKlerosCoreRulerExecuteRuling({
+    query: {
+      enabled: arbitrableSettings?.rulingMode === RULING_MODE.Manual && !isUndefined(arbitrable) && !isDisabled,
+    },
+    args: [BigInt(disputeId ?? 0), BigInt(ruling ?? 0), tie, overridden],
+  });
+
+  const { writeContractAsync: executeRuling } = useWriteKlerosCoreRulerExecuteRuling();
+
+  const handleRuling = useCallback(async () => {
+    if (!publicClient) return;
+    if (arbitrableSettings?.rulingMode !== RULING_MODE.Manual) {
+      if (!manualModeConfig) return;
+      setIsSending(true);
+
+      wrapWithToast(async () => await changeToManualMode(manualModeConfig.request), publicClient)
+        .then(async (res) => {
+          if (res.status && executeConfig) {
+            wrapWithToast(async () => await executeRuling(executeConfig.request), publicClient);
+          }
+        })
+        .finally(() => setIsSending(false));
+    } else if (executeConfig) {
+      setIsSending(true);
+
+      wrapWithToast(async () => await executeRuling(executeConfig.request), publicClient).finally(() =>
+        setIsSending(false)
+      );
+    }
+  }, [publicClient, executeConfig, manualModeConfig, arbitrableSettings, changeToManualMode, executeRuling]);
 
   return (
     <Container>
-      <Header text="Manual Ruling" />
+      <Header
+        text="Manual Ruling"
+        tooltipMsg="Provide Manual ruling for the arbitrator. This operation will change the ruling mode to Manual, if the ruling mode is not Manual"
+      />
       <SelectContainer>
         <LabeledInput
           label="Dispute ID"
@@ -43,12 +119,16 @@ const ManualRuling: React.FC = () => {
         <LabeledInput
           label="Overidden"
           inputType="checkbox"
-          checked={overriden}
-          onChange={() => setOverriden((prev) => !prev)}
+          checked={overridden}
+          onChange={() => setOverridden((prev) => !prev)}
         />
       </SelectContainer>
-
-      <Button text="Rule" />
+      <Button
+        text="Rule"
+        onClick={handleRuling}
+        isLoading={isLoadingExecuteConfig || isSending}
+        disabled={isDisabled || isError || isSending || isLoadingExecuteConfig}
+      />
     </Container>
   );
 };
diff --git a/web-devtools/src/app/(main)/ruler/RulingModes.tsx b/web-devtools/src/app/(main)/ruler/RulingModes.tsx
index 8b9f1db4e..b119ea179 100644
--- a/web-devtools/src/app/(main)/ruler/RulingModes.tsx
+++ b/web-devtools/src/app/(main)/ruler/RulingModes.tsx
@@ -1,13 +1,27 @@
-import React, { useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import styled from "styled-components";
 
 import { RULING_MODE } from "consts";
+import { useAccount, usePublicClient } from "wagmi";
 
 import { Button, Radio } from "@kleros/ui-components-library";
 
+import { useRulerContext } from "context/RulerContext";
+import {
+  useSimulateKlerosCoreRulerChangeRulingModeToAutomaticPreset,
+  useSimulateKlerosCoreRulerChangeRulingModeToAutomaticRandom,
+  useSimulateKlerosCoreRulerChangeRulingModeToManual,
+  useWriteKlerosCoreRulerChangeRulingModeToAutomaticPreset,
+  useWriteKlerosCoreRulerChangeRulingModeToAutomaticRandom,
+  useWriteKlerosCoreRulerChangeRulingModeToManual,
+} from "hooks/contracts/generated";
+import { isUndefined } from "utils/isUndefined";
+import { wrapWithToast } from "utils/wrapWithToast";
+
 import LabeledInput from "components/LabeledInput";
 
 import Header from "./Header";
+import { DEFAULT_CHAIN } from "consts/chains";
 
 const Container = styled.div`
   width: 100%;
@@ -31,15 +45,180 @@ const AutomaticPresetInputsContainer = styled.div`
   flex-wrap: wrap;
 `;
 
+const StyledLabel = styled.label``;
+
 const RulingModes: React.FC = () => {
-  const [tie, setTie] = useState<boolean>(false);
-  const [overriden, setOverriden] = useState<boolean>(false);
-  const [ruling, setRuling] = useState<number>();
-  const [rulingMode, setRulingMode] = useState<RULING_MODE | null>(null);
+  const { isConnected, chainId } = useAccount();
+  const { arbitrable, arbitrableSettings } = useRulerContext();
+  const [rulingMode, setRulingMode] = useState<RULING_MODE>(RULING_MODE.Uninitialized);
+  const [tie, setTie] = useState(false);
+  const [overridden, setOverridden] = useState(false);
+  const [ruling, setRuling] = useState(0);
+  const [isSending, setIsSending] = useState(false);
+
+  const publicClient = usePublicClient();
+
+  const {
+    data: manualModeConfig,
+    isError: manualModeConfigError,
+    isLoading: isLoadingManualConfig,
+  } = useSimulateKlerosCoreRulerChangeRulingModeToManual({
+    query: {
+      enabled:
+        rulingMode === RULING_MODE.Manual &&
+        !isUndefined(arbitrable) &&
+        arbitrableSettings?.rulingMode !== RULING_MODE.Manual,
+    },
+    args: [arbitrable as `0x${string}`],
+  });
+  const { writeContractAsync: changeToManualMode, isPending: isChangingToManualMode } =
+    useWriteKlerosCoreRulerChangeRulingModeToManual();
+
+  const {
+    data: automaticPresetConfig,
+    isError: automaticPresetConfigError,
+    isLoading: isLoadingAutomaticPresetConfig,
+  } = useSimulateKlerosCoreRulerChangeRulingModeToAutomaticPreset({
+    query: {
+      enabled:
+        rulingMode === RULING_MODE.AutomaticPreset &&
+        !isUndefined(arbitrable) &&
+        (arbitrableSettings?.rulingMode !== RULING_MODE.AutomaticPreset ||
+          arbitrableSettings?.ruling !== ruling ||
+          arbitrableSettings?.tied !== tie ||
+          arbitrableSettings?.overridden !== overridden),
+    },
+    args: [arbitrable as `0x${string}`, BigInt(ruling), tie, overridden],
+  });
+  const { writeContractAsync: changeToAutomaticPreset, isPending: isChangingToAutomaticPreset } =
+    useWriteKlerosCoreRulerChangeRulingModeToAutomaticPreset();
+
+  const {
+    data: automaticRandomConfig,
+    isError: automaticRandomConfigError,
+    isLoading: isLoadingAutomaticRandomConfig,
+  } = useSimulateKlerosCoreRulerChangeRulingModeToAutomaticRandom({
+    query: {
+      enabled:
+        rulingMode === RULING_MODE.AutomaticRandom &&
+        !isUndefined(arbitrable) &&
+        arbitrableSettings?.rulingMode !== RULING_MODE.AutomaticRandom,
+    },
+    args: [arbitrable as `0x${string}`],
+  });
+  const { writeContractAsync: changeToAutomaticRandom, isPending: isChangingToAutomaticRandom } =
+    useWriteKlerosCoreRulerChangeRulingModeToAutomaticRandom();
+
+  const isDisabled = useMemo(() => {
+    if (!arbitrable || !isConnected || chainId !== DEFAULT_CHAIN) return true;
+    switch (rulingMode) {
+      case RULING_MODE.Manual:
+        return (
+          rulingMode === arbitrableSettings?.rulingMode ||
+          manualModeConfigError ||
+          isChangingToManualMode ||
+          isLoadingManualConfig
+        );
+      case RULING_MODE.AutomaticPreset:
+        return (
+          automaticPresetConfigError ||
+          isChangingToAutomaticPreset ||
+          isLoadingAutomaticPresetConfig ||
+          (rulingMode === arbitrableSettings?.rulingMode &&
+            arbitrableSettings?.ruling === ruling &&
+            arbitrableSettings?.tied === tie &&
+            arbitrableSettings?.overridden === overridden)
+        );
+      default:
+        return (
+          rulingMode === arbitrableSettings?.rulingMode ||
+          automaticRandomConfigError ||
+          isChangingToAutomaticRandom ||
+          isLoadingAutomaticRandomConfig
+        );
+    }
+  }, [
+    arbitrable,
+    rulingMode,
+    manualModeConfigError,
+    isChangingToManualMode,
+    automaticPresetConfigError,
+    isChangingToAutomaticPreset,
+    automaticRandomConfigError,
+    isChangingToAutomaticRandom,
+    isLoadingManualConfig,
+    isLoadingAutomaticRandomConfig,
+    isLoadingAutomaticPresetConfig,
+    arbitrableSettings,
+    tie,
+    overridden,
+    ruling,
+    isConnected,
+    chainId,
+  ]);
+
+  const isLoading = useMemo(() => {
+    switch (rulingMode) {
+      case RULING_MODE.Manual:
+        return isChangingToManualMode || isLoadingManualConfig;
+      case RULING_MODE.AutomaticPreset:
+        return isChangingToAutomaticPreset || isLoadingAutomaticPresetConfig;
+      default:
+        return isChangingToAutomaticRandom || isLoadingAutomaticRandomConfig;
+    }
+  }, [
+    rulingMode,
+    isChangingToManualMode,
+    isChangingToAutomaticPreset,
+    isChangingToAutomaticRandom,
+    isLoadingManualConfig,
+    isLoadingAutomaticRandomConfig,
+    isLoadingAutomaticPresetConfig,
+  ]);
+
+  const handleUpdate = useCallback(() => {
+    if (!publicClient) return;
+    setIsSending(true);
+    switch (rulingMode) {
+      case RULING_MODE.Manual:
+        if (!manualModeConfig) return;
+        wrapWithToast(async () => await changeToManualMode(manualModeConfig.request), publicClient).finally(() =>
+          setIsSending(false)
+        );
+        return;
+      case RULING_MODE.AutomaticPreset:
+        if (!automaticPresetConfig) return;
+        wrapWithToast(async () => await changeToAutomaticPreset(automaticPresetConfig.request), publicClient).finally(
+          () => setIsSending(false)
+        );
+        return;
+      default:
+        if (!automaticRandomConfig) return;
+        wrapWithToast(async () => await changeToAutomaticRandom(automaticRandomConfig.request), publicClient).finally(
+          () => setIsSending(false)
+        );
+        return;
+    }
+  }, [
+    rulingMode,
+    automaticPresetConfig,
+    manualModeConfig,
+    automaticRandomConfig,
+    publicClient,
+    changeToAutomaticPreset,
+    changeToAutomaticRandom,
+    changeToManualMode,
+  ]);
 
   return (
     <Container>
-      <Header text="Ruling Mode" />
+      <Header
+        text="Ruling Mode"
+        tooltipMsg="Current Ruling mode of the arbitrator. Learn more about ruling modes here."
+      />
+      <StyledLabel>
+        Current mode: <small>{getRulingModeText(arbitrableSettings?.rulingMode)}</small>
+      </StyledLabel>
       <SelectContainer>
         <Radio
           small
@@ -52,9 +231,10 @@ const RulingModes: React.FC = () => {
         <Radio
           small
           label="Random Preset"
-          checked={rulingMode === RULING_MODE.RandomPreset}
+          defaultChecked={arbitrableSettings?.rulingMode === RULING_MODE.AutomaticRandom}
+          checked={rulingMode === RULING_MODE.AutomaticRandom}
           onChange={() => {
-            setRulingMode(RULING_MODE.RandomPreset);
+            setRulingMode(RULING_MODE.AutomaticRandom);
           }}
         />
         <Radio
@@ -65,26 +245,54 @@ const RulingModes: React.FC = () => {
             setRulingMode(RULING_MODE.AutomaticPreset);
           }}
         />
-        <AutomaticPresetInputsContainer>
-          <LabeledInput
-            label="Ruling"
-            type="number"
-            value={ruling}
-            onChange={(e) => setRuling(Number(e.target.value))}
-          />
-          <LabeledInput label="Tie" inputType="checkbox" checked={tie} onChange={() => setTie((prev) => !prev)} />
-          <LabeledInput
-            label="Overidden"
-            inputType="checkbox"
-            checked={overriden}
-            onChange={() => setOverriden((prev) => !prev)}
-          />
-        </AutomaticPresetInputsContainer>
+        {rulingMode === RULING_MODE.AutomaticPreset && (
+          <AutomaticPresetInputsContainer>
+            <LabeledInput
+              label="Ruling"
+              type="number"
+              value={ruling}
+              onChange={(e) => setRuling(Number(e.target.value))}
+              disabled={rulingMode !== RULING_MODE.AutomaticPreset}
+            />
+            <LabeledInput
+              label="Tie"
+              inputType="checkbox"
+              checked={tie}
+              onChange={() => setTie((prev) => !prev)}
+              disabled={rulingMode !== RULING_MODE.AutomaticPreset}
+            />
+            <LabeledInput
+              label="Overidden"
+              inputType="checkbox"
+              checked={overridden}
+              onChange={() => setOverridden((prev) => !prev)}
+              disabled={rulingMode !== RULING_MODE.AutomaticPreset}
+            />
+          </AutomaticPresetInputsContainer>
+        )}
       </SelectContainer>
-
-      <Button text="Update" />
+      <Button
+        text="Update"
+        onClick={handleUpdate}
+        isLoading={isLoading || isSending}
+        disabled={isDisabled || isSending}
+      />
     </Container>
   );
 };
 
+const getRulingModeText = (mode?: RULING_MODE) => {
+  if (!mode) return "Uninitialized";
+  switch (mode) {
+    case RULING_MODE.Manual:
+      return "Manual";
+    case RULING_MODE.AutomaticRandom:
+      return "Automatic Random";
+    case RULING_MODE.AutomaticPreset:
+      return "Automatic Preset";
+    default:
+      return "Uninitialized";
+  }
+};
+
 export default RulingModes;
diff --git a/web-devtools/src/app/(main)/ruler/SelectArbitrable.tsx b/web-devtools/src/app/(main)/ruler/SelectArbitrable.tsx
new file mode 100644
index 000000000..c6647227a
--- /dev/null
+++ b/web-devtools/src/app/(main)/ruler/SelectArbitrable.tsx
@@ -0,0 +1,131 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import styled, { css } from "styled-components";
+
+import { Address } from "viem";
+
+import { Copiable, DropdownSelect, Field } from "@kleros/ui-components-library";
+
+import { useRulerContext } from "context/RulerContext";
+import { shortenAddress } from "utils/shortenAddress";
+import { klerosCoreAddress } from "hooks/contracts/generated";
+import { DEFAULT_CHAIN } from "consts/chains";
+import { landscapeStyle } from "styles/landscapeStyle";
+
+const Container = styled.div`
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  gap: 16px;
+  align-items: center;
+  margin: 16px 0;
+  padding: 8px 16px;
+  border-radius: 3px;
+  background-color: ${({ theme }) => theme.klerosUIComponentsWhiteBackground};
+`;
+
+const AddressContainer = styled.div`
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+`;
+
+const Arbitrables = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+`;
+const StyledLabel = styled.label``;
+
+const SelectContainer = styled.div`
+  position: relative;
+`;
+
+const StyledField = styled(Field)`
+  width: auto;
+  ${landscapeStyle(
+    () => css`
+      min-width: 250px;
+    `
+  )}
+`;
+
+const StyledDropdown = styled(DropdownSelect)`
+  position: absolute;
+  z-index: 0;
+  top: 40px;
+  left: 0;
+  width: 100%;
+  > button {
+    display: none;
+  }
+  > div {
+    z-index: 1;
+    width: 100%;
+    > div {
+      width: 100%;
+    }
+  }
+  .simplebar-content {
+    > div {
+      width: 100%;
+    }
+  }
+`;
+
+const SelectArbitrable: React.FC = () => {
+  const { arbitrable, setArbitrable, knownArbitrables } = useRulerContext();
+  const ref = useRef<HTMLDivElement>(null);
+  const [isClient, setIsClient] = useState(false);
+
+  // hydration workaround, local storage is inevitably going to be different, so knownArbitrables will be different
+  // server and client side
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  const items = useMemo(
+    () =>
+      !isClient ? [] : knownArbitrables.map((arbitrable) => ({ text: shortenAddress(arbitrable), value: arbitrable })),
+    [isClient, knownArbitrables]
+  );
+
+  const openDropdown = useCallback(() => {
+    if (!ref.current || knownArbitrables.length === 0) return;
+
+    const child = ref.current.firstElementChild?.firstChild as HTMLButtonElement;
+    child.click();
+  }, [knownArbitrables, ref]);
+
+  return (
+    <Container>
+      <AddressContainer>
+        <StyledLabel>Ruler Address:</StyledLabel>
+        <Copiable copiableContent={klerosCoreAddress[DEFAULT_CHAIN]} info="Ruler Address">
+          <StyledLabel>{shortenAddress(klerosCoreAddress[DEFAULT_CHAIN])}</StyledLabel>
+        </Copiable>
+      </AddressContainer>
+      <Arbitrables suppressHydrationWarning={true}>
+        <StyledLabel>Arbitrable:</StyledLabel>
+        <SelectContainer ref={ref}>
+          <StyledDropdown defaultValue={arbitrable} items={items} callback={(val) => setArbitrable(val as Address)} />
+          <StyledField
+            value={arbitrable}
+            placeholder="Enter Arbitrable"
+            onChange={(e) => {
+              setArbitrable(e.target.value as Address);
+            }}
+            onClick={openDropdown}
+          />
+        </SelectContainer>
+      </Arbitrables>
+    </Container>
+  );
+};
+
+export default SelectArbitrable;
diff --git a/web-devtools/src/app/(main)/ruler/page.tsx b/web-devtools/src/app/(main)/ruler/page.tsx
index ae455020e..e6f061969 100644
--- a/web-devtools/src/app/(main)/ruler/page.tsx
+++ b/web-devtools/src/app/(main)/ruler/page.tsx
@@ -1,16 +1,18 @@
 "use client";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 
-import { DropdownCascader } from "@kleros/ui-components-library";
-
-import { SelectArbitrable } from "utils/dummyData";
+import RulerContextProvider from "context/RulerContext";
 
 import { responsiveSize } from "styles/responsiveSize";
 
 import ChangeDeveloper from "./ChangeDeveloper";
 import ManualRuling from "./ManualRuling";
 import RulingModes from "./RulingModes";
+import SelectArbitrable from "./SelectArbitrable";
+import ConnectWallet from "components/ConnectWallet";
+import { useAccount } from "wagmi";
+import { DEFAULT_CHAIN } from "consts/chains";
 
 const Container = styled.div`
   min-height: calc(100vh - 160px);
@@ -22,42 +24,26 @@ const Container = styled.div`
   padding: ${responsiveSize(32, 72)} ${responsiveSize(16, 132)} ${responsiveSize(76, 96)};
 `;
 
-const Arbitrables = styled.div`
-  width: 100%;
-  background-color: ${({ theme }) => theme.klerosUIComponentsWhiteBackground};
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  margin: 16px 0;
-  padding: 8px 16px;
-  border-radius: 3px;
+const StyledConnectWallet = styled(ConnectWallet)`
+  align-self: flex-start;
 `;
 
-const StyledLabel = styled.label``;
-
 const Ruler: React.FC = () => {
-  return (
-    <Container>
-      <h1>Ruler</h1>
-
-      <Arbitrables>
-        <StyledLabel>Arbitrable:</StyledLabel>
-        <DropdownCascader
-          placeholder={"Select Arbitrable"}
-          onSelect={() => {
-            //todo;
-          }}
-          items={SelectArbitrable}
-        />
-      </Arbitrables>
+  const { isConnected, chainId } = useAccount();
+  const [isClient, setIsClient] = useState(false);
 
-      <RulingModes />
-      <ManualRuling />
-      <ChangeDeveloper />
-    </Container>
+  useEffect(() => setIsClient(true), []);
+  return (
+    <RulerContextProvider>
+      <Container>
+        <h1>Ruler</h1>
+        <SelectArbitrable />
+        {isClient && (!isConnected || chainId !== DEFAULT_CHAIN) ? <StyledConnectWallet /> : null}
+        <RulingModes />
+        <ManualRuling />
+        <ChangeDeveloper />
+      </Container>
+    </RulerContextProvider>
   );
 };
 export default Ruler;
diff --git a/web-devtools/src/assets/svgs/icons/help.svg b/web-devtools/src/assets/svgs/icons/help.svg
new file mode 100644
index 000000000..35cea89d6
--- /dev/null
+++ b/web-devtools/src/assets/svgs/icons/help.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+    d="M8 0C3.58203 0 0 3.58332 0 8C0 12.4193 3.58203 16 8 16C12.418 16 16 12.4193 16 8C16 3.58332 12.418 0 8 0ZM8 14.4516C4.43445 14.4516 1.54839 11.5667 1.54839 8C1.54839 4.43564 4.43458 1.54839 8 1.54839C11.5642 1.54839 14.4516 4.43455 14.4516 8C14.4516 11.5655 11.5667 14.4516 8 14.4516ZM11.4595 6.21935C11.4595 8.38232 9.12332 8.41561 9.12332 9.21494V9.41935C9.12332 9.63313 8.95 9.80645 8.73623 9.80645H7.26374C7.04997 9.80645 6.87664 9.63313 6.87664 9.41935V9.14003C6.87664 7.98697 7.75084 7.52603 8.41145 7.15564C8.97794 6.83806 9.32513 6.62206 9.32513 6.20148C9.32513 5.64516 8.61548 5.2759 8.04177 5.2759C7.29374 5.2759 6.94842 5.63 6.463 6.24265C6.33213 6.40781 6.09332 6.43848 5.92539 6.31116L5.02784 5.63058C4.8631 5.50568 4.82619 5.27361 4.94255 5.10274C5.70471 3.98358 6.67548 3.35484 8.1869 3.35484C9.76984 3.35484 11.4595 4.59045 11.4595 6.21935V6.21935ZM9.35484 11.6129C9.35484 12.36 8.74706 12.9677 8 12.9677C7.25294 12.9677 6.64516 12.36 6.64516 11.6129C6.64516 10.8658 7.25294 10.2581 8 10.2581C8.74706 10.2581 9.35484 10.8658 9.35484 11.6129Z"
+  />
+</svg>
diff --git a/web-devtools/src/components/ConnectWallet/index.tsx b/web-devtools/src/components/ConnectWallet/index.tsx
new file mode 100644
index 000000000..354940988
--- /dev/null
+++ b/web-devtools/src/components/ConnectWallet/index.tsx
@@ -0,0 +1,57 @@
+import React, { useCallback } from "react";
+
+import { useWeb3Modal, useWeb3ModalState } from "@web3modal/wagmi/react";
+import { useAccount, useSwitchChain } from "wagmi";
+
+import { Button } from "@kleros/ui-components-library";
+
+import { SUPPORTED_CHAINS, DEFAULT_CHAIN } from "consts/chains";
+
+export const SwitchChainButton: React.FC<{ className?: string }> = ({ className }) => {
+  // TODO isLoading is not documented, but exists in the type, might have changed to isPending
+  const { switchChain, isLoading } = useSwitchChain();
+  const handleSwitch = useCallback(() => {
+    if (!switchChain) {
+      console.error("Cannot switch network. Please do it manually.");
+      return;
+    }
+    try {
+      switchChain({ chainId: DEFAULT_CHAIN });
+    } catch (err) {
+      console.error(err);
+    }
+  }, [switchChain]);
+  return (
+    <Button
+      {...{ className }}
+      isLoading={isLoading}
+      disabled={isLoading}
+      text={`Switch to ${SUPPORTED_CHAINS[DEFAULT_CHAIN].name}`}
+      onClick={handleSwitch}
+    />
+  );
+};
+
+const ConnectButton: React.FC<{ className?: string }> = ({ className }) => {
+  const { open } = useWeb3Modal();
+  const { open: isOpen } = useWeb3ModalState();
+  return (
+    <Button
+      {...{ className }}
+      disabled={isOpen}
+      small
+      text={"Connect"}
+      onClick={async () => open({ view: "Connect" })}
+    />
+  );
+};
+
+const ConnectWallet: React.FC<{ className?: string }> = ({ className }) => {
+  const { isConnected, chainId } = useAccount();
+
+  if (isConnected && chainId !== DEFAULT_CHAIN) {
+    return <SwitchChainButton {...{ className }} />;
+  } else return <ConnectButton {...{ className }} />;
+};
+
+export default ConnectWallet;
diff --git a/web-devtools/src/components/EnsureChain.tsx b/web-devtools/src/components/EnsureChain.tsx
new file mode 100644
index 000000000..447863ebd
--- /dev/null
+++ b/web-devtools/src/components/EnsureChain.tsx
@@ -0,0 +1,24 @@
+import React, { useEffect, useState } from "react";
+
+import { useAccount } from "wagmi";
+
+import { DEFAULT_CHAIN } from "consts/chains";
+
+import ConnectWallet from "components/ConnectWallet";
+
+interface IEnsureChain {
+  children: React.ReactElement;
+  className?: string;
+}
+
+export const EnsureChain: React.FC<IEnsureChain> = ({ children, className }) => {
+  const { chainId } = useAccount();
+  const [isClient, setIsClient] = useState(false);
+
+  // hydration error workaround, in server pre-render chainId is undefined so it mismatches with the client's initial render
+  useEffect(() => setIsClient(true), []);
+
+  if (!isClient) return children;
+
+  return chainId === DEFAULT_CHAIN ? children : <ConnectWallet {...{ className }} />;
+};
diff --git a/web-devtools/src/components/LabeledInput.tsx b/web-devtools/src/components/LabeledInput.tsx
index 353bea8d4..9417d5558 100644
--- a/web-devtools/src/components/LabeledInput.tsx
+++ b/web-devtools/src/components/LabeledInput.tsx
@@ -1,38 +1,72 @@
-import React from "react";
-import styled from "styled-components";
+import React, { useRef } from "react";
+import styled, { css } from "styled-components";
 
 import { Checkbox, Field, type CheckboxProps, type FieldProps } from "@kleros/ui-components-library";
 
 const Container = styled.div`
   display: flex;
-  max-width: 300px;
-  min-width: 250px;
-  height: 50px;
+  align-items: center;
+  width: 280px;
+  max-width: 280px;
+  height: 46px;
+  position: relative;
+  box-sizing: border-box;
 `;
 
-const LabelContainer = styled.div`
+const ContainerCss = css`
   flex: 1;
+  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid ${({ theme }) => theme.klerosUIComponentsStroke};
-  border-radius: 6px 0px 0px 6px;
+`;
+
+const LabelContainer = styled.div<{ isField?: boolean }>`
+  ${ContainerCss}
+  border-radius: 3px 0px 0px 3px;
+  background-color: ${({ theme }) => theme.klerosUIComponentsLightBackground};
+  ${({ isField }) =>
+    isField &&
+    css`
+      width: 50%;
+      height: 45px;
+      position: absolute;
+      top: 0.5px;
+      left: 0.5px;
+      z-index: 1;
+    `}
 `;
 
 const Label = styled.label`
   color: ${({ theme }) => theme.klerosUIComponentsPrimaryText};
 `;
 
-const InputContainer = styled(LabelContainer)`
+const InputContainer = styled.div<{ isField?: boolean }>`
+  ${ContainerCss}
   position: relative;
-  border-radius: 0px 6px 6px 0px;
+  border-radius: 0px 3px 3px 0px;
   border-left: none;
+  background-color: ${({ theme }) => theme.klerosUIComponentsWhiteBackground};
+  ${({ isField }) =>
+    isField &&
+    css`
+      width: 100%;
+      z-index: 0;
+      border-radius: 3px;
+    `}
 `;
 
-const StyledField = styled(Field)`
-  width: auto;
+const StyledField = styled(Field)<{ paddingLeft?: number }>`
+  width: 100%;
   > input {
     border: none;
+    box-sizing: border-box;
+    ${({ paddingLeft = 0 }) =>
+      paddingLeft &&
+      css`
+        padding-left: ${paddingLeft + 8}px;
+      `}
   }
 `;
 
@@ -53,13 +87,14 @@ type DefaultInputProps = FieldProps & { inputType?: "field" };
 type LabeledInputProps = BaseProps & (CheckboxInputProps | DefaultInputProps);
 
 const LabeledInput: React.FC<LabeledInputProps> = ({ inputType = "field", label, ...props }) => {
+  const labelRef = useRef<HTMLDivElement>(null);
   return (
     <Container>
-      <LabelContainer>
+      <LabelContainer ref={labelRef} isField={inputType === "field"}>
         <Label>{label}</Label>
       </LabelContainer>
-      <InputContainer>
-        {inputType === "field" && <StyledField {...props} />}
+      <InputContainer isField={inputType === "field"}>
+        {inputType === "field" && <StyledField {...props} paddingLeft={labelRef.current?.offsetWidth} />}
         {inputType === "checkbox" && <StyledCheckbox label="&nbsp;" {...props} />}
       </InputContainer>
     </Container>
diff --git a/web-devtools/src/components/WithHelpTooltip.tsx b/web-devtools/src/components/WithHelpTooltip.tsx
new file mode 100644
index 000000000..7f0524a17
--- /dev/null
+++ b/web-devtools/src/components/WithHelpTooltip.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import styled, { css } from "styled-components";
+
+import { Tooltip } from "@kleros/ui-components-library";
+
+import _HelpIcon from "svgs/icons/help.svg";
+
+import { landscapeStyle } from "styles/landscapeStyle";
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const HelpIcon = styled(_HelpIcon)`
+  display: flex;
+  align-items: center;
+  height: 12px;
+  width: 12px;
+  fill: ${({ theme }) => theme.klerosUIComponentsSecondaryText};
+  margin: 0 0 0 8px;
+
+  ${landscapeStyle(
+    () => css`
+      height: 14px;
+      width: 14px;
+    `
+  )}
+`;
+
+interface IWithHelpTooltip {
+  tooltipMsg: string;
+  place?: "bottom" | "left" | "right" | "top";
+  children?: React.ReactNode;
+}
+
+const WithHelpTooltip: React.FC<IWithHelpTooltip> = ({ tooltipMsg, children, place }) => (
+  <Container>
+    {children}
+    <Tooltip small text={tooltipMsg} {...{ place }}>
+      <HelpIcon />
+    </Tooltip>
+  </Container>
+);
+
+export default WithHelpTooltip;
diff --git a/web-devtools/src/consts/chains.ts b/web-devtools/src/consts/chains.ts
index bd9a69284..e670d5c49 100644
--- a/web-devtools/src/consts/chains.ts
+++ b/web-devtools/src/consts/chains.ts
@@ -1,9 +1,7 @@
-import { Chain, arbitrum, mainnet, arbitrumSepolia, gnosisChiado } from "viem/chains";
-
-import { isProductionDeployment } from "./index";
+import { Chain, mainnet, arbitrumSepolia, gnosisChiado } from "viem/chains";
 
 export const SUPPORTED_CHAINS: Record<number, Chain> = {
-  [isProductionDeployment() ? arbitrum.id : arbitrumSepolia.id]: isProductionDeployment() ? arbitrum : arbitrumSepolia,
+  [arbitrumSepolia.id]: arbitrumSepolia,
 };
 
 export const QUERY_CHAINS: Record<number, Chain> = {
@@ -12,4 +10,4 @@ export const QUERY_CHAINS: Record<number, Chain> = {
 };
 
 export const ALL_CHAINS = [...Object.values(SUPPORTED_CHAINS), ...Object.values(QUERY_CHAINS)];
-export const DEFAULT_CHAIN = isProductionDeployment() ? arbitrum.id : arbitrumSepolia.id;
+export const DEFAULT_CHAIN = arbitrumSepolia.id;
diff --git a/web-devtools/src/consts/index.ts b/web-devtools/src/consts/index.ts
index 685df90de..f66cff574 100644
--- a/web-devtools/src/consts/index.ts
+++ b/web-devtools/src/consts/index.ts
@@ -6,7 +6,8 @@ export const INVALID_DISPUTE_DATA_ERROR = `The dispute data is not valid, please
 export const RPC_ERROR = `RPC Error: Unable to fetch dispute data. Please avoid voting.`;
 
 export enum RULING_MODE {
+  Uninitialized,
   Manual,
+  AutomaticRandom,
   AutomaticPreset,
-  RandomPreset,
 }
diff --git a/web-devtools/src/context/RulerContext.tsx b/web-devtools/src/context/RulerContext.tsx
new file mode 100644
index 000000000..b7ca795d4
--- /dev/null
+++ b/web-devtools/src/context/RulerContext.tsx
@@ -0,0 +1,99 @@
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+
+import { RULING_MODE } from "consts";
+import { Address, isAddress } from "viem";
+
+import { useReadKlerosCoreRulerRulers, useReadKlerosCoreRulerSettings } from "hooks/contracts/generated";
+import { useLocalStorage } from "hooks/useLocalStorage";
+import { isUndefined } from "utils/isUndefined";
+
+const REFETCH_INTERVAL = 5000;
+
+type ArbitrableSettings = {
+  rulingMode: RULING_MODE;
+  ruling: number;
+  tied: boolean;
+  overridden: boolean;
+};
+
+interface IRulerContext {
+  arbitrable?: Address;
+  setArbitrable: (arbitrable: Address) => void;
+  arbitrableSettings?: ArbitrableSettings;
+  currentDeveloper?: Address;
+  refetchData: () => void;
+  knownArbitrables: string[];
+}
+const RulerContext = createContext<IRulerContext | undefined>(undefined);
+
+const RulerContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [arbitrable, setArbitrable] = useState<Address>();
+  const [arbitrableSettings, setArbitrableSettings] = useState<ArbitrableSettings>();
+  const [knownArbitrables, setKnownArbitrables] = useLocalStorage<string[]>("knownArbitrables", []);
+
+  const { data: currentDeveloper, refetch: refetchDeveloper } = useReadKlerosCoreRulerRulers({
+    query: {
+      enabled: !isUndefined(arbitrable),
+      refetchInterval: REFETCH_INTERVAL,
+    },
+    args: [(arbitrable ?? "") as `0x${string}`],
+  });
+
+  const { data: arbitrableSettingsData, refetch: refetchArbitrableSettings } = useReadKlerosCoreRulerSettings({
+    query: {
+      enabled: !isUndefined(arbitrable),
+      refetchInterval: REFETCH_INTERVAL,
+    },
+    args: [(arbitrable ?? "") as `0x${string}`],
+  });
+
+  useEffect(() => {
+    if (!arbitrableSettingsData) return;
+    setArbitrableSettings({
+      rulingMode: arbitrableSettingsData[0],
+      ruling: Number(arbitrableSettingsData[1]),
+      tied: arbitrableSettingsData[2],
+      overridden: arbitrableSettingsData[3],
+    });
+  }, [arbitrableSettingsData]);
+
+  useEffect(() => {
+    if (isUndefined(arbitrable) || !isAddress(arbitrable) || knownArbitrables.includes(arbitrable?.toLowerCase()))
+      return;
+
+    setKnownArbitrables([...knownArbitrables, arbitrable?.toLowerCase()]);
+  }, [arbitrable, knownArbitrables, setKnownArbitrables]);
+
+  const refetchData = useCallback(() => {
+    refetchArbitrableSettings();
+    refetchDeveloper();
+  }, [refetchArbitrableSettings, refetchDeveloper]);
+
+  return (
+    <RulerContext.Provider
+      value={useMemo(
+        () => ({
+          arbitrable,
+          setArbitrable,
+          arbitrableSettings,
+          currentDeveloper,
+          refetchData,
+          knownArbitrables,
+        }),
+        [arbitrable, setArbitrable, arbitrableSettings, currentDeveloper, refetchData, knownArbitrables]
+      )}
+    >
+      {children}
+    </RulerContext.Provider>
+  );
+};
+
+export const useRulerContext = () => {
+  const context = useContext(RulerContext);
+  if (!context) {
+    throw new Error("Context Provider not found.");
+  }
+  return context;
+};
+
+export default RulerContextProvider;
diff --git a/web-devtools/src/context/Web3Provider.tsx b/web-devtools/src/context/Web3Provider.tsx
new file mode 100644
index 000000000..21e10e98b
--- /dev/null
+++ b/web-devtools/src/context/Web3Provider.tsx
@@ -0,0 +1,60 @@
+import React from "react";
+
+import { createWeb3Modal } from "@web3modal/wagmi/react";
+import { type Chain } from "viem";
+import { createConfig, fallback, http, WagmiProvider, webSocket } from "wagmi";
+import { mainnet, arbitrumSepolia } from "wagmi/chains";
+import { walletConnect } from "wagmi/connectors";
+
+import { ALL_CHAINS } from "consts/chains";
+
+import { theme } from "styles/Theme";
+
+const alchemyApiKey = process.env.NEXT_PUBLIC_ALCHEMY_API_KEY ?? "";
+
+// https://github.com/alchemyplatform/alchemy-sdk-js/blob/96b3f62/src/types/types.ts#L98-L119
+const alchemyToViemChain = {
+  [arbitrumSepolia.id]: "arb-sepolia",
+  [mainnet.id]: "eth-mainnet",
+};
+
+type AlchemyProtocol = "https" | "wss";
+
+// https://github.com/alchemyplatform/alchemy-sdk-js/blob/96b3f62/src/util/const.ts#L16-L18
+const alchemyURL = (protocol: AlchemyProtocol, chainId: number) =>
+  `${protocol}://${alchemyToViemChain[chainId]}.g.alchemy.com/v2/${alchemyApiKey}`;
+
+export const getTransports = () => {
+  const alchemyTransport = (chain: Chain) =>
+    fallback([http(alchemyURL("https", chain.id)), webSocket(alchemyURL("wss", chain.id))]);
+
+  return {
+    [arbitrumSepolia.id]: alchemyTransport(arbitrumSepolia),
+    [mainnet.id]: alchemyTransport(mainnet), // Always enabled for ENS resolution
+  };
+};
+
+const chains = ALL_CHAINS as [Chain, ...Chain[]];
+const transports = getTransports();
+const projectId = process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID ?? "";
+const wagmiConfig = createConfig({
+  chains,
+  transports,
+  connectors: [walletConnect({ projectId })],
+});
+
+createWeb3Modal({
+  wagmiConfig,
+  projectId,
+  defaultChain: arbitrumSepolia,
+  themeVariables: {
+    "--w3m-color-mix": theme.klerosUIComponentsPrimaryPurple,
+    "--w3m-color-mix-strength": 20,
+  },
+});
+
+const Web3Provider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return <WagmiProvider config={wagmiConfig}> {children} </WagmiProvider>;
+};
+
+export default Web3Provider;
diff --git a/web-devtools/src/hooks/useLocalStorage.ts b/web-devtools/src/hooks/useLocalStorage.ts
new file mode 100644
index 000000000..ae42cadcb
--- /dev/null
+++ b/web-devtools/src/hooks/useLocalStorage.ts
@@ -0,0 +1,22 @@
+import { useState } from "react";
+
+export function useLocalStorage<T>(keyName: string, defaultValue: T) {
+  const [storedValue, setStoredValue] = useState(() => {
+    try {
+      const value = window.localStorage.getItem(keyName);
+      return value ? JSON.parse(value) : defaultValue;
+    } catch (err) {
+      return defaultValue;
+    }
+  });
+
+  const setValue = (newValue: T) => {
+    try {
+      window.localStorage.setItem(keyName, JSON.stringify(newValue));
+    } finally {
+      setStoredValue(newValue);
+    }
+  };
+
+  return [storedValue, setValue];
+}
diff --git a/web-devtools/src/utils/shortenAddress.ts b/web-devtools/src/utils/shortenAddress.ts
new file mode 100644
index 000000000..12caf9f6e
--- /dev/null
+++ b/web-devtools/src/utils/shortenAddress.ts
@@ -0,0 +1,10 @@
+import { getAddress } from "viem";
+
+export function shortenAddress(address: string): string {
+  try {
+    const formattedAddress = getAddress(address);
+    return formattedAddress.substring(0, 6) + "..." + formattedAddress.substring(formattedAddress.length - 4);
+  } catch {
+    throw new TypeError("Invalid input, address can't be parsed");
+  }
+}
diff --git a/web-devtools/tsconfig.json b/web-devtools/tsconfig.json
index 584294002..f1f3ae56a 100644
--- a/web-devtools/tsconfig.json
+++ b/web-devtools/tsconfig.json
@@ -16,6 +16,11 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
+    "forceConsistentCasingInFileNames": true,
+    "strictNullChecks": true,
+    "noUnusedLocals": true,
+    "allowSyntheticDefaultImports": true,
+    "removeComments": true,
     "plugins": [
       {
         "name": "next"
diff --git a/web-devtools/wagmi.config.ts b/web-devtools/wagmi.config.ts
index 402e31baf..33da8999e 100644
--- a/web-devtools/wagmi.config.ts
+++ b/web-devtools/wagmi.config.ts
@@ -27,7 +27,7 @@ const readArtifacts = async (type: ArbitratorTypes, viemChainName: string, hardh
     type === ArbitratorTypes.vanilla
       ? ""
       : ArbitratorTypes[type].toString().charAt(0).toUpperCase() + ArbitratorTypes[type].toString().slice(1);
-  const vanillaArtifacts = ["KlerosCore", "DisputeKitClassic", "SortitionModule", "DisputeResolver"];
+  const vanillaArtifacts = ["KlerosCore", "DisputeKitClassic", "SortitionModule", "DisputeResolver", "KlerosCoreRuler"];
   const typeSpecificArtifacts = vanillaArtifacts.map((artifact) => `${artifact}${artifactSuffix}`);
 
   const chains = await import("wagmi/chains");
diff --git a/yarn.lock b/yarn.lock
index 0de2b266f..8e61d246d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7989,18 +7989,27 @@ __metadata:
     "@graphql-codegen/cli": "npm:^5.0.2"
     "@graphql-codegen/client-preset": "npm:^4.3.2"
     "@kleros/kleros-sdk": "workspace:^"
-    "@kleros/ui-components-library": "npm:^2.10.0"
+    "@kleros/ui-components-library": "npm:^2.15.0"
     "@svgr/webpack": "npm:^8.1.0"
     "@types/node": "npm:^20"
     "@types/react": "npm:18.2.0"
     "@types/react-dom": "npm:^18.2.18"
+    "@typescript-eslint/eslint-plugin": "npm:^5.62.0"
+    "@typescript-eslint/parser": "npm:^5.62.0"
+    "@typescript-eslint/utils": "npm:^5.62.0"
     "@wagmi/cli": "npm:^2.0.3"
+    eslint: "npm:^8.56.0"
     eslint-config-next: "npm:^14.2.5"
+    eslint-config-prettier: "npm:^8.10.0"
+    eslint-import-resolver-typescript: "npm:^3.6.1"
+    eslint-plugin-react: "npm:^7.33.2"
+    eslint-plugin-react-hooks: "npm:^4.6.0"
     graphql: "npm:^16.9.0"
     next: "npm:14.2.4"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
     react-markdown: "npm:^8.0.7"
+    react-toastify: "npm:^10.0.5"
     ts-node: "npm:^10.9.2"
     typescript: "npm:^5.5.3"
     typewriter-effect: "npm:^2.21.0"
@@ -8089,9 +8098,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@kleros/ui-components-library@npm:^2.10.0":
-  version: 2.13.1
-  resolution: "@kleros/ui-components-library@npm:2.13.1"
+"@kleros/ui-components-library@npm:^2.14.0":
+  version: 2.14.0
+  resolution: "@kleros/ui-components-library@npm:2.14.0"
   dependencies:
     "@datepicker-react/hooks": "npm:^2.8.4"
     "@swc/helpers": "npm:^0.3.2"
@@ -8108,13 +8117,13 @@ __metadata:
     react-dom: ^18.0.0
     react-is: ^18.0.0
     styled-components: ^5.3.3
-  checksum: db710e97b09a291ad5b6ff7a7a046cd3945e0403fda66ce6b33e501609ad2b712f924e84df2cba273d4ee936d274a6b7f210ff269d27d504bc81bcb712bc9da1
+  checksum: ea5d9689562a6aa963eda44ad94336d4152c5d0f46c81e70a0c271a09fb93e9c9fd7b4ee609b1f6e1eb6e18f557f1cc0b132c3ac10d9f5af6ffc911ecb71d9da
   languageName: node
   linkType: hard
 
-"@kleros/ui-components-library@npm:^2.14.0":
-  version: 2.14.0
-  resolution: "@kleros/ui-components-library@npm:2.14.0"
+"@kleros/ui-components-library@npm:^2.15.0":
+  version: 2.15.0
+  resolution: "@kleros/ui-components-library@npm:2.15.0"
   dependencies:
     "@datepicker-react/hooks": "npm:^2.8.4"
     "@swc/helpers": "npm:^0.3.2"
@@ -8131,7 +8140,7 @@ __metadata:
     react-dom: ^18.0.0
     react-is: ^18.0.0
     styled-components: ^5.3.3
-  checksum: ea5d9689562a6aa963eda44ad94336d4152c5d0f46c81e70a0c271a09fb93e9c9fd7b4ee609b1f6e1eb6e18f557f1cc0b132c3ac10d9f5af6ffc911ecb71d9da
+  checksum: 7c97e8fe45b1cd002a0aaf7fe4670b8c668a3abbbab82fac9261ef9a8382ccaf7d4a974ee54b8f299f1e8e7b68e58dab1f3f31d7c8b3b60c58a5af8abdf4a783
   languageName: node
   linkType: hard
 
@@ -33790,6 +33799,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-toastify@npm:^10.0.5":
+  version: 10.0.5
+  resolution: "react-toastify@npm:10.0.5"
+  dependencies:
+    clsx: "npm:^2.1.0"
+  peerDependencies:
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: 6630f4b6d6902d827efd5e66c09df693c7ab8abeeb6ef24d880080f47b636614ef9cc251dd5e6564d49fe2f6f25f720ce0f7ef72cd4b0cd58a65b7c4b8052fac
+  languageName: node
+  linkType: hard
+
 "react-toastify@npm:^9.1.3":
   version: 9.1.3
   resolution: "react-toastify@npm:9.1.3"