diff --git a/web/src/app.tsx b/web/src/app.tsx
index 7fc3b8af8..83f82eac0 100644
--- a/web/src/app.tsx
+++ b/web/src/app.tsx
@@ -26,6 +26,7 @@ import Loader from "components/Loader";
 import Layout from "layout/index";
 
 import ErrorFallback from "./components/ErrorFallback";
+import AttachmentDisplay from "./pages/AttachmentDisplay";
 import { SentryRoutes } from "./utils/sentry";
 
 const App: React.FC = () => {
@@ -104,6 +105,14 @@ const App: React.FC = () => {
                             </Suspense>
                           }
                         />
+                        <Route
+                          path="attachment/*"
+                          element={
+                            <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
+                              <AttachmentDisplay />
+                            </Suspense>
+                          }
+                        />
                         <Route path="*" element={<h1>Page not found</h1>} />
                       </Route>
                     </SentryRoutes>
diff --git a/web/src/assets/svgs/icons/caseFromScratch.svg b/web/src/assets/svgs/icons/caseFromScratch.svg
new file mode 100644
index 000000000..d19aab741
--- /dev/null
+++ b/web/src/assets/svgs/icons/caseFromScratch.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80" fill="none">
+  <circle cx="40" cy="40" r="39.5" fill="#2A1260" stroke="#BECCE5"/>
+  <path d="M47.0508 17C48.2809 17 49.443 17.5664 50.2012 18.5352L57.1504 27.4141C57.701 28.1177 57.9999 28.9855 58 29.8789V59C58 61.2091 56.2091 63 54 63H26L25.7939 62.9951C23.6806 62.8879 22 61.14 22 59V21C22 18.7909 23.7909 17 26 17H47.0508ZM26 19C24.8954 19 24 19.8954 24 21V59C24 60.1046 24.8954 61 26 61H54C55.1046 61 56 60.1046 56 59V29.8789C56 29.7509 55.986 29.6243 55.9619 29.5H47V19H26ZM51.5 49.5H29V46.5H51.5V49.5ZM51.5 39.5H29V36.5H51.5V39.5ZM48 28.5H55.4609L48.626 19.7676C48.454 19.5478 48.2394 19.3715 48 19.2422V28.5Z" fill="white"/>
+</svg>
\ No newline at end of file
diff --git a/web/src/assets/svgs/icons/duplicateCase.svg b/web/src/assets/svgs/icons/duplicateCase.svg
new file mode 100644
index 000000000..91ce906f1
--- /dev/null
+++ b/web/src/assets/svgs/icons/duplicateCase.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80" fill="none">
+  <circle cx="40" cy="40" r="39.5" fill="#2A1260" stroke="#BECCE5"/>
+  <path d="M35.9473 54.123L35.7812 54.1191C34.0757 54.0326 32.7197 52.6216 32.7197 50.8945V27.4912H22.2285C21.3371 27.4912 20.6143 28.2141 20.6143 29.1055V59.7715C20.6143 60.6629 21.3371 61.3857 22.2285 61.3857H44.8242C45.7156 61.3857 46.4385 60.6629 46.4385 59.7715V54.123H35.9473ZM35.9473 18.6143C35.0559 18.6143 34.333 19.3371 34.333 20.2285V50.8945C34.333 51.7859 35.0559 52.5087 35.9473 52.5088H58.5439C59.4353 52.5087 60.1582 51.7859 60.1582 50.8945V27.3936C60.1582 27.2903 60.1464 27.1881 60.127 27.0879H52.8945V18.6143H35.9473ZM56.5264 43.2285H38.3682V40.8066H56.5264V43.2285ZM56.5264 35.1582H38.3682V32.7373H56.5264V35.1582ZM53.7021 26.2803H59.7227L54.207 19.2334C54.0683 19.0562 53.8952 18.9139 53.7021 18.8096V26.2803ZM48.0527 59.7715C48.0527 61.5543 46.607 63 44.8242 63H22.2285L22.0615 62.9961C20.3561 62.9094 19 61.4984 19 59.7715V29.1055C19 27.3227 20.4457 25.877 22.2285 25.877H32.7197V20.2285C32.7197 18.4457 34.1645 17.0001 35.9473 17H52.9355C53.9283 17 54.8667 17.4575 55.4785 18.2393L61.0859 25.4043C61.5302 25.9721 61.7714 26.6725 61.7715 27.3936V50.8945C61.7715 52.6773 60.3267 54.123 58.5439 54.123H48.0527V59.7715Z" fill="white"/>
+</svg>
\ No newline at end of file
diff --git a/web/src/components/DisputePreview/Policies.tsx b/web/src/components/DisputePreview/Policies.tsx
index a2d0774c9..ad19094e0 100644
--- a/web/src/components/DisputePreview/Policies.tsx
+++ b/web/src/components/DisputePreview/Policies.tsx
@@ -71,13 +71,13 @@ export const Policies: React.FC<IPolicies> = ({ disputePolicyURI, courtId, attac
     <Container>
       <StyledP>Policy documents:</StyledP>
       {!isUndefined(attachment) && !isUndefined(attachment.uri) ? (
-        <StyledInternalLink to={`attachment/?url=${getIpfsUrl(attachment.uri)}`}>
+        <StyledInternalLink to={`/attachment/?title=${"Case Policy"}&url=${getIpfsUrl(attachment.uri)}`}>
           <StyledPaperclipIcon />
           {attachment.label ?? "Attachment"}
         </StyledInternalLink>
       ) : null}
       {isUndefined(disputePolicyURI) ? null : (
-        <StyledInternalLink to={`policy/attachment/?url=${getIpfsUrl(disputePolicyURI)}`}>
+        <StyledInternalLink to={`/attachment/?title=${"Dispute Policy"}&url=${getIpfsUrl(disputePolicyURI)}`}>
           <StyledPolicyIcon />
           Dispute Policy
         </StyledInternalLink>
diff --git a/web/src/components/EnsureAuth.tsx b/web/src/components/EnsureAuth.tsx
index 6d8d2af88..e3f69264e 100644
--- a/web/src/components/EnsureAuth.tsx
+++ b/web/src/components/EnsureAuth.tsx
@@ -1,18 +1,37 @@
 import React, { useCallback } from "react";
+import styled from "styled-components";
 
 import { useAccount } from "wagmi";
+
 import { useAtlasProvider } from "@kleros/kleros-app";
 import { Button } from "@kleros/ui-components-library";
+
 import { errorToast, infoToast, successToast } from "utils/wrapWithToast";
 
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  justify-content: center;
+  align-items: center;
+`;
+
+const StyledInfo = styled.p`
+  margin: 0;
+  padding: 0;
+`;
+
 interface IEnsureAuth {
   children: React.ReactElement;
+  message?: string;
+  buttonText?: string;
   className?: string;
 }
 
-const EnsureAuth: React.FC<IEnsureAuth> = ({ children, className }) => {
+const EnsureAuth: React.FC<IEnsureAuth> = ({ children, message, buttonText, className }) => {
   const { address } = useAccount();
   const { isVerified, isSigningIn, authoriseUser } = useAtlasProvider();
+
   const handleClick = useCallback(() => {
     infoToast(`Signing in User...`);
 
@@ -26,13 +45,16 @@ const EnsureAuth: React.FC<IEnsureAuth> = ({ children, className }) => {
   return isVerified ? (
     children
   ) : (
-    <Button
-      text="Sign In"
-      onClick={handleClick}
-      disabled={isSigningIn || !address}
-      isLoading={isSigningIn}
-      {...{ className }}
-    />
+    <Container>
+      {message ? <StyledInfo>{message}</StyledInfo> : null}
+      <Button
+        text={buttonText ?? "Sign In"}
+        onClick={handleClick}
+        disabled={isSigningIn || !address}
+        isLoading={isSigningIn}
+        {...{ className }}
+      />
+    </Container>
   );
 };
 
diff --git a/web/src/components/EvidenceCard.tsx b/web/src/components/EvidenceCard.tsx
index 07c4bb955..e25340907 100644
--- a/web/src/components/EvidenceCard.tsx
+++ b/web/src/components/EvidenceCard.tsx
@@ -258,7 +258,7 @@ const EvidenceCard: React.FC<IEvidenceCard> = ({
         </BottomLeftContent>
         {fileURI && fileURI !== "-" ? (
           <FileLinkContainer>
-            <StyledInternalLink to={`attachment/?url=${getIpfsUrl(fileURI)}`}>
+            <StyledInternalLink to={`/attachment/?title=${"Evidence File"}&url=${getIpfsUrl(fileURI)}`}>
               <AttachmentIcon />
               <AttachedFileText />
             </StyledInternalLink>
diff --git a/web/src/components/PlusMinusField.tsx b/web/src/components/PlusMinusField.tsx
index 47a6555df..933432285 100644
--- a/web/src/components/PlusMinusField.tsx
+++ b/web/src/components/PlusMinusField.tsx
@@ -22,6 +22,7 @@ const IconContainer = styled.button`
 
 const StyledEllipseIcon = styled(Ellipse)<{ isDisabled?: boolean }>`
   circle {
+    fill: ${({ theme }) => theme.primaryBlue};
     ${({ isDisabled }) =>
       isDisabled &&
       css`
diff --git a/web/src/context/NewDisputeContext.tsx b/web/src/context/NewDisputeContext.tsx
index ccfdd9e9c..fc01130a6 100644
--- a/web/src/context/NewDisputeContext.tsx
+++ b/web/src/context/NewDisputeContext.tsx
@@ -1,5 +1,6 @@
-import React, { createContext, useState, useContext, useMemo, useCallback } from "react";
+import React, { createContext, useState, useContext, useMemo, useCallback, useEffect } from "react";
 
+import { useLocation } from "react-router-dom";
 import { Address } from "viem";
 
 import { DEFAULT_CHAIN } from "consts/chains";
@@ -7,6 +8,8 @@ import { klerosCoreAddress } from "hooks/contracts/generated";
 import { useLocalStorage } from "hooks/useLocalStorage";
 import { isEmpty, isUndefined } from "utils/index";
 
+export const MIN_DISPUTE_BATCH_SIZE = 2;
+
 export type Answer = {
   id: string;
   title: string;
@@ -59,6 +62,10 @@ interface INewDisputeContext {
   setIsSubmittingCase: (isSubmittingCase: boolean) => void;
   isPolicyUploading: boolean;
   setIsPolicyUploading: (isPolicyUploading: boolean) => void;
+  isBatchCreation: boolean;
+  setIsBatchCreation: (isBatchCreation: boolean) => void;
+  batchSize: number;
+  setBatchSize: (batchSize?: number) => void;
 }
 
 const getInitialDisputeData = (): IDisputeData => ({
@@ -92,13 +99,26 @@ export const NewDisputeProvider: React.FC<{ children: React.ReactNode }> = ({ ch
   const [disputeData, setDisputeData] = useLocalStorage<IDisputeData>("disputeData", initialDisputeData);
   const [isSubmittingCase, setIsSubmittingCase] = useState<boolean>(false);
   const [isPolicyUploading, setIsPolicyUploading] = useState<boolean>(false);
+  const [isBatchCreation, setIsBatchCreation] = useState<boolean>(false);
+  const [batchSize, setBatchSize] = useLocalStorage<number>("disputeBatchSize", MIN_DISPUTE_BATCH_SIZE);
 
   const disputeTemplate = useMemo(() => constructDisputeTemplate(disputeData), [disputeData]);
+  const location = useLocation();
 
   const resetDisputeData = useCallback(() => {
     const freshData = getInitialDisputeData();
     setDisputeData(freshData);
-  }, [setDisputeData]);
+    setBatchSize(MIN_DISPUTE_BATCH_SIZE);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    // Cleanup function to clear local storage when user leaves the route
+    if (location.pathname.includes("/resolver") || location.pathname.includes("/attachment")) return;
+
+    resetDisputeData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location.pathname]);
 
   const contextValues = useMemo(
     () => ({
@@ -110,8 +130,23 @@ export const NewDisputeProvider: React.FC<{ children: React.ReactNode }> = ({ ch
       setIsSubmittingCase,
       isPolicyUploading,
       setIsPolicyUploading,
+      isBatchCreation,
+      setIsBatchCreation,
+      batchSize,
+      setBatchSize,
     }),
-    [disputeData, disputeTemplate, resetDisputeData, isSubmittingCase, isPolicyUploading, setDisputeData]
+    [
+      disputeData,
+      disputeTemplate,
+      resetDisputeData,
+      isSubmittingCase,
+      isPolicyUploading,
+      setDisputeData,
+      isBatchCreation,
+      setIsBatchCreation,
+      batchSize,
+      setBatchSize,
+    ]
   );
 
   return <NewDisputeContext.Provider value={contextValues}>{children}</NewDisputeContext.Provider>;
diff --git a/web/src/hooks/queries/usePopulatedDisputeData.ts b/web/src/hooks/queries/usePopulatedDisputeData.ts
index d7268bce4..853d8acb3 100644
--- a/web/src/hooks/queries/usePopulatedDisputeData.ts
+++ b/web/src/hooks/queries/usePopulatedDisputeData.ts
@@ -5,8 +5,8 @@ import { executeActions } from "@kleros/kleros-sdk/src/dataMappings/executeActio
 import { DisputeDetails } from "@kleros/kleros-sdk/src/dataMappings/utils/disputeDetailsTypes";
 import { populateTemplate } from "@kleros/kleros-sdk/src/dataMappings/utils/populateTemplate";
 
-import { useGraphqlBatcher } from "context/GraphqlBatcher";
 import { DEFAULT_CHAIN } from "consts/chains";
+import { useGraphqlBatcher } from "context/GraphqlBatcher";
 import { debounceErrorToast } from "utils/debounceErrorToast";
 import { isUndefined } from "utils/index";
 
diff --git a/web/src/hooks/queries/useRoundDetailsQuery.ts b/web/src/hooks/queries/useRoundDetailsQuery.ts
new file mode 100644
index 000000000..7d8549f98
--- /dev/null
+++ b/web/src/hooks/queries/useRoundDetailsQuery.ts
@@ -0,0 +1,40 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { REFETCH_INTERVAL, STALE_TIME } from "consts/index";
+import { useGraphqlBatcher } from "context/GraphqlBatcher";
+
+import { graphql } from "src/graphql";
+import { RoundDetailsQuery } from "src/graphql/graphql";
+import { isUndefined } from "src/utils";
+
+const roundDetailsQuery = graphql(`
+  query RoundDetails($roundID: ID!) {
+    round(id: $roundID) {
+      court {
+        id
+      }
+      nbVotes
+      disputeKit {
+        id
+      }
+    }
+  }
+`);
+
+export const useRoundDetailsQuery = (disputeId?: string, roundIndex?: number) => {
+  const isEnabled = !isUndefined(disputeId) && !isUndefined(roundIndex);
+  const { graphqlBatcher } = useGraphqlBatcher();
+
+  return useQuery<RoundDetailsQuery>({
+    queryKey: [`roundDetailsQuery${disputeId}-${roundIndex}`],
+    enabled: isEnabled,
+    refetchInterval: REFETCH_INTERVAL,
+    staleTime: STALE_TIME,
+    queryFn: async () =>
+      await graphqlBatcher.fetch({
+        id: crypto.randomUUID(),
+        document: roundDetailsQuery,
+        variables: { roundID: `${disputeId}-${roundIndex}` },
+      }),
+  });
+};
diff --git a/web/src/hooks/useTransactionBatcher.tsx b/web/src/hooks/useTransactionBatcher.tsx
index 8cb10abad..7324fd21f 100644
--- a/web/src/hooks/useTransactionBatcher.tsx
+++ b/web/src/hooks/useTransactionBatcher.tsx
@@ -37,10 +37,15 @@ const useTransactionBatcher = (
   options: TransactionBatcherOptions = { enabled: true }
 ) => {
   const validatedConfigs = configs ?? [];
+  const totalValue = validatedConfigs.reduce((sum, config) => {
+    return sum + (config?.value ?? BigInt(0));
+  }, BigInt(0));
+
   const {
     data: batchConfig,
     isLoading,
     isError,
+    error,
   } = useSimulateTransactionBatcherBatchSend({
     query: {
       enabled: !isUndefined(configs) && options.enabled,
@@ -50,6 +55,7 @@ const useTransactionBatcher = (
       validatedConfigs.map((config) => config?.value ?? BigInt(0)),
       validatedConfigs.map((config) => encodeFunctionData(config)),
     ],
+    value: totalValue,
   });
   const { writeContractAsync } = useWriteTransactionBatcherBatchSend();
 
@@ -58,7 +64,7 @@ const useTransactionBatcher = (
     [writeContractAsync]
   );
 
-  return { executeBatch, batchConfig, isError, isLoading };
+  return { executeBatch, batchConfig, isError, isLoading, error };
 };
 
 export default useTransactionBatcher;
diff --git a/web/src/pages/Cases/AttachmentDisplay/Header.tsx b/web/src/pages/AttachmentDisplay/Header.tsx
similarity index 78%
rename from web/src/pages/Cases/AttachmentDisplay/Header.tsx
rename to web/src/pages/AttachmentDisplay/Header.tsx
index 4f5c87ad7..2283e0a0e 100644
--- a/web/src/pages/Cases/AttachmentDisplay/Header.tsx
+++ b/web/src/pages/AttachmentDisplay/Header.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 
-import { useNavigate, useLocation, useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 import { Button } from "@kleros/ui-components-library";
 
@@ -64,24 +64,13 @@ const StyledButton = styled(Button)`
   }
 `;
 
-const Header: React.FC = () => {
+const Header: React.FC<{ title: string }> = ({ title }) => {
   const navigate = useNavigate();
-  const { id } = useParams();
-  const location = useLocation();
 
   const handleReturn = () => {
     navigate(-1);
   };
 
-  let title = "";
-  if (location.pathname.includes("policy")) {
-    title = `Policy - Case #${id}`;
-  } else if (location.pathname.includes("evidence")) {
-    title = "Attached File";
-  } else if (location.pathname.includes("attachment")) {
-    title = `Attachment - Case #${id}`;
-  }
-
   return (
     <Container>
       <TitleContainer>
diff --git a/web/src/pages/AttachmentDisplay/index.tsx b/web/src/pages/AttachmentDisplay/index.tsx
new file mode 100644
index 000000000..35c6b7234
--- /dev/null
+++ b/web/src/pages/AttachmentDisplay/index.tsx
@@ -0,0 +1,83 @@
+import React, { lazy, Suspense } from "react";
+import styled from "styled-components";
+
+import { useSearchParams } from "react-router-dom";
+
+import NewTabIcon from "svgs/icons/new-tab.svg";
+
+import { MAX_WIDTH_LANDSCAPE } from "styles/landscapeStyle";
+
+import { ExternalLink } from "components/ExternalLink";
+import Loader from "components/Loader";
+
+import Header from "./Header";
+
+const FileViewer = lazy(() => import("components/FileViewer"));
+
+const Container = styled.div`
+  width: 100%;
+  background-color: ${({ theme }) => theme.lightBackground};
+  padding: calc(24px + (136 - 24) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  padding-top: calc(32px + (80 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  padding-bottom: calc(76px + (96 - 76) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  max-width: ${MAX_WIDTH_LANDSCAPE};
+  margin: 0 auto;
+`;
+
+const AttachmentContainer = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+const LoaderContainer = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+`;
+
+const StyledExternalLink = styled(ExternalLink)`
+  display: flex;
+  align-items: center;
+  align-self: flex-end;
+  gap: 8px;
+`;
+
+const StyledNewTabIcon = styled(NewTabIcon)`
+  path {
+    fill: ${({ theme }) => theme.primaryBlue};
+  }
+`;
+
+const AttachmentDisplay: React.FC = () => {
+  const [searchParams] = useSearchParams();
+
+  const url = searchParams.get("url");
+  const title = searchParams.get("title") ?? "Attachment";
+  return (
+    <Container>
+      <AttachmentContainer>
+        <Header {...{ title }} />
+        {url ? (
+          <>
+            <StyledExternalLink to={url} rel="noreferrer" target="_blank">
+              Open in new tab <StyledNewTabIcon />
+            </StyledExternalLink>
+            <Suspense
+              fallback={
+                <LoaderContainer>
+                  <Loader width={"48px"} height={"48px"} />
+                </LoaderContainer>
+              }
+            >
+              <FileViewer url={url} />
+            </Suspense>
+          </>
+        ) : null}
+      </AttachmentContainer>
+    </Container>
+  );
+};
+
+export default AttachmentDisplay;
diff --git a/web/src/pages/Cases/AttachmentDisplay/index.tsx b/web/src/pages/Cases/AttachmentDisplay/index.tsx
deleted file mode 100644
index 5259c14f2..000000000
--- a/web/src/pages/Cases/AttachmentDisplay/index.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import React, { lazy, Suspense } from "react";
-import styled from "styled-components";
-
-import { useSearchParams } from "react-router-dom";
-
-import NewTabIcon from "svgs/icons/new-tab.svg";
-
-import Loader from "components/Loader";
-import ScrollTop from "components/ScrollTop";
-import { ExternalLink } from "components/ExternalLink";
-
-import Header from "./Header";
-
-const FileViewer = lazy(() => import("components/FileViewer"));
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  gap: 8px;
-`;
-
-const LoaderContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  width: 100%;
-`;
-
-const StyledExternalLink = styled(ExternalLink)`
-  display: flex;
-  align-items: center;
-  align-self: flex-end;
-  gap: 8px;
-`;
-
-const StyledNewTabIcon = styled(NewTabIcon)`
-  path {
-    fill: ${({ theme }) => theme.primaryBlue};
-  }
-`;
-
-const AttachmentDisplay: React.FC = () => {
-  const [searchParams] = useSearchParams();
-  const url = searchParams.get("url");
-
-  return (
-    <Container>
-      <Header />
-      {url ? (
-        <>
-          <StyledExternalLink to={url} rel="noopener noreferrer" target="_blank">
-            Open in new tab <StyledNewTabIcon />
-          </StyledExternalLink>
-          <Suspense
-            fallback={
-              <LoaderContainer>
-                <Loader width={"48px"} height={"48px"} />
-              </LoaderContainer>
-            }
-          >
-            <FileViewer url={url} />
-          </Suspense>
-        </>
-      ) : null}
-      <ScrollTop />
-    </Container>
-  );
-};
-
-export default AttachmentDisplay;
diff --git a/web/src/pages/Cases/index.tsx b/web/src/pages/Cases/index.tsx
index dc7bacd9c..7a1325ee8 100644
--- a/web/src/pages/Cases/index.tsx
+++ b/web/src/pages/Cases/index.tsx
@@ -1,12 +1,11 @@
 import React from "react";
 import styled, { css } from "styled-components";
 
+import { Routes, Route } from "react-router-dom";
+
 import { MAX_WIDTH_LANDSCAPE, landscapeStyle } from "styles/landscapeStyle";
 import { responsiveSize } from "styles/responsiveSize";
 
-import { Routes, Route } from "react-router-dom";
-
-import AttachmentDisplay from "./AttachmentDisplay";
 import CaseDetails from "./CaseDetails";
 import CasesFetcher from "./CasesFetcher";
 
@@ -28,9 +27,6 @@ const Cases: React.FC = () => (
   <Container>
     <Routes>
       <Route path="/display/:page/:order/:filter" element={<CasesFetcher />} />
-      <Route path="/:id/evidence/attachment/*" element={<AttachmentDisplay />} />
-      <Route path="/:id/overview/policy/attachment/*" element={<AttachmentDisplay />} />
-      <Route path="/:id/overview/attachment/*" element={<AttachmentDisplay />} />
       <Route path="/:id/*" element={<CaseDetails />} />
     </Routes>
   </Container>
diff --git a/web/src/pages/Resolver/Landing/CreationCard.tsx b/web/src/pages/Resolver/Landing/CreationCard.tsx
new file mode 100644
index 000000000..8b2ce2a47
--- /dev/null
+++ b/web/src/pages/Resolver/Landing/CreationCard.tsx
@@ -0,0 +1,140 @@
+import React from "react";
+import styled from "styled-components";
+
+import { Card, Radio } from "@kleros/ui-components-library";
+
+import CaseFromScratchIcon from "svgs/icons/caseFromScratch.svg";
+import DuplicateCaseIcon from "svgs/icons/duplicateCase.svg";
+
+import { responsiveSize } from "styles/responsiveSize";
+
+import { Divider } from "components/Divider";
+import { NumberInputField } from "components/NumberInputField";
+import WithHelpTooltip from "components/WithHelpTooltip";
+
+export enum CreationMethod {
+  Scratch,
+  Duplicate,
+}
+
+const StyledCard = styled(Card)<{ selected?: boolean }>`
+  height: fit-content;
+  width: 100%;
+  background: ${({ theme, selected }) => (selected ? theme.whiteBackground : theme.lightBackground)};
+`;
+
+const CardTopContent = styled.div`
+  width: 100%;
+  padding: 8px ${responsiveSize(16, 24)};
+  display: flex;
+  align-items: center;
+  gap: ${responsiveSize(8, 16)};
+`;
+
+const CardBottomContent = styled.div`
+  width: 100%;
+  padding: 16px ${responsiveSize(16, 24)};
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: ${responsiveSize(8, 16)};
+`;
+
+const Icon = styled.svg`
+  width: 48px;
+  height: 48px;
+  circle {
+    fill: ${({ theme }) => theme.lightBlue};
+    stroke: ${({ theme }) => theme.primaryBlue};
+  }
+  path {
+    fill: ${({ theme }) => theme.primaryBlue};
+  }
+`;
+
+const StyledP = styled.p`
+  padding: 0;
+  font-size: 16px;
+  flex: 1;
+  color: ${({ theme }) => theme.primaryText};
+`;
+
+const StyledRadio = styled(Radio)`
+  align-self: center;
+  padding-left: 16px;
+  > input {
+    display: none;
+  }
+  > span {
+    transform: translateY(-50%);
+  }
+`;
+
+const Label = styled.label`
+  font-size: 14px;
+  color: ${({ theme }) => theme.primaryText};
+`;
+
+const StyledNumberField = styled(NumberInputField)`
+  max-width: 128px;
+  input {
+    border: 1px solid ${({ theme, variant }) => (variant === "error" ? theme.error : theme.stroke)};
+  }
+`;
+
+const ErrorMsg = styled.small`
+  font-size: 16px;
+  font-weight: 400;
+  color: ${({ theme }) => theme.error};
+`;
+
+interface ICreationCard {
+  cardMethod: CreationMethod;
+  selectedMethod: CreationMethod;
+  setCreationMethod: (method: CreationMethod) => void;
+  disputeID?: string;
+  setDisputeID?: (id?: string) => void;
+  isInvalidDispute?: boolean;
+}
+
+const CreationCard: React.FC<ICreationCard> = ({
+  cardMethod,
+  selectedMethod,
+  setCreationMethod,
+  disputeID,
+  setDisputeID,
+  isInvalidDispute,
+}) => {
+  return (
+    <StyledCard hover onClick={() => setCreationMethod(cardMethod)} selected={cardMethod === selectedMethod}>
+      <CardTopContent>
+        <Icon as={cardMethod === CreationMethod.Scratch ? CaseFromScratchIcon : DuplicateCaseIcon} />
+        <StyledP>
+          {cardMethod === CreationMethod.Scratch ? "Create a case from scratch" : "Duplicate an existing case"}
+        </StyledP>
+        <StyledRadio label="" checked={cardMethod === selectedMethod} onChange={() => setCreationMethod(cardMethod)} />
+      </CardTopContent>
+      {cardMethod === CreationMethod.Duplicate && selectedMethod === CreationMethod.Duplicate ? (
+        <>
+          <Divider />
+          <CardBottomContent>
+            <WithHelpTooltip tooltipMsg={'The case ID can be found on the top left of the Case page. eg. "Case #300".'}>
+              <Label>{"Enter the cases's ID"}</Label>
+            </WithHelpTooltip>
+            <StyledNumberField
+              placeholder="eg. 45"
+              value={disputeID}
+              onChange={(val) => {
+                if (setDisputeID) setDisputeID(val.trim() !== "" ? val : undefined);
+              }}
+              variant={isInvalidDispute ? "error" : undefined}
+            />
+            {isInvalidDispute ? <ErrorMsg>Invalid dispute</ErrorMsg> : null}
+          </CardBottomContent>
+        </>
+      ) : null}
+    </StyledCard>
+  );
+};
+
+export default CreationCard;
diff --git a/web/src/pages/Resolver/Landing/index.tsx b/web/src/pages/Resolver/Landing/index.tsx
new file mode 100644
index 000000000..9202292dc
--- /dev/null
+++ b/web/src/pages/Resolver/Landing/index.tsx
@@ -0,0 +1,148 @@
+import React, { useEffect, useMemo, useState } from "react";
+import styled, { css } from "styled-components";
+
+import { useNavigate } from "react-router-dom";
+import { useDebounce } from "react-use";
+
+import { Button } from "@kleros/ui-components-library";
+
+import { AliasArray, Answer, useNewDisputeContext } from "context/NewDisputeContext";
+
+import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
+import { usePopulatedDisputeData } from "queries/usePopulatedDisputeData";
+import { useRoundDetailsQuery } from "queries/useRoundDetailsQuery";
+
+import { isUndefined } from "src/utils";
+
+import { landscapeStyle } from "styles/landscapeStyle";
+import { responsiveSize } from "styles/responsiveSize";
+
+import Header from "../Header";
+
+import CreationCard, { CreationMethod } from "./CreationCard";
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 84vw;
+
+  ${landscapeStyle(
+    () => css`
+      width: ${responsiveSize(442, 700, 900)};
+
+      padding-bottom: 240px;
+    `
+  )}
+`;
+
+const CardContainer = styled.div`
+  width: 100%;
+  max-width: 720px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-bottom: 32px;
+`;
+
+const Landing: React.FC = () => {
+  const navigate = useNavigate();
+  const [creationMethod, setCreationMethod] = useState<CreationMethod>(CreationMethod.Scratch);
+
+  const [disputeID, setDisputeID] = useState<string>();
+  const [debouncedDisputeID, setDebouncedDisputeID] = useState<string>();
+  const { disputeData, setDisputeData } = useNewDisputeContext();
+  useDebounce(() => setDebouncedDisputeID(disputeID), 500, [disputeID]);
+
+  const { data: dispute, isLoading: isLoadingDispute } = useDisputeDetailsQuery(debouncedDisputeID);
+  const {
+    data: populatedDispute,
+    isError: isErrorPopulatedDisputeQuery,
+    isLoading: isPopulatingDispute,
+  } = usePopulatedDisputeData(debouncedDisputeID, dispute?.dispute?.arbitrated.id as `0x${string}`);
+
+  // we want the genesis round's court and numberOfJurors
+  const {
+    data: roundData,
+    isError: isErrorRoundQuery,
+    isLoading: isLoadingRound,
+  } = useRoundDetailsQuery(debouncedDisputeID, 0);
+
+  const isLoading = useMemo(
+    () => isLoadingDispute || isPopulatingDispute || isLoadingRound,
+    [isLoadingDispute, isPopulatingDispute, isLoadingRound]
+  );
+
+  const isInvalidDispute = useMemo(() => {
+    if (isUndefined(debouncedDisputeID) || isLoading) return false;
+    if (dispute?.dispute === null) return true;
+    if (!isUndefined(populatedDispute)) {
+      return isErrorRoundQuery || isErrorPopulatedDisputeQuery || Object.keys(populatedDispute).length === 0;
+    }
+    return false;
+  }, [debouncedDisputeID, isLoading, populatedDispute, isErrorRoundQuery, isErrorPopulatedDisputeQuery, dispute]);
+
+  useEffect(() => {
+    if (isUndefined(populatedDispute) || isUndefined(roundData) || isInvalidDispute) return;
+
+    const answers = populatedDispute.answers.reduce<Answer[]>((acc, val) => {
+      acc.push({ ...val, id: parseInt(val.id, 16).toString() });
+      return acc;
+    }, []);
+
+    let aliasesArray: AliasArray[] | undefined;
+    if (!isUndefined(populatedDispute.aliases)) {
+      aliasesArray = Object.entries(populatedDispute.aliases).map(([key, value], index) => ({
+        name: key,
+        address: value,
+        id: (index + 1).toString(),
+      }));
+    }
+
+    setDisputeData({
+      ...disputeData,
+      title: populatedDispute.title,
+      description: populatedDispute.description,
+      category: populatedDispute.category,
+      policyURI: populatedDispute.policyURI,
+      question: populatedDispute.question,
+      courtId: roundData.round?.court.id,
+      numberOfJurors: roundData.round?.nbVotes,
+      disputeKitId: parseInt(roundData.round?.disputeKit.id ?? "1", 10),
+      answers,
+      aliasesArray: aliasesArray ?? disputeData.aliasesArray,
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [populatedDispute, roundData, isInvalidDispute]);
+
+  return (
+    <Container>
+      <Header text="Create a case" />
+      <CardContainer>
+        <CreationCard
+          cardMethod={CreationMethod.Scratch}
+          selectedMethod={creationMethod}
+          {...{ disputeID, setDisputeID, setCreationMethod, isInvalidDispute }}
+        />
+        <CreationCard
+          cardMethod={CreationMethod.Duplicate}
+          selectedMethod={creationMethod}
+          {...{ disputeID, setDisputeID, setCreationMethod, isInvalidDispute }}
+        />
+      </CardContainer>
+
+      <Button
+        text="Next"
+        isLoading={isLoading}
+        disabled={
+          isLoading ||
+          isInvalidDispute ||
+          (creationMethod === CreationMethod.Duplicate && isUndefined(debouncedDisputeID))
+        }
+        onClick={() => navigate("/resolver/title")}
+      />
+    </Container>
+  );
+};
+
+export default Landing;
diff --git a/web/src/pages/Resolver/NavigationButtons/SubmitBatchDisputesButton.tsx b/web/src/pages/Resolver/NavigationButtons/SubmitBatchDisputesButton.tsx
new file mode 100644
index 000000000..fc2baba98
--- /dev/null
+++ b/web/src/pages/Resolver/NavigationButtons/SubmitBatchDisputesButton.tsx
@@ -0,0 +1,120 @@
+import React, { useMemo } from "react";
+import styled from "styled-components";
+
+import { useNavigate } from "react-router-dom";
+import { useAccount, useBalance, usePublicClient } from "wagmi";
+
+import { Button } from "@kleros/ui-components-library";
+
+import { DEFAULT_CHAIN } from "consts/chains";
+import { MIN_DISPUTE_BATCH_SIZE, useNewDisputeContext } from "context/NewDisputeContext";
+import { disputeResolverAbi, disputeResolverAddress } from "hooks/contracts/generated";
+import useTransactionBatcher from "hooks/useTransactionBatcher";
+import { isUndefined } from "utils/index";
+import { parseWagmiError } from "utils/parseWagmiError";
+import { prepareArbitratorExtradata } from "utils/prepareArbitratorExtradata";
+import { wrapWithToast } from "utils/wrapWithToast";
+
+import { EnsureChain } from "components/EnsureChain";
+import { ErrorButtonMessage } from "components/ErrorButtonMessage";
+import ClosedCircleIcon from "components/StyledIcons/ClosedCircleIcon";
+
+import { isTemplateValid } from "./SubmitDisputeButton";
+
+const StyledButton = styled(Button)``;
+
+const SubmitBatchDisputesButton: React.FC = () => {
+  const publicClient = usePublicClient();
+  const navigate = useNavigate();
+  const { disputeTemplate, disputeData, resetDisputeData, isSubmittingCase, setIsSubmittingCase, batchSize } =
+    useNewDisputeContext();
+
+  const { address, chainId } = useAccount();
+  const { data: userBalance, isLoading: isBalanceLoading } = useBalance({ address });
+
+  const insufficientBalance = useMemo(() => {
+    const arbitrationCost = disputeData.arbitrationCost ? BigInt(disputeData.arbitrationCost) : BigInt(0);
+    return userBalance && userBalance.value < arbitrationCost * BigInt(batchSize ?? MIN_DISPUTE_BATCH_SIZE);
+  }, [userBalance, disputeData, batchSize]);
+
+  const {
+    executeBatch,
+    batchConfig,
+    isLoading: isLoadingConfig,
+    error,
+    isError,
+  } = useTransactionBatcher(
+    Array.from({ length: batchSize }, () => ({
+      abi: disputeResolverAbi,
+      address: disputeResolverAddress[chainId ?? DEFAULT_CHAIN],
+      functionName: "createDisputeForTemplate",
+      args: [
+        prepareArbitratorExtradata(
+          disputeData.courtId ?? "1",
+          disputeData.numberOfJurors ?? 3,
+          disputeData.disputeKitId ?? 1
+        ),
+        JSON.stringify(disputeTemplate),
+        "",
+        BigInt(disputeTemplate.answers.length),
+      ],
+      value: BigInt(disputeData.arbitrationCost ?? 0),
+    })),
+    {
+      enabled: !insufficientBalance && isTemplateValid(disputeTemplate),
+    }
+  );
+
+  const isButtonDisabled = useMemo(
+    () =>
+      isError ||
+      isSubmittingCase ||
+      !isTemplateValid(disputeTemplate) ||
+      isBalanceLoading ||
+      insufficientBalance ||
+      isLoadingConfig,
+    [isSubmittingCase, insufficientBalance, isBalanceLoading, disputeTemplate, isLoadingConfig, isError]
+  );
+
+  const errorMsg = useMemo(() => {
+    if (insufficientBalance) return "Insufficient balance";
+    else if (error) {
+      return parseWagmiError(error);
+    }
+    return null;
+  }, [error, insufficientBalance]);
+
+  return (
+    <EnsureChain>
+      <div>
+        <StyledButton
+          text="Create cases"
+          disabled={isButtonDisabled}
+          isLoading={(isSubmittingCase || isBalanceLoading || isLoadingConfig) && !insufficientBalance}
+          onClick={() => {
+            if (batchConfig && publicClient) {
+              setIsSubmittingCase(true);
+              wrapWithToast(async () => await executeBatch(batchConfig), publicClient)
+                .then((res) => {
+                  if (res.status && !isUndefined(res.result)) {
+                    resetDisputeData();
+                    navigate("/cases/display/1/desc/all");
+                  }
+                })
+                .finally(() => {
+                  setIsSubmittingCase(false);
+                });
+            }
+          }}
+        />
+        {errorMsg && (
+          <ErrorButtonMessage>
+            <ClosedCircleIcon /> {errorMsg}
+          </ErrorButtonMessage>
+        )}
+      </div>
+    </EnsureChain>
+  );
+};
+
+export default SubmitBatchDisputesButton;
diff --git a/web/src/pages/Resolver/NavigationButtons/SubmitDisputeButton.tsx b/web/src/pages/Resolver/NavigationButtons/SubmitDisputeButton.tsx
index f2ad186b4..4e12a4321 100644
--- a/web/src/pages/Resolver/NavigationButtons/SubmitDisputeButton.tsx
+++ b/web/src/pages/Resolver/NavigationButtons/SubmitDisputeButton.tsx
@@ -42,7 +42,12 @@ const SubmitDisputeButton: React.FC = () => {
     return userBalance && userBalance.value < arbitrationCost;
   }, [userBalance, disputeData]);
 
-  const { data: submitCaseConfig, error } = useSimulateDisputeResolverCreateDisputeForTemplate({
+  const {
+    data: submitCaseConfig,
+    error,
+    isLoading: isLoadingConfig,
+    isError,
+  } = useSimulateDisputeResolverCreateDisputeForTemplate({
     query: {
       enabled: !insufficientBalance && isTemplateValid(disputeTemplate),
     },
@@ -62,8 +67,14 @@ const SubmitDisputeButton: React.FC = () => {
   const { writeContractAsync: submitCase } = useWriteDisputeResolverCreateDisputeForTemplate();
 
   const isButtonDisabled = useMemo(
-    () => isSubmittingCase || !isTemplateValid(disputeTemplate) || isBalanceLoading || insufficientBalance,
-    [isSubmittingCase, insufficientBalance, isBalanceLoading, disputeTemplate]
+    () =>
+      isError ||
+      isSubmittingCase ||
+      !isTemplateValid(disputeTemplate) ||
+      isBalanceLoading ||
+      insufficientBalance ||
+      isLoadingConfig,
+    [isSubmittingCase, insufficientBalance, isBalanceLoading, disputeTemplate, isLoadingConfig, isError]
   );
 
   const errorMsg = useMemo(() => {
@@ -82,9 +93,9 @@ const SubmitDisputeButton: React.FC = () => {
           <StyledButton
             text="Submit the case"
             disabled={isButtonDisabled}
-            isLoading={(isSubmittingCase || isBalanceLoading) && !insufficientBalance}
+            isLoading={(isSubmittingCase || isBalanceLoading || isLoadingConfig) && !insufficientBalance}
             onClick={() => {
-              if (submitCaseConfig) {
+              if (submitCaseConfig && publicClient) {
                 setIsSubmittingCase(true);
                 wrapWithToast(async () => await submitCase(submitCaseConfig.request), publicClient)
                   .then((res) => {
@@ -123,7 +134,7 @@ const SubmitDisputeButton: React.FC = () => {
   );
 };
 
-const isTemplateValid = (disputeTemplate: IDisputeTemplate) => {
+export const isTemplateValid = (disputeTemplate: IDisputeTemplate) => {
   const areVotingOptionsFilled =
     disputeTemplate.question !== "" &&
     disputeTemplate.answers.every((answer) => answer.title !== "" && answer.description !== "");
diff --git a/web/src/pages/Resolver/NavigationButtons/index.tsx b/web/src/pages/Resolver/NavigationButtons/index.tsx
index 2133ec0fa..e7b1a7a3f 100644
--- a/web/src/pages/Resolver/NavigationButtons/index.tsx
+++ b/web/src/pages/Resolver/NavigationButtons/index.tsx
@@ -1,10 +1,15 @@
 import React from "react";
 import styled from "styled-components";
 
+import { useNewDisputeContext } from "context/NewDisputeContext";
+
+import { isUndefined } from "src/utils";
+
 import { responsiveSize } from "styles/responsiveSize";
 
 import NextButton from "./NextButton";
 import PreviousButton from "./PreviousButton";
+import SubmitBatchDisputesButton from "./SubmitBatchDisputesButton";
 import SubmitDisputeButton from "./SubmitDisputeButton";
 
 const Container = styled.div`
@@ -21,10 +26,13 @@ interface NavigationButtonsProps {
 }
 
 const NavigationButtons: React.FC<NavigationButtonsProps> = ({ prevRoute, nextRoute }) => {
+  const { isBatchCreation } = useNewDisputeContext();
+
+  const SubmitButton = isBatchCreation ? SubmitBatchDisputesButton : SubmitDisputeButton;
   return (
     <Container>
       <PreviousButton prevRoute={prevRoute} />
-      {prevRoute === "/resolver/policy" ? <SubmitDisputeButton /> : <NextButton nextRoute={nextRoute} />}
+      {isUndefined(nextRoute) ? <SubmitButton /> : <NextButton nextRoute={nextRoute} />}
     </Container>
   );
 };
diff --git a/web/src/pages/Resolver/Parameters/NotablePersons/PersonFields.tsx b/web/src/pages/Resolver/Parameters/NotablePersons/PersonFields.tsx
index ad7ec4e74..5fb6d14ff 100644
--- a/web/src/pages/Resolver/Parameters/NotablePersons/PersonFields.tsx
+++ b/web/src/pages/Resolver/Parameters/NotablePersons/PersonFields.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useEffect, useRef } from "react";
 import styled, { css } from "styled-components";
 
 import { usePublicClient } from "wagmi";
@@ -44,6 +44,7 @@ const PersonFields: React.FC = () => {
   const publicClient = usePublicClient({ chainId: 1 });
 
   const debounceValidateAddress = (address: string, key: number) => {
+    if (isUndefined(publicClient)) return;
     // Clear the existing timer
     if (validationTimerRef.current) {
       clearTimeout(validationTimerRef.current);
@@ -59,6 +60,22 @@ const PersonFields: React.FC = () => {
       setDisputeData({ ...disputeData, aliasesArray: updatedAliases });
     }, 500);
   };
+
+  // in case of duplicate creation flow, aliasesArray will already be populated.
+  // validating addresses in case it is
+  useEffect(() => {
+    if (disputeData.aliasesArray && publicClient) {
+      disputeData.aliasesArray.map(async (alias, key) => {
+        const isValid = await validateAddress(alias.address, publicClient);
+        const updatedAliases = disputeData.aliasesArray;
+        if (isUndefined(updatedAliases) || isUndefined(updatedAliases[key])) return;
+        updatedAliases[key].isValid = isValid;
+
+        setDisputeData({ ...disputeData, aliasesArray: updatedAliases });
+      });
+    }
+  }, []);
+
   const handleAliasesWrite = (event: React.ChangeEvent<HTMLInputElement>) => {
     const key = parseInt(event.target.id.replace(/\D/g, ""), 10) - 1;
     const aliases = disputeData.aliasesArray;
@@ -68,7 +85,7 @@ const PersonFields: React.FC = () => {
     setDisputeData({ ...disputeData, aliasesArray: aliases });
 
     //since resolving ens is async, we update asynchronously too with debounce
-    event.target.name === "address" && debounceValidateAddress(event.target.value, key);
+    if (event.target.name === "address") debounceValidateAddress(event.target.value, key);
   };
 
   const showError = (alias: AliasArray) => {
diff --git a/web/src/pages/Resolver/Policy/index.tsx b/web/src/pages/Resolver/Policy/index.tsx
index 66c8b5888..d491e71e4 100644
--- a/web/src/pages/Resolver/Policy/index.tsx
+++ b/web/src/pages/Resolver/Policy/index.tsx
@@ -4,15 +4,20 @@ import styled, { css } from "styled-components";
 import { useAtlasProvider, Roles } from "@kleros/kleros-app";
 import { FileUploader } from "@kleros/ui-components-library";
 
+import PolicyIcon from "svgs/icons/policy.svg";
+
 import { useNewDisputeContext } from "context/NewDisputeContext";
 import useIsDesktop from "hooks/useIsDesktop";
+import { getIpfsUrl } from "utils/getIpfsUrl";
 import { errorToast, infoToast, successToast } from "utils/wrapWithToast";
 
-import { getFileUploaderMsg } from "src/utils";
+import { getFileUploaderMsg, isUndefined } from "src/utils";
 
+import { hoverShortTransitionTiming } from "styles/commonStyles";
 import { landscapeStyle } from "styles/landscapeStyle";
 import { responsiveSize } from "styles/responsiveSize";
 
+import { InternalLink } from "components/InternalLink";
 import Header from "pages/Resolver/Header";
 
 import NavigationButtons from "../NavigationButtons";
@@ -54,6 +59,25 @@ const StyledFileUploader = styled(FileUploader)`
   }
 `;
 
+const StyledPolicyIcon = styled(PolicyIcon)`
+  width: 16px;
+  fill: ${({ theme }) => theme.primaryBlue};
+`;
+
+const StyledInternalLink = styled(InternalLink)`
+  ${hoverShortTransitionTiming}
+  display: flex;
+  gap: 4px;
+  align-self: flex-start;
+  margin-bottom: 32px;
+  margin-top: 32px;
+  &:hover {
+    svg {
+      fill: ${({ theme }) => theme.secondaryBlue};
+    }
+  }
+`;
+
 const Policy: React.FC = () => {
   const { disputeData, setDisputeData, setIsPolicyUploading } = useNewDisputeContext();
   const { uploadFile, roleRestrictions } = useAtlasProvider();
@@ -83,12 +107,18 @@ const Policy: React.FC = () => {
         criteria, a contract stating the rights and duties of the parties, or any set of pre-defined rules that are
         relevant to jurors' decision-making.
       </StyledLabel>
+
       <StyledFileUploader
         callback={handleFileUpload}
         variant={isDesktop ? "info" : undefined}
         msg={`You can attach additional information here. Important: the above description must reference the relevant parts of the file content.\n${getFileUploaderMsg(Roles.Policy, roleRestrictions)}`}
       />
-
+      {!isUndefined(disputeData.policyURI) ? (
+        <StyledInternalLink to={`/attachment/?title=${"Policy File"}&url=${getIpfsUrl(disputeData.policyURI)}`}>
+          <StyledPolicyIcon />
+          Inspect the uploaded policy
+        </StyledInternalLink>
+      ) : null}
       <NavigationButtons prevRoute="/resolver/notable-persons" nextRoute="/resolver/preview" />
     </Container>
   );
diff --git a/web/src/pages/Resolver/Preview/BatchCreationCard.tsx b/web/src/pages/Resolver/Preview/BatchCreationCard.tsx
new file mode 100644
index 000000000..27991a827
--- /dev/null
+++ b/web/src/pages/Resolver/Preview/BatchCreationCard.tsx
@@ -0,0 +1,183 @@
+import React, { useState } from "react";
+import styled, { css } from "styled-components";
+
+import { useDebounce } from "react-use";
+
+import { Card, Switch } from "@kleros/ui-components-library";
+
+import { CoinIds } from "consts/coingecko";
+import { useNewDisputeContext } from "context/NewDisputeContext";
+import { useCoinPrice } from "hooks/useCoinPrice";
+import { formatETH, formatUnitsWei, formatUSD } from "utils/format";
+
+import { isUndefined } from "src/utils";
+
+import { landscapeStyle } from "styles/landscapeStyle";
+
+import { Divider } from "components/Divider";
+import PlusMinusField from "components/PlusMinusField";
+import WithHelpTooltip from "components/WithHelpTooltip";
+
+const Container = styled(Card)`
+  width: 100%;
+  height: fit-content;
+`;
+
+const TopContent = styled.div`
+  width: 100%;
+  min-height: 64px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 16px;
+  padding: 16px;
+
+  span::before {
+    background-color: ${({ theme }) => theme.whiteBackground} !important;
+  }
+  ${landscapeStyle(
+    () => css`
+      padding: 0px 32px;
+    `
+  )}
+`;
+
+const BottomContent = styled.div`
+  width: 100%;
+  min-height: 64px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: start;
+  gap: 16px;
+  padding: 16px;
+
+  ${landscapeStyle(
+    () => css`
+      justify-content: space-between;
+      padding: 16px 32px;
+    `
+  )}
+`;
+
+const NumberDisplayContainer = styled.div`
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 16px;
+  ${landscapeStyle(
+    () => css`
+      gap: 32px;
+    `
+  )}
+`;
+
+const NumberDisplay = styled.div`
+  min-width: 64px;
+  min-height: 64px;
+  background-color: ${({ theme }) => theme.lightBackground};
+  border: 1px solid ${({ theme }) => theme.stroke};
+  border-radius: 3px;
+  font-size: 32px;
+  color: ${({ theme }) => theme.primaryBlue};
+  text-align: center;
+  align-content: center;
+`;
+
+const Label = styled.p`
+  padding: 0;
+  margin: 0;
+  font-size: 16px;
+  color: ${({ theme }) => theme.secondaryText};
+`;
+
+const Value = styled(Label)`
+  font-weight: 600;
+  color: ${({ theme }) => theme.primaryText};
+`;
+
+const StyledPlusMinusField = styled(PlusMinusField)`
+  margin: 0;
+  path {
+    fill: ${({ theme }) => theme.whiteBackground};
+  }
+`;
+
+const StyledP = styled.p`
+  padding: 0;
+  margin: 0;
+  font-size: 16px;
+  color: ${({ theme }) => theme.primaryText};
+`;
+
+const InfosContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+`;
+
+const Info = styled.div`
+  display: flex;
+  gap: 8px;
+`;
+
+const BatchCreationCard: React.FC = () => {
+  const { disputeData, isBatchCreation, setIsBatchCreation, batchSize, setBatchSize } = useNewDisputeContext();
+  const [localBatchSize, setLocalBatchSize] = useState(batchSize);
+  useDebounce(() => setBatchSize(localBatchSize), 500, [localBatchSize]);
+
+  const { prices: pricesData } = useCoinPrice([CoinIds.ETH]);
+
+  const coinPrice = !isUndefined(pricesData) ? pricesData[CoinIds.ETH]?.price : undefined;
+
+  return (
+    <Container>
+      <TopContent>
+        <Switch checked={isBatchCreation} onChange={() => setIsBatchCreation(!isBatchCreation)} />
+        <WithHelpTooltip tooltipMsg="Batch Cases: You can create multiple copies of the case. ">
+          <StyledP>Create multiple cases at once</StyledP>
+        </WithHelpTooltip>
+      </TopContent>
+      {isBatchCreation ? (
+        <>
+          <Divider />
+          <BottomContent>
+            <NumberDisplayContainer>
+              <NumberDisplay>{localBatchSize}</NumberDisplay>
+              <StyledPlusMinusField
+                minValue={2}
+                currentValue={localBatchSize}
+                updateValue={(val) => setLocalBatchSize(val)}
+              />
+              <Label>(Number of cases to be created)</Label>
+            </NumberDisplayContainer>
+            <InfosContainer>
+              <Info>
+                <Label>Jurors per case:</Label>
+                <Value>{disputeData.numberOfJurors}</Value>
+              </Info>
+              <Info>
+                <Label>Total:</Label>
+                <Value>{disputeData.numberOfJurors * localBatchSize}</Value>
+              </Info>
+              <Info>
+                <Label>Total cost:</Label>
+                <Value>{formatETH(BigInt(disputeData.arbitrationCost ?? 0) * BigInt(localBatchSize))} ETH </Value>
+                <Label>
+                  ~
+                  {formatUSD(
+                    Number(formatUnitsWei(BigInt(disputeData.arbitrationCost ?? 0) * BigInt(localBatchSize))) *
+                      (coinPrice ?? 0)
+                  )}
+                </Label>
+              </Info>
+            </InfosContainer>
+          </BottomContent>
+        </>
+      ) : null}
+    </Container>
+  );
+};
+
+export default BatchCreationCard;
diff --git a/web/src/pages/Resolver/Preview/index.tsx b/web/src/pages/Resolver/Preview/index.tsx
index cc70d88e8..d089f3a7c 100644
--- a/web/src/pages/Resolver/Preview/index.tsx
+++ b/web/src/pages/Resolver/Preview/index.tsx
@@ -17,20 +17,24 @@ import { Divider } from "components/Divider";
 
 import NavigationButtons from "../NavigationButtons";
 
+import BatchCreationCard from "./BatchCreationCard";
+
 const Container = styled.div`
   width: 100%;
   padding: 0px ${responsiveSize(10, 130)};
   display: flex;
   flex-direction: column;
   align-items: center;
+  gap: 16px;
 `;
 
 const StyledCard = styled(Card)`
   width: 100%;
   height: auto;
   min-height: 100px;
-  margin-bottom: ${responsiveSize(130, 70)};
+  position: relative;
 `;
+
 const PreviewContainer = styled.div`
   width: 100%;
   height: auto;
@@ -52,6 +56,15 @@ const Header = styled.h2`
   )}
 `;
 
+const Overlay = styled.div`
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+`;
+
 const Preview: React.FC = () => {
   const { disputeData, disputeTemplate } = useNewDisputeContext();
   const { data: courtPolicy } = useCourtPolicy(disputeData.courtId);
@@ -61,6 +74,7 @@ const Preview: React.FC = () => {
     <Container>
       <Header>Preview</Header>
       <StyledCard>
+        <Overlay />
         <PreviewContainer>
           <DisputeContext disputeDetails={disputeTemplate} />
           <Divider />
@@ -76,6 +90,7 @@ const Preview: React.FC = () => {
         </PreviewContainer>
         <Policies disputePolicyURI={disputeTemplate.policyURI} courtId={disputeData.courtId} />
       </StyledCard>
+      <BatchCreationCard />
       <NavigationButtons prevRoute="/resolver/policy" />
     </Container>
   );
diff --git a/web/src/pages/Resolver/index.tsx b/web/src/pages/Resolver/index.tsx
index 1cece5e56..1faab4541 100644
--- a/web/src/pages/Resolver/index.tsx
+++ b/web/src/pages/Resolver/index.tsx
@@ -1,11 +1,11 @@
-import React, { useEffect } from "react";
+import React from "react";
 import styled, { css } from "styled-components";
 
 import { Navigate, Route, Routes, useLocation } from "react-router-dom";
 import { useToggle } from "react-use";
 import { useAccount } from "wagmi";
 
-import { useNewDisputeContext } from "context/NewDisputeContext";
+import { useAtlasProvider } from "@kleros/kleros-app";
 
 import { MAX_WIDTH_LANDSCAPE, landscapeStyle } from "styles/landscapeStyle";
 import { responsiveSize } from "styles/responsiveSize";
@@ -19,6 +19,7 @@ import ScrollTop from "components/ScrollTop";
 
 import Description from "./Briefing/Description";
 import Title from "./Briefing/Title";
+import Landing from "./Landing";
 import Category from "./Parameters/Category";
 import Court from "./Parameters/Court";
 import Jurors from "./Parameters/Jurors";
@@ -35,6 +36,7 @@ const Wrapper = styled.div`
 const Container = styled.div`
   display: flex;
   flex-direction: column;
+  gap: 32px;
   width: 100%;
   background-color: ${({ theme }) => theme.lightBackground};
   padding: ${responsiveSize(24, 32)};
@@ -76,20 +78,41 @@ const MiddleContentContainer = styled.div`
   position: relative;
 `;
 
+const Heading = styled.h1`
+  margin: 0;
+  font-size: 24px;
+  font-weight: 600;
+  color: ${({ theme }) => theme.primaryText};
+  text-align: center;
+`;
+
+const Paragraph = styled.p`
+  padding: 0;
+  margin: 0;
+  font-size: 16px;
+  text-align: center;
+  color: ${({ theme }) => theme.secondaryText};
+`;
+
 const DisputeResolver: React.FC = () => {
   const location = useLocation();
   const [isDisputeResolverMiniGuideOpen, toggleDisputeResolverMiniGuide] = useToggle(false);
+  const { isVerified } = useAtlasProvider();
   const { isConnected } = useAccount();
   const isPreviewPage = location.pathname.includes("/preview");
-  const { resetDisputeData } = useNewDisputeContext();
 
-  useEffect(() => resetDisputeData(), []);
   return (
     <Wrapper>
       <HeroImage />
       <Container>
+        {!isConnected || !isVerified ? (
+          <>
+            <Heading>Justise as a Service</Heading>
+            <Paragraph>You send your disputes. Kleros sends back decisions.</Paragraph>
+          </>
+        ) : null}
         {isConnected ? (
-          <StyledEnsureAuth>
+          <StyledEnsureAuth buttonText="Sign in to start">
             <MiddleContentContainer>
               {isConnected && !isPreviewPage ? (
                 <HowItWorksAndTimeline>
@@ -102,7 +125,8 @@ const DisputeResolver: React.FC = () => {
                 </HowItWorksAndTimeline>
               ) : null}
               <Routes>
-                <Route index element={<Navigate to="title" replace />} />
+                <Route index element={<Navigate to="create" replace />} />
+                <Route path="/create/*" element={<Landing />} />
                 <Route path="/title/*" element={<Title />} />
                 <Route path="/description/*" element={<Description />} />
                 <Route path="/court/*" element={<Court />} />