diff --git a/worklenz-frontend/src/layouts/AdminCenterLayout.tsx b/worklenz-frontend/src/layouts/AdminCenterLayout.tsx
index d46595b9..a07fc01c 100644
--- a/worklenz-frontend/src/layouts/AdminCenterLayout.tsx
+++ b/worklenz-frontend/src/layouts/AdminCenterLayout.tsx
@@ -4,40 +4,25 @@ import { Outlet } from 'react-router-dom';
 import { useMediaQuery } from 'react-responsive';
 import AdminCenterSidebar from '@/pages/admin-center/sidebar/sidebar';
 import { useTranslation } from 'react-i18next';
-import { useAppDispatch } from '@/hooks/useAppDispatch';
 
 const AdminCenterLayout: React.FC = () => {
-  const dispatch = useAppDispatch();
   const isTablet = useMediaQuery({ query: '(min-width:768px)' });
-  const isMarginAvailable = useMediaQuery({ query: '(min-width: 1000px)' });
   const { t } = useTranslation('admin-center/sidebar');
 
-  
-
   return (
-    <div
-      style={{
-        marginBlock: 96,
-        minHeight: '90vh',
-        marginLeft: `${isMarginAvailable ? '5%' : ''}`,
-        marginRight: `${isMarginAvailable ? '5%' : ''}`,
-      }}
-    >
+    <div className="my-6">
       <Typography.Title level={4}>{t('adminCenter')}</Typography.Title>
 
       {isTablet ? (
         <Flex
           gap={24}
           align="flex-start"
-          style={{
-            width: '100%',
-            marginBlockStart: 24,
-          }}
+          className="w-full mt-6"
         >
-          <Flex style={{ width: '100%', maxWidth: 240 }}>
+          <Flex className="w-full max-w-60">
             <AdminCenterSidebar />
           </Flex>
-          <Flex style={{ width: '100%' }}>
+          <Flex className="w-full">
             <Outlet />
           </Flex>
         </Flex>
@@ -45,9 +30,7 @@ const AdminCenterLayout: React.FC = () => {
         <Flex
           vertical
           gap={24}
-          style={{
-            marginBlockStart: 24,
-          }}
+          className="mt-6"
         >
           <AdminCenterSidebar />
           <Outlet />