diff --git a/README.md b/README.md
index 15965466..23008ce6 100644
--- a/README.md
+++ b/README.md
@@ -25,7 +25,7 @@ The UI currently supports:
 - Parachain Id reservation
 - Parachain code registration
 
-### `/paras/renewal`
+### `/renew`
 - Core renewal
 
 ### `/marketplace`
diff --git a/src/components/Layout/Sidebar/index.tsx b/src/components/Layout/Sidebar/index.tsx
index 2f43bbc8..ba07db82 100644
--- a/src/components/Layout/Sidebar/index.tsx
+++ b/src/components/Layout/Sidebar/index.tsx
@@ -110,7 +110,7 @@ export const Sidebar = () => {
     parachains: [
       {
         label: 'Renew',
-        route: '/paras/renewal',
+        route: '/renew',
         enabled: true,
         icon: <RenewIcon color={theme.palette.text.primary} />,
       },
diff --git a/src/components/Paras/ParaDisplay/index.tsx b/src/components/Paras/ParaDisplay/index.tsx
index 77c0e4d2..ea7db8f0 100644
--- a/src/components/Paras/ParaDisplay/index.tsx
+++ b/src/components/Paras/ParaDisplay/index.tsx
@@ -9,8 +9,10 @@ import Unknown from '../../../assets/unknown.svg';
 interface ParaDisplayProps {
   paraId: number;
   network: NetworkType;
+  core?: number;
 }
-export const ParaDisplay = ({ paraId, network }: ParaDisplayProps) => {
+
+export const ParaDisplay = ({ paraId, network, core }: ParaDisplayProps) => {
   const data = chainData[network][paraId];
 
   if (data === undefined)
@@ -18,6 +20,7 @@ export const ParaDisplay = ({ paraId, network }: ParaDisplayProps) => {
       <Stack direction='row' alignItems='center' gap='0.5rem'>
         <Image src={Unknown} width={32} height={32} style={{ borderRadius: '100%' }} alt='' />
         Parachain #{paraId}
+        {core && <p>| Core {core}</p>}
       </Stack>
     );
 
@@ -32,6 +35,7 @@ export const ParaDisplay = ({ paraId, network }: ParaDisplayProps) => {
       )}
       {name}
       <p>#{paraId}</p>
+      {core && <p>| Core {core}</p>}
     </Stack>
   );
 };
diff --git a/src/components/Renew/action.tsx b/src/components/Renew/action.tsx
new file mode 100644
index 00000000..ad472abe
--- /dev/null
+++ b/src/components/Renew/action.tsx
@@ -0,0 +1,70 @@
+import { Stack } from '@mui/material';
+import { useState } from 'react';
+
+import { RenewableParachain } from '@/hooks';
+import { useSubmitExtrinsic } from '@/hooks/submitExtrinsic';
+
+import { ProgressButton } from '@/components';
+
+import { useAccounts } from '@/contexts/account';
+import { useCoretimeApi } from '@/contexts/apis';
+import { useToast } from '@/contexts/toast';
+
+interface RenewActionProps {
+  parachain: RenewableParachain;
+  enabled: boolean;
+}
+
+export const RenewAction = ({ parachain, enabled }: RenewActionProps) => {
+  const [working, setWorking] = useState(false);
+
+  const {
+    state: { activeAccount, activeSigner },
+  } = useAccounts();
+  const {
+    state: { api: coretimeApi, isApiReady: isCoretimeReady, decimals, symbol },
+  } = useCoretimeApi();
+
+  const { toastError, toastInfo, toastSuccess } = useToast();
+  const { submitExtrinsicWithFeeInfo } = useSubmitExtrinsic();
+
+  const handleRenew = () => {
+    if (!activeAccount || !coretimeApi || !isCoretimeReady || !activeSigner) return;
+
+    const { core } = parachain;
+
+    const txRenewal = coretimeApi.tx.broker.renew(core);
+    submitExtrinsicWithFeeInfo(symbol, decimals, txRenewal, activeAccount.address, activeSigner, {
+      ready: () => {
+        setWorking(true);
+        toastInfo('Transaction was initiated');
+      },
+      inBlock: () => toastInfo('In Block'),
+      finalized: () => setWorking(false),
+      success: () => {
+        toastSuccess('Successfully renewed the selected parachain');
+      },
+      fail: () => {
+        toastError(`Failed to renew the selected parachain`);
+      },
+      error: (e) => {
+        toastError(`Failed to renew the selected parachain ${e}`);
+        setWorking(false);
+      },
+    });
+  };
+
+  return (
+    <>
+      <Stack direction='row' gap='1rem' marginTop='2em' justifyContent='center'>
+        <ProgressButton
+          disabled={!enabled}
+          label='Renew'
+          onClick={handleRenew}
+          loading={working}
+          width='200px'
+        />
+      </Stack>
+    </>
+  );
+};
diff --git a/src/components/Renew/info.tsx b/src/components/Renew/info.tsx
new file mode 100644
index 00000000..55545200
--- /dev/null
+++ b/src/components/Renew/info.tsx
@@ -0,0 +1,193 @@
+import { Box, Stack, Tooltip, Typography } from '@mui/material';
+import { humanizer } from 'humanize-duration';
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+
+import { RenewableParachain } from '@/hooks';
+import { getBalanceString, timesliceToTimestamp } from '@/utils/functions';
+import theme from '@/utils/muiTheme';
+
+import { Banner } from '@/components';
+
+import { useCoretimeApi, useRelayApi } from '@/contexts/apis';
+import { useSaleInfo } from '@/contexts/sales';
+import { ContextStatus } from '@/models';
+
+interface RenewableParaInfoProps {
+  parachain: RenewableParachain;
+  setRenewalEnabled: Dispatch<SetStateAction<boolean>>;
+}
+
+export const RenewableParaInfo = ({ parachain, setRenewalEnabled }: RenewableParaInfoProps) => {
+  const [expiryTimestamp, setExpiryTimestamp] = useState(0);
+
+  const { saleInfo, saleStatus, status: saleInfoStatus, phase } = useSaleInfo();
+
+  const {
+    state: { api: relayApi, isApiReady: isRelayReady },
+  } = useRelayApi();
+  const {
+    state: { api: coretimeApi, isApiReady: isCoretimeReady },
+    timeslicePeriod,
+  } = useCoretimeApi();
+
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    const getExpiry = async () => {
+      setLoading(true);
+      if (
+        !coretimeApi ||
+        !isCoretimeReady ||
+        !relayApi ||
+        !isRelayReady ||
+        saleInfoStatus !== ContextStatus.LOADED
+      )
+        return;
+
+      const now = await timesliceToTimestamp(
+        relayApi,
+        saleStatus.lastCommittedTimeslice,
+        timeslicePeriod
+      );
+      const expiry = await timesliceToTimestamp(relayApi, parachain.when, timeslicePeriod);
+
+      if (expiry - now < 0) {
+        setExpiryTimestamp(phase.endpoints.fixed.end - now);
+      } else {
+        setExpiryTimestamp(expiry - now);
+      }
+
+      setLoading(false);
+    };
+
+    getExpiry();
+  }, [
+    parachain,
+    coretimeApi,
+    isCoretimeReady,
+    relayApi,
+    isRelayReady,
+    timeslicePeriod,
+    saleInfoStatus,
+    saleStatus,
+    phase,
+  ]);
+
+  useEffect(() => {
+    // if expiry is before the next region begin it should be possible to renew.
+    setRenewalEnabled(parachain.when <= saleInfo.regionBegin);
+  }, [saleInfo.regionBegin, parachain.when]);
+
+  return (
+    <>
+      <Stack direction='column' gap='1.5rem' margin='1rem 0' width='75%' sx={{ mx: 'auto' }}>
+        <ParachainInfo
+          parachain={parachain}
+          expiryTimestamp={expiryTimestamp}
+          expiryLoading={loading}
+        />
+        {parachain.when > saleInfo.regionBegin ? (
+          <Banner content={'No need to renew in the current sale'} severity='success' />
+        ) : (
+          <>
+            {/* If all cores are sold warn the user: */}
+            {saleInfo.coresSold === saleInfo.coresOffered && (
+              <Banner
+                content={
+                  'No more cores are on sale! Attempting to renew will fail. To avoid these kind of \
+                  issues in the future, please renew during the interlude phase. '
+                }
+                link={{
+                  title: 'Renewal FAQ',
+                  href: 'https://docs.regionx.tech/docs/faq/renewal-questions',
+                }}
+                severity='warning'
+              />
+            )}
+            {/* If not all cores are sold inform the user to renew: */}
+            {saleInfo.coresSold < saleInfo.coresOffered && (
+              <Banner
+                content={
+                  'It is highly recommended to renew during the interlude phase, as doing so guarantees \
+                  that the core will be available for renewal. '
+                }
+                link={{
+                  title: 'Renewal FAQ',
+                  href: 'https://docs.regionx.tech/docs/faq/renewal-questions',
+                }}
+                severity='info'
+              />
+            )}
+          </>
+        )}
+      </Stack>
+    </>
+  );
+};
+
+interface ParachainInfoProps {
+  parachain: RenewableParachain;
+  expiryTimestamp: number;
+  expiryLoading: boolean;
+}
+
+const ParachainInfo = ({ parachain, expiryTimestamp, expiryLoading }: ParachainInfoProps) => {
+  const {
+    state: { decimals, symbol },
+  } = useCoretimeApi();
+
+  const formatDuration = humanizer({ units: ['w', 'd', 'h'], round: true });
+
+  return (
+    <>
+      <Stack
+        direction='column'
+        padding='1rem'
+        mt={'1rem'}
+        gap='0.5rem'
+        border='1px solid'
+        borderColor={theme.palette.grey[400]}
+        borderRadius='1rem'
+      >
+        <Property property='Core number:' value={parachain.core.toString()} />
+        <Property
+          tooltip='The parachain will stop with block production once it expires.'
+          property='Expiry in:'
+          value={expiryLoading ? '...' : formatDuration(expiryTimestamp)}
+        />
+        <Property
+          property='Renewal price: '
+          value={getBalanceString(parachain.price.toString(), decimals, symbol)}
+        />
+      </Stack>
+    </>
+  );
+};
+
+interface PropertyProps {
+  property: string;
+  value: string;
+  tooltip?: string;
+}
+
+const Property = ({ property, value, tooltip }: PropertyProps) => {
+  return (
+    <Box display='flex' justifyContent='space-between' mx='1rem'>
+      <Typography fontWeight='light' color='black'>
+        {property}
+      </Typography>
+      <Box display='flex'>
+        {tooltip && (
+          <Tooltip title={tooltip} arrow sx={{ fontSize: '1rem' }}>
+            <Typography color='black' mr='.5rem' sx={{ cursor: 'default' }}>
+              &#9432;
+            </Typography>
+          </Tooltip>
+        )}
+        <Typography fontWeight='bold' color='black'>
+          {value}
+        </Typography>
+      </Box>
+    </Box>
+  );
+};
diff --git a/src/components/Renew/renewPage.tsx b/src/components/Renew/renewPage.tsx
new file mode 100644
index 00000000..d5023b1f
--- /dev/null
+++ b/src/components/Renew/renewPage.tsx
@@ -0,0 +1,72 @@
+import { Backdrop, Box, CircularProgress, Paper, Typography, useTheme } from '@mui/material';
+import { useState } from 'react';
+
+import { useRenewableParachains } from '@/hooks/renewableParas';
+
+import { Balance } from '@/components';
+
+import { ContextStatus } from '@/models';
+
+import { RenewAction } from './action';
+import { RenewableParaInfo } from './info';
+import { SelectParachain } from './select';
+
+const Renewal = () => {
+  const theme = useTheme();
+
+  const [activeIdx, setActiveIdx] = useState<number>(0);
+  const [renewalEnabled, setRenewalEnabled] = useState<boolean>(true);
+  const { status, parachains } = useRenewableParachains();
+
+  return status !== ContextStatus.LOADED ? (
+    <Backdrop open>
+      <CircularProgress />
+    </Backdrop>
+  ) : parachains.length === 0 ? (
+    <Typography>There are no renewable parachains.</Typography>
+  ) : (
+    <>
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+        }}
+      >
+        <Box>
+          <Typography variant='subtitle1' sx={{ color: theme.palette.common.black }}>
+            Renew a parachain
+          </Typography>
+          <Typography variant='subtitle2' sx={{ color: theme.palette.text.primary }}>
+            Renew a parachain
+          </Typography>
+        </Box>
+        <Balance ctBalance />
+      </Box>
+
+      <Box sx={{ width: '60%', margin: '0 auto' }}>
+        <Paper
+          sx={{
+            padding: '2rem',
+            borderRadius: '2rem',
+            mt: '2rem',
+            boxShadow: 'none',
+          }}
+        >
+          <SelectParachain
+            activeIdx={activeIdx}
+            parachains={parachains}
+            setActiveIdx={setActiveIdx}
+          />
+          <RenewableParaInfo
+            parachain={parachains[activeIdx]}
+            setRenewalEnabled={setRenewalEnabled}
+          />
+          <RenewAction parachain={parachains[activeIdx]} enabled={renewalEnabled} />
+        </Paper>
+      </Box>
+    </>
+  );
+};
+
+export default Renewal;
diff --git a/src/components/Renew/select.tsx b/src/components/Renew/select.tsx
new file mode 100644
index 00000000..d8193527
--- /dev/null
+++ b/src/components/Renew/select.tsx
@@ -0,0 +1,46 @@
+import { FormControl, InputLabel, MenuItem, Select, Stack, Typography } from '@mui/material';
+
+import { RenewableParachain } from '@/hooks';
+import theme from '@/utils/muiTheme';
+
+import { ParaDisplay } from '@/components';
+
+import { useNetwork } from '@/contexts/network';
+
+interface SelectParachainProps {
+  parachains: RenewableParachain[];
+  activeIdx: number;
+  setActiveIdx: (_: number) => void;
+}
+
+export const SelectParachain = ({ parachains, activeIdx, setActiveIdx }: SelectParachainProps) => {
+  const { network } = useNetwork();
+
+  return (
+    <Stack direction='column' gap={1} margin='1rem 0' width='75%' sx={{ mx: 'auto' }}>
+      <Typography
+        variant='h1'
+        textAlign='center'
+        sx={{ color: theme.palette.common.black, mb: '1rem' }}
+      >
+        Select a parachain to renew
+      </Typography>
+      <FormControl fullWidth sx={{ mt: '1rem' }}>
+        <InputLabel id='label-parachain-select'>Parachain</InputLabel>
+        <Select
+          sx={{ borderRadius: '1rem' }}
+          labelId='label-parachain-select'
+          label='Parachain'
+          value={activeIdx}
+          onChange={(e) => setActiveIdx(Number(e.target.value))}
+        >
+          {parachains.map(({ paraId, core }, index) => (
+            <MenuItem key={index} value={index}>
+              <ParaDisplay {...{ network, paraId, core }} />
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    </Stack>
+  );
+};
diff --git a/src/hooks/renewableParas.ts b/src/hooks/renewableParas.ts
index b4ae5b87..71f3958d 100644
--- a/src/hooks/renewableParas.ts
+++ b/src/hooks/renewableParas.ts
@@ -7,11 +7,12 @@ import { ApiState } from '@/contexts/apis/types';
 import { useNetwork } from '@/contexts/network';
 import { ContextStatus, NetworkType } from '@/models';
 
-type RenewableParachain = {
+export type RenewableParachain = {
   core: number;
   paraId: number;
   price: number;
   mask: string;
+  // The point in time that the renewable workload on `core` ends and a fresh renewal may begin.
   when: number;
 };
 
diff --git a/src/pages/paras/index.tsx b/src/pages/paras/index.tsx
index 6c3e8252..22310ca6 100644
--- a/src/pages/paras/index.tsx
+++ b/src/pages/paras/index.tsx
@@ -69,7 +69,7 @@ const ParachainManagement = () => {
   // Renew coretime with the given para id
   const onRenew = (paraId: number) => {
     router.push({
-      pathname: 'paras/renewal',
+      pathname: 'renew',
       query: { network, paraId },
     });
   };
diff --git a/src/pages/paras/renewal.tsx b/src/pages/paras/renewal.tsx
deleted file mode 100644
index fa4e48a0..00000000
--- a/src/pages/paras/renewal.tsx
+++ /dev/null
@@ -1,295 +0,0 @@
-import {
-  Backdrop,
-  Box,
-  CircularProgress,
-  FormControl,
-  InputLabel,
-  MenuItem,
-  Paper,
-  Select,
-  Stack,
-  Tooltip,
-  Typography,
-  useTheme,
-} from '@mui/material';
-import { humanizer } from 'humanize-duration';
-import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
-
-import { useRenewableParachains } from '@/hooks/renewableParas';
-import { useSubmitExtrinsic } from '@/hooks/submitExtrinsic';
-import { getBalanceString, timesliceToTimestamp } from '@/utils/functions';
-
-import { Balance, Banner, ParaDisplay, ProgressButton } from '@/components';
-
-import { useAccounts } from '@/contexts/account';
-import { useCoretimeApi, useRelayApi } from '@/contexts/apis';
-import { useNetwork } from '@/contexts/network';
-import { useSaleInfo } from '@/contexts/sales';
-import { useToast } from '@/contexts/toast';
-import { ContextStatus } from '@/models';
-
-const Renewal = () => {
-  const router = useRouter();
-  const theme = useTheme();
-
-  const {
-    state: { activeAccount, activeSigner },
-  } = useAccounts();
-  const { status, parachains } = useRenewableParachains();
-  const { saleInfo, saleStatus, status: saleInfoStatus, phase } = useSaleInfo();
-
-  const {
-    state: { api: relayApi, isApiReady: isRelayReady },
-  } = useRelayApi();
-  const {
-    state: { api: coretimeApi, isApiReady: isCoretimeReady, decimals, symbol },
-    timeslicePeriod,
-  } = useCoretimeApi();
-
-  const { toastError, toastInfo, toastSuccess } = useToast();
-  const { network } = useNetwork();
-  const { submitExtrinsicWithFeeInfo } = useSubmitExtrinsic();
-
-  const [loading, setLoading] = useState(false);
-  const [activeIdx, setActiveIdx] = useState<number>(0);
-  const [working, setWorking] = useState(false);
-  const [expiryTimestamp, setExpiryTimestamp] = useState(0);
-
-  const formatDuration = humanizer({ units: ['w', 'd', 'h'], round: true });
-
-  const handleRenew = () => {
-    if (!activeAccount || !coretimeApi || !isCoretimeReady || !activeSigner) return;
-
-    const { core } = parachains[activeIdx];
-
-    const txRenewal = coretimeApi.tx.broker.renew(core);
-    submitExtrinsicWithFeeInfo(symbol, decimals, txRenewal, activeAccount.address, activeSigner, {
-      ready: () => {
-        setWorking(true);
-        toastInfo('Transaction was initiated');
-      },
-      inBlock: () => toastInfo('In Block'),
-      finalized: () => setWorking(false),
-      success: () => {
-        toastSuccess('Successfully renewed the selected parachain');
-      },
-      fail: () => {
-        toastError(`Failed to renew the selected parachain`);
-      },
-      error: (e) => {
-        toastError(`Failed to renew the selected parachain ${e}`);
-        setWorking(false);
-      },
-    });
-  };
-
-  useEffect(() => {
-    const getExpiry = async () => {
-      setLoading(true);
-      if (
-        !coretimeApi ||
-        !isCoretimeReady ||
-        !relayApi ||
-        !isRelayReady ||
-        !parachains[activeIdx] ||
-        saleInfoStatus !== ContextStatus.LOADED
-      )
-        return;
-
-      const now = await timesliceToTimestamp(
-        relayApi,
-        saleStatus.lastCommittedTimeslice,
-        timeslicePeriod
-      );
-      const expiry = await timesliceToTimestamp(
-        relayApi,
-        parachains[activeIdx].when,
-        timeslicePeriod
-      );
-
-      if (expiry - now < 0) {
-        setExpiryTimestamp(phase.endpoints.fixed.end - now);
-      } else {
-        setExpiryTimestamp(expiry - now);
-      }
-
-      setLoading(false);
-    };
-
-    getExpiry();
-  }, [
-    coretimeApi,
-    isCoretimeReady,
-    relayApi,
-    isRelayReady,
-    activeIdx,
-    parachains,
-    timeslicePeriod,
-    saleInfoStatus,
-    saleStatus,
-    phase,
-  ]);
-
-  useEffect(() => {
-    if (!router.isReady || status !== ContextStatus.LOADED || parachains.length === 0) return;
-    const { query } = router;
-    if (query['paraId'] === undefined) return;
-    const paraId = parseInt(query['paraId'] as string);
-    const index = parachains.findIndex((para) => para.paraId == paraId);
-    if (index === -1) {
-      toastError(`No renewable parachain found with ID = ${paraId}`);
-      return;
-    }
-    setActiveIdx(index);
-  }, [router, parachains, status, parachains.length, toastError]);
-
-  return status !== ContextStatus.LOADED ? (
-    <Backdrop open>
-      <CircularProgress />
-    </Backdrop>
-  ) : parachains.length === 0 ? (
-    <Typography>There are no renewable parachains.</Typography>
-  ) : (
-    <>
-      <Box
-        sx={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-        }}
-      >
-        <Box>
-          <Typography variant='subtitle1' sx={{ color: theme.palette.common.black }}>
-            Renew a parachain
-          </Typography>
-          <Typography variant='subtitle2' sx={{ color: theme.palette.text.primary }}>
-            Renew a parachain
-          </Typography>
-        </Box>
-        <Balance ctBalance />
-      </Box>
-
-      <Box sx={{ width: '60%', margin: '0 auto' }}>
-        <Paper
-          sx={{
-            padding: '2rem',
-            borderRadius: '2rem',
-            mt: '2rem',
-            boxShadow: 'none',
-          }}
-        >
-          <Stack direction='column' gap={1} margin='1rem 0' width='75%' sx={{ mx: 'auto' }}>
-            <Typography
-              variant='h1'
-              textAlign='center'
-              sx={{ color: theme.palette.common.black, mb: '1rem' }}
-            >
-              Select a parachain to renew
-            </Typography>
-            <FormControl fullWidth sx={{ mt: '1rem' }}>
-              <InputLabel id='label-parachain-select'>Parachain</InputLabel>
-              <Select
-                sx={{ borderRadius: '1rem' }}
-                labelId='label-parachain-select'
-                label='Parachain'
-                value={activeIdx}
-                onChange={(e) => setActiveIdx(Number(e.target.value))}
-              >
-                {parachains.map(({ paraId }, index) => (
-                  <MenuItem key={index} value={index}>
-                    <ParaDisplay {...{ network, paraId }} />
-                  </MenuItem>
-                ))}
-              </Select>
-            </FormControl>
-            <Stack
-              direction='column'
-              padding='1rem'
-              mt={'2rem'}
-              gap='0.5rem'
-              border='1px solid'
-              borderColor={theme.palette.grey[400]}
-              borderRadius='1rem'
-            >
-              <Property property='Core number:' value={parachains[activeIdx].core} />
-              <Property
-                tooltip='The parachain will stop with block production once it expires.'
-                property='Expiry in:'
-                value={loading ? '...' : formatDuration(expiryTimestamp)}
-              />
-              <Property
-                property='Renewal price: '
-                value={getBalanceString(parachains[activeIdx].price.toString(), decimals, symbol)}
-              />
-            </Stack>
-          </Stack>
-          {saleInfo.coresSold === saleInfo.coresOffered && (
-            <Stack width='75%' margin='0 auto' mt='1rem'>
-              <Banner
-                content={
-                  'No more cores are on sale! Attempting to renew will fail. To avoid these kind of \
-                  issues in the future, please renew during the interlude phase. '
-                }
-                link={{
-                  title: 'Renewal FAQ',
-                  href: 'https://docs.regionx.tech/docs/faq/renewal-questions',
-                }}
-                severity='warning'
-              />
-            </Stack>
-          )}
-          {/* If not all cores are sold inform the user: */}
-          {saleInfo.coresSold < saleInfo.coresOffered && (
-            <Stack width='75%' margin='0 auto' mt='1rem'>
-              <Banner
-                content={
-                  'It is highly recommended to renew during the interlude phase, as doing so guarantees \
-                  that the core will be available for renewal. '
-                }
-                link={{
-                  title: 'Renewal FAQ',
-                  href: 'https://docs.regionx.tech/docs/faq/renewal-questions',
-                }}
-                severity='info'
-              />
-            </Stack>
-          )}
-          <Stack direction='row' gap='1rem' marginTop='2em' justifyContent='center'>
-            <ProgressButton label='Renew' onClick={handleRenew} loading={working} width='200px' />
-          </Stack>
-        </Paper>
-      </Box>
-    </>
-  );
-};
-
-interface PropertyProps {
-  property: string;
-  value: any;
-  tooltip?: string;
-}
-
-export const Property = ({ property, value, tooltip }: PropertyProps) => {
-  return (
-    <Box display='flex' justifyContent='space-between' mx='1rem'>
-      <Typography fontWeight='light' color='black'>
-        {property}
-      </Typography>
-      <Box display='flex'>
-        {tooltip && (
-          <Tooltip title={tooltip} arrow sx={{ fontSize: '1rem' }}>
-            <Typography color='black' mr='.5rem' sx={{ cursor: 'default' }}>
-              &#9432;
-            </Typography>
-          </Tooltip>
-        )}
-        <Typography fontWeight='bold' color='black'>
-          {value}
-        </Typography>
-      </Box>
-    </Box>
-  );
-};
-
-export default Renewal;
diff --git a/src/pages/renew.tsx b/src/pages/renew.tsx
new file mode 100644
index 00000000..82e9bd19
--- /dev/null
+++ b/src/pages/renew.tsx
@@ -0,0 +1,2 @@
+import RenewPage from '@/components/Renew/renewPage';
+export default RenewPage;