diff --git a/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscount.styles.js b/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscount.styles.js
deleted file mode 100644
index 68951bfc..00000000
--- a/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscount.styles.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import { spacer, errorColor } from 'src/styling/variables'
-
-const styles = {
-  identification: {
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    '& > *:first-child': {
-      marginLeft: 0
-    },
-    '& > *': {
-      marginLeft: 6
-    },
-    '& > *:nth-child(3)': {
-      marginLeft: 15
-    }
-  },
-  form: {
-    display: 'flex',
-    flexDirection: 'column',
-    height: '100%',
-    '& > *:first-child': {
-      marginTop: 10
-    },
-    '& > *': {
-      marginBottom: 20
-    }
-  },
-  customerAutocomplete: {
-    width: 350
-  },
-  discountRateWrapper: {
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  discountInput: {
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  footer: {
-    display: 'flex',
-    flexDirection: 'row',
-    margin: [['auto', 0, spacer * 3, 0]]
-  },
-  submit: {
-    margin: [['auto', 0, 0, 'auto']]
-  },
-  error: {
-    color: errorColor
-  },
-  disabled: {
-    cursor: 'wait'
-  }
-}
-
-export default styles
diff --git a/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscountModal.jsx b/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscountModal.jsx
index 6868330d..840964ab 100644
--- a/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscountModal.jsx
+++ b/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscountModal.jsx
@@ -1,20 +1,15 @@
-import { makeStyles } from '@mui/styles'
 import { Form, Formik, Field } from 'formik'
 import * as R from 'ramda'
 import React from 'react'
 import ErrorMessage from 'src/components/ErrorMessage'
 import Modal from 'src/components/Modal'
 import { HelpTooltip } from 'src/components/Tooltip'
-import { H3, TL1, P } from 'src/components/typography'
+import { H1, H3, P } from 'src/components/typography'
 import * as Yup from 'yup'
 
 import { Button } from 'src/components/buttons'
 import { NumberInput, Autocomplete } from 'src/components/inputs/formik'
 
-import styles from './IndividualDiscount.styles'
-
-const useStyles = makeStyles(styles)
-
 const initialValues = {
   customer: '',
   discount: ''
@@ -46,8 +41,6 @@ const IndividualDiscountModal = ({
   addDiscount,
   customers
 }) => {
-  const classes = useStyles()
-
   const handleAddDiscount = (customer, discount) => {
     addDiscount({
       variables: {
@@ -77,8 +70,10 @@ const IndividualDiscountModal = ({
               handleAddDiscount(customer, discount)
             }}>
             {({ errors, touched }) => (
-              <Form id="individual-discount-form" className={classes.form}>
-                <div className={classes.customerAutocomplete}>
+              <Form
+                id="individual-discount-form"
+                className="flex flex-col h-full gap-5">
+                <div className="mt-2 w-88">
                   <Field
                     name="customer"
                     label="Select a customer"
@@ -97,7 +92,7 @@ const IndividualDiscountModal = ({
                   />
                 </div>
                 <div>
-                  <div className={classes.discountRateWrapper}>
+                  <div className="flex items-center">
                     <H3>Define discount rate</H3>
                     <HelpTooltip width={304}>
                       <P>
@@ -112,22 +107,19 @@ const IndividualDiscountModal = ({
                       </P>
                     </HelpTooltip>
                   </div>
-                  <div className={classes.discountInput}>
+                  <div className="flex items-center">
                     <Field
                       name="discount"
                       size="lg"
                       autoComplete="off"
                       width={50}
                       decimalScale={0}
-                      className={classes.discountInputField}
                       component={NumberInput}
                     />
-                    <TL1 inline className={classes.inputLabel}>
-                      %
-                    </TL1>
+                    <H1 className="ml-2 mt-4 font-bold inline">%</H1>
                   </div>
                 </div>
-                <div className={classes.footer}>
+                <div className="flex mt-auto mb-6">
                   {getErrorMsg(errors, touched, creationError) && (
                     <ErrorMessage>
                       {getErrorMsg(errors, touched, creationError)}
@@ -136,7 +128,7 @@ const IndividualDiscountModal = ({
                   <Button
                     type="submit"
                     form="individual-discount-form"
-                    className={classes.submit}>
+                    className="ml-auto">
                     Add discount
                   </Button>
                 </div>
diff --git a/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscounts.jsx b/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscounts.jsx
index d6940a65..7f1d63fc 100644
--- a/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscounts.jsx
+++ b/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscounts.jsx
@@ -1,21 +1,17 @@
 import { useQuery, useMutation, gql } from '@apollo/client'
-import { makeStyles } from '@mui/styles'
 import * as R from 'ramda'
 import React, { useState } from 'react'
+
+import { Link, Button, IconButton } from 'src/components/buttons'
 import { DeleteDialog } from 'src/components/DeleteDialog'
 import DataTable from 'src/components/tables/DataTable'
 import { Label3, TL1 } from 'src/components/typography'
 import PhoneIdIcon from 'src/styling/icons/ID/phone/zodiac.svg?react'
 import DeleteIcon from 'src/styling/icons/action/delete/enabled.svg?react'
 
-import { Link, Button, IconButton } from 'src/components/buttons'
-
-import styles from './IndividualDiscount.styles'
 import IndividualDiscountModal from './IndividualDiscountModal'
 import classnames from 'classnames'
 
-const useStyles = makeStyles(styles)
-
 const GET_INDIVIDUAL_DISCOUNTS = gql`
   query individualDiscounts {
     individualDiscounts {
@@ -57,8 +53,6 @@ const GET_CUSTOMERS = gql`
 `
 
 const IndividualDiscounts = () => {
-  const classes = useStyles()
-
   const [deleteDialog, setDeleteDialog] = useState(false)
   const [toBeDeleted, setToBeDeleted] = useState()
 
@@ -94,7 +88,7 @@ const IndividualDiscounts = () => {
       size: 'sm',
       view: t => {
         return (
-          <div className={classes.identification}>
+          <div className="flex items-center gap-2">
             <PhoneIdIcon />
             <span>{t.customer.phone}</span>
           </div>
@@ -158,7 +152,7 @@ const IndividualDiscounts = () => {
             <Link
               color="primary"
               onClick={toggleModal}
-              className={classnames({ [classes.disabled]: customerLoading })}
+              className={classnames({ 'cursor-wait': customerLoading })}
               disabled={customerLoading}>
               Add new code
             </Link>
diff --git a/new-lamassu-admin/src/pages/LoyaltyPanel/LoyaltyDiscounts.jsx b/new-lamassu-admin/src/pages/LoyaltyPanel/LoyaltyDiscounts.jsx
deleted file mode 100644
index cf4e9335..00000000
--- a/new-lamassu-admin/src/pages/LoyaltyPanel/LoyaltyDiscounts.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react'
-
-const LoyaltyDiscounts = () => {
-  return <></>
-}
-
-export default LoyaltyDiscounts
diff --git a/new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodes.jsx b/new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodes.jsx
index 6c3afcf0..6a239742 100644
--- a/new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodes.jsx
+++ b/new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodes.jsx
@@ -1,5 +1,4 @@
 import { useQuery, useMutation, gql } from '@apollo/client'
-import { makeStyles } from '@mui/styles'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import { DeleteDialog } from 'src/components/DeleteDialog'
@@ -9,11 +8,8 @@ import DeleteIcon from 'src/styling/icons/action/delete/enabled.svg?react'
 
 import { Link, Button, IconButton } from 'src/components/buttons'
 
-import styles from './PromoCodes.styles'
 import PromoCodesModal from './PromoCodesModal'
 
-const useStyles = makeStyles(styles)
-
 const DUPLICATE_ERROR_MSG = 'There is already a promotion with that code!'
 const DEFAULT_ERROR_MSG = 'Failed to save'
 
@@ -46,8 +42,6 @@ const CREATE_CODE = gql`
 `
 
 const PromoCodes = () => {
-  const classes = useStyles()
-
   const [deleteDialog, setDeleteDialog] = useState(false)
   const [toBeDeleted, setToBeDeleted] = useState()
 
diff --git a/new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodes.styles.js b/new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodes.styles.js
deleted file mode 100644
index 6332a4c3..00000000
--- a/new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodes.styles.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import {
-  spacer,
-  fontPrimary,
-  primaryColor,
-  errorColor
-} from 'src/styling/variables'
-
-const styles = {
-  footer: {
-    display: 'flex',
-    flexDirection: 'row',
-    margin: [['auto', 0, spacer * 3, 0]]
-  },
-  modalLabel1: {
-    marginTop: 20
-  },
-  modalLabel2Wrapper: {
-    marginTop: 40,
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'flex-start'
-  },
-  discountInput: {
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'flex-start'
-  },
-  inputLabel: {
-    color: primaryColor,
-    fontFamily: fontPrimary,
-    fontSize: 24,
-    marginLeft: 8,
-    marginTop: 15
-  },
-  tableWidth: {
-    width: 620
-  },
-  error: {
-    color: errorColor
-  },
-  form: {
-    display: 'flex',
-    flexDirection: 'column',
-    height: '100%'
-  },
-  submit: {
-    margin: [['auto', 0, 0, 'auto']]
-  }
-}
-
-export default styles
diff --git a/new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodesModal.jsx b/new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodesModal.jsx
index 25556f6e..15d064e5 100644
--- a/new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodesModal.jsx
+++ b/new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodesModal.jsx
@@ -1,33 +1,30 @@
-import { makeStyles } from '@mui/styles'
 import { Form, Formik, Field } from 'formik'
 import * as R from 'ramda'
 import React from 'react'
 import ErrorMessage from 'src/components/ErrorMessage'
 import Modal from 'src/components/Modal'
 import { HelpTooltip } from 'src/components/Tooltip'
-import { H3, TL1, P } from 'src/components/typography'
+import { H3, P, H1 } from 'src/components/typography'
 import * as Yup from 'yup'
 
 import { Button } from 'src/components/buttons'
 import { TextInput, NumberInput } from 'src/components/inputs/formik'
 
-import styles from './PromoCodes.styles'
-
-const useStyles = makeStyles(styles)
-
 const initialValues = {
   code: '',
   discount: ''
 }
 
 const validationSchema = Yup.object().shape({
-  code: Yup.string().required().trim().max(25).matches(/^\S*$/, 'No whitespace allowed'),
+  code: Yup.string()
+    .required()
+    .trim()
+    .max(25)
+    .matches(/^\S*$/, 'No whitespace allowed'),
   discount: Yup.number().required().min(0).max(100)
 })
 
 const PromoCodesModal = ({ showModal, onClose, errorMsg, addCode }) => {
-  const classes = useStyles()
-
   const handleAddCode = (code, discount) => {
     addCode(R.toUpper(code), parseInt(discount))
   }
@@ -51,58 +48,52 @@ const PromoCodesModal = ({ showModal, onClose, errorMsg, addCode }) => {
               handleAddCode(code, discount)
             }}>
             {({ errors }) => (
-              <Form id="promo-form" className={classes.form}>
-                <H3 className={classes.modalLabel1}>Promo code name</H3>
+              <Form id="promo-form" className="flex flex-col h-full">
+                <H3 className="mt-5">Promo code name</H3>
                 <Field
                   name="code"
-                autoFocus
-                size="lg"
-                autoComplete="off"
-                width={338}
-                inputProps={{ style: { textTransform: 'uppercase' } }}
-                component={TextInput}
-              />
-              <div className={classes.modalLabel2Wrapper}>
-                <H3 className={classes.modalLabel2}>Define discount rate</H3>
-                <HelpTooltip width={304}>
-                  <P>
-                    This is a percentage discount off of your existing
-                    commission rates for a customer entering this code at the
-                    machine.
-                  </P>
-                  <P>
-                    For instance, if you charge 8% commissions, and this code is
-                    set for 50%, then you'll instead be charging 4% on
-                    transactions using the code.
-                  </P>
-                </HelpTooltip>
-              </div>
-              <div className={classes.discountInput}>
-                <Field
-                  name="discount"
+                  autoFocus
                   size="lg"
                   autoComplete="off"
-                  width={50}
-                  decimalScale={0}
-                  className={classes.discountInputField}
-                  component={NumberInput}
+                  width={338}
+                  inputProps={{ style: { textTransform: 'uppercase' } }}
+                  component={TextInput}
                 />
-                <TL1 inline className={classes.inputLabel}>
-                  %
-                </TL1>
-              </div>
-              <div className={classes.footer}>
-                {(errorMsg || !R.isEmpty(errors)) && (
-                  <ErrorMessage>
-                    {errorMsg || R.head(R.values(errors))}
-                  </ErrorMessage>
-                )}
-                <Button
-                  type="submit"
-                  form="promo-form"
-                  className={classes.submit}>
-                  Add code
-                </Button>
+                <div className="flex justify-start mt-10">
+                  <H3>Define discount rate</H3>
+                  <HelpTooltip width={304}>
+                    <P>
+                      This is a percentage discount off of your existing
+                      commission rates for a customer entering this code at the
+                      machine.
+                    </P>
+                    <P>
+                      For instance, if you charge 8% commissions, and this code
+                      is set for 50%, then you'll instead be charging 4% on
+                      transactions using the code.
+                    </P>
+                  </HelpTooltip>
+                </div>
+                <div className="flex items-start">
+                  <Field
+                    name="discount"
+                    size="lg"
+                    autoComplete="off"
+                    width={50}
+                    decimalScale={0}
+                    component={NumberInput}
+                  />
+                  <H1 className="ml-2 mt-4 font-bold inline">%</H1>
+                </div>
+                <div className="flex mt-auto mb-6">
+                  {(errorMsg || !R.isEmpty(errors)) && (
+                    <ErrorMessage>
+                      {errorMsg || R.head(R.values(errors))}
+                    </ErrorMessage>
+                  )}
+                  <Button type="submit" form="promo-form" className="ml-auto">
+                    Add code
+                  </Button>
                 </div>
               </Form>
             )}
diff --git a/new-lamassu-admin/src/pages/Machines/MachineComponents/Cassettes/Cassettes.jsx b/new-lamassu-admin/src/pages/Machines/MachineComponents/Cassettes/Cassettes.jsx
index 04dfb6b6..0dd0b5a4 100644
--- a/new-lamassu-admin/src/pages/Machines/MachineComponents/Cassettes/Cassettes.jsx
+++ b/new-lamassu-admin/src/pages/Machines/MachineComponents/Cassettes/Cassettes.jsx
@@ -1,5 +1,4 @@
-import { useMutation, gql } from "@apollo/client";
-import { makeStyles } from '@mui/styles'
+import { useMutation, gql } from '@apollo/client'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import DataTable from 'src/components/tables/DataTable'
@@ -9,10 +8,6 @@ import helper from 'src/pages/Maintenance/helper'
 
 import { fromNamespace } from 'src/utils/config'
 
-import styles from './Cassettes.styles'
-
-const useStyles = makeStyles(styles)
-
 const SET_CASSETTE_BILLS = gql`
   mutation MachineAction(
     $deviceId: ID!
@@ -46,8 +41,6 @@ const widths = {
 }
 
 const CashCassettes = ({ machine, config, refetchData, bills }) => {
-  const classes = useStyles()
-
   const [wizard, setWizard] = useState(false)
 
   const cashout = config && fromNamespace('cashOut')(config)
@@ -57,7 +50,7 @@ const CashCassettes = ({ machine, config, refetchData, bills }) => {
   const getCashoutSettings = deviceId => fromNamespace(deviceId)(cashout)
 
   const elements = R.filter(it => it.name !== 'name')(
-    helper.getElements(classes, config, bills, setWizard, widths)
+    helper.getElements(config, bills, setWizard, widths)
   )
 
   const [setCassetteBills, { error }] = useMutation(SET_CASSETTE_BILLS, {
@@ -92,7 +85,7 @@ const CashCassettes = ({ machine, config, refetchData, bills }) => {
         Details={InnerCashUnitDetails}
         emptyText="No machines so far"
         initialExpanded={0}
-        tableClassName={classes.dataTable}
+        tableClassName="min-h-72"
       />
       {wizard && (
         <Wizard
diff --git a/new-lamassu-admin/src/pages/Machines/MachineComponents/Cassettes/Cassettes.styles.js b/new-lamassu-admin/src/pages/Machines/MachineComponents/Cassettes/Cassettes.styles.js
deleted file mode 100644
index ec245a0a..00000000
--- a/new-lamassu-admin/src/pages/Machines/MachineComponents/Cassettes/Cassettes.styles.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import { offDarkColor } from 'src/styling/variables'
-
-const styles = {
-  unitsRow: {
-    display: 'flex',
-    flexDirection: 'row',
-    margin: [[10, 0]],
-    '& > *': {
-      marginRight: 30
-    },
-    '& > *:last-child': {
-      marginRight: 0
-    }
-  },
-  units: {
-    display: 'flex',
-    flexDirection: 'row',
-    '& > *': {
-      marginRight: 10
-    },
-    '& > *:last-child': {
-      marginRight: 0
-    }
-  },
-  verticalLine: {
-    height: '100%',
-    width: 1,
-    backgroundColor: offDarkColor
-  },
-  dataTable: {
-    minHeight: 290
-  }
-}
-
-export default styles
diff --git a/new-lamassu-admin/src/pages/Machines/MachineComponents/Details.jsx b/new-lamassu-admin/src/pages/Machines/MachineComponents/Details.jsx
index 7b9105da..7ca96a36 100644
--- a/new-lamassu-admin/src/pages/Machines/MachineComponents/Details.jsx
+++ b/new-lamassu-admin/src/pages/Machines/MachineComponents/Details.jsx
@@ -1,31 +1,26 @@
-import { makeStyles } from '@mui/styles'
 import React from 'react'
-import { Label3, P } from 'src/components/typography'
+import { Label1, P } from 'src/components/typography'
 
 import { modelPrettifier } from 'src/utils/machine'
 import { formatDate } from 'src/utils/timezones'
 
-import styles from '../Machines.styles'
-const useStyles = makeStyles(styles)
-
 const Details = ({ data, timezone }) => {
-  const classes = useStyles()
   return (
-    <div className={classes.row}>
-      <div className={classes.rowItem}>
-        <Label3 className={classes.label3}>Paired at</Label3>
+    <div className="flex gap-30">
+      <div>
+        <Label1 className="text-comet mt-0">Paired at</Label1>
         <P>
           {data.pairedAt
             ? formatDate(data.pairedAt, timezone, 'yyyy-MM-dd HH:mm:ss')
             : ''}
         </P>
       </div>
-      <div className={classes.rowItem}>
-        <Label3 className={classes.label3}>Machine model</Label3>
+      <div>
+        <Label1 className="text-comet mt-0">Machine model</Label1>
         <P>{modelPrettifier[data.model]}</P>
       </div>
-      <div className={classes.rowItem}>
-        <Label3 className={classes.label3}>Software version</Label3>
+      <div>
+        <Label1 className="text-comet mt-0">Software version</Label1>
         <P>{data.version}</P>
       </div>
     </div>
diff --git a/new-lamassu-admin/src/pages/Machines/MachineComponents/Overview.jsx b/new-lamassu-admin/src/pages/Machines/MachineComponents/Overview.jsx
index a9f42060..db9730c6 100644
--- a/new-lamassu-admin/src/pages/Machines/MachineComponents/Overview.jsx
+++ b/new-lamassu-admin/src/pages/Machines/MachineComponents/Overview.jsx
@@ -1,4 +1,3 @@
-import { makeStyles } from '@mui/styles'
 import BigNumber from 'bignumber.js'
 import { formatDistance } from 'date-fns'
 import React from 'react'
@@ -7,36 +6,25 @@ import MachineActions from 'src/components/machineActions/MachineActions'
 import { H3, Label1, P } from 'src/components/typography'
 import CopyToClipboard from 'src/pages/Transactions/CopyToClipboard'
 
-import styles from '../Machines.styles'
-const useStyles = makeStyles(styles)
-
 const Overview = ({ data, onActionSuccess }) => {
-  const classes = useStyles()
-
   return (
-    <div className={classes.contentContainer}>
-      <div className={classes.row}>
-        <div className={classes.rowItem}>
-          <H3>{data.name}</H3>
-        </div>
+    <div className="flex flex-col gap-8">
+      <H3>{data.name}</H3>
+      <div>
+        <Label1 className="text-comet mt-0">Status</Label1>
+        {data && data.statuses ? <Status status={data.statuses[0]} /> : null}
       </div>
-      <div className={classes.row}>
-        <div className={classes.rowItem}>
-          <Label1 className={classes.label3}>Status</Label1>
-          {data && data.statuses ? <Status status={data.statuses[0]} /> : null}
-        </div>
-      </div>
-      <div className={classes.row}>
-        <div className={classes.rowItem}>
-          <Label1 className={classes.label3}>Ping</Label1>
+      <div className="flex gap-6">
+        <div>
+          <Label1 className="text-comet mt-0">Ping</Label1>
           <P noMargin>
             {data.responseTime
               ? new BigNumber(data.responseTime).toFixed(3).toString() + ' ms'
               : 'unavailable'}
           </P>
         </div>
-        <div className={classes.rowItem}>
-          <Label1 className={classes.label3}>Last ping</Label1>
+        <div>
+          <Label1 className="text-comet mt-0">Last ping</Label1>
           <P noMargin>
             {data.lastPing
               ? formatDistance(new Date(data.lastPing), new Date(), {
@@ -45,8 +33,8 @@ const Overview = ({ data, onActionSuccess }) => {
               : 'unknown'}
           </P>
         </div>
-        <div className={classes.rowItem}>
-          <Label1 className={classes.label3}>Network speed</Label1>
+        <div>
+          <Label1 className="text-comet mt-0">Network speed</Label1>
           <P noMargin>
             {data.downloadSpeed
               ? new BigNumber(data.downloadSpeed)
@@ -56,17 +44,15 @@ const Overview = ({ data, onActionSuccess }) => {
           </P>
         </div>
       </div>
-      <div className={classes.row}>
-        <div className={classes.rowItem}>
-          <Label1 className={classes.label3}>Device ID</Label1>
+      <div>
+        <div>
+          <Label1 className="text-comet mt-0">Device ID</Label1>
           <P noMargin>
-            <CopyToClipboard buttonClassname={classes.copyToClipboard}>
-              {data.deviceId}
-            </CopyToClipboard>
+            <CopyToClipboard>{data.deviceId}</CopyToClipboard>
           </P>
         </div>
       </div>
-      <div className={classes.row}>
+      <div>
         <MachineActions
           machine={data}
           onActionSuccess={onActionSuccess}></MachineActions>
diff --git a/new-lamassu-admin/src/pages/Machines/MachineSidebar.jsx b/new-lamassu-admin/src/pages/Machines/MachineSidebar.jsx
index 1181d615..a9f1851b 100644
--- a/new-lamassu-admin/src/pages/Machines/MachineSidebar.jsx
+++ b/new-lamassu-admin/src/pages/Machines/MachineSidebar.jsx
@@ -1,15 +1,11 @@
 import List from '@mui/material/List'
 import ListItem from '@mui/material/ListItem'
 import ListItemText from '@mui/material/ListItemText'
-import { makeStyles } from '@mui/styles'
 import React from 'react'
 
-import styles from './Machines.styles'
-const useStyles = makeStyles(styles)
 const MachineSidebar = ({ data, getText, getKey, isSelected, selectItem }) => {
-  const classes = useStyles()
   return (
-    <List className={classes.sidebarContainer}>
+    <List className="h-100 overflow-y-auto">
       {data.map((item, idx) => {
         return (
           <ListItem
diff --git a/new-lamassu-admin/src/pages/Machines/Machines.jsx b/new-lamassu-admin/src/pages/Machines/Machines.jsx
index 7055151a..51975340 100644
--- a/new-lamassu-admin/src/pages/Machines/Machines.jsx
+++ b/new-lamassu-admin/src/pages/Machines/Machines.jsx
@@ -1,9 +1,6 @@
-import { useQuery, gql } from "@apollo/client";
+import { useQuery, gql } from '@apollo/client'
 import Breadcrumbs from '@mui/material/Breadcrumbs'
-import Grid from '@mui/material/Grid'
-import { makeStyles } from '@mui/styles'
 import NavigateNextIcon from '@mui/icons-material/NavigateNext'
-import classnames from 'classnames'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import { Link, useLocation, useHistory } from 'react-router-dom'
@@ -14,8 +11,6 @@ import Commissions from './MachineComponents/Commissions'
 import Details from './MachineComponents/Details'
 import Overview from './MachineComponents/Overview'
 import Transactions from './MachineComponents/Transactions'
-import styles from './Machines.styles'
-const useStyles = makeStyles(styles)
 
 const GET_INFO = gql`
   query getMachine($deviceId: ID!, $billFilters: JSONObject) {
@@ -101,8 +96,6 @@ const MachineRoute = () => {
 }
 
 const Machines = ({ data, refetch, reload }) => {
-  const classes = useStyles()
-
   const timezone = R.path(['config', 'locale_timezone'], data) ?? {}
 
   const machine = R.path(['machine'])(data) ?? {}
@@ -113,51 +106,44 @@ const Machines = ({ data, refetch, reload }) => {
   const machineID = R.path(['deviceId'])(machine) ?? null
 
   return (
-    <Grid container className={classes.grid}>
-      <Grid item xs={3}>
-        <Grid item xs={12}>
-          <div className={classes.breadcrumbsContainer}>
-            <Breadcrumbs separator={<NavigateNextIcon fontSize="small" />}>
-              <Link to="/dashboard" className={classes.breadcrumbLink}>
-                <Label3 noMargin className={classes.subtitle}>
-                  Dashboard
-                </Label3>
-              </Link>
-              <TL2 noMargin className={classes.subtitle}>
-                {machineName}
-              </TL2>
-            </Breadcrumbs>
-            <Overview data={machine} onActionSuccess={reload} />
-          </div>
-        </Grid>
-      </Grid>
-      <Grid item xs={9}>
-        <div className={classes.content}>
-          <div
-            className={classnames(classes.detailItem, classes.detailsMargin)}>
-            <TL1 className={classes.subtitle}>{'Details'}</TL1>
-            <Details data={machine} timezone={timezone} />
-          </div>
-          <div className={classes.detailItem}>
-            <TL1 className={classes.subtitle}>{'Cash box & cassettes'}</TL1>
-            <Cassettes
-              refetchData={refetch}
-              machine={machine}
-              config={config ?? false}
-              bills={bills}
-            />
-          </div>
-          <div className={classes.transactionsItem}>
-            <TL1 className={classes.subtitle}>{'Latest transactions'}</TL1>
-            <Transactions id={machineID} />
-          </div>
-          <div className={classes.detailItem}>
-            <TL1 className={classes.subtitle}>{'Commissions'}</TL1>
-            <Commissions name={'commissions'} id={machineID} />
-          </div>
+    <div className="flex flex-1 h-full gap-12">
+      <div className="basis-1/4 min-w-1/4 pt-8">
+        <Breadcrumbs separator={<NavigateNextIcon fontSize="small" />}>
+          <Link to="/dashboard" className="no-underline">
+            <Label3 noMargin className="text-comet mt-[1px]">
+              Dashboard
+            </Label3>
+          </Link>
+          <TL2 noMargin className="text-comet">
+            {machineName}
+          </TL2>
+        </Breadcrumbs>
+        <Overview data={machine} onActionSuccess={reload} />
+      </div>
+      <div className="basis-3/4 max-w-3/4 flex flex-col mt-6">
+        <div>
+          <TL1 className="text-comet">Details</TL1>
+          <Details data={machine} timezone={timezone} />
         </div>
-      </Grid>
-    </Grid>
+        <div>
+          <TL1 className="text-comet">Cash box & cassettes</TL1>
+          <Cassettes
+            refetchData={refetch}
+            machine={machine}
+            config={config ?? false}
+            bills={bills}
+          />
+        </div>
+        <div>
+          <TL1 className="text-comet">Latest transactions</TL1>
+          <Transactions id={machineID} />
+        </div>
+        <div>
+          <TL1 className="text-comet">Commissions</TL1>
+          <Commissions name={'commissions'} id={machineID} />
+        </div>
+      </div>
+    </div>
   )
 }
 
diff --git a/new-lamassu-admin/src/pages/Machines/Machines.styles.js b/new-lamassu-admin/src/pages/Machines/Machines.styles.js
deleted file mode 100644
index 2a524939..00000000
--- a/new-lamassu-admin/src/pages/Machines/Machines.styles.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import { spacer, comet } from 'src/styling/variables'
-
-const styles = {
-  grid: {
-    flex: 1,
-    height: '100%'
-  },
-  content: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1,
-    marginLeft: spacer * 6,
-    maxWidth: 900
-  },
-  subtitle: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    flexDirection: 'row',
-    color: comet
-  },
-  label3: {
-    color: comet,
-    marginTop: 0,
-    fontSize: 12
-  },
-  row: {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-around'
-  },
-  rowItem: {
-    flex: 1,
-    marginBottom: spacer * 2
-  },
-  detailItem: {
-    marginBottom: spacer * 4
-  },
-  actionButtonsContainer: {
-    display: 'flex',
-    flexDirection: 'row'
-  },
-  breadcrumbsContainer: {
-    marginTop: 32
-  },
-  breadcrumbLink: {
-    textDecoration: 'none'
-  },
-  detailsMargin: {
-    marginTop: 24
-  },
-  sidebarContainer: {
-    height: 400,
-    overflowY: 'auto'
-  },
-  contentContainer: {
-    '& > *': {
-      marginTop: 26
-    },
-    '& > *:first-child': {
-      marginTop: 0
-    }
-  }
-}
-
-export default styles
diff --git a/new-lamassu-admin/src/pages/Maintenance/CashUnits.jsx b/new-lamassu-admin/src/pages/Maintenance/CashUnits.jsx
index 8f3fa94b..16aaad7c 100644
--- a/new-lamassu-admin/src/pages/Maintenance/CashUnits.jsx
+++ b/new-lamassu-admin/src/pages/Maintenance/CashUnits.jsx
@@ -188,7 +188,6 @@ const CashCassettes = () => {
   }
 
   const elements = helper.getElements(
-    classes,
     config,
     bills,
     setWizard,
diff --git a/new-lamassu-admin/src/pages/Maintenance/CashUnits.styles.js b/new-lamassu-admin/src/pages/Maintenance/CashUnits.styles.js
index 389968bc..2c46a149 100644
--- a/new-lamassu-admin/src/pages/Maintenance/CashUnits.styles.js
+++ b/new-lamassu-admin/src/pages/Maintenance/CashUnits.styles.js
@@ -27,32 +27,6 @@ export default {
   downloadLogsButton: {
     marginLeft: 13
   },
-  unitsRow: {
-    display: 'flex',
-    flexDirection: 'row',
-    margin: [[10, 0]],
-    '& > *': {
-      marginRight: 30
-    },
-    '& > *:last-child': {
-      marginRight: 0
-    }
-  },
-  units: {
-    display: 'flex',
-    flexDirection: 'row',
-    '& > *': {
-      marginRight: 10
-    },
-    '& > *:last-child': {
-      marginRight: 0
-    }
-  },
-  verticalLine: {
-    height: '100%',
-    width: 1,
-    backgroundColor: offDarkColor
-  },
   dataTable: {
     marginBottom: 80
   }
diff --git a/new-lamassu-admin/src/pages/Maintenance/helper.jsx b/new-lamassu-admin/src/pages/Maintenance/helper.jsx
index 19e21f60..e63e8ac4 100644
--- a/new-lamassu-admin/src/pages/Maintenance/helper.jsx
+++ b/new-lamassu-admin/src/pages/Maintenance/helper.jsx
@@ -7,14 +7,7 @@ import { IconButton } from 'src/components/buttons'
 import { fromNamespace } from 'src/utils/config'
 import { getCashUnitCapacity } from 'src/utils/machine'
 
-const getElements = (
-  classes,
-  config,
-  bills,
-  setWizard,
-  widths,
-  setMachineId
-) => {
+const getElements = (config, bills, setWizard, widths, setMachineId) => {
   const fillingPercentageSettings = fromNamespace('notifications', config)
   const locale = fromNamespace('locale')(config)
   const cashout = fromNamespace('cashOut')(config)
@@ -42,7 +35,6 @@ const getElements = (
           width={25}
           height={45}
           omitInnerPercentage
-          className={classes.padding}
         />
       ),
       inputProps: {
@@ -55,8 +47,8 @@ const getElements = (
       width: widths.cassettes,
       view: m => {
         return (
-          <div className={classes.unitsRow}>
-            <div className={classes.units}>
+          <div className="flex my-2 mx-0 gap-8">
+            <div className="flex gap-2">
               {R.range(1, m.numberOfCassettes + 1).map((it, idx) => (
                 <CashOutLite
                   key={idx}
@@ -73,7 +65,7 @@ const getElements = (
                 />
               ))}
             </div>
-            <div className={classes.units}>
+            <div className="flex gap-2">
               {R.map(it => (
                 <>
                   <CashOutLite
@@ -109,7 +101,7 @@ const getElements = (
                     capacity={getCashUnitCapacity(m.model, 'recycler')}
                   />
                   {it !== m.numberOfRecyclers / 2 && (
-                    <span className={classes.verticalLine} />
+                    <span className="h-full w-[1px] bg-comet2" />
                   )}
                 </>
               ))(R.range(1, m.numberOfRecyclers / 2 + 1))}
@@ -136,7 +128,7 @@ const getElements = (
             size="large">
             <EditIcon />
           </IconButton>
-        );
+        )
       }
     }
   ]