diff --git a/src/components/court-cascader-modal.js b/src/components/court-cascader-modal.js
index 34cac8b..c0b96b0 100644
--- a/src/components/court-cascader-modal.js
+++ b/src/components/court-cascader-modal.js
@@ -195,7 +195,7 @@ const CourtCascaderModal = ({ onClick }) => {
         </>
       }
       onCancel={useCallback(() => onClick(), [onClick])}
-      title={<StyledTitleDiv>Join Court</StyledTitleDiv>}
+      title="Join Court"
       visible
     >
       <StyledCascader
@@ -226,8 +226,8 @@ const StyledModal = styled(Modal)`
 
   .ant-modal {
     &-header {
-      padding: 0;
       border: none;
+      background: #4004a3;
     }
 
     &-close-icon svg {
@@ -236,6 +236,14 @@ const StyledModal = styled(Modal)`
 
     &-content {
       height: 100%;
+      border-top-left-radius: 6px;
+      border-top-right-radius: 6px;
+    }
+
+    &-title {
+      text-align: center;
+      color: #ffffff;
+      font-size: 20px;
     }
 
     &-body {
@@ -284,16 +292,6 @@ const StyledHeader = styled.div`
   font-weight: bold;
 `;
 
-const StyledTitleDiv = styled.div`
-  background: #4004a3;
-  color: white;
-  font-size: 20px;
-  font-weight: bold;
-  height: 54px;
-  line-height: 54px;
-  text-align: center;
-`;
-
 const StyledCascader = styled(Cascader)`
   display: none;
 
diff --git a/src/containers/cases.js b/src/containers/cases.js
index 119f4cb..23be282 100644
--- a/src/containers/cases.js
+++ b/src/containers/cases.js
@@ -1,130 +1,80 @@
-import { Col, Divider, Radio, Row, Spin } from 'antd'
-import React, { useCallback, useMemo, useState } from 'react'
-import { drizzleReactHooks } from '@drizzle/react-plugin'
-import CaseCard from '../components/case-card'
-import TopBanner from '../components/top-banner'
-import styled from 'styled-components/macro'
-import { VIEW_ONLY_ADDRESS } from '../bootstrap/dataloader'
+import { Col, Divider, Radio, Row, Spin } from "antd";
+import React, { useCallback, useMemo, useState } from "react";
+import { drizzleReactHooks } from "@drizzle/react-plugin";
+import CaseCard from "../components/case-card";
+import TopBanner from "../components/top-banner";
+import styled from "styled-components/macro";
+import { VIEW_ONLY_ADDRESS } from "../bootstrap/dataloader";
 
-const { useDrizzle, useDrizzleState } = drizzleReactHooks
+const { useDrizzle, useDrizzleState } = drizzleReactHooks;
 
-const StyledRadioGroup = styled(Radio.Group)`
-  float: right;
-
-  .ant-radio-button-wrapper {
-    border: 1px solid #4d00b4 !important;
-    border-radius: 300px;
-    color: #4d00b4;
-    margin-left: 10px;
-
-    @media (max-width: 500px) {
-      display: flex;
-      flex-direction: column;
-    }
-
-    &:before {
-      background-color: transparent;
-    }
-
-    &-checked {
-      background: #4d00b4 !important;
-    }
-  }
-`
-
-const StyledRadioButton = styled(Radio.Button)`
-  @media (max-width: 500px) {
-    text-align: center;
-  }
-`
-
-const StyledCol = styled(Col)`
-  color: #d09cff;
-  font-size: 24px;
-  font-weight: 500;
-  line-height: 28px;
-  text-align: center;
-`
-export default () => {
-  const { useCacheCall, useCacheEvents } = useDrizzle()
-  const drizzleState = useDrizzleState(drizzleState => ({
-    account: drizzleState.accounts[0] || VIEW_ONLY_ADDRESS
-  }))
-  const [filter, setFilter] = useState(0)
+export default function Cases() {
+  const { useCacheCall, useCacheEvents } = useDrizzle();
+  const drizzleState = useDrizzleState((drizzleState) => ({
+    account: drizzleState.accounts[0] || VIEW_ONLY_ADDRESS,
+  }));
+  const [filter, setFilter] = useState(0);
   const draws = useCacheEvents(
-    'KlerosLiquid',
-    'Draw',
+    "KlerosLiquid",
+    "Draw",
     useMemo(
       () => ({
         filter: { _address: drizzleState.account },
-        fromBlock: process.env.REACT_APP_KLEROS_LIQUID_BLOCK_NUMBER
+        fromBlock: process.env.REACT_APP_KLEROS_LIQUID_BLOCK_NUMBER,
       }),
       [drizzleState.account]
     )
-  )
-  const disputes = useCacheCall(['KlerosLiquid'], call =>
+  );
+  const disputes = useCacheCall(["KlerosLiquid"], (call) =>
     draws
       ? Object.values(
           draws.reduce((acc, d) => {
-            acc[d.returnValues._disputeID] = d
-            return acc
+            acc[d.returnValues._disputeID] = d;
+            return acc;
           }, {})
         ).reduce(
           (acc, d) => {
-            const dispute = call(
-              'KlerosLiquid',
-              'disputes',
-              d.returnValues._disputeID
-            )
-            const numberOfVotes = draws.filter(
-              _draw =>
-                _draw.returnValues._disputeID === d.returnValues._disputeID
-            )
+            const dispute = call("KlerosLiquid", "disputes", d.returnValues._disputeID);
+            const numberOfVotes = draws.filter((_draw) => _draw.returnValues._disputeID === d.returnValues._disputeID);
             if (dispute)
-              if (dispute.period === '1' || dispute.period === '2') {
-                const dispute2 = call(
-                  'KlerosLiquid',
-                  'getDispute',
-                  d.returnValues._disputeID
-                )
+              if (dispute.period === "1" || dispute.period === "2") {
+                const dispute2 = call("KlerosLiquid", "getDispute", d.returnValues._disputeID);
                 if (dispute2)
-                  if (
-                    Number(d.returnValues._appeal) ===
-                    dispute2.votesLengths.length - 1
-                  ) {
+                  if (Number(d.returnValues._appeal) === dispute2.votesLengths.length - 1) {
                     const vote = call(
-                      'KlerosLiquid',
-                      'getVote',
+                      "KlerosLiquid",
+                      "getVote",
                       d.returnValues._disputeID,
                       d.returnValues._appeal,
                       d.returnValues._voteID
-                    )
+                    );
                     if (vote)
-                      acc[vote.voted ? 'active' : 'votePending'].push({
+                      acc[vote.voted ? "active" : "votePending"].push({
                         ID: d.returnValues._disputeID,
-                        draws: numberOfVotes
-                      })
-                    else acc.loading = true
+                        draws: numberOfVotes,
+                      });
+                    else acc.loading = true;
                   } else
                     acc.active.push({
                       ID: d.returnValues._disputeID,
-                      draws: numberOfVotes
-                    })
-                else acc.loading = true
+                      draws: numberOfVotes,
+                    });
+                else acc.loading = true;
               } else
-                acc[dispute.period === '4' ? 'executed' : 'active'].push({
+                acc[dispute.period === "4" ? "executed" : "active"].push({
                   ID: d.returnValues._disputeID,
-                  draws: numberOfVotes
-                })
-            else acc.loading = true
-            return acc
+                  draws: numberOfVotes,
+                });
+            else acc.loading = true;
+            return acc;
           },
           { active: [], executed: [], loading: false, votePending: [] }
         )
       : { active: [], executed: [], loading: true, votePending: [] }
-  )
-  const filteredDisputes =
-    disputes[['votePending', 'active', 'executed'][filter]]
+  );
+
+  const filteredDisputes = disputes[["votePending", "active", "executed"][filter]];
+
   return (
     <>
       <TopBanner
@@ -133,7 +83,7 @@ export default () => {
           <StyledRadioGroup
             buttonStyle="solid"
             name="filter"
-            onChange={useCallback(e => setFilter(e.target.value), [])}
+            onChange={useCallback((e) => setFilter(e.target.value), [])}
             value={filter}
           >
             <StyledRadioButton value={0}>Vote Pending</StyledRadioButton>
@@ -141,19 +91,15 @@ export default () => {
             <StyledRadioButton value={2}>Closed</StyledRadioButton>
           </StyledRadioGroup>
         }
-        extraLong
         title="My Cases"
       />
       <Divider />
       <Spin spinning={disputes.loading}>
         <Row gutter={48}>
           {filteredDisputes.length === 0 ? (
-            <StyledCol>
-              You don't have any {['pending', 'active', 'closed'][filter]}{' '}
-              cases.
-            </StyledCol>
+            <StyledCol>You don&rsquo;t have any {["pending", "active", "closed"][filter]} cases.</StyledCol>
           ) : (
-            filteredDisputes.map(dispute => (
+            filteredDisputes.map((dispute) => (
               <Col key={dispute.ID} md={12} xl={8}>
                 <CaseCard ID={dispute.ID} draws={dispute.draws} />
               </Col>
@@ -162,5 +108,54 @@ export default () => {
         </Row>
       </Spin>
     </>
-  )
+  );
 }
+
+const StyledRadioGroup = styled(Radio.Group)`
+  display: flex;
+  gap: 10px;
+
+  @media (max-width: 575.98px) {
+    flex-wrap: wrap;
+  }
+
+  .ant-radio-button-wrapper {
+    border: 1px solid #4d00b4 !important;
+    border-radius: 300px;
+    color: #4d00b4;
+
+    &:before {
+      background-color: transparent;
+    }
+
+    &-checked {
+      background: #4d00b4 !important;
+    }
+  }
+
+  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
+    box-shadow: none;
+
+    :focus-within {
+      outline: none;
+    }
+
+    ::before {
+      display: none;
+    }
+  }
+`;
+
+const StyledRadioButton = styled(Radio.Button)`
+  @media (max-width: 575.98px) {
+    text-align: center;
+  }
+`;
+
+const StyledCol = styled(Col)`
+  color: #d09cff;
+  font-size: 24px;
+  font-weight: 500;
+  line-height: 28px;
+  text-align: center;
+`;