diff --git a/packages/web/components/elements/Table-Responsive.tsx b/packages/web/components/elements/Table-Responsive.tsx
deleted file mode 100644
index 72a66d626..000000000
--- a/packages/web/components/elements/Table-Responsive.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-// import React from 'react'
-// import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'
-// import 'react-super-responsive-table/dist/SuperResponsiveTableStyle.css'
-// import { IconButton } from './Button'
-// import { PencilSimple, Trash } from 'phosphor-react'
-// import { isDarkTheme } from '../../lib/themeUpdater'
-// import { Box, SpanBox } from './LayoutPrimitives'
-// import { StyledText } from './StyledText'
-
-// interface TableProps {
-//   heading: string
-//   infoLink?: string
-//   onAdd?: () => void
-//   headers: string[]
-//   rows: Map<string, Record<string, any>>
-//   onDelete?: (id: string) => void
-//   onEdit?: (obj: any) => void
-// }
-
-// export default function TableR(props: TableProps): JSX.Element {
-//   const { headers } = props
-//   const iconColor = isDarkTheme() ? '#D8D7D5' : '#5F5E58'
-//   return (
-//     <>
-//       <Box css={{ml:'25px'}}>
-//         <StyledText style="fixedHeadline">{props.heading}</StyledText>
-//       </Box>
-//       <Box
-//         css={{
-//           backgroundColor: '$grayBg',
-//           margin: ' 0 auto',
-//           border: '0.5px solid $grayBgActive',
-//           width: '95%',
-//           mt: '$3',
-//           '&:hover': {
-//             border: '0.5px solid #FFD234',
-//           },
-//         }}
-//       >
-//         <Table>
-//           <Thead>
-//             <Tr>
-//               {headers.map((header: string, index: number) => (
-//                 <Th key={index}>
-//                   <SpanBox
-//                     css={{
-//                       textTransform: 'uppercase',
-//                       display: 'flex',
-//                       fontWeight: 600,
-//                       padding: '20px 10px',
-//                       color: '$grayTextContrast',
-//                       fontSize: '$2',
-//                     }}
-//                   >
-//                     {header}
-//                   </SpanBox>
-//                 </Th>
-//               ))}
-//             </Tr>
-//           </Thead>
-//           <Tbody>
-//             {Array.from(props.rows.keys()).map((key, index) => (
-//               <Tr key={index}>
-//                 {Object.values(props.rows.get(key) || {}).map((cell, index) => (
-//                   <Td key={index}>
-//                     <SpanBox
-//                       key={index}
-//                       css={{
-//                         display: 'flex',
-//                         justifyContent: 'left',
-//                         padding: '15px 10px',
-//                         color: '$grayTextContrast',
-//                         fontSize: '$1',
-//                       }}
-//                     >
-//                       {cell}
-//                     </SpanBox>
-//                   </Td>
-//                 ))}
-
-//                 {props.onDelete && (
-//                   <Td>
-//                     <IconButton
-//                       style="ctaWhite"
-//                       css={{ mr: '$1', background: '$labelButtonsBg' }}
-//                       onClick={() => {
-//                         props.onDelete && props.onDelete(key)
-//                       }}
-//                     >
-//                       <Trash size={16} color={iconColor} />
-//                     </IconButton>
-//                   </Td>
-//                 )}
-//                 {props.onEdit && (
-//                   <Td>
-//                     <IconButton
-//                       style="ctaWhite"
-//                       css={{ mr: '$1', background: '$labelButtonsBg' }}
-//                       onClick={() => {
-//                         props.onEdit &&
-//                           props.onEdit({ ...props.rows.get(key), id: key })
-//                       }}
-//                     >
-//                       <PencilSimple size={24} color={iconColor} />
-//                     </IconButton>
-//                   </Td>
-//                 )}
-//               </Tr>
-//             ))}
-//           </Tbody>
-//         </Table>
-//       </Box>
-//     </>
-//   )
-// }
diff --git a/packages/web/components/elements/Table.tsx b/packages/web/components/elements/Table.tsx
index 299fbaf24..ccc117b79 100644
--- a/packages/web/components/elements/Table.tsx
+++ b/packages/web/components/elements/Table.tsx
@@ -1,14 +1,13 @@
+import { isDarkTheme } from '../../lib/themeUpdater'
+import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'
+import { PencilSimple, Plus, Trash } from 'phosphor-react'
 import { Box, SpanBox, VStack } from './LayoutPrimitives'
 import { styled } from '../tokens/stitches.config'
 import { StyledText } from './StyledText'
 import { InfoLink } from './InfoLink'
 import { Button } from './Button'
-import { PencilSimple, Plus, Trash } from 'phosphor-react'
-import { isDarkTheme } from '../../lib/themeUpdater'
-import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'
 import 'react-super-responsive-table/dist/SuperResponsiveTableStyle.css'
 import { IconButton } from './Button'
-
 interface TableProps {
   heading: string
   infoLink?: string
@@ -26,63 +25,6 @@ const HeaderWrapper = styled(Box, {
   },
 })
 
-// const TableCard = styled(Box, {
-//   backgroundColor: '$grayBg',
-//   display: 'flex',
-//   alignItems: 'center',
-//   padding: '10px 12px',
-//   border: '0.5px solid $grayBgActive',
-//   width: '100%',
-
-//   '&:hover': {
-//     border: '0.5px solid #FFD234',
-//   },
-//   '@md': {
-//     paddingLeft: '0',
-//   },
-// })
-
-// const TableHeading = styled(Box, {
-//   backgroundColor: '$grayBgActive',
-//   border: '1px solid rgba(0, 0, 0, 0.06)',
-//   display: 'none',
-//   alignItems: 'center',
-//   padding: '14px 0 14px 40px',
-//   borderRadius: '5px 5px 0px 0px',
-//   width: '100%',
-//   '@md': {
-//     display: 'flex',
-//   },
-// })
-
-// const Input = styled('input', {
-//   backgroundColor: 'transparent',
-//   color: '$grayTextContrast',
-//   marginTop: '5px',
-//   '&[disabled]': {
-//     border: 'none',
-//   },
-// })
-
-// const IconButton = styled(Button, {
-//   variants: {
-//     style: {
-//       ctaWhite: {
-//         color: 'red',
-//         padding: '10px',
-//         display: 'flex',
-//         justifyContent: 'center',
-//         alignItems: 'center',
-//         border: '1px solid $grayBorder',
-//         boxSizing: 'border-box',
-//         borderRadius: 6,
-//         width: 40,
-//         height: 40,
-//       },
-//     },
-//   },
-// })
-
 export function TableR(props: TableProps): JSX.Element {
   const iconColor = isDarkTheme() ? '#D8D7D5' : '#5F5E58'
 
@@ -143,111 +85,6 @@ export function TableR(props: TableProps): JSX.Element {
           )}
         </Box>
       </HeaderWrapper>
-      {/* <TableHeading>
-        {props.headers.map((header, index) => (
-          <Box
-            key={index}
-            css={{
-              flex: 'auto',
-            }}
-          >
-            <StyledText
-              key={index}
-              style="menuTitle"
-              css={{
-                color: '$grayTextContrast',
-                '@md': {
-                  fontWeight: '600',
-                  color: '$grayTextContrast',
-                  textTransform: 'uppercase',
-                },
-                width: '240px',
-              }}
-            >
-              {header}
-            </StyledText>
-          </Box>
-        ))}
-        <Box
-          css={{
-            width: '120px',
-          }}
-        ></Box>
-      </TableHeading> */}
-      {/* {Array.from(props.rows.keys()).map((key, index) => (
-        <TableCard
-          key={index}
-          css={{
-            '&:hover': {
-              background: 'rgba(255, 234, 159, 0.12)',
-            },
-            '@mdDown': {
-              borderTopLeftRadius: index === 0 ? '5px' : '',
-              borderTopRightRadius: index === 0 ? '5px' : '',
-            },
-            borderBottomLeftRadius: index == props.rows.size - 1 ? '5px' : '',
-            borderBottomRightRadius: index == props.rows.size - 1 ? '5px' : '',
-            padding: '10px 20px 10px 40px',
-          }}
-        >
-          <Box
-            css={{
-              display: 'flex',
-              width: '100%',
-              flexDirection: 'column',
-              '@md': {
-                flexDirection: 'row',
-              },
-            }}
-          >
-            {Object.values(props.rows.get(key) || {}).map((cell, index) => (
-              <HStack
-                key={index}
-                css={{
-                  flex: 'auto',
-                  display: 'flex',
-                  padding: '4px 4px 4px 0px',
-                }}
-              >
-                <Input
-                  type="text"
-                  value={cell}
-                  disabled
-                  css={{
-                    width: '100%',
-                  }}
-                ></Input>
-              </HStack>
-            ))}
-            {props.onEdit && (
-              <IconButton
-                style="ctaWhite"
-                css={{ mr: '$1', background: '$labelButtonsBg' }}
-                onClick={() => {
-                  props.onEdit &&
-                    props.onEdit({ ...props.rows.get(key), id: key })
-                }}
-              >
-                <PencilSimple size={24} color={iconColor} />
-              </IconButton>
-            )}
-            {props.onDelete && (
-              <IconButton
-                style="ctaWhite"
-                css={{ mr: '$1', background: '$labelButtonsBg' }}
-                onClick={() => {
-                  props.onDelete && props.onDelete(key)
-                }}
-              >
-                <Trash size={16} color={iconColor} />
-              </IconButton>
-            )}
-          </Box>
-        </TableCard>
-      ))} */}
-      {/* <Box css={{ ml: '25px' }}>
-        <StyledText style="fixedHeadline">{props.heading}</StyledText>
-      </Box> */}
       <Box
         css={{
           backgroundColor: '$grayBg',
@@ -270,7 +107,7 @@ export function TableR(props: TableProps): JSX.Element {
                       textTransform: 'uppercase',
                       display: 'flex',
                       fontWeight: 600,
-                      padding: '20px 10px',
+                      padding: '20px 10px 20px 40px',
                       color: '$grayTextContrast',
                       fontSize: '$2',
                     }}
@@ -291,7 +128,7 @@ export function TableR(props: TableProps): JSX.Element {
                       css={{
                         display: 'flex',
                         justifyContent: 'left',
-                        padding: '20px 10px',
+                        padding: '20px 10px 20px 40px',
                         color: '$grayTextContrast',
                         fontSize: '$1',
                       }}
@@ -305,7 +142,7 @@ export function TableR(props: TableProps): JSX.Element {
                   <Td>
                     <IconButton
                       style="ctaWhite"
-                      css={{ mr: '$1', background: '$labelButtonsBg' }}
+                      css={{ mr: '$1', background: '$labelButtonsBg', margin: '20px 10px 20px 40px', }}
                       onClick={() => {
                         props.onDelete && props.onDelete(key)
                       }}
@@ -318,7 +155,7 @@ export function TableR(props: TableProps): JSX.Element {
                   <Td>
                     <IconButton
                       style="ctaWhite"
-                      css={{ mr: '$1', background: '$labelButtonsBg' }}
+                      css={{ mr: '$1', background: '$labelButtonsBg', margin: '20px 10px 20px 40px', }}
                       onClick={() => {
                         props.onEdit &&
                           props.onEdit({ ...props.rows.get(key), id: key })