diff --git a/src/components/Table/TableHeader/CloudLogs/CloudLogsModal.tsx b/src/components/Table/TableHeader/CloudLogs/CloudLogsModal.tsx
index a1e3d4b4..1ad1d180 100644
--- a/src/components/Table/TableHeader/CloudLogs/CloudLogsModal.tsx
+++ b/src/components/Table/TableHeader/CloudLogs/CloudLogsModal.tsx
@@ -3,15 +3,13 @@ import { useAtom } from "jotai";
 
 import {
   LinearProgress,
-  Tab,
+  ToggleButtonGroup,
+  ToggleButton,
   Stack,
   Typography,
   TextField,
   InputAdornment,
 } from "@mui/material";
-import TabContext from "@mui/lab/TabContext";
-import TabList from "@mui/lab/TabList";
-import TabPanel from "@mui/lab/TabPanel";
 import RefreshIcon from "@mui/icons-material/Refresh";
 import LogsIcon from "@src/assets/icons/CloudLogs";
 
@@ -53,7 +51,7 @@ export default function CloudLogsModal(props: IModalProps) {
       fullHeight
       ScrollableDialogContentProps={{ disableBottomDivider: true }}
       header={
-        <TabContext value={cloudLogFilters.type}>
+        <>
           <Stack
             direction="row"
             spacing={2}
@@ -67,33 +65,31 @@ export default function CloudLogsModal(props: IModalProps) {
               ml: { md: 18 },
               mr: { md: 40 / 8 + 3 },
 
-              minHeight: 56,
+              minHeight: 32,
+              boxSizing: "content-box",
               overflowX: "auto",
               overflowY: "hidden",
               py: 0,
               px: { xs: "var(--dialog-spacing)", md: 0 },
+              pb: { xs: 1, md: 0 },
 
-              "& .MuiTabPanel-root": { padding: 0 },
               "& > *": { flexShrink: 0 },
             }}
           >
-            <TabList
+            <ToggleButtonGroup
+              value={cloudLogFilters.type}
+              exclusive
               onChange={(_, v) =>
                 setCloudLogFilters((c) => ({ type: v, timeRange: c.timeRange }))
               }
               aria-label="Filter by log type"
-              // centered
-              sx={{}}
             >
-              {/* {!Array.isArray(tableState?.config.webhooks) ||
-              tableState?.config.webhooks?.length === 0 ? ( */}
-              <Tab label="Webhooks" value="webhook" />
-              {/* {table?.audit === false ? ( */}
-              <Tab label="Audit" value="audit" />
-              <Tab label="Build" value="build" />
-            </TabList>
+              <ToggleButton value="webhook">Webhooks</ToggleButton>
+              <ToggleButton value="audit">Audit</ToggleButton>
+              <ToggleButton value="build">Build</ToggleButton>
+            </ToggleButtonGroup>
 
-            <TabPanel value="webhook">
+            {cloudLogFilters.type === "webhook" && (
               <MultiSelect
                 multiple
                 label="Webhook:"
@@ -112,12 +108,9 @@ export default function CloudLogsModal(props: IModalProps) {
                 }
                 TextFieldProps={{
                   id: "webhook",
-                  sx: {
-                    flexDirection: "row",
-                    alignItems: "center",
-                    "& .MuiInputLabel-root": { pr: 1 },
-                    "& .MuiInputBase-root": { minWidth: 180 },
-                  },
+                  className: "labelHorizontal",
+                  sx: { "& .MuiInputBase-root": { width: 180 } },
+                  fullWidth: false,
                 }}
                 itemRenderer={(option) => (
                   <>
@@ -125,8 +118,8 @@ export default function CloudLogsModal(props: IModalProps) {
                   </>
                 )}
               />
-            </TabPanel>
-            <TabPanel value="audit">
+            )}
+            {cloudLogFilters.type === "audit" && (
               <TextField
                 id="auditRowId"
                 label="Row ID:"
@@ -144,11 +137,8 @@ export default function CloudLogsModal(props: IModalProps) {
                     </InputAdornment>
                   ),
                 }}
+                className="labelHorizontal"
                 sx={{
-                  flexDirection: "row",
-                  alignItems: "center",
-                  "& .MuiInputLabel-root": { pr: 1 },
-
                   "& .MuiInputBase-root, & .MuiInputBase-input": {
                     typography: "body2",
                     fontFamily: "mono",
@@ -160,7 +150,7 @@ export default function CloudLogsModal(props: IModalProps) {
                   "& .MuiInputBase-input": { pl: 0 },
                 }}
               />
-            </TabPanel>
+            )}
 
             {/* Spacer */}
             <div style={{ flexGrow: 1 }} />
@@ -208,7 +198,7 @@ export default function CloudLogsModal(props: IModalProps) {
           )}
 
           {/* <code>{logQueryUrl}</code> */}
-        </TabContext>
+        </>
       }
     >
       {cloudLogFilters.type === "build" ? (
diff --git a/src/components/Table/TableHeader/CloudLogs/TimeRangeSelect.tsx b/src/components/Table/TableHeader/CloudLogs/TimeRangeSelect.tsx
index 8c955bb1..34693791 100644
--- a/src/components/Table/TableHeader/CloudLogs/TimeRangeSelect.tsx
+++ b/src/components/Table/TableHeader/CloudLogs/TimeRangeSelect.tsx
@@ -61,16 +61,19 @@ export default function TimeRangeSelect({
         id="timeRangeSelect.type"
         value={value?.type || "days"}
         {...props}
-        sx={
-          value?.type === "range"
-            ? props.sx
-            : {
-                "& .MuiInputBase-root": {
+        sx={{
+          "& .MuiInputBase-root":
+            value?.type !== "range"
+              ? {
                   borderTopLeftRadius: 0,
                   borderBottomLeftRadius: 0,
-                },
-              }
-        }
+                }
+              : {},
+
+          "& .MuiInputBase-input": { minHeight: 20 },
+
+          ...props.sx,
+        }}
         onChange={(e) => {
           const newValue: any = { type: e.target.value };
 
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 96b47785..c002810b 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -232,6 +232,7 @@ export default function HomePage() {
 
           <ToggleButtonGroup
             value={view}
+            size="large"
             exclusive
             onChange={(_, v) => {
               if (v !== null) setView(v);
diff --git a/src/pages/Test.tsx b/src/pages/Test.tsx
index 53e942c1..d63047e8 100644
--- a/src/pages/Test.tsx
+++ b/src/pages/Test.tsx
@@ -14,6 +14,8 @@ import {
   TableCell,
   Typography,
   Button,
+  ToggleButtonGroup,
+  ToggleButton,
   IconButton,
   Fab,
   Chip,
@@ -38,6 +40,10 @@ import {
   LinearProgress,
 } from "@mui/material";
 import SparkIcon from "@mui/icons-material/OfflineBoltOutlined";
+import FormatAlignLeftIcon from "@mui/icons-material/FormatAlignLeft";
+import FormatAlignCenterIcon from "@mui/icons-material/FormatAlignCenter";
+import FormatAlignRightIcon from "@mui/icons-material/FormatAlignRight";
+import FormatAlignJustifyIcon from "@mui/icons-material/FormatAlignJustify";
 import { useConfirmation } from "@src/components/ConfirmationDialog";
 
 import SnackbarProgress, {
@@ -74,6 +80,32 @@ export default function TestView() {
 
   const snackbarProgressRef = useRef<ISnackbarProgressRef>();
 
+  const [alignment, setAlignment] = useState("left");
+  const handleChangeAlignment = (_, v) => setAlignment(v);
+  const toggleButtonProps = {
+    value: alignment,
+    onChange: handleChangeAlignment,
+    exclusive: true,
+    children: [
+      <ToggleButton value="left" key="left">
+        <FormatAlignLeftIcon />
+        {/* Left */}
+      </ToggleButton>,
+      <ToggleButton value="center" key="center">
+        <FormatAlignCenterIcon />
+        {/* Center */}
+      </ToggleButton>,
+      <ToggleButton value="right" key="right">
+        <FormatAlignRightIcon />
+        {/* Right */}
+      </ToggleButton>,
+      <ToggleButton value="justify" key="justify">
+        <FormatAlignJustifyIcon />
+        {/* Justify */}
+      </ToggleButton>,
+    ],
+  };
+
   return (
     <Navigation title="Theme Test">
       <Container style={{ margin: "24px 0 200px", width: "100%" }}>
@@ -448,6 +480,58 @@ export default function TestView() {
             </Button>
           </Stack>
 
+          <Stack spacing={1} direction="row" alignItems="center">
+            <ToggleButtonGroup
+              color="standard"
+              size="small"
+              {...toggleButtonProps}
+            />
+            <ToggleButtonGroup
+              color="primary"
+              size="medium"
+              {...toggleButtonProps}
+            />
+            <ToggleButtonGroup
+              color="secondary"
+              size="large"
+              {...toggleButtonProps}
+            />
+            <ToggleButtonGroup
+              color="primary"
+              size="large"
+              {...toggleButtonProps}
+              disabled
+            />
+          </Stack>
+
+          <Stack spacing={1} direction="row" alignItems="center">
+            <ToggleButtonGroup
+              orientation="vertical"
+              color="standard"
+              size="small"
+              {...toggleButtonProps}
+            />
+            <ToggleButtonGroup
+              orientation="vertical"
+              color="primary"
+              size="medium"
+              {...toggleButtonProps}
+            />
+            <ToggleButtonGroup
+              orientation="vertical"
+              color="secondary"
+              size="large"
+              {...toggleButtonProps}
+            />
+            <ToggleButtonGroup
+              orientation="vertical"
+              color="primary"
+              size="large"
+              {...toggleButtonProps}
+              disabled
+            />
+          </Stack>
+
           <Stack spacing={1} direction="row" alignItems="center">
             <IconButton size="small">
               <SparkIcon />
diff --git a/src/theme/components.tsx b/src/theme/components.tsx
index e21af254..f0874cca 100644
--- a/src/theme/components.tsx
+++ b/src/theme/components.tsx
@@ -245,6 +245,16 @@ export const components = (theme: Theme): ThemeOptions => {
           variant: "filled",
           size: "small",
         },
+
+        styleOverrides: {
+          root: {
+            "&.labelHorizontal": {
+              flexDirection: "row",
+              alignItems: "center",
+              "& .MuiInputLabel-root": { paddingRight: theme.spacing(1) },
+            },
+          },
+        },
       },
       MuiInputBase: {
         styleOverrides: {
@@ -540,6 +550,138 @@ export const components = (theme: Theme): ThemeOptions => {
         },
       },
 
+      MuiToggleButtonGroup: {
+        defaultProps: {
+          color: "primary",
+        },
+        styleOverrides: {
+          groupedHorizontal: {
+            "&:not(:first-of-type)": {
+              borderLeft: 0,
+              "&.Mui-disabled": { clipPath: "inset(0 0 0 1px)" },
+            },
+          },
+          groupedVertical: {
+            "&:not(:first-of-type)": {
+              borderTop: 0,
+              "&.Mui-disabled": { clipPath: "inset(1px 0 0 0)" },
+            },
+          },
+        },
+      },
+      MuiToggleButton: {
+        styleOverrides: {
+          root: {
+            "&, &.Mui-selected": {
+              backgroundColor: theme.palette.action.input,
+            },
+            transition: theme.transitions.create(
+              ["background-color", "color"],
+              { duration: theme.transitions.duration.short }
+            ),
+
+            border: 0,
+            boxShadow: `0 0 0 1px ${theme.palette.action.inputOutline} inset,
+            0 ${theme.palette.mode === "dark" ? "" : "-"}1px 0 0 ${
+              theme.palette.action.inputOutline
+            } inset`,
+            ".MuiToggleButtonGroup-vertical &:not(:last-of-type)": {
+              boxShadow: `0 0 0 1px ${theme.palette.action.inputOutline} inset`,
+            },
+
+            "&:not(.Mui-disabled):hover": {
+              backgroundColor: colord(theme.palette.action.input)
+                .mix(
+                  theme.palette.action.hover,
+                  theme.palette.action.hoverOpacity
+                )
+                .toHslString(),
+              zIndex: 1,
+            },
+
+            "&.Mui-selected:hover": {
+              ".MuiToggleButton-standard&": {
+                backgroundColor: colord(theme.palette.action.input)
+                  .mix(
+                    theme.palette.action.hover,
+                    theme.palette.action.hoverOpacity
+                  )
+                  .toHslString(),
+              },
+              ".MuiToggleButton-primary&": {
+                backgroundColor: colord(theme.palette.action.input)
+                  .mix(
+                    theme.palette.primary.main,
+                    theme.palette.action.hoverOpacity
+                  )
+                  .toHslString(),
+              },
+              ".MuiToggleButton-secondary&": {
+                backgroundColor: colord(theme.palette.action.input)
+                  .mix(
+                    theme.palette.secondary.main,
+                    theme.palette.action.hoverOpacity
+                  )
+                  .toHslString(),
+              },
+            },
+
+            "&.Mui-disabled": {
+              boxShadow: `0 0 0 1px ${theme.palette.divider} inset`,
+              backgroundColor: "transparent",
+              border: 0,
+            },
+
+            "&.Mui-selected::after": {
+              content: "''",
+              display: "block",
+              position: "absolute",
+              bottom: 0,
+              left: "50%",
+              transform: "translateX(-50%)",
+              maxWidth: 32,
+              width: `calc(100% - 16px)`,
+
+              height: 3,
+              borderRadius: 1.5,
+              backgroundColor: "currentColor",
+
+              ".MuiToggleButtonGroup-vertical &": {
+                left: 0,
+                top: "50%",
+                transform: "translateY(-50%)",
+                maxHeight: 32,
+                height: `calc(100% - 16px)`,
+
+                width: 3,
+              },
+            },
+          },
+
+          sizeSmall: {
+            minHeight: 24,
+            minWidth: 24,
+            padding: `${(24 - 18) / 2}px 10px`,
+            "& .MuiSvgIcon-root": {
+              margin: `0 ${-(10 - (24 - 18) / 2)}px`,
+              fontSize: 18,
+            },
+          },
+          sizeMedium: {
+            minHeight: 32,
+            minWidth: 32,
+            padding: `${(32 - 24) / 2}px 16px`,
+            "& .MuiSvgIcon-root": { margin: `0 ${-(16 - (32 - 24) / 2)}px` },
+          },
+          sizeLarge: {
+            minHeight: 48,
+            minWidth: 48,
+            padding: `${(48 - 24) / 2}px 22px`,
+            "& .MuiSvgIcon-root": { margin: `0 ${-(22 - (48 - 24) / 2)}px` },
+          },
+        },
+      },
+
       MuiIconButton: {
         defaultProps: {
           TouchRippleProps: { center: false },