diff --git a/subgraph/src/Curate.ts b/subgraph/src/Curate.ts
index e3f604e..8f780f3 100644
--- a/subgraph/src/Curate.ts
+++ b/subgraph/src/Curate.ts
@@ -84,17 +84,17 @@ export function handleRequestSubmitted(event: RequestSubmitted): void {
   item.latestRequester = ensureUser(event.transaction.from.toHexString()).id;
   item.latestRequestResolutionTime = ZERO;
   item.latestRequestSubmissionTime = event.block.timestamp;
+  item.save();
 
   let newStatus = getExtendedStatus(item.status, item.disputed);
 
   if (itemInfo.value1.equals(ONE)) {
     registry.numberOfPending = registry.numberOfPending.plus(ONE);
+    registry.save();
   } else {
     updateCounters(prevStatus, newStatus, event.address);
   }
 
-  registry.save();
-  item.save();
   createRequestFromEvent(event);
 }
 
diff --git a/subgraph/src/entities/Request.ts b/subgraph/src/entities/Request.ts
index a784771..3de0a7e 100644
--- a/subgraph/src/entities/Request.ts
+++ b/subgraph/src/entities/Request.ts
@@ -14,11 +14,7 @@ export function createRequestFromEvent(event: RequestSubmitted): void {
     log.error(`Item for graphItemID {} not found.`, [graphItemID]);
     return;
   }
-  let registry = Registry.load(event.address.toHexString());
-  if (!registry) {
-    log.error(`Registry at address {} not found`, [event.address.toHexString()]);
-    return;
-  }
+
   const requestIndex = item.numberOfRequests.minus(ONE);
   const requestID = graphItemID + "-" + requestIndex.toString();
   const request = new Request(requestID);
@@ -27,7 +23,7 @@ export function createRequestFromEvent(event: RequestSubmitted): void {
   request.arbitratorExtraData = curate.getArbitratorExtraData();
   request.requester = ensureUser(event.transaction.from.toHexString()).id;
   request.item = item.id;
-  request.registry = registry.id;
+  request.registry = event.address.toHexString();
   request.registryAddress = event.address;
   request.resolutionTime = ZERO;
   request.disputeOutcome = NONE;
diff --git a/subgraph/subgraph.yaml b/subgraph/subgraph.yaml
index dd593f3..e8d5255 100644
--- a/subgraph/subgraph.yaml
+++ b/subgraph/subgraph.yaml
@@ -59,4 +59,6 @@ templates:
           handler: handleConnectedListSet
         - event: ListMetadataSet(string)
           handler: handleListMetadataSet
+        - event: DisputeRequest(indexed address,indexed uint256,uint256,uint256,string)
+          handler: handleRequestChallenged
       file: ./src/Curate.ts
diff --git a/web/src/app.tsx b/web/src/app.tsx
index bf4c53b..84c48f8 100644
--- a/web/src/app.tsx
+++ b/web/src/app.tsx
@@ -16,6 +16,7 @@ import { SubmitItemProvider } from "context/SubmitItemContext";
 import SubmitItem from "./pages/SubmitItem";
 import SubmitList from "./pages/SubmitList";
 import { RegistryDetailsProvider } from "context/RegistryDetailsContext";
+import { SubmitListProvider } from "./context/SubmitListContext";
 
 const App: React.FC = () => {
   return (
@@ -25,24 +26,26 @@ const App: React.FC = () => {
         <GraphqlBatcherProvider>
           <Web3Provider>
             <IsListViewProvider>
-              <SubmitItemProvider>
-                <SentryRoutes>
-                  <Route path="/" element={<Layout />}>
-                    <Route index element={<Home />} />
-                    <Route path="lists/*" element={<AllLists />} />
-                    <Route
-                      path="submit-item/:id/*"
-                      element={
-                        <RegistryDetailsProvider>
-                          <SubmitItem />
-                        </RegistryDetailsProvider>
-                      }
-                    />
-                    <Route path="submit-list/*" element={<SubmitList />} />
-                    <Route path="*" element={<h1>404 not found</h1>} />
-                  </Route>
-                </SentryRoutes>
-              </SubmitItemProvider>
+              <SubmitListProvider>
+                <SubmitItemProvider>
+                  <SentryRoutes>
+                    <Route path="/" element={<Layout />}>
+                      <Route index element={<Home />} />
+                      <Route path="lists/*" element={<AllLists />} />
+                      <Route
+                        path="submit-item/:id/*"
+                        element={
+                          <RegistryDetailsProvider>
+                            <SubmitItem />
+                          </RegistryDetailsProvider>
+                        }
+                      />
+                      <Route path="submit-list/*" element={<SubmitList />} />
+                      <Route path="*" element={<h1>404 not found</h1>} />
+                    </Route>
+                  </SentryRoutes>
+                </SubmitItemProvider>
+              </SubmitListProvider>
             </IsListViewProvider>
           </Web3Provider>
         </GraphqlBatcherProvider>
diff --git a/web/src/components/ActionButton/ExecuteButton.tsx b/web/src/components/ActionButton/ExecuteButton.tsx
new file mode 100644
index 0000000..70414b9
--- /dev/null
+++ b/web/src/components/ActionButton/ExecuteButton.tsx
@@ -0,0 +1,50 @@
+import { Button } from "@kleros/ui-components-library";
+import React, { useState } from "react";
+import { Address } from "viem";
+import { usePublicClient } from "wagmi";
+import { useCurateV2ExecuteRequest, usePrepareCurateV2ExecuteRequest } from "hooks/contracts/generated";
+import { wrapWithToast } from "utils/wrapWithToast";
+import { EnsureChain } from "../EnsureChain";
+
+interface IExecuteButton {
+  registryAddress: Address;
+  itemId: string;
+  refetch: () => void;
+}
+const ExecuteButton: React.FC<IExecuteButton> = ({ registryAddress, itemId, refetch }) => {
+  const publicClient = usePublicClient();
+  const [isExecuting, setIsExecuting] = useState(false);
+
+  const {
+    config,
+    isError,
+    isLoading: isPreparingConfig,
+    //@ts-ignore
+  } = usePrepareCurateV2ExecuteRequest({ address: registryAddress, args: [itemId as `0x${string}`] });
+  const { writeAsync: executeRequest, isLoading } = useCurateV2ExecuteRequest(config);
+  return (
+    <EnsureChain>
+      <Button
+        text="Execute"
+        disabled={isLoading || isError || isExecuting || isPreparingConfig}
+        isLoading={isLoading || isExecuting}
+        onClick={() => {
+          if (!executeRequest) return;
+          setIsExecuting(true);
+          wrapWithToast(
+            async () =>
+              await executeRequest().then((response) => {
+                return response.hash;
+              }),
+            publicClient
+          )
+            .then(() => refetch())
+            .catch(() => {})
+            .finally(() => setIsExecuting(false));
+        }}
+      />
+    </EnsureChain>
+  );
+};
+
+export default ExecuteButton;
diff --git a/web/src/components/Modal/Buttons/index.tsx b/web/src/components/ActionButton/Modal/Buttons/index.tsx
similarity index 51%
rename from web/src/components/Modal/Buttons/index.tsx
rename to web/src/components/ActionButton/Modal/Buttons/index.tsx
index 1911d80..44e8371 100644
--- a/web/src/components/Modal/Buttons/index.tsx
+++ b/web/src/components/ActionButton/Modal/Buttons/index.tsx
@@ -1,8 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import { Button } from "@kleros/ui-components-library";
-// import ChallengeButton from "components/ChallengeButton";
-// import RemoveButton from "components/RemoveButton";
+import { EnsureChain } from "components/EnsureChain";
 
 const Container = styled.div`
   display: flex;
@@ -14,16 +13,26 @@ const Container = styled.div`
 
 interface IButtons {
   toggleModal: () => void;
+  callback: () => void;
   buttonText: string;
+  isLoading?: boolean;
+  isDisabled?: boolean;
 }
 
-const Buttons: React.FC<IButtons> = ({ toggleModal, buttonText }) => {
+const Buttons: React.FC<IButtons> = ({ toggleModal, buttonText, callback, isLoading, isDisabled }) => {
   return (
     <Container>
       <Button variant="secondary" text="Return" onClick={toggleModal} />
-      <Button text={buttonText} toggleModal={toggleModal} />
-      {/* <ChallengeButton buttonText={buttonText} toggleModal={toggleModal} /> */}
-      {/* <RemoveButton buttonText={buttonText} toggleModal={toggleModal} /> */}
+      <EnsureChain>
+        <Button
+          text={buttonText}
+          onClick={() => {
+            callback();
+          }}
+          isLoading={isLoading}
+          disabled={isDisabled}
+        />
+      </EnsureChain>
     </Container>
   );
 };
diff --git a/web/src/components/ActionButton/Modal/ChallengeItemModal.tsx b/web/src/components/ActionButton/Modal/ChallengeItemModal.tsx
new file mode 100644
index 0000000..5a23433
--- /dev/null
+++ b/web/src/components/ActionButton/Modal/ChallengeItemModal.tsx
@@ -0,0 +1,163 @@
+import React, { useMemo, useRef, useState } from "react";
+import styled from "styled-components";
+import { useClickAway } from "react-use";
+import { Overlay } from "components/Overlay";
+import Header from "./Header";
+import Buttons from "./Buttons";
+import DepositRequired from "./DepositRequired";
+import { StyledModal } from "./StyledModal";
+import Info from "./Info";
+import {
+  prepareWriteCurateV2,
+  useCurateV2GetArbitratorExtraData,
+  useCurateV2RemovalChallengeBaseDeposit,
+  useCurateV2SubmissionChallengeBaseDeposit,
+} from "hooks/contracts/generated";
+import { useArbitrationCost } from "hooks/useArbitrationCostFromKlerosCore";
+import { useAccount, useBalance, usePublicClient, useWalletClient } from "wagmi";
+import { wrapWithToast } from "utils/wrapWithToast";
+import { IBaseModal } from ".";
+import EvidenceUpload, { Evidence } from "./EvidenceUpload";
+import { uploadFileToIPFS } from "utils/uploadFileToIPFS";
+
+const ReStyledModal = styled(StyledModal)`
+  gap: 32px;
+`;
+
+export enum ChallengeType {
+  Submission,
+  Removal,
+}
+interface IChallengeItemModal extends IBaseModal {
+  challengeType: ChallengeType;
+}
+
+const alertMessage =
+  "When you challenge an item a dispute starts. Random jurors are selected to decide if" +
+  " the item should be removed or included. In case the challenger wins the deposit is" +
+  " reimbursed, in case the challenger loses the deposit is lost. Make sure you read" +
+  " and understand the Policy before proceeding.";
+
+const ChallengeItemModal: React.FC<IChallengeItemModal> = ({
+  toggleModal,
+  itemId,
+  registryAddress,
+  isItem,
+  challengeType,
+  refetch,
+}) => {
+  const containerRef = useRef(null);
+  useClickAway(containerRef, () => toggleModal());
+  const { address } = useAccount();
+  const publicClient = usePublicClient();
+  const { data: walletClient } = useWalletClient();
+
+  const [isChallengingItem, setIsChallengingItem] = useState(false);
+  const [isEvidenceUploading, setIsEvidenceUploading] = useState(false);
+  const [evidence, setEvidence] = useState<Evidence>();
+
+  const { data: userBalance, isLoading: isBalanceLoading } = useBalance({ address });
+
+  const { data: arbitratorExtraData, isLoading: isLoadingExtradata } = useCurateV2GetArbitratorExtraData({
+    // @ts-ignore
+    address: registryAddress,
+  });
+
+  const { data: submissionChallengeDeposit, isLoading: isSubmissionChallengeDepositLoading } =
+    //@ts-ignore
+    useCurateV2SubmissionChallengeBaseDeposit({ address: registryAddress });
+
+  const { data: removalChallengeDeposit, isLoading: isRemovalChallengeDepositLoading } =
+    useCurateV2RemovalChallengeBaseDeposit({
+      //@ts-ignore
+      address: registryAddress,
+    });
+
+  const { arbitrationCost, isLoading: isLoadingArbCost } = useArbitrationCost(arbitratorExtraData);
+
+  const depositRequired = useMemo(() => {
+    if (!arbitrationCost || !submissionChallengeDeposit || !removalChallengeDeposit) return 0n;
+    return (
+      (arbitrationCost as bigint) +
+      (challengeType === ChallengeType.Submission ? submissionChallengeDeposit : removalChallengeDeposit)
+    );
+  }, [arbitrationCost, removalChallengeDeposit, submissionChallengeDeposit]);
+
+  const isEvidenceValid = useMemo(() => evidence?.name !== "" && evidence?.description !== "", [evidence]);
+
+  const isLoading = useMemo(
+    () =>
+      isBalanceLoading ||
+      isLoadingArbCost ||
+      isSubmissionChallengeDepositLoading ||
+      isRemovalChallengeDepositLoading ||
+      isLoadingExtradata ||
+      isChallengingItem ||
+      isEvidenceUploading,
+    [
+      isBalanceLoading,
+      isLoadingArbCost,
+      isSubmissionChallengeDepositLoading,
+      isRemovalChallengeDepositLoading,
+      isLoadingArbCost,
+      isChallengingItem,
+      isEvidenceUploading,
+    ]
+  );
+
+  const isDisabled = useMemo(() => {
+    if (!userBalance || !depositRequired || isEvidenceUploading || !isEvidenceValid) return true;
+    return userBalance?.value < depositRequired;
+  }, [depositRequired, userBalance, isEvidenceUploading, isEvidenceValid]);
+
+  return (
+    <>
+      <Overlay />
+      <ReStyledModal ref={containerRef}>
+        <Header text={`Challenge ${isItem ? "Item" : "List"}`} />
+        <DepositRequired value={depositRequired} />
+        <EvidenceUpload {...{ setEvidence, setIsEvidenceUploading }} />
+        <Info alertMessage={alertMessage} />
+        <Buttons
+          buttonText="Challenge"
+          toggleModal={toggleModal}
+          isDisabled={isDisabled || isChallengingItem}
+          isLoading={isLoading}
+          callback={async () => {
+            setIsChallengingItem(true);
+
+            const evidenceFile = new File([JSON.stringify(evidence)], "evidence.json", {
+              type: "application/json",
+            });
+
+            uploadFileToIPFS(evidenceFile)
+              .then(async (res) => {
+                if (res.status === 200 && walletClient) {
+                  const response = await res.json();
+                  const fileURI = response["cids"][0];
+
+                  const { request } = await prepareWriteCurateV2({
+                    //@ts-ignore
+                    address: registryAddress,
+                    functionName: "challengeRequest",
+                    args: [itemId as `0x${string}`, fileURI],
+                    value: depositRequired,
+                  });
+
+                  wrapWithToast(async () => await walletClient.writeContract(request), publicClient).then((res) => {
+                    console.log({ res });
+                    refetch();
+                    toggleModal();
+                  });
+                }
+              })
+              .catch((err) => console.log(err))
+              .finally(() => setIsChallengingItem(false));
+          }}
+        />
+      </ReStyledModal>
+    </>
+  );
+};
+
+export default ChallengeItemModal;
diff --git a/web/src/components/Modal/DepositRequired.tsx b/web/src/components/ActionButton/Modal/DepositRequired.tsx
similarity index 81%
rename from web/src/components/Modal/DepositRequired.tsx
rename to web/src/components/ActionButton/Modal/DepositRequired.tsx
index 272de8b..4dea651 100644
--- a/web/src/components/Modal/DepositRequired.tsx
+++ b/web/src/components/ActionButton/Modal/DepositRequired.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { Card } from "@kleros/ui-components-library";
 import styled from "styled-components";
+import { formatETH } from "utils/format";
 
 const StyledCard = styled(Card)`
   display: flex;
@@ -28,11 +29,11 @@ const StyledQuantity = styled.p`
   font-weight: 600;
 `;
 
-const FeeRequired: React.FC = () => {
+const FeeRequired: React.FC<{ value: bigint }> = ({ value }) => {
   return (
     <StyledCard>
       <StyledHeader>Deposit required</StyledHeader>
-      <StyledQuantity>0.00003 ETH</StyledQuantity>
+      <StyledQuantity>{formatETH(value ?? 1, 5)} ETH</StyledQuantity>
     </StyledCard>
   );
 };
diff --git a/web/src/components/ActionButton/Modal/EvidenceUpload.tsx b/web/src/components/ActionButton/Modal/EvidenceUpload.tsx
new file mode 100644
index 0000000..1927073
--- /dev/null
+++ b/web/src/components/ActionButton/Modal/EvidenceUpload.tsx
@@ -0,0 +1,112 @@
+import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
+import styled from "styled-components";
+import { toast } from "react-toastify";
+import { FileUploader, Textarea } from "@kleros/ui-components-library";
+import LabeledInput from "components/LabeledInput";
+import { responsiveSize } from "styles/responsiveSize";
+import { OPTIONS as toastOptions } from "utils/wrapWithToast";
+import { uploadFileToIPFS } from "utils/uploadFileToIPFS";
+
+const Container = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 38px;
+  margin: 6px 0px;
+`;
+
+const TitleField = styled(LabeledInput)`
+  width: 100%;
+`;
+
+const DescriptionContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`;
+
+const DescriptionField = styled(Textarea)`
+  width: 100%;
+  height: 180px;
+`;
+
+const StyledLabel = styled.label`
+  color: ${({ theme }) => theme.primaryText};
+`;
+
+const StyledFileUploader = styled(FileUploader)`
+  width: 100%;
+  margin-bottom: ${responsiveSize(52, 32)};
+  path {
+    fill: ${({ theme }) => theme.primaryBlue};
+  }
+`;
+
+export type Evidence = {
+  name: string;
+  description: string;
+  fileURI: string;
+  fileTypeExtension: string;
+};
+
+interface IEvidenceUpload {
+  setEvidence: Dispatch<SetStateAction<Evidence | undefined>>;
+  setIsEvidenceUploading: Dispatch<SetStateAction<boolean>>;
+}
+
+const EvidenceUpload: React.FC<IEvidenceUpload> = ({ setEvidence, setIsEvidenceUploading }) => {
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [fileURI, setFileUri] = useState("");
+
+  useEffect(() => {
+    setEvidence({
+      name: title,
+      description,
+      fileURI,
+      fileTypeExtension: "pdf",
+    });
+  }, [title, description, fileURI]);
+
+  const handleFileUpload = (file: File) => {
+    if (file?.type !== "application/pdf") {
+      toast.error("File type not supported", toastOptions);
+      return;
+    }
+    setIsEvidenceUploading(true);
+    uploadFileToIPFS(file)
+      .then(async (res) => {
+        const response = await res.json();
+        const fileURI = response["cids"][0];
+        setFileUri(fileURI);
+      })
+      .catch((err) => console.log(err))
+      .finally(() => setIsEvidenceUploading(false));
+  };
+
+  return (
+    <Container>
+      <TitleField
+        topLeftLabel={{ text: "Title" }}
+        placeholder="eg. The item is not legit."
+        value={title}
+        onChange={(event) => setTitle(event.target.value)}
+      />
+      <DescriptionContainer>
+        <StyledLabel>Description</StyledLabel>
+        <DescriptionField
+          placeholder="Explain what motivates you to challenge it. Why do you think the item is not compliant with the Policy?"
+          value={description}
+          onChange={(event) => setDescription(event.target.value)}
+        />
+      </DescriptionContainer>
+      <StyledFileUploader
+        callback={handleFileUpload}
+        variant="info"
+        msg="Additionally, you can add an external file in PDF."
+      />
+    </Container>
+  );
+};
+
+export default EvidenceUpload;
diff --git a/web/src/components/Modal/Header.tsx b/web/src/components/ActionButton/Modal/Header.tsx
similarity index 100%
rename from web/src/components/Modal/Header.tsx
rename to web/src/components/ActionButton/Modal/Header.tsx
diff --git a/web/src/components/Modal/Info.tsx b/web/src/components/ActionButton/Modal/Info.tsx
similarity index 100%
rename from web/src/components/Modal/Info.tsx
rename to web/src/components/ActionButton/Modal/Info.tsx
diff --git a/web/src/components/ActionButton/Modal/RemoveModal.tsx b/web/src/components/ActionButton/Modal/RemoveModal.tsx
new file mode 100644
index 0000000..3d91c72
--- /dev/null
+++ b/web/src/components/ActionButton/Modal/RemoveModal.tsx
@@ -0,0 +1,139 @@
+import React, { useMemo, useRef, useState } from "react";
+import styled from "styled-components";
+import { useClickAway } from "react-use";
+import { Overlay } from "components/Overlay";
+import Header from "./Header";
+import Buttons from "./Buttons";
+import DepositRequired from "./DepositRequired";
+import { StyledModal } from "./StyledModal";
+import Info from "./Info";
+import { IBaseModal } from ".";
+import { useAccount, useBalance, usePublicClient, useWalletClient } from "wagmi";
+import {
+  prepareWriteCurateV2,
+  useCurateV2GetArbitratorExtraData,
+  useCurateV2RemovalBaseDeposit,
+} from "hooks/contracts/generated";
+import { useArbitrationCost } from "hooks/useArbitrationCostFromKlerosCore";
+import { wrapWithToast } from "utils/wrapWithToast";
+import EvidenceUpload, { Evidence } from "./EvidenceUpload";
+import { uploadFileToIPFS } from "utils/uploadFileToIPFS";
+
+const ReStyledModal = styled(StyledModal)`
+  gap: 32px;
+`;
+
+interface IRemoveModal extends IBaseModal {}
+
+const alertMessage = (isItem: boolean) =>
+  `When you request ${isItem ? "an item" : "a list"} to be removed it goes to the Pending state for a while.` +
+  ` During that time the removal can be challenged starting a dispute. If the ${isItem ? "item" : "list"} is` +
+  ` removed the deposit is reimbursed, in case the ${isItem ? "item" : "list"} is not removed the deposit is lost.` +
+  ` Make sure you read and understand the Policy before proceeding.`;
+
+const RemoveModal: React.FC<IRemoveModal> = ({ toggleModal, isItem, registryAddress, itemId, refetch }) => {
+  const containerRef = useRef(null);
+  useClickAway(containerRef, () => toggleModal());
+  const { address } = useAccount();
+  const publicClient = usePublicClient();
+  const { data: walletClient } = useWalletClient();
+
+  const [isRemovingItem, setIsRemovingItem] = useState(false);
+  const [isEvidenceUploading, setIsEvidenceUploading] = useState(false);
+  const [evidence, setEvidence] = useState<Evidence>();
+
+  const { data: userBalance, isLoading: isBalanceLoading } = useBalance({ address });
+
+  const { data: arbitratorExtraData, isLoading: isLoadingExtradata } = useCurateV2GetArbitratorExtraData({
+    //@ts-ignore
+    address: registryAddress,
+  });
+
+  const { data: removalDeposit, isLoading: isRemovalDepositLoading } = useCurateV2RemovalBaseDeposit({
+    //@ts-ignore
+    address: registryAddress,
+  });
+
+  const { arbitrationCost, isLoading: isLoadingArbCost } = useArbitrationCost(arbitratorExtraData);
+
+  const depositRequired = useMemo(() => {
+    if (!arbitrationCost || !removalDeposit) return 0n;
+    return (arbitrationCost as bigint) + removalDeposit;
+  }, [arbitrationCost, removalDeposit]);
+
+  const isEvidenceValid = useMemo(() => evidence?.name !== "" && evidence?.description !== "", [evidence]);
+
+  const isLoading = useMemo(
+    () =>
+      isBalanceLoading ||
+      isLoadingArbCost ||
+      isRemovalDepositLoading ||
+      isLoadingArbCost ||
+      isRemovingItem ||
+      isEvidenceUploading,
+    [
+      isBalanceLoading,
+      isLoadingArbCost,
+      isRemovalDepositLoading,
+      isLoadingExtradata,
+      isRemovingItem,
+      isEvidenceUploading,
+    ]
+  );
+
+  const isDisabled = useMemo(() => {
+    if (!userBalance || !depositRequired || isEvidenceUploading || !isEvidenceValid) return true;
+    return userBalance?.value < depositRequired;
+  }, [depositRequired, userBalance, isEvidenceUploading, isEvidenceValid]);
+
+  return (
+    <>
+      <Overlay />
+      <ReStyledModal ref={containerRef}>
+        <Header text={`Remove ${isItem ? "Item" : "List"}`} />
+        <DepositRequired value={depositRequired ?? 0} />
+        <EvidenceUpload setEvidence={setEvidence} setIsEvidenceUploading={setIsEvidenceUploading} />
+        <Info alertMessage={alertMessage(isItem)} />
+        <Buttons
+          buttonText="Remove"
+          toggleModal={toggleModal}
+          isDisabled={isDisabled || isRemovingItem}
+          isLoading={isLoading}
+          callback={() => {
+            setIsRemovingItem(true);
+
+            const evidenceFile = new File([JSON.stringify(evidence)], "evidence.json", {
+              type: "application/json",
+            });
+
+            uploadFileToIPFS(evidenceFile)
+              .then(async (res) => {
+                if (res.status === 200 && walletClient) {
+                  const response = await res.json();
+                  const fileURI = response["cids"][0];
+
+                  const { request } = await prepareWriteCurateV2({
+                    //@ts-ignore
+                    address: registryAddress,
+                    functionName: "removeItem",
+                    args: [itemId as `0x${string}`, fileURI],
+                    value: depositRequired,
+                  });
+
+                  wrapWithToast(async () => await walletClient.writeContract(request), publicClient).then((res) => {
+                    console.log({ res });
+                    refetch();
+                    toggleModal();
+                  });
+                }
+              })
+              .catch((err) => console.log(err))
+              .finally(() => setIsRemovingItem(false));
+          }}
+        />
+      </ReStyledModal>
+    </>
+  );
+};
+
+export default RemoveModal;
diff --git a/web/src/components/ActionButton/Modal/ResubmitModal.tsx b/web/src/components/ActionButton/Modal/ResubmitModal.tsx
new file mode 100644
index 0000000..8c55b46
--- /dev/null
+++ b/web/src/components/ActionButton/Modal/ResubmitModal.tsx
@@ -0,0 +1,117 @@
+import React, { useMemo, useRef, useState } from "react";
+import styled from "styled-components";
+import { useClickAway } from "react-use";
+import { Overlay } from "components/Overlay";
+import Header from "./Header";
+import Buttons from "./Buttons";
+import DepositRequired from "./DepositRequired";
+import { StyledModal } from "./StyledModal";
+import Info from "./Info";
+import { IBaseModal } from ".";
+import { useAccount, useBalance, usePublicClient } from "wagmi";
+import {
+  useCurateV2AddItem,
+  useCurateV2GetArbitratorExtraData,
+  useCurateV2SubmissionBaseDeposit,
+  usePrepareCurateV2AddItem,
+} from "hooks/contracts/generated";
+import { useArbitrationCost } from "hooks/useArbitrationCostFromKlerosCore";
+import { wrapWithToast } from "utils/wrapWithToast";
+import { useItemDetailsQuery } from "hooks/queries/useItemDetailsQuery";
+
+const ReStyledModal = styled(StyledModal)`
+  gap: 32px;
+`;
+
+interface ISubmitModal extends IBaseModal {}
+
+const alertMessage = (isItem: boolean) =>
+  `When you request ${isItem ? "an item" : "a list"} to be re-submitted it goes to the Pending state for a while.` +
+  ` During that time the submission can be challenged starting a dispute. If the ${isItem ? "item" : "list"} is` +
+  ` removed the deposit is reimbursed, in case the ${isItem ? "item" : "list"} is not removed the deposit is lost.` +
+  ` Make sure you read and understand the Policy before proceeding.`;
+
+const ResubmitModal: React.FC<ISubmitModal> = ({ toggleModal, isItem, registryAddress, itemId, refetch }) => {
+  const containerRef = useRef(null);
+  useClickAway(containerRef, () => toggleModal());
+  const { address } = useAccount();
+  const publicClient = usePublicClient();
+  const [isResubmittingItem, setIsResubmittingItem] = useState(false);
+  const { data: userBalance, isLoading: isBalanceLoading } = useBalance({ address });
+  const { data: itemData, isLoading: isItemDataLoading } = useItemDetailsQuery(`${itemId}@${registryAddress}`);
+
+  const { data: arbitratorExtraData, isLoading: isLoadingExtradata } = useCurateV2GetArbitratorExtraData({
+    // @ts-ignore
+    address: registryAddress,
+  });
+
+  const { data: removalDeposit, isLoading: isSubmissionDepositLoading } = useCurateV2SubmissionBaseDeposit({
+    //@ts-ignore
+    address: registryAddress,
+  });
+
+  const { arbitrationCost, isLoading: isLoadingArbCost } = useArbitrationCost(arbitratorExtraData);
+
+  const depositRequired = useMemo(() => {
+    if (!arbitrationCost || !removalDeposit) return 0n;
+    return (arbitrationCost as bigint) + removalDeposit;
+  }, [arbitrationCost, removalDeposit]);
+
+  const isLoading = useMemo(
+    () =>
+      isBalanceLoading || isLoadingArbCost || isSubmissionDepositLoading || isLoadingExtradata || isResubmittingItem,
+    [isBalanceLoading, isLoadingArbCost, isSubmissionDepositLoading, isLoadingExtradata, isResubmittingItem]
+  );
+
+  const isDisabled = useMemo(() => {
+    if (!userBalance || !depositRequired) return true;
+    return userBalance?.value < depositRequired;
+  }, [depositRequired, userBalance]);
+
+  const { config, isError } = usePrepareCurateV2AddItem({
+    enabled: address && registryAddress && !isLoading && !isDisabled && !isItemDataLoading,
+    //@ts-ignore
+    address: registryAddress,
+    args: [itemData?.item?.data ?? ""],
+    value: depositRequired,
+  });
+
+  const { writeAsync: resubmitItem } = useCurateV2AddItem(config);
+
+  return (
+    <>
+      <Overlay />
+      <ReStyledModal ref={containerRef}>
+        <Header text={`Resubmit ${isItem ? "Item" : "List"}`} />
+        <DepositRequired value={depositRequired ?? 0} />
+        <Info alertMessage={alertMessage(isItem)} />
+        <Buttons
+          buttonText="Resubmit"
+          toggleModal={toggleModal}
+          isDisabled={isDisabled || isError || isResubmittingItem}
+          isLoading={isLoading}
+          callback={() => {
+            if (!resubmitItem) return;
+            setIsResubmittingItem(true);
+            wrapWithToast(
+              async () =>
+                await resubmitItem().then((response) => {
+                  return response.hash;
+                }),
+              publicClient
+            )
+              .then((res) => {
+                console.log({ res });
+                refetch();
+                toggleModal();
+              })
+              .catch(() => {})
+              .finally(() => setIsResubmittingItem(false));
+          }}
+        />
+      </ReStyledModal>
+    </>
+  );
+};
+
+export default ResubmitModal;
diff --git a/web/src/components/Modal/StyledModal.tsx b/web/src/components/ActionButton/Modal/StyledModal.tsx
similarity index 100%
rename from web/src/components/Modal/StyledModal.tsx
rename to web/src/components/ActionButton/Modal/StyledModal.tsx
diff --git a/web/src/components/ActionButton/Modal/index.tsx b/web/src/components/ActionButton/Modal/index.tsx
new file mode 100644
index 0000000..3f2eb8d
--- /dev/null
+++ b/web/src/components/ActionButton/Modal/index.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import { Status } from "consts/status";
+import { Address } from "viem";
+import ChallengeItemModal, { ChallengeType } from "./ChallengeItemModal";
+import RemoveModal from "./RemoveModal";
+import ResubmitModal from "./ResubmitModal";
+
+export interface IBaseModal {
+  registryAddress: Address;
+  itemId: string;
+  isItem: boolean;
+  toggleModal: () => void;
+  refetch: () => void;
+}
+
+export const getModalButtonText = (status: Status, isItem?: Boolean) => {
+  switch (status) {
+    case Status.RegistrationPending:
+    case Status.ClearingPending:
+      return "Challenge";
+    case Status.Included:
+      return `Remove ${isItem ? "Item" : "List"}`;
+    default:
+      return "Resubmit";
+  }
+};
+
+interface IModal extends IBaseModal {
+  status: Status;
+}
+const Modal: React.FC<IModal> = ({ status, ...props }) => {
+  let component: JSX.Element | null = null;
+  switch (status) {
+    case Status.RegistrationPending:
+      component = <ChallengeItemModal {...props} challengeType={ChallengeType.Submission} />;
+      break;
+    case Status.ClearingPending:
+      component = <ChallengeItemModal {...props} challengeType={ChallengeType.Removal} />;
+      break;
+    case Status.Included:
+      component = <RemoveModal {...props} />;
+      break;
+    default:
+      component = <ResubmitModal {...props} />;
+  }
+
+  return component;
+};
+
+export default Modal;
diff --git a/web/src/components/ActionButton/index.tsx b/web/src/components/ActionButton/index.tsx
new file mode 100644
index 0000000..bb01f96
--- /dev/null
+++ b/web/src/components/ActionButton/index.tsx
@@ -0,0 +1,65 @@
+import { Button } from "@kleros/ui-components-library";
+import React, { useMemo } from "react";
+import { Address } from "viem";
+import { COURT_SITE } from "consts/index";
+import { Status } from "consts/status";
+import { useItemRequests } from "queries/useRequestsQuery";
+import KlerosIcon from "assets/svgs/icons/kleros.svg";
+import styled from "styled-components";
+import { useToggle } from "react-use";
+import Modal, { getModalButtonText } from "./Modal";
+import ExecuteButton from "./ExecuteButton";
+import { useCurateV2ChallengePeriodDuration } from "hooks/contracts/generated";
+
+const StyledKlerosIcon = styled(KlerosIcon)`
+  path {
+    fill: ${({ theme }) => theme.whiteBackground};
+  }
+`;
+
+interface IActionButton {
+  status: Status;
+  registryAddress: Address;
+  itemId: string;
+  isItem: boolean;
+  refetch: () => void;
+}
+
+const ActionButton: React.FC<IActionButton> = ({ status, registryAddress, itemId, isItem, refetch }) => {
+  const [isModalOpen, toggleModal] = useToggle(false);
+
+  const { data: requests, isLoading } = useItemRequests(`${itemId}@${registryAddress}`);
+  //@ts-ignore
+  const { data: challengePeriodDuration } = useCurateV2ChallengePeriodDuration({ address: registryAddress });
+
+  const latestRequest = requests?.requests?.[requests.requests.length - 1];
+  const disputeId = latestRequest?.disputeID;
+
+  const isExecutable = useMemo(() => {
+    if (!latestRequest || !challengePeriodDuration) return false;
+    return !latestRequest.resolved && Date.now() / 1000 - latestRequest.submissionTime > challengePeriodDuration;
+  }, [latestRequest, challengePeriodDuration]);
+
+  let ButtonComponent: JSX.Element | null = useMemo(() => {
+    if (status === Status.Disputed)
+      return (
+        <a href={`${COURT_SITE}/${disputeId}/overview`} target="_blank" rel="noreferrer">
+          <Button disabled={isLoading} Icon={StyledKlerosIcon} text={`View Case #${disputeId ?? 0}`} />
+        </a>
+      );
+
+    if (isExecutable && ![Status.Included, Status.Removed].includes(status))
+      return <ExecuteButton {...{ registryAddress, itemId, refetch }} />;
+
+    return <Button variant="secondary" text={getModalButtonText(status ?? 0, isItem)} onClick={toggleModal} />;
+  }, [isExecutable, registryAddress, status, itemId, isLoading, disputeId]);
+
+  return (
+    <>
+      {ButtonComponent}
+      {isModalOpen ? <Modal {...{ registryAddress, itemId, isItem, status, toggleModal, refetch }} /> : null}
+    </>
+  );
+};
+
+export default ActionButton;
diff --git a/web/src/components/HistoryDisplay/index.tsx b/web/src/components/HistoryDisplay/index.tsx
index 733b396..6ed4c20 100644
--- a/web/src/components/HistoryDisplay/index.tsx
+++ b/web/src/components/HistoryDisplay/index.tsx
@@ -1,7 +1,14 @@
-import { Card, CustomTimeline, _TimelineItem1 as TimelineItem } from "@kleros/ui-components-library";
+import { Card, CustomTimeline, _TimelineItem1 } from "@kleros/ui-components-library";
 import React from "react";
-import styled from "styled-components";
+import styled, { Theme, useTheme } from "styled-components";
 import Header from "./Header";
+import { useItemRequests } from "queries/useRequestsQuery";
+import { RequestDetailsFragment, Ruling, Status } from "src/graphql/graphql";
+import { formatDate } from "utils/date";
+import { shortenAddress } from "utils/shortenAddress";
+import CheckIcon from "assets/svgs/icons/check-circle-outline.svg";
+import ClosedIcon from "assets/svgs/icons/close-circle.svg";
+import { HistorySkeletonCard } from "../StyledSkeleton";
 
 const Container = styled(Card)`
   display: flex;
@@ -19,15 +26,97 @@ const StyledTimeline = styled(CustomTimeline)`
 `;
 
 interface IHistory {
-  items: TimelineItem[];
+  itemId: string;
+  isItem?: boolean;
 }
 
-const History: React.FC<IHistory> = ({ items }) => {
+const History: React.FC<IHistory> = ({ itemId, isItem }) => {
+  const theme = useTheme();
+  const { data } = useItemRequests(itemId);
+
+  const items = data?.requests.reduce<_TimelineItem1[]>((acc, request) => {
+    const history = constructItemsFromRequest(request, theme, isItem);
+    acc.push(...history);
+    return acc;
+  }, []);
+
   return (
     <Container>
       <Header />
-      <StyledTimeline {...{ items }} />
+      {items ? <StyledTimeline {...{ items }} /> : <HistorySkeletonCard />}
     </Container>
   );
 };
+
+const constructItemsFromRequest = (
+  request: RequestDetailsFragment,
+  theme: Theme,
+  isItem?: Boolean
+): _TimelineItem1[] => {
+  const historyItems: _TimelineItem1[] = [];
+
+  if (request.requestType === Status.RegistrationRequested) {
+    historyItems.push({
+      title: `${isItem ? "Item" : "List"} Submitted`,
+      variant: theme.primaryBlue,
+      subtitle: formatDate(request.submissionTime),
+      rightSided: true,
+      party: "",
+    });
+
+    if (request.disputed && request.challenger) {
+      historyItems.push({
+        title: `${isItem ? "Submission" : "Registration"} Challenged`,
+        variant: theme.secondaryPurple,
+        party: `- Case ${request.disputeID} by ${shortenAddress(request.challenger.id)}`,
+        subtitle: formatDate(request.submissionTime),
+        rightSided: true,
+      });
+    }
+
+    if (request.resolved) {
+      const included = request.disputed && request.finalRuling === Ruling.Reject ? false : true;
+
+      historyItems.push({
+        title: `${isItem ? "Item" : "List"} ${included ? "Included" : "Rejected"}`,
+        variant: included ? theme.primaryBlue : theme.error,
+        subtitle: formatDate(request.resolutionTime),
+        rightSided: true,
+        party: "",
+        Icon: included ? CheckIcon : ClosedIcon,
+      });
+    }
+  } else if (request.requestType === Status.ClearingRequested) {
+    historyItems.push({
+      title: "Removal Requested",
+      variant: theme.primaryBlue,
+      subtitle: formatDate(request.submissionTime),
+      rightSided: true,
+      party: `- By ${shortenAddress(request.requester.id)}`,
+    });
+
+    if (request.disputed && request.challenger) {
+      historyItems.push({
+        title: "Removal Challenged",
+        variant: theme.secondaryPurple,
+        party: `- Case #${request.disputeID} by ${shortenAddress(request.challenger.id)}`,
+        subtitle: formatDate(request.submissionTime),
+        rightSided: true,
+      });
+    }
+    if (request.resolved) {
+      const removed = request.disputed ? request.finalRuling === Ruling.Accept : request.finalRuling === null;
+      historyItems.push({
+        title: `${isItem ? "Item" : "List"} ${removed ? "Removed" : "Included"}`,
+        variant: removed ? theme.error : theme.success,
+        subtitle: formatDate(request.resolutionTime),
+        rightSided: true,
+        party: "",
+        Icon: removed ? CheckIcon : ClosedIcon,
+      });
+    }
+  }
+  return historyItems;
+};
+
 export default History;
diff --git a/web/src/components/InformationCard/Policies.tsx b/web/src/components/InformationCard/Policies.tsx
index 07b6aa9..24f1fd6 100644
--- a/web/src/components/InformationCard/Policies.tsx
+++ b/web/src/components/InformationCard/Policies.tsx
@@ -14,7 +14,7 @@ const ShadeArea = styled.div`
   flex-direction: column;
   justify-content: center;
   width: 100%;
-  padding: ${responsiveSize(16, 20)} ${responsiveSize(16, 32)};
+  padding: 24px ${responsiveSize(24, 32)};
   margin-top: 16px;
   background-color: ${({ theme }) => theme.mediumBlue};
 
diff --git a/web/src/components/InformationCard/index.tsx b/web/src/components/InformationCard/index.tsx
index 59648c5..0d91112 100644
--- a/web/src/components/InformationCard/index.tsx
+++ b/web/src/components/InformationCard/index.tsx
@@ -1,20 +1,20 @@
 import React, { useEffect, useState } from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { responsiveSize } from "styles/responsiveSize";
-import { useToggle } from "react-use";
 import Skeleton from "react-loading-skeleton";
-import { Button, Card, Copiable } from "@kleros/ui-components-library";
+import { Card, Copiable } from "@kleros/ui-components-library";
 import EtherscanIcon from "svgs/icons/etherscan.svg";
 import { Status } from "consts/status";
 import { DEFAULT_CHAIN, SUPPORTED_CHAINS } from "consts/chains";
 import { getIpfsUrl } from "utils/getIpfsUrl";
 import { isUndefined } from "utils/index";
-// import { getChainIcon, getChainName } from "components/ChainIcon";
 import AliasDisplay from "components/RegistryInfo/AliasDisplay";
 import { getStatusColor, getStatusLabel } from "components/RegistryCard/StatusBanner";
 import { Policies } from "./Policies";
-import RemoveModal from "../Modal/RemoveModal";
 import { DEFAULT_LIST_LOGO } from "consts/index";
+import { landscapeStyle } from "styles/landscapeStyle";
+import ActionButton from "../ActionButton";
+import { Address } from "viem";
 
 const StyledCard = styled(Card)`
   display: flex;
@@ -56,7 +56,12 @@ const TopInfo = styled.div`
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 12px;
-  padding: 24px ${responsiveSize(24, 32)} 12px ${responsiveSize(24, 32)};
+  padding: ${responsiveSize(20, 24)} ${responsiveSize(24, 32)} 12px ${responsiveSize(24, 32)};
+  ${landscapeStyle(
+    () => css`
+      flex-wrap: nowrap;
+    `
+  )}
 `;
 
 const LogoAndTitle = styled.div`
@@ -75,10 +80,16 @@ const TopLeftInfo = styled.div`
 const TopRightInfo = styled.div`
   display: flex;
   flex-direction: row;
-  gap: 0 32px;
+  gap: 32px;
   flex-wrap: wrap;
+  flex-shrink: 0;
   align-items: start;
   padding-top: 20px;
+  ${landscapeStyle(
+    () => css`
+      gap: 0 ${responsiveSize(24, 32, 900)};
+    `
+  )}
 `;
 
 const StyledEtherscanIcon = styled(EtherscanIcon)`
@@ -88,8 +99,8 @@ const StyledEtherscanIcon = styled(EtherscanIcon)`
 `;
 
 const StyledLogo = styled.img<{ isListView: boolean }>`
-  width: ${({ isListView }) => (isListView ? "48px" : "125px")};
-  height: ${({ isListView }) => (isListView ? "48px" : "125px")};
+  width: ${({ isListView }) => (isListView ? "40px" : "125px")};
+  height: ${({ isListView }) => (isListView ? "40px" : "125px")};
   object-fit: contain;
   margin-bottom: ${({ isListView }) => (isListView ? "0px" : "8px")};
 `;
@@ -104,7 +115,7 @@ const StyledP = styled.p`
 `;
 
 const StyledLabel = styled.label`
-  color: ${({ theme }) => theme.primaryText};
+  color: ${({ theme }) => theme.primaryBlue};
 `;
 
 const Divider = styled.hr`
@@ -118,7 +129,7 @@ const BottomInfo = styled.div`
   display: flex;
   padding: 0 ${responsiveSize(24, 32)} 12px ${responsiveSize(24, 32)};
   flex-wrap: wrap;
-  gap: 12px;
+  gap: 20px;
   justify-content: space-between;
 `;
 
@@ -130,7 +141,7 @@ const SkeletonLogo = styled(Skeleton)`
 `;
 
 const SkeletonTitle = styled(Skeleton)`
-  width: 260px;
+  width: 180px;
   height: 30px;
 `;
 
@@ -142,14 +153,16 @@ const SkeletonDescription = styled(Skeleton)`
 interface IInformationCard {
   id?: string;
   title?: string;
-  logoURI?: string;
+  logoURI: string;
   description?: string;
-  chainId?: number;
-  status?: Status;
-  registerer?: string;
-  policyURI?: string;
-  explorerAddress?: string;
+  status: Status;
+  registerer: string;
+  policyURI: string;
+  explorerAddress?: Address;
+  itemId: string;
+  registryAddress: Address;
   className?: string;
+  refetch: () => {};
 }
 
 const InformationCard: React.FC<IInformationCard> = ({
@@ -158,65 +171,63 @@ const InformationCard: React.FC<IInformationCard> = ({
   logoURI,
   description,
   registerer,
-  chainId = 100,
   status,
   policyURI,
   explorerAddress,
   className,
+  itemId,
+  registryAddress,
+  refetch = () => {},
 }) => {
-  const [isRemoveListModalOpen, toggleRemoveListModal] = useToggle(false);
   const [imageSrc, setImageSrc] = useState(getIpfsUrl(logoURI ?? ""));
   useEffect(() => setImageSrc(getIpfsUrl(logoURI)), [logoURI]);
 
   return (
-    <>
-      <StyledCard {...{ className }}>
-        <TopInfo>
-          <TopLeftInfo>
-            <LogoAndTitle>
-              {isUndefined(logoURI) ? (
-                <SkeletonLogo />
-              ) : (
-                <StyledLogo
-                  src={imageSrc}
-                  onError={() => setImageSrc(getIpfsUrl(DEFAULT_LIST_LOGO))}
-                  alt="List Img"
-                  isListView={false}
-                />
-              )}
-              {isUndefined(title) ? <SkeletonTitle /> : <StyledTitle>{title}</StyledTitle>}
-            </LogoAndTitle>
-            {isUndefined(description) ? <SkeletonDescription /> : <StyledP>{description}</StyledP>}
-          </TopLeftInfo>
-          <TopRightInfo>
-            <Copiable copiableContent={id ?? ""} info="Copy Registry Id">
-              <StyledLabel>Id</StyledLabel>
-            </Copiable>
-            {explorerAddress ? (
-              <a
-                href={`${SUPPORTED_CHAINS[DEFAULT_CHAIN].blockExplorers?.default.url}/address/${explorerAddress}`}
-                target="_blank"
-                rel="noreferrer"
-              >
-                <StyledEtherscanIcon />
-              </a>
-            ) : null}
-            <StatusContainer {...{ status }}>
-              <label className="front-color dot">{getStatusLabel(status)}</label>
-            </StatusContainer>
-          </TopRightInfo>
-        </TopInfo>
-        <Divider />
-        <BottomInfo>
-          <Copiable copiableContent={registerer ?? ""}>
-            <AliasDisplay address={registerer} />
+    <StyledCard {...{ className }}>
+      <TopInfo>
+        <TopLeftInfo>
+          <LogoAndTitle>
+            {isUndefined(logoURI) ? (
+              <SkeletonLogo />
+            ) : (
+              <StyledLogo
+                src={imageSrc}
+                onError={() => setImageSrc(getIpfsUrl(DEFAULT_LIST_LOGO))}
+                alt="List Img"
+                isListView={false}
+              />
+            )}
+            {isUndefined(title) ? <SkeletonTitle /> : <StyledTitle>{title}</StyledTitle>}
+          </LogoAndTitle>
+          {isUndefined(description) ? <SkeletonDescription /> : <StyledP>{description}</StyledP>}
+        </TopLeftInfo>
+        <TopRightInfo>
+          <Copiable copiableContent={id ?? ""} info="Copy Registry Address">
+            <StyledLabel>Registry Address</StyledLabel>
           </Copiable>
-          <Button variant="secondary" text={"Remove List"} onClick={toggleRemoveListModal} />
-        </BottomInfo>
-        <Policies policyURI={policyURI} />
-      </StyledCard>
-      {isRemoveListModalOpen ? <RemoveModal isItem={false} toggleModal={toggleRemoveListModal} /> : null}
-    </>
+          {explorerAddress ? (
+            <a
+              href={`${SUPPORTED_CHAINS[DEFAULT_CHAIN].blockExplorers?.default.url}/address/${explorerAddress}`}
+              target="_blank"
+              rel="noreferrer"
+            >
+              <StyledEtherscanIcon />
+            </a>
+          ) : null}
+          <StatusContainer {...{ status }}>
+            <label className="front-color dot">{getStatusLabel(status)}</label>
+          </StatusContainer>
+        </TopRightInfo>
+      </TopInfo>
+      <Divider />
+      <BottomInfo>
+        <Copiable copiableContent={registerer ?? ""}>
+          <AliasDisplay address={registerer} />
+        </Copiable>
+        <ActionButton {...{ status, registryAddress, itemId, isItem: false, refetch }} />
+      </BottomInfo>
+      <Policies policyURI={policyURI} />
+    </StyledCard>
   );
 };
 
diff --git a/web/src/components/ItemCard/ItemField/ImageField.tsx b/web/src/components/ItemCard/ItemField/ImageField.tsx
index f0d636e..2611753 100644
--- a/web/src/components/ItemCard/ItemField/ImageField.tsx
+++ b/web/src/components/ItemCard/ItemField/ImageField.tsx
@@ -3,8 +3,8 @@ import styled from "styled-components";
 import { getIpfsUrl } from "utils/getIpfsUrl";
 
 const StyledImg = styled.img<{ detailed?: boolean }>`
-  width: ${({ detailed }) => (detailed ? "125px" : "60px")};
-  height: ${({ detailed }) => (detailed ? "125px" : "60px")};
+  width: ${({ detailed }) => (detailed ? "125px" : "40px")};
+  height: ${({ detailed }) => (detailed ? "125px" : "40px")};
   object-fit: contain;
 `;
 
diff --git a/web/src/components/ItemCard/index.tsx b/web/src/components/ItemCard/index.tsx
index e9ea748..87635ce 100644
--- a/web/src/components/ItemCard/index.tsx
+++ b/web/src/components/ItemCard/index.tsx
@@ -36,7 +36,7 @@ const Container = styled.div`
       height: 64px;
       justify-content: space-between;
       grid-template-rows: 1fr;
-      grid-template-columns: 1fr ${responsiveSize(100, 150, 900)} max-content;
+      grid-template-columns: 1fr ${responsiveSize(150, 180, 900)} max-content;
       padding: 0 32px;
     `
   )}
diff --git a/web/src/components/ItemInformationCard/index.tsx b/web/src/components/ItemInformationCard/index.tsx
index c1c6768..3d1afc3 100644
--- a/web/src/components/ItemInformationCard/index.tsx
+++ b/web/src/components/ItemInformationCard/index.tsx
@@ -1,15 +1,17 @@
 import React from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { responsiveSize } from "styles/responsiveSize";
-import { useToggle } from "react-use";
-import { Button, Card, Copiable } from "@kleros/ui-components-library";
+import { Card, Copiable } from "@kleros/ui-components-library";
 import AliasDisplay from "components/RegistryInfo/AliasDisplay";
-import RemoveModal from "../Modal/RemoveModal";
 import { ItemDetailsFragment } from "src/graphql/graphql";
 import { Policies } from "../InformationCard/Policies";
 import FieldsDisplay from "./FieldsDisplay";
 import StatusDisplay from "./StatusDisplay";
 import Skeleton from "react-loading-skeleton";
+import ActionButton from "../ActionButton";
+import { Address } from "viem";
+import { mapFromSubgraphStatus } from "../RegistryCard/StatusBanner";
+import { landscapeStyle } from "styles/landscapeStyle";
 
 const StyledCard = styled(Card)`
   display: flex;
@@ -25,6 +27,11 @@ const TopInfo = styled.div`
   flex-wrap: wrap;
   gap: 12px;
   padding: 12px 32px;
+  ${landscapeStyle(
+    () => css`
+      flex-wrap: nowrap;
+    `
+  )};
 `;
 
 const TopLeftInfo = styled.div`
@@ -42,10 +49,11 @@ const TopRightInfo = styled.div`
   align-items: start;
   gap: 48px;
   padding-top: 20px;
+  flex-shrink: 0;
 `;
 
 const StyledLabel = styled.label`
-  color: ${({ theme }) => theme.primaryText};
+  color: ${({ theme }) => theme.primaryBlue};
 `;
 
 const Divider = styled.hr`
@@ -66,12 +74,12 @@ const BottomInfo = styled.div`
 
 interface IItemInformationCard extends ItemDetailsFragment {
   className?: string;
-  chainId?: number;
   policyURI: string;
+  registryAddress: Address;
+  refetch: () => void;
 }
 
 const ItemInformationCard: React.FC<IItemInformationCard> = ({
-  chainId = 100,
   className,
   registerer,
   status,
@@ -79,9 +87,9 @@ const ItemInformationCard: React.FC<IItemInformationCard> = ({
   policyURI,
   itemID,
   props,
+  registryAddress,
+  refetch = () => {},
 }) => {
-  const [isRemoveItemModalOpen, toggleRemoveItemModal] = useToggle(false);
-
   return (
     <>
       <StyledCard {...{ className }}>
@@ -89,7 +97,7 @@ const ItemInformationCard: React.FC<IItemInformationCard> = ({
           <TopLeftInfo>{props ? <FieldsDisplay {...{ props }} /> : <Skeleton height={80} width={160} />}</TopLeftInfo>
           <TopRightInfo>
             <Copiable copiableContent={itemID ?? ""} info="Copy Item Id">
-              <StyledLabel>Id</StyledLabel>
+              <StyledLabel>Item Id</StyledLabel>
             </Copiable>
             <StatusDisplay {...{ status, disputed }} />
           </TopRightInfo>
@@ -103,11 +111,18 @@ const ItemInformationCard: React.FC<IItemInformationCard> = ({
           ) : (
             <Skeleton height={24} />
           )}
-          <Button variant="secondary" text={"Remove Item"} onClick={toggleRemoveItemModal} />
+          <ActionButton
+            {...{
+              status: mapFromSubgraphStatus(status, disputed),
+              itemId: itemID,
+              registryAddress,
+              isItem: true,
+              refetch,
+            }}
+          />
         </BottomInfo>
         <Policies policyURI={policyURI} isItem />
       </StyledCard>
-      {isRemoveItemModalOpen ? <RemoveModal isItem toggleModal={toggleRemoveItemModal} /> : null}
     </>
   );
 };
diff --git a/web/src/components/Modal/ChallengeItemModal.tsx b/web/src/components/Modal/ChallengeItemModal.tsx
deleted file mode 100644
index 33f33c7..0000000
--- a/web/src/components/Modal/ChallengeItemModal.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React, { useRef } from "react";
-import styled from "styled-components";
-import { useClickAway } from "react-use";
-import { Overlay } from "components/Overlay";
-import Header from "./Header";
-import Buttons from "./Buttons";
-import DepositRequired from "./DepositRequired";
-import { StyledModal } from "./StyledModal";
-import Info from "./Info";
-
-const ReStyledModal = styled(StyledModal)`
-  gap: 32px;
-`;
-
-interface IChallengeItemModal {
-  toggleModal: () => void;
-}
-
-const alertMessage =
-  "When you challenge an item a dispute starts. Random jurors are selected to decide if" +
-  " the item should be removed or included. In case the challenger wins the deposit is" +
-  " reimbursed, in case the challenger loses the deposit is lost. Make sure you read" +
-  " and understand the Policy before proceeding.";
-
-const ChallengeItemModal: React.FC<IChallengeItemModal> = ({ toggleModal }) => {
-  const containerRef = useRef(null);
-  useClickAway(containerRef, () => toggleModal());
-
-  return (
-    <>
-      <Overlay />
-      <ReStyledModal ref={containerRef}>
-        <Header text="Challenge Item" />
-        <DepositRequired />
-        <Info alertMessage={alertMessage} />
-        <Buttons buttonText="Challenge" toggleModal={toggleModal} />
-      </ReStyledModal>
-    </>
-  );
-};
-
-export default ChallengeItemModal;
diff --git a/web/src/components/Modal/RemoveModal.tsx b/web/src/components/Modal/RemoveModal.tsx
deleted file mode 100644
index ce22058..0000000
--- a/web/src/components/Modal/RemoveModal.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React, { useRef } from "react";
-import styled from "styled-components";
-import { useClickAway } from "react-use";
-import { Overlay } from "components/Overlay";
-import Header from "./Header";
-import Buttons from "./Buttons";
-import DepositRequired from "./DepositRequired";
-import { StyledModal } from "./StyledModal";
-import Info from "./Info";
-
-const ReStyledModal = styled(StyledModal)`
-  gap: 32px;
-`;
-
-interface IRemoveModal {
-  toggleModal: () => void;
-  isItem: boolean;
-}
-
-const alertMessage = (isItem: boolean) =>
-  `When you request ${isItem ? "an item" : "a list"} to be removed it goes to the Pending state for a while.` +
-  ` During that time the removal can be challenged starting a dispute. If the ${isItem ? "item" : "list"} is` +
-  ` removed the deposit is reimbursed, in case the ${isItem ? "item" : "list"} is not removed the deposit is lost.` +
-  ` Make sure you read and understand the Policy before proceeding.`;
-
-const RemoveModal: React.FC<IRemoveModal> = ({ toggleModal, isItem }) => {
-  const containerRef = useRef(null);
-  useClickAway(containerRef, () => toggleModal());
-
-  return (
-    <>
-      <Overlay />
-      <ReStyledModal ref={containerRef}>
-        <Header text={`Remove ${isItem ? "Item" : "List"}`} />
-        <DepositRequired />
-        <Info alertMessage={alertMessage(isItem)} />
-        <Buttons buttonText="Remove" toggleModal={toggleModal} />
-      </ReStyledModal>
-    </>
-  );
-};
-
-export default RemoveModal;
diff --git a/web/src/components/RegistriesDisplay/RegistriesGrid.tsx b/web/src/components/RegistriesDisplay/RegistriesGrid.tsx
index 1c94a9b..8eaef71 100644
--- a/web/src/components/RegistriesDisplay/RegistriesGrid.tsx
+++ b/web/src/components/RegistriesDisplay/RegistriesGrid.tsx
@@ -40,6 +40,7 @@ export interface IRegistriesGrid {
   setCurrentPage: (newPage: number) => void;
   registriesPerPage: number;
   totalPages: number;
+  showPagination?: Boolean;
 }
 
 const RegistriesGrid: React.FC<IRegistriesGrid> = ({
@@ -49,6 +50,7 @@ const RegistriesGrid: React.FC<IRegistriesGrid> = ({
   totalPages,
   currentPage,
   setCurrentPage,
+  showPagination,
 }) => {
   const { filter } = useParams();
   const decodedFilter = decodeListURIFilter(filter ?? "all");
@@ -90,7 +92,7 @@ const RegistriesGrid: React.FC<IRegistriesGrid> = ({
         </GridContainer>
       )}
 
-      {isUndefined(searchValue) ? (
+      {isUndefined(searchValue) && showPagination ? (
         <StyledPagination
           currentPage={currentPage}
           numPages={Math.ceil(totalPages ?? 0)}
diff --git a/web/src/components/RegistriesDisplay/index.tsx b/web/src/components/RegistriesDisplay/index.tsx
index 44abb6a..899fc51 100644
--- a/web/src/components/RegistriesDisplay/index.tsx
+++ b/web/src/components/RegistriesDisplay/index.tsx
@@ -9,6 +9,7 @@ interface IRegistriesDisplay extends IRegistriesGrid {
   registriesLoading?: boolean;
   totalRegistries?: number;
   title?: string;
+  showPagination?: Boolean;
   className?: string;
 }
 
@@ -21,6 +22,7 @@ const RegistriesDisplay: React.FC<IRegistriesDisplay> = ({
   registriesPerPage,
   className,
   totalPages,
+  showPagination,
 }) => {
   return (
     <div {...{ className }}>
@@ -38,6 +40,7 @@ const RegistriesDisplay: React.FC<IRegistriesDisplay> = ({
             currentPage,
             setCurrentPage,
             registriesLoading,
+            showPagination,
           }}
         />
       )}
diff --git a/web/src/components/RegistryCard/RegistryInfo.tsx b/web/src/components/RegistryCard/RegistryInfo.tsx
index 33fc6c1..f9b7b21 100644
--- a/web/src/components/RegistryCard/RegistryInfo.tsx
+++ b/web/src/components/RegistryCard/RegistryInfo.tsx
@@ -27,7 +27,7 @@ const Container = styled.div<{ isListView: boolean }>`
       display: grid;
       grid-template-rows: repeat(3, min-content);
       grid-template-columns: 21px max-content 1fr max-content;
-      column-gap: ${responsiveSize(8, 12, 900)};
+      column-gap: ${responsiveSize(8, 24, 900)};
       row-gap: 16px;
       padding: 16px;
       h3,
@@ -53,8 +53,8 @@ const Container = styled.div<{ isListView: boolean }>`
 `;
 
 const StyledLogo = styled.img<{ isListView: boolean }>`
-  width: ${({ isListView }) => (isListView ? "48px" : "125px")};
-  height: ${({ isListView }) => (isListView ? "48px" : "125px")};
+  width: ${({ isListView }) => (isListView ? "40px" : "125px")};
+  height: ${({ isListView }) => (isListView ? "40px" : "125px")};
   object-fit: contain;
   margin-bottom: ${({ isListView }) => (isListView ? "0px" : "8px")};
 `;
@@ -93,8 +93,8 @@ const StyledButton = styled(Button)`
 `;
 
 const SkeletonLogo = styled(Skeleton)<{ isListView: boolean }>`
-  width: ${({ isListView }) => (isListView ? "48px" : "125px")};
-  height: ${({ isListView }) => (isListView ? "48px" : "125px")};
+  width: ${({ isListView }) => (isListView ? "40px" : "125px")};
+  height: ${({ isListView }) => (isListView ? "40px" : "125px")};
   border-radius: ${({ isListView }) => (isListView ? "24px" : "62.5px")};
   margin-bottom: ${({ isListView }) => (isListView ? "0px" : "8px")};
 `;
diff --git a/web/src/components/RegistryCard/StatusBanner.tsx b/web/src/components/RegistryCard/StatusBanner.tsx
index 37cc3ba..7d5ccda 100644
--- a/web/src/components/RegistryCard/StatusBanner.tsx
+++ b/web/src/components/RegistryCard/StatusBanner.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import styled, { Theme } from "styled-components";
 import { Status } from "consts/status";
+import { Status as SubgraphStatus } from "src/graphql/graphql";
 
 const Container = styled.div<{ status: Status; isListView: boolean }>`
   height: ${({ isListView }) => (isListView ? "min-content" : "45px")};
@@ -45,7 +46,8 @@ interface IStatusBanner {
 
 export const getStatusColor = (status: Status, theme: Theme): [string, string] => {
   switch (status) {
-    case Status.Pending:
+    case Status.RegistrationPending:
+    case Status.ClearingPending:
       return [theme.primaryBlue, theme.mediumBlue];
     case Status.Disputed:
       return [theme.secondaryPurple, theme.mediumPurple];
@@ -60,8 +62,10 @@ export const getStatusColor = (status: Status, theme: Theme): [string, string] =
 
 export const getStatusLabel = (status: Status): string => {
   switch (status) {
-    case Status.Pending:
-      return "Pending";
+    case Status.RegistrationPending:
+      return "Registration Pending";
+    case Status.ClearingPending:
+      return "Clearing Pending";
     case Status.Disputed:
       return "Disputed";
     case Status.Included:
@@ -76,15 +80,14 @@ export const getStatusLabel = (status: Status): string => {
 export const mapFromSubgraphStatus = (status: string, isDisputed: boolean) => {
   if (isDisputed) return Status.Disputed;
   switch (status) {
-    case "absent":
+    case SubgraphStatus.Absent:
       return Status.Removed;
-    case "registered":
+    case SubgraphStatus.Registered:
       return Status.Included;
-    case "clearingRequested":
-    case "registrationRequested":
-      return Status.Pending;
+    case SubgraphStatus.RegistrationRequested:
+      return Status.RegistrationPending;
     default:
-      return Status.Pending;
+      return Status.ClearingPending;
   }
 };
 const StatusBanner: React.FC<IStatusBanner> = ({ status, isListView = false }) => (
diff --git a/web/src/components/RegistryInfo/AliasDisplay.tsx b/web/src/components/RegistryInfo/AliasDisplay.tsx
index ae81e29..bef153b 100644
--- a/web/src/components/RegistryInfo/AliasDisplay.tsx
+++ b/web/src/components/RegistryInfo/AliasDisplay.tsx
@@ -22,9 +22,10 @@ const TextContainer = styled.div`
 
 interface IAlias {
   address: string;
+  className?: string;
 }
 
-const AliasDisplay: React.FC<IAlias> = ({ address }) => {
+const AliasDisplay: React.FC<IAlias> = ({ address, className }) => {
   const { data: addressFromENS, isLoading } = useEnsAddress({
     enabled: !isAddress(address),
     name: address,
@@ -34,7 +35,7 @@ const AliasDisplay: React.FC<IAlias> = ({ address }) => {
   const finalAddress = addressFromENS ?? address;
 
   return (
-    <AliasContainer>
+    <AliasContainer {...{ className }}>
       {isLoading ? <Skeleton width={30} height={24} /> : <IdenticonOrAvatar address={finalAddress} size="24" />}
       <TextContainer>
         {isLoading ? <Skeleton width={30} height={24} /> : <AddressOrName address={finalAddress} />}&nbsp;
diff --git a/web/src/components/StyledSkeleton.tsx b/web/src/components/StyledSkeleton.tsx
index f4888d5..8056236 100644
--- a/web/src/components/StyledSkeleton.tsx
+++ b/web/src/components/StyledSkeleton.tsx
@@ -24,6 +24,29 @@ const StyledSkeletonEvidenceCard = styled(Skeleton)`
   width: 76vw;
 `;
 
+const HistorySkeletonContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+const HistoryStatusSkeleton = styled(Skeleton)`
+  height: 24px;
+  width: 160px;
+`;
+const HistoryDateSkeleton = styled(Skeleton)`
+  height: 18px;
+  width: 100px;
+`;
+
+export const HistorySkeletonCard = () => (
+  <HistorySkeletonContainer>
+    <HistoryStatusSkeleton />
+    <HistoryDateSkeleton />
+    <HistoryStatusSkeleton />
+    <HistoryDateSkeleton />
+  </HistorySkeletonContainer>
+);
+
 export const SkeletonRegistryCard = () => (
   <SkeletonRegistryCardContainer>
     <StyledSkeletonRegistryCard />
diff --git a/web/src/consts/filters.ts b/web/src/consts/filters.ts
index d68c94e..fda45d5 100644
--- a/web/src/consts/filters.ts
+++ b/web/src/consts/filters.ts
@@ -1,7 +1,7 @@
 import { Status } from "src/graphql/graphql";
 
 export const List_filters = {
-  Pending: { status_in: [Status.RegistrationRequested, Status.ClearingRequested] },
+  Pending: { status_in: [Status.RegistrationRequested, Status.ClearingRequested], disputed: false },
   Disputed: { disputed: true },
   Included: { status: Status.Registered },
   Removed: { status: Status.Absent },
diff --git a/web/src/consts/index.ts b/web/src/consts/index.ts
index 998288a..5346b39 100644
--- a/web/src/consts/index.ts
+++ b/web/src/consts/index.ts
@@ -1,4 +1,3 @@
-import { Status } from "src/graphql/graphql";
 import { version, gitCommitHash, gitCommitShortHash, gitBranch, gitTags, clean } from "../generatedGitInfo.json";
 
 export const ONE_BASIS_POINT = 10000n;
@@ -21,99 +20,4 @@ export const ETH_SIGNATURE_REGEX = /^0x[a-fA-F0-9]{130}$/;
 export const DEFAULT_LIST_LOGO = "ipfs://QmWfxEmfEWwM6LDgER2Qp2XZpK1MbDtNp7uGqCS4UPNtgJ/symbol-CURATE.png";
 export const CURATION_POLICY = `${IPFS_GATEWAY}/ipfs/QmWciZMi8mBJg34FapRHK4Yh7a6UqmxrpcKQ3KRNMXzjfx`;
 
-// export const items = [
-//   {
-//     id: 1,
-//     title: "ENS Resolver",
-//     address: "0x922911F4f80a569a4425fa083456239838F7F003",
-//     website: "metamask.io",
-//     status: Status.Removed,
-//   },
-//   {
-//     id: 2,
-//     title: "ENS Resolver",
-//     address: "0x922911F4f80a569a4425fa083456239838F7F003",
-//     website: "metamask.io",
-//     status: Status.Removed,
-//   },
-//   {
-//     id: 3,
-//     title: "ENS Resolver",
-//     address: "0x922911F4f80a569a4425fa083456239838F7F003",
-//     website: "metamask.io",
-//     status: Status.Removed,
-//   },
-//   {
-//     id: 4,
-//     title: "ENS Resolver",
-//     address: "0x922911F4f80a569a4425fa083456239838F7F003",
-//     website: "metamask.io",
-//     status: Status.Removed,
-//   },
-//   {
-//     id: 5,
-//     title: "ENS Resolver",
-//     address: "0x922911F4f80a569a4425fa083456239838F7F003",
-//     website: "metamask.io",
-//     status: Status.Removed,
-//   },
-// ];
-export const items = [
-  {
-    id: "1",
-    status: Status.Registered,
-    registerer: { id: "0x922911F4f80a569a4425fa083456239838F7F003" },
-    disputed: false,
-    props: [
-      {
-        label: "Address",
-        description: "The token address.",
-        value: "0x93ED3FBe21207Ec2E8f2d3c3de6e058Cb73Bc04d",
-        isIdentifier: true,
-        type: "address",
-      },
-      {
-        label: "Chain ID",
-        description: "The ID of the chain the token contract was deployed",
-        value: "1",
-        isIdentifier: false,
-        type: "number",
-      },
-      {
-        label: "Decimals",
-        description: "The number of decimal places.",
-        value: "18",
-        isIdentifier: false,
-        type: "number",
-      },
-      {
-        label: "Logo",
-        description: "The token's logo.",
-        value: "/ipfs/QmQnCc3d5bjLkaqkrXuzyJ7kw3U9nu26neMFha1FK8FapL/dai.png",
-        isIdentifier: false,
-        type: "image",
-      },
-      {
-        label: "Name",
-        description: "The token name.",
-        value: "Ethereum",
-        isIdentifier: true,
-        type: "text",
-      },
-      {
-        label: "Ticker",
-        description: "The token ticker.",
-        value: "ETH",
-        isIdentifier: true,
-        type: "text",
-      },
-      {
-        label: "Policy",
-        description: "The token policy.",
-        value: "/ipfs/QmU4X2mjdi7QtcV8TnDKzvR782oDZbKkFPrRLPQnHjy8SW/PoH Origin Constitution (final draft).pdf",
-        isIdentifier: true,
-        type: "file",
-      },
-    ],
-  },
-];
+export const COURT_SITE = "https://dev--kleros-v2.netlify.app/#/cases";
diff --git a/web/src/consts/status.ts b/web/src/consts/status.ts
index cf934ce..10fa082 100644
--- a/web/src/consts/status.ts
+++ b/web/src/consts/status.ts
@@ -1,5 +1,6 @@
 export enum Status {
-  Pending,
+  RegistrationPending,
+  ClearingPending,
   Disputed,
   Included,
   Removed,
diff --git a/web/src/context/SubmitItemContext.tsx b/web/src/context/SubmitItemContext.tsx
index ed5c9ad..a1b1858 100644
--- a/web/src/context/SubmitItemContext.tsx
+++ b/web/src/context/SubmitItemContext.tsx
@@ -1,5 +1,6 @@
-import React, { createContext, useContext, useMemo } from "react";
+import React, { createContext, useContext, useEffect, useMemo } from "react";
 import { useLocalStorage } from "hooks/useLocalStorage";
+import { useLocation } from "react-router-dom";
 
 type Fields = {
   columns: {
@@ -34,6 +35,8 @@ const SubmitItemContext = createContext<ISubmitItemContext>(initialSubmitItemCon
 export const useSubmitItemContext = () => useContext(SubmitItemContext);
 
 export const SubmitItemProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const location = useLocation();
+
   const [fields, setFields] = useLocalStorage<Fields>("fields", initialSubmitItemContext.fields);
   const [submissionDeposit, setSubmissionDeposit] = useLocalStorage<string | null>("submissionDeposit", null);
   const [isPolicyRead, setIsPolicyRead] = useLocalStorage<boolean>(
@@ -42,11 +45,18 @@ export const SubmitItemProvider: React.FC<{ children: React.ReactNode }> = ({ ch
   );
 
   const resetItemData = () => {
-    setFields({ ...initialSubmitItemContext.fields });
+    setFields({ columns: [] });
     setIsPolicyRead(initialSubmitItemContext.isPolicyRead);
     setSubmissionDeposit(null);
   };
 
+  useEffect(() => {
+    // Cleanup function to clear local storage when user leaves the route
+    if (location.pathname.includes("/submit-item")) return;
+
+    resetItemData();
+  }, [location.pathname]);
+
   const contextValues = useMemo(
     () => ({
       fields,
diff --git a/web/src/context/SubmitListContext.tsx b/web/src/context/SubmitListContext.tsx
index 660678b..4c8898f 100644
--- a/web/src/context/SubmitListContext.tsx
+++ b/web/src/context/SubmitListContext.tsx
@@ -1,7 +1,8 @@
-import React, { createContext, useState, useContext, useMemo } from "react";
+import React, { createContext, useState, useContext, useMemo, useEffect } from "react";
 
 import { useLocalStorage } from "hooks/useLocalStorage";
 import { EVIDENCE_MODULE, KLEROS_ARBITRATOR } from "consts/arbitration";
+import { useLocation } from "react-router-dom";
 
 export interface IList {
   governor: string;
@@ -121,12 +122,20 @@ export const SubmitListProvider: React.FC<{ children: React.ReactNode }> = ({ ch
   const [isPolicyUploading, setIsPolicyUploading] = useState<boolean>(false);
   const [isLogoUploading, setIsLogoUploading] = useState<boolean>(false);
   const [progress, setProgress] = useState<ListProgress>(ListProgress.Start);
+  const location = useLocation();
 
   const resetListData = () => {
     setListData(initialListData);
     setListMetadata(initialListMetadata);
   };
 
+  useEffect(() => {
+    // Cleanup function to clear local storage when user leaves the route
+    if (location.pathname.includes("/submit-list")) return;
+
+    resetListData();
+  }, [location.pathname]);
+
   const contextValues = useMemo(
     () => ({
       listData,
diff --git a/web/src/hooks/queries/useItemDetailsQuery.ts b/web/src/hooks/queries/useItemDetailsQuery.ts
index f741ec4..87ec55a 100644
--- a/web/src/hooks/queries/useItemDetailsQuery.ts
+++ b/web/src/hooks/queries/useItemDetailsQuery.ts
@@ -10,6 +10,7 @@ const itemDetailsQuery = graphql(`
       id
       itemID
       status
+      data
       disputed
       key0
       key1
diff --git a/web/src/hooks/queries/useItemsQuery.ts b/web/src/hooks/queries/useItemsQuery.ts
index 5761472..0b3a35a 100644
--- a/web/src/hooks/queries/useItemsQuery.ts
+++ b/web/src/hooks/queries/useItemsQuery.ts
@@ -80,7 +80,7 @@ export const useItemsQuery = (
     : itemsQueryWhere;
 
   return useQuery<{ items: ItemDetailsFragment[] }>({
-    queryKey: [`useItemsQuery`, skip, where, sortOrder, first, keywords],
+    queryKey: ["refetchOnBlock", `useItemsQuery`, skip, where, sortOrder, first, keywords],
     queryFn: async () => {
       const result = await graphqlBatcher.fetch({
         id: crypto.randomUUID(),
diff --git a/web/src/hooks/queries/useRegistriesByIdsQuery.ts b/web/src/hooks/queries/useRegistriesByIdsQuery.ts
index b950743..164daa4 100644
--- a/web/src/hooks/queries/useRegistriesByIdsQuery.ts
+++ b/web/src/hooks/queries/useRegistriesByIdsQuery.ts
@@ -1,6 +1,7 @@
 import { graphql } from "src/graphql";
 import { useQuery } from "@tanstack/react-query";
 import { useGraphqlBatcher } from "context/GraphqlBatcher";
+import { GetRegistriesByIdsQuery } from "src/graphql/graphql";
 
 export const registriesByIdsQuery = graphql(`
   query GetRegistriesByIds($ids: [ID!]!) {
@@ -19,7 +20,7 @@ export const registriesByIdsQuery = graphql(`
 export const useRegistriesByIdsQuery = (ids) => {
   const { graphqlBatcher } = useGraphqlBatcher();
 
-  return useQuery({
+  return useQuery<GetRegistriesByIdsQuery>({
     queryKey: ["GetRegistriesByIds", ids.join(",")],
     queryFn: async () =>
       await graphqlBatcher.fetch({
diff --git a/web/src/hooks/queries/useRegistryDetailsQuery.ts b/web/src/hooks/queries/useRegistryDetailsQuery.ts
index a72e607..99a64c6 100644
--- a/web/src/hooks/queries/useRegistryDetailsQuery.ts
+++ b/web/src/hooks/queries/useRegistryDetailsQuery.ts
@@ -9,6 +9,7 @@ export const itemFragment = graphql(`
   fragment RegistryItemDetails on Item {
     id
     status
+    disputed
     props {
       label
       description
diff --git a/web/src/hooks/queries/useRequestsQuery.ts b/web/src/hooks/queries/useRequestsQuery.ts
new file mode 100644
index 0000000..453f2b0
--- /dev/null
+++ b/web/src/hooks/queries/useRequestsQuery.ts
@@ -0,0 +1,57 @@
+import { graphql } from "src/graphql";
+import { useQuery } from "@tanstack/react-query";
+import { useGraphqlBatcher } from "context/GraphqlBatcher";
+import { RequestDetailsFragment } from "src/graphql/graphql";
+
+export const requestDetailsFragment = graphql(`
+  fragment RequestDetails on Request {
+    id
+    disputed
+    disputeID
+    submissionTime
+    resolved
+    requester {
+      id
+    }
+    challenger {
+      id
+    }
+    arbitrator
+    arbitratorExtraData
+    deposit
+    disputeOutcome
+    requestType
+    resolutionTime
+    finalRuling
+    creationTx
+    resolutionTx
+  }
+`);
+
+const requestQuery = graphql(`
+  query ItemRequests($id: ID!) {
+    item(id: $id) {
+      requests {
+        ...RequestDetails
+      }
+    }
+  }
+`);
+
+export const useItemRequests = (id?: string | number) => {
+  const isEnabled = id !== undefined;
+  const { graphqlBatcher } = useGraphqlBatcher();
+
+  return useQuery<{ requests: RequestDetailsFragment[] }>({
+    queryKey: ["refetchOnBlock", `requestsQuery${id}`],
+    enabled: isEnabled,
+    queryFn: async () =>
+      (
+        await graphqlBatcher.fetch({
+          id: crypto.randomUUID(),
+          document: requestQuery,
+          variables: { id },
+        })
+      )?.item,
+  });
+};
diff --git a/web/src/pages/AllLists/ItemDisplay/index.tsx b/web/src/pages/AllLists/ItemDisplay/index.tsx
index fa0eb34..34a8290 100644
--- a/web/src/pages/AllLists/ItemDisplay/index.tsx
+++ b/web/src/pages/AllLists/ItemDisplay/index.tsx
@@ -1,51 +1,30 @@
 import React from "react";
-import { useTheme } from "styled-components";
 import { useParams } from "react-router-dom";
-import ClosedIcon from "svgs/icons/check-circle-outline.svg";
 import History from "components/HistoryDisplay";
 import { useItemDetailsQuery } from "queries/useItemDetailsQuery";
 import { useRegistryDetailsQuery } from "queries/useRegistryDetailsQuery";
-import { mapFromSubgraphStatus } from "components/RegistryCard/StatusBanner";
 import ItemInformationCard from "components/ItemInformationCard";
 
 const ItemDisplay: React.FC = () => {
   const { itemId } = useParams();
   const [, listAddress] = itemId?.split("@");
-  const { data: itemDetails } = useItemDetailsQuery(itemId);
-  const { data: registryDetails } = useRegistryDetailsQuery(listAddress);
-  const theme = useTheme();
-  const historyItems = [
-    {
-      title: "Item Submitted",
-      variant: theme.primaryBlue,
-      subtitle: "April 06, 2022",
-      rightSided: true,
-    },
-    {
-      title: "Item Challenged",
-      party: "- Case #1369 by Alice.eth",
-      variant: theme.secondaryPurple,
-      subtitle: "April 07, 2022",
-      rightSided: true,
-    },
-    {
-      title: "Item Submitted",
-      subtitle: "April 06, 2022",
-      rightSided: true,
-      Icon: ClosedIcon,
-    },
-  ];
+  const { data: itemDetails, refetch: refetchItemDetails } = useItemDetailsQuery(itemId);
+  const { data: registryDetails, refetch: refetchRegistryDetails } = useRegistryDetailsQuery(listAddress);
 
+  const refetch = () => {
+    refetchItemDetails();
+    refetchRegistryDetails();
+  };
   return (
     <div>
       <ItemInformationCard
         {...itemDetails?.item}
-        status={mapFromSubgraphStatus(itemDetails?.item?.status, itemDetails?.item?.disputed)}
-        policyURI={registryDetails?.registry.policyURI}
-        isItem={true}
+        policyURI={registryDetails?.registry.policyURI ?? ""}
+        refetch={refetch}
+        registryAddress={listAddress}
       />
 
-      <History items={historyItems} />
+      <History itemId={itemId ?? ""} isItem />
     </div>
   );
 };
diff --git a/web/src/pages/AllLists/RegistriesFetcher.tsx b/web/src/pages/AllLists/RegistriesFetcher.tsx
index a9643fe..d4391c6 100644
--- a/web/src/pages/AllLists/RegistriesFetcher.tsx
+++ b/web/src/pages/AllLists/RegistriesFetcher.tsx
@@ -6,14 +6,13 @@ import RegistriesDisplay from "components/RegistriesDisplay";
 import { BREAKPOINT_LANDSCAPE } from "styles/landscapeStyle";
 import { DEFAULT_CHAIN } from "consts/chains";
 import { listOfListsAddresses } from "utils/listOfListsAddresses";
-// import { isUndefined } from "utils/index";
-// import { OrderDirection } from "src/graphql/graphql";
 import { useItemsQuery } from "queries/useItemsQuery";
 import { useRegistriesByIdsQuery } from "queries/useRegistriesByIdsQuery";
 import { isUndefined } from "utils/index";
 import { OrderDirection } from "src/graphql/graphql";
 import { useRegistryDetailsQuery } from "hooks/queries/useRegistryDetailsQuery";
 import { List_filters } from "consts/filters";
+import { sortRegistriesByIds } from "utils/sortRegistriesByIds";
 
 const RegistriesFetcher: React.FC = () => {
   const { page, order, filter } = useParams();
@@ -46,9 +45,9 @@ const RegistriesFetcher: React.FC = () => {
   const registryIds = useMemo(
     () =>
       itemsData
-        ? itemsData?.items
+        ? (itemsData?.items
             .map((item) => item?.props[0]?.value?.toLowerCase() ?? undefined)
-            .filter((id) => !isUndefined(id))
+            .filter((id) => !isUndefined(id)) as string[])
         : [],
     [itemsData]
   );
@@ -56,17 +55,23 @@ const RegistriesFetcher: React.FC = () => {
   // get registries by id
   const { data: registriesData, isLoading: isRegistriesDataLoading } = useRegistriesByIdsQuery(registryIds);
 
+  const sortedRegstries = useMemo(
+    () => (registriesData?.registries ? sortRegistriesByIds(registryIds, registriesData?.registries) : []),
+    [registriesData]
+  );
+
   const combinedListsData = useMemo(() => {
-    return registriesData?.registries.map((registry) => {
+    return sortedRegstries.map((registry) => {
       const registryAsItem = itemsData?.items.find((item) => item?.props[0]?.value?.toLowerCase() === registry.id);
       return {
         ...registry,
         totalItems: registry.items.length,
         status: registryAsItem?.status,
+        disputed: registryAsItem?.disputed,
         itemId: registryAsItem?.id,
       };
     });
-  }, [registriesData, itemsData]);
+  }, [sortedRegstries, itemsData]);
 
   const totalRegistries = useMemo<number>(() => {
     if (!mainCurate || !mainCurate.registry) return 0;
@@ -98,6 +103,7 @@ const RegistriesFetcher: React.FC = () => {
       setCurrentPage={(newPage: number) => navigate(`${location}/${newPage}/${order}/${filter}`)}
       totalPages={totalPages}
       registriesPerPage={registriesPerPage}
+      showPagination={!keywords}
     />
   );
 };
diff --git a/web/src/pages/AllLists/RegistryDetails/Tabs.tsx b/web/src/pages/AllLists/RegistryDetails/Tabs.tsx
index 1408ab4..1020f4a 100644
--- a/web/src/pages/AllLists/RegistryDetails/Tabs.tsx
+++ b/web/src/pages/AllLists/RegistryDetails/Tabs.tsx
@@ -22,13 +22,15 @@ const TABS = [
     text: "List",
     value: 0,
     Icon: PaperIcon,
-    path: "list",
+    path: "list/1/desc/all",
+    identifier: "list",
   },
   {
     text: "History",
     value: 1,
     Icon: HistoryIcon,
     path: "history",
+    identifier: "history",
   },
 ];
 
@@ -38,7 +40,7 @@ const Tabs: React.FC = () => {
   const location = useLocation();
   const currentPathName = location.pathname.split("/").at(3);
 
-  const findTabIndex = (pathName) => TABS.findIndex(({ path }) => pathName.startsWith(path));
+  const findTabIndex = (pathName) => TABS.findIndex(({ identifier }) => pathName.startsWith(identifier));
   const [currentTab, setCurrentTab] = useState(findTabIndex(currentPathName));
 
   useEffect(() => {
diff --git a/web/src/pages/AllLists/RegistryDetails/index.tsx b/web/src/pages/AllLists/RegistryDetails/index.tsx
index ed953b0..ae753e1 100644
--- a/web/src/pages/AllLists/RegistryDetails/index.tsx
+++ b/web/src/pages/AllLists/RegistryDetails/index.tsx
@@ -1,27 +1,41 @@
 import React, { useEffect } from "react";
-import { useTheme } from "styled-components";
 import { Navigate, Route, Routes, useParams } from "react-router-dom";
 import InformationCard from "components/InformationCard";
 import Tabs from "./Tabs";
 import List from "./List";
 import History from "components/HistoryDisplay";
 import { useRegistryDetailsContext } from "context/RegistryDetailsContext";
-import ClosedIcon from "assets/svgs/icons/check-circle-outline.svg";
 import { useRegistryDetailsQuery } from "queries/useRegistryDetailsQuery";
 import { useItemDetailsQuery } from "queries/useItemDetailsQuery";
 import { mapFromSubgraphStatus } from "components/RegistryCard/StatusBanner";
 
 const RegistryDetails: React.FC = () => {
-  const theme = useTheme();
   const { id } = useParams();
 
   const [listAddress, itemId] = id?.split("-");
+  const [, registryAddress] = itemId.split("@");
 
-  const { data: itemDetails } = useItemDetailsQuery(itemId?.toLowerCase());
-  const { data: registryDetails } = useRegistryDetailsQuery(listAddress?.toLowerCase());
+  const { data: itemDetails, refetch: refetchItemDetails } = useItemDetailsQuery(itemId?.toLowerCase());
+  const { data: registryDetails, refetch: refetchRegistryDetails } = useRegistryDetailsQuery(
+    listAddress?.toLowerCase()
+  );
+
+  const refetch = () => {
+    refetchItemDetails();
+    refetchRegistryDetails();
+  };
 
-  const { title, status, logoURI, policyURI, description, registerer, disputed, setRegistryDetails } =
-    useRegistryDetailsContext();
+  const {
+    title,
+    status,
+    logoURI,
+    policyURI,
+    description,
+    registerer,
+    disputed,
+    setRegistryDetails,
+    itemID: registryAsitemId,
+  } = useRegistryDetailsContext();
 
   useEffect(() => {
     if (itemDetails && registryDetails) {
@@ -33,40 +47,27 @@ const RegistryDetails: React.FC = () => {
     }
   }, [itemDetails, registryDetails, setRegistryDetails]);
 
-  const historyItems = [
-    {
-      title: "List Submitted",
-      variant: theme.primaryBlue,
-      subtitle: "April 06, 2022",
-      rightSided: true,
-    },
-    {
-      title: "List Challenged",
-      party: "- Case #1369 by Alice.eth",
-      variant: theme.secondaryPurple,
-      subtitle: "April 07, 2022",
-      rightSided: true,
-    },
-    {
-      title: "List Submitted",
-      subtitle: "April 06, 2022",
-      rightSided: true,
-      Icon: ClosedIcon,
-    },
-  ];
-
   return (
     <div>
       <InformationCard
         id={listAddress}
-        {...{ title, logoURI, description, policyURI, status: mapFromSubgraphStatus(status, disputed) }}
+        {...{
+          title,
+          logoURI,
+          description,
+          policyURI,
+          status: mapFromSubgraphStatus(status, disputed),
+          itemId: registryAsitemId,
+          refetch,
+        }}
+        registryAddress={registryAddress}
         registerer={registerer?.id}
         explorerAddress={listAddress}
       />
       <Tabs />
       <Routes>
         <Route path="list/:page/:order/:filter" element={<List registryAddress={listAddress} />} />
-        <Route path="history" element={<History items={historyItems} />} />
+        <Route path="history" element={<History itemId={itemId} />} />
         <Route path="*" element={<Navigate to="list/1/desc/all" replace />} />
       </Routes>
     </div>
diff --git a/web/src/pages/AllLists/StyledBreadcrumb.tsx b/web/src/pages/AllLists/StyledBreadcrumb.tsx
index b79c190..0108ad5 100644
--- a/web/src/pages/AllLists/StyledBreadcrumb.tsx
+++ b/web/src/pages/AllLists/StyledBreadcrumb.tsx
@@ -4,6 +4,7 @@ import { Breadcrumb as BreadcrumbBase } from "@kleros/ui-components-library";
 import { useLocation, useNavigate } from "react-router-dom";
 import HomeIcon from "svgs/icons/home.svg";
 import { useRegistryDetailsQuery } from "hooks/queries/useRegistryDetailsQuery";
+import { useLocalStorage } from "hooks/useLocalStorage";
 
 const StyledBreadcrumb = styled(BreadcrumbBase)`
   margin-bottom: 32px;
@@ -20,6 +21,7 @@ const StyledHomeIcon = styled(HomeIcon)`
 const Breadcrumb: React.FC = () => {
   const location = useLocation();
   const navigate = useNavigate();
+  const [registryItemID, setRegistryItemId] = useLocalStorage<string>("registryAsItemID", "");
 
   const [page, listAddress] = useMemo(() => {
     const id = location.pathname.split("/")?.[2];
@@ -32,7 +34,8 @@ const Breadcrumb: React.FC = () => {
         return ["item", address];
       }
       default: {
-        const [address] = id.split("-");
+        const [address, itemId] = id.split("-");
+        setRegistryItemId(itemId);
         return ["list", address];
       }
     }
@@ -58,7 +61,7 @@ const Breadcrumb: React.FC = () => {
         baseItems.push(
           {
             text: registryDetails?.registry?.title ?? "List",
-            value: `/lists/${listAddress}-${location.pathname.split("/")?.[3]}/list/1/desc/all`,
+            value: `/lists/${listAddress}-${registryItemID}/list/1/desc/all`,
           },
           {
             text: "Item",
diff --git a/web/src/pages/Home/Header.tsx b/web/src/pages/Home/Header.tsx
index f7d96d1..689232b 100644
--- a/web/src/pages/Home/Header.tsx
+++ b/web/src/pages/Home/Header.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import { responsiveSize } from "styles/responsiveSize";
 
@@ -19,10 +19,21 @@ const StyledSpan = styled.span`
 `;
 
 const Header: React.FC = () => {
+  const [currentWordIndex, setCurrentWordIndex] = useState(0);
+  const words = ["Lists", "Knowledge"];
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setCurrentWordIndex((prevIndex) => (prevIndex === 0 ? 1 : 0));
+    }, 3000);
+
+    return () => clearInterval(intervalId);
+  }, []);
+
   return (
     <StyledHeader>
       <StyledH1>
-        Community Curated <StyledSpan>Lists</StyledSpan>
+        Community Curated <StyledSpan>{words[currentWordIndex]}</StyledSpan>
       </StyledH1>
     </StyledHeader>
   );
diff --git a/web/src/pages/Home/Highlights/index.tsx b/web/src/pages/Home/Highlights/index.tsx
index 1529450..0eeadae 100644
--- a/web/src/pages/Home/Highlights/index.tsx
+++ b/web/src/pages/Home/Highlights/index.tsx
@@ -14,6 +14,7 @@ import { useNavigateAndScrollTop } from "hooks/useNavigateAndScrollTop";
 import { useItemsQuery } from "queries/useItemsQuery";
 import { useRegistriesByIdsQuery } from "queries/useRegistriesByIdsQuery";
 import { mapFromSubgraphStatus } from "components/RegistryCard/StatusBanner";
+import { sortRegistriesByIds } from "utils/sortRegistriesByIds";
 
 const Container = styled.div`
   width: 100%;
@@ -51,30 +52,35 @@ const HighlightedLists = () => {
     registry: listOfListsAddresses[DEFAULT_CHAIN],
   });
 
-  // TODO: Json.parse can throw error
   const registryIds = useMemo(
     () =>
       itemsData
-        ? itemsData?.items
+        ? (itemsData?.items
             .map((item) => item?.props[0]?.value?.toLowerCase() ?? undefined)
-            .filter((id) => !isUndefined(id))
+            .filter((id) => !isUndefined(id)) as string[])
         : [],
     [itemsData]
   );
 
   const { data: registriesData, isLoading: isRegistriesDataLoading } = useRegistriesByIdsQuery(registryIds);
 
+  const sortedRegstries = useMemo(
+    () => (registriesData?.registries ? sortRegistriesByIds(registryIds, registriesData?.registries) : []),
+    [registriesData]
+  );
+
   const combinedListsData = useMemo(() => {
-    return registriesData?.registries.map((registry) => {
+    return sortedRegstries.map((registry) => {
       const registryAsItem = itemsData?.items.find((item) => item?.props[0]?.value?.toLowerCase() === registry.id);
       return {
         ...registry,
         totalItems: registry.items.length,
         status: registryAsItem?.status,
+        disputed: registryAsItem?.disputed,
         itemId: registryAsItem?.id,
       };
     });
-  }, [registriesData, itemsData]);
+  }, [sortedRegstries, itemsData]);
 
   const registriesLoading = isUndefined(combinedListsData) || isItemsDataLoading || isRegistriesDataLoading;
 
diff --git a/web/src/pages/SubmitItem/Policy/ReadPolicy.tsx b/web/src/pages/SubmitItem/Policy/ReadPolicy.tsx
index 9f738b0..aa7cdb1 100644
--- a/web/src/pages/SubmitItem/Policy/ReadPolicy.tsx
+++ b/web/src/pages/SubmitItem/Policy/ReadPolicy.tsx
@@ -1,5 +1,7 @@
 import React from "react";
 import styled from "styled-components";
+import { useRegistryDetailsContext } from "context/RegistryDetailsContext";
+import { getIpfsUrl } from "utils/getIpfsUrl";
 
 const StyledA = styled.a`
   align-self: center;
@@ -10,11 +12,9 @@ const StyledA = styled.a`
 interface IReadPolicy {}
 
 const ReadPolicy: React.FC<IReadPolicy> = () => {
+  const { policyURI } = useRegistryDetailsContext();
   return (
-    <StyledA
-      href="https://cdn.kleros.link/ipfs/QmSxGYpXHBWBGvGnBeZD1pFxh8fRHj4Z7o3fBzrGiqNx4v/tokens-policy.pdf"
-      target="_blank"
-    >
+    <StyledA href={getIpfsUrl(policyURI ?? "")} target="_blank">
       → Read the policy here ←
     </StyledA>
   );
diff --git a/web/src/pages/SubmitList/index.tsx b/web/src/pages/SubmitList/index.tsx
index c763231..217bd6a 100644
--- a/web/src/pages/SubmitList/index.tsx
+++ b/web/src/pages/SubmitList/index.tsx
@@ -17,7 +17,6 @@ import ItemPreview from "./ItemParameters/ItemPreview";
 import CustomName from "./ItemParameters/CustomName";
 import AdvancedParameters from "./AdvancedParameters";
 import DeployList from "./DeployList";
-import { SubmitListProvider } from "context/SubmitListContext";
 
 const Container = styled.div`
   display: flex;
@@ -69,7 +68,7 @@ const SubmitList: React.FC = () => {
     location.pathname.includes("/deploy");
 
   return (
-    <SubmitListProvider>
+    <>
       <HeroImage />
       <Container>
         {isConnected && !isTimelineHidden ? <StyledLabel>Create a List</StyledLabel> : null}
@@ -98,7 +97,7 @@ const SubmitList: React.FC = () => {
           </ConnectWalletContainer>
         )}
       </Container>
-    </SubmitListProvider>
+    </>
   );
 };
 
diff --git a/web/src/utils/date.ts b/web/src/utils/date.ts
index c0d586a..5d13a77 100644
--- a/web/src/utils/date.ts
+++ b/web/src/utils/date.ts
@@ -19,3 +19,14 @@ export function getOneYearAgoTimestamp(): number {
   const currentTime = new Date().getTime() / 1000;
   return currentTime - 31536000; // One year in seconds
 }
+
+/**
+ *
+ * @param unixTimestamp
+ * @returns formatted date in MM(long)/DD/Year format
+ */
+export function formatDate(unixTimestamp: number): string {
+  const date = new Date(unixTimestamp * 1000);
+  const options: Intl.DateTimeFormatOptions = { month: "long", day: "2-digit", year: "numeric" };
+  return date.toLocaleDateString("en-US", options);
+}
diff --git a/web/src/utils/sortRegistriesByIds.ts b/web/src/utils/sortRegistriesByIds.ts
new file mode 100644
index 0000000..97fe1b1
--- /dev/null
+++ b/web/src/utils/sortRegistriesByIds.ts
@@ -0,0 +1,17 @@
+import { GetRegistriesByIdsQuery } from "src/graphql/graphql";
+
+/**
+ *
+ * @param registryIds Array containing registry ids
+ * @param registries Array containing registry objects to be sorted
+ * @returns An array of Registries matching the order of registryIds
+ */
+export const sortRegistriesByIds = (registryIds: string[], registries: GetRegistriesByIdsQuery["registries"]) => {
+  const idToIndexMap = {};
+  registryIds.forEach((id, index) => {
+    idToIndexMap[id] = index;
+  });
+
+  registries.sort((a, b) => idToIndexMap[a.id] - idToIndexMap[b.id]);
+  return registries;
+};
diff --git a/web/src/utils/submitListUtils.ts b/web/src/utils/submitListUtils.ts
index 622dfe4..62ee481 100644
--- a/web/src/utils/submitListUtils.ts
+++ b/web/src/utils/submitListUtils.ts
@@ -121,14 +121,14 @@ const constructRemovalTemplate = (listMetadata: IListMetadata) => {
           ? `an ${listMetadata.itemName.toLowerCase()}`
           : `a ${listMetadata.itemName.toLowerCase()}`
         : "an item"
-    } to ${listMetadata.title}`,
+    } from ${listMetadata.title}`,
     description: `Someone requested to remove ${
       listMetadata.itemName
         ? isVowel(listMetadata.itemName[0])
           ? `an ${listMetadata.itemName.toLowerCase()}`
           : `a ${listMetadata.itemName.toLowerCase()}`
         : "an item"
-    } to ${listMetadata.title}`,
+    } from ${listMetadata.title}`,
     question: `Does the ${
       (listMetadata.itemName && listMetadata.itemName.toLowerCase()) || "item"
     } comply with the required criteria?`,