diff --git a/app/packages/components/src/components/ThemeProvider/index.tsx b/app/packages/components/src/components/ThemeProvider/index.tsx
index e4a99b5ba5..79a48aaab6 100644
--- a/app/packages/components/src/components/ThemeProvider/index.tsx
+++ b/app/packages/components/src/components/ThemeProvider/index.tsx
@@ -49,6 +49,7 @@ let theme = extendMuiTheme({
           viewBarButtons: "hsl(200, 0%, 100%)",
           inactiveTab: "hsl(200, 0%, 90%)",
           popup: "hsl(200, 0%, 95%)",
+          field: "hsl(200, 0%, 95%)",
         },
         divider: "hsl(200, 0%, 80%)",
         dividerDisabled: "hsl(200, 0%, 85%)",
@@ -123,6 +124,7 @@ let theme = extendMuiTheme({
           inactiveTab: "hsl(200, 0%, 18%)",
           paper: "hsl(200, 0%, 10%)",
           popup: "hsl(200, 0%, 20%)",
+          field: "hsl(200, 0%, 20%, 0.3)",
         },
         divider: "hsl(200, 0%, 20%)",
         dividerDisabled: "hsl(200, 0%, 15%)",
diff --git a/app/packages/core/src/plugins/SchemaIO/components/ButtonView.tsx b/app/packages/core/src/plugins/SchemaIO/components/ButtonView.tsx
index 8ff2fa35d0..f5d637da1d 100644
--- a/app/packages/core/src/plugins/SchemaIO/components/ButtonView.tsx
+++ b/app/packages/core/src/plugins/SchemaIO/components/ButtonView.tsx
@@ -4,9 +4,10 @@ import { usePanelId } from "@fiftyone/spaces";
 import { isNullish } from "@fiftyone/utilities";
 import { Box, ButtonProps, Typography } from "@mui/material";
 import React from "react";
-import { getComponentProps } from "../utils";
+import { getComponentProps, getColorByCode } from "../utils";
 import { ViewPropsType } from "../utils/types";
 import Button from "./Button";
+import TooltipProvider from "./TooltipProvider";
 
 export default function ButtonView(props: ViewPropsType) {
   const { schema, path } = props;
@@ -20,6 +21,7 @@ export default function ButtonView(props: ViewPropsType) {
     operator,
     params = {},
     prompt,
+    title,
   } = view;
   const panelId = usePanelId();
   const handleClick = usePanelEvent();
@@ -35,25 +37,31 @@ export default function ButtonView(props: ViewPropsType) {
 
   return (
     <Box {...getComponentProps(props, "container")}>
-      <Button
-        variant={variant}
-        href={href}
-        onClick={() => {
-          handleClick(panelId, { params: computedParams, operator, prompt });
-        }}
-        startIcon={icon_position === "left" ? Icon : undefined}
-        endIcon={icon_position === "right" ? Icon : undefined}
-        title={description}
-        {...getComponentProps(props, "button", getButtonProps(props))}
-      >
-        <Typography>{label}</Typography>
-      </Button>
+      <TooltipProvider title={title} {...getComponentProps(props, "tooltip")}>
+        <Button
+          variant={variant}
+          href={href}
+          onClick={() => {
+            handleClick(panelId, {
+              params: computedParams,
+              operator,
+              prompt,
+            });
+          }}
+          startIcon={icon_position === "left" ? Icon : undefined}
+          endIcon={icon_position === "right" ? Icon : undefined}
+          title={description}
+          {...getComponentProps(props, "button", getButtonProps(props))}
+        >
+          <Typography>{label}</Typography>
+        </Button>
+      </TooltipProvider>
     </Box>
   );
 }
 
 function getButtonProps(props: ViewPropsType): ButtonProps {
-  const { label, variant } = props.schema.view;
+  const { label, variant, color } = props.schema.view;
   const baseProps: ButtonProps = getCommonProps(props);
   if (isNullish(label)) {
     baseProps.sx["& .MuiButton-startIcon"] = { mr: 0, ml: 0 };
@@ -66,10 +74,21 @@ function getButtonProps(props: ViewPropsType): ButtonProps {
   }
   if (variant === "square") {
     baseProps.sx.borderRadius = "3px 3px 0 0";
-    baseProps.sx.backgroundColor = (theme) => theme.palette.neutral.softBg;
+    baseProps.sx.backgroundColor = (theme) => theme.palette.background.field;
     baseProps.sx.borderBottom = "1px solid";
+    baseProps.sx.paddingBottom = "5px";
     baseProps.sx.borderColor = (theme) => theme.palette.primary.main;
   }
+  if (variant === "outlined") {
+    baseProps.sx.p = "5px";
+  }
+  if ((variant === "square" || variant === "outlined") && isNullish(color)) {
+    const borderColor =
+      "rgba(var(--fo-palette-common-onBackgroundChannel) / 0.23)";
+    baseProps.sx.borderColor = borderColor;
+    baseProps.sx.borderBottomColor = borderColor;
+  }
+
   return baseProps;
 }
 
@@ -95,10 +114,7 @@ function getCommonProps(props: ViewPropsType): ButtonProps {
 function getColor(props: ViewPropsType) {
   const color = props.schema.view.color;
   if (color) {
-    if (color === "primary") return (theme) => theme.palette.text.primary;
-    if (color === "secondary") return (theme) => theme.palette.text.secondary;
-    if (color === "orange") return (theme) => theme.palette.primary.main;
-    return color;
+    return getColorByCode(color);
   }
   const variant = getVariant(props);
   return (theme) => {
diff --git a/app/packages/core/src/plugins/SchemaIO/components/ContainerizedComponent.tsx b/app/packages/core/src/plugins/SchemaIO/components/ContainerizedComponent.tsx
index acda73f920..4caadbd7f3 100644
--- a/app/packages/core/src/plugins/SchemaIO/components/ContainerizedComponent.tsx
+++ b/app/packages/core/src/plugins/SchemaIO/components/ContainerizedComponent.tsx
@@ -1,6 +1,11 @@
 import { Box, Paper, PaperProps } from "@mui/material";
 import React, { PropsWithChildren } from "react";
-import { isCompositeView, overlayToSx } from "../utils";
+import {
+  getMarginSx,
+  getPaddingSx,
+  isCompositeView,
+  overlayToSx,
+} from "../utils";
 import { ViewPropsType } from "../utils/types";
 
 export default function ContainerizedComponent(props: ContainerizedComponent) {
@@ -29,9 +34,16 @@ export default function ContainerizedComponent(props: ContainerizedComponent) {
 }
 
 function PaperContainer(props: PaperContainerProps) {
-  const { elevation = 1, children, ...paperProps } = props;
+  const { elevation = 1, children, rounded = true, ...paperProps } = props;
+  const roundedSx = rounded ? {} : { borderRadius: 0 };
+  const paddingSx = getPaddingSx(props);
+  const marginSx = getMarginSx(props);
   return (
-    <Paper sx={{ p: 1, m: 0.5 }} elevation={elevation} {...paperProps}>
+    <Paper
+      sx={{ p: 1, m: 0.5, ...roundedSx, ...paddingSx, ...marginSx }}
+      elevation={elevation}
+      {...paperProps}
+    >
       {children}
     </Paper>
   );
@@ -45,4 +57,6 @@ const containersByName = { PaperContainer, OutlinedContainer };
 
 type ContainerizedComponent = PropsWithChildren<ViewPropsType>;
 
-type PaperContainerProps = PropsWithChildren<PaperProps>;
+type PaperContainerProps = PropsWithChildren<
+  PaperProps & { rounded?: boolean }
+>;
diff --git a/app/packages/core/src/plugins/SchemaIO/components/DropdownView.tsx b/app/packages/core/src/plugins/SchemaIO/components/DropdownView.tsx
index ec352aca95..00597c0631 100644
--- a/app/packages/core/src/plugins/SchemaIO/components/DropdownView.tsx
+++ b/app/packages/core/src/plugins/SchemaIO/components/DropdownView.tsx
@@ -1,12 +1,12 @@
 import { MenuItem, Select } from "@mui/material";
-import React from "react";
+import React, { useState } from "react";
 import { useKey } from "../hooks";
-import { getComponentProps } from "../utils";
+import { getComponentProps, getFieldSx } from "../utils";
 import autoFocus from "../utils/auto-focus";
+import { ViewPropsType } from "../utils/types";
 import AlertView from "./AlertView";
 import ChoiceMenuItemBody from "./ChoiceMenuItemBody";
 import FieldWrapper from "./FieldWrapper";
-import { ViewPropsType } from "../utils/types";
 
 const MULTI_SELECT_TYPES = ["string", "array"];
 
@@ -19,11 +19,14 @@ export default function DropdownView(props: ViewPropsType) {
     placeholder = "",
     separator = ",",
     readOnly,
-    condensed,
+    compact,
     label,
     description,
+    color,
+    variant,
   } = view;
   const [key, setUserChanged] = useKey(path, schema, data, true);
+  const [selected, setSelected] = useState(false);
 
   if (multiSelect && !MULTI_SELECT_TYPES.includes(type))
     return (
@@ -53,10 +56,22 @@ export default function DropdownView(props: ViewPropsType) {
     labels[choice.value] = choice.label;
     return labels;
   }, {});
-  const { MenuProps = {}, ...selectProps } = getComponentProps(props, "select");
+  const { MenuProps = {}, ...selectProps } = getComponentProps(
+    props,
+    "select",
+    {
+      sx: {
+        ".MuiSelect-select": {
+          padding: "0.45rem 2rem 0.45rem 1rem",
+          opacity: selected ? 1 : 0.5,
+        },
+        ...getFieldSx({ color, variant }),
+      },
+    }
+  );
 
   return (
-    <FieldWrapper {...props} hideHeader={condensed}>
+    <FieldWrapper {...props} hideHeader={compact}>
       <Select
         key={key}
         disabled={readOnly}
@@ -65,10 +80,12 @@ export default function DropdownView(props: ViewPropsType) {
         size="small"
         fullWidth
         displayEmpty
-        title={condensed ? description : undefined}
+        title={compact ? description : undefined}
         renderValue={(value) => {
-          if (value?.length === 0) {
-            if (condensed) {
+          const unselected = value?.length === 0;
+          setSelected(!unselected);
+          if (unselected) {
+            if (compact) {
               return placeholder || label;
             }
             return placeholder;
diff --git a/app/packages/core/src/plugins/SchemaIO/components/DynamicIO.tsx b/app/packages/core/src/plugins/SchemaIO/components/DynamicIO.tsx
index e9a557450d..1a59b0309a 100644
--- a/app/packages/core/src/plugins/SchemaIO/components/DynamicIO.tsx
+++ b/app/packages/core/src/plugins/SchemaIO/components/DynamicIO.tsx
@@ -64,7 +64,7 @@ function schemaWithInheritedVariant(
 ) {
   if (isNullish(get(schema, "view.variant"))) {
     set(schema, "view.variant", get(parentSchema, "view.variant"));
-    set(schema, "view.condensed", true);
+    set(schema, "view.compact", true);
   }
   if (isNullish(get(schema, "view.color"))) {
     set(schema, "view.color", get(parentSchema, "view.color"));
diff --git a/app/packages/core/src/plugins/SchemaIO/components/GridView.tsx b/app/packages/core/src/plugins/SchemaIO/components/GridView.tsx
index bc594b1d1a..a847ecaf6a 100644
--- a/app/packages/core/src/plugins/SchemaIO/components/GridView.tsx
+++ b/app/packages/core/src/plugins/SchemaIO/components/GridView.tsx
@@ -1,7 +1,14 @@
 import { Box, BoxProps } from "@mui/material";
 import React from "react";
 import { HeaderView } from ".";
-import { getComponentProps, getPath, getProps, spaceToHeight } from "../utils";
+import {
+  getComponentProps,
+  getMarginSx,
+  getPaddingSx,
+  getPath,
+  getProps,
+  spaceToHeight,
+} from "../utils";
 import { ObjectSchemaType, ViewPropsType } from "../utils/types";
 import DynamicIO from "./DynamicIO";
 
@@ -26,6 +33,8 @@ export default function GridView(props: ViewPropsType) {
       justifyContent: alignX || align_x || "start",
       alignItems: alignY || align_y || "start",
       gridAutoFlow: direction,
+      ...getPaddingSx(view),
+      ...getMarginSx(view),
     },
   };
 
diff --git a/app/packages/core/src/plugins/SchemaIO/components/TextFieldView.tsx b/app/packages/core/src/plugins/SchemaIO/components/TextFieldView.tsx
index a51201cd4c..974acd8ce7 100644
--- a/app/packages/core/src/plugins/SchemaIO/components/TextFieldView.tsx
+++ b/app/packages/core/src/plugins/SchemaIO/components/TextFieldView.tsx
@@ -1,22 +1,24 @@
 import { TextField } from "@mui/material";
 import React from "react";
 import { useKey } from "../hooks";
-import { getComponentProps } from "../utils";
+import { getComponentProps, getFieldSx } from "../utils";
 import autoFocus from "../utils/auto-focus";
-import FieldWrapper from "./FieldWrapper";
 import { NumberSchemaType, ViewPropsType } from "../utils/types";
+import FieldWrapper from "./FieldWrapper";
 
 export default function TextFieldView(props: ViewPropsType<NumberSchemaType>) {
   const { schema, onChange, path, data } = props;
   const { type, view = {}, min, max, multipleOf = 1 } = schema;
-  const { readOnly, placeholder, condensed, label } = view;
+  const { readOnly, placeholder, compact, label, color, variant } = view;
 
-  const { inputProps = {}, ...fieldProps } = getComponentProps(props, "field");
+  const { inputProps = {}, ...fieldProps } = getComponentProps(props, "field", {
+    sx: getFieldSx({ color, variant }),
+  });
 
   const [key, setUserChanged] = useKey(path, schema, data, true);
 
   return (
-    <FieldWrapper {...props} hideHeader={condensed}>
+    <FieldWrapper {...props} hideHeader={compact}>
       <TextField
         key={key}
         disabled={readOnly}
@@ -24,14 +26,20 @@ export default function TextFieldView(props: ViewPropsType<NumberSchemaType>) {
         defaultValue={data}
         size="small"
         fullWidth
-        placeholder={condensed ? placeholder || label : placeholder}
+        placeholder={compact ? placeholder || label : placeholder}
         type={type}
         onChange={(e) => {
           const value = e.target.value;
           onChange(path, type === "number" ? parseFloat(value) : value, schema);
           setUserChanged();
         }}
-        inputProps={{ min, max, step: multipleOf, ...inputProps }}
+        inputProps={{
+          min,
+          max,
+          step: multipleOf,
+          style: compact ? { padding: "0.45rem 1rem" } : {},
+          ...inputProps,
+        }}
         {...fieldProps}
       />
     </FieldWrapper>
diff --git a/app/packages/core/src/plugins/SchemaIO/components/TooltipProvider.tsx b/app/packages/core/src/plugins/SchemaIO/components/TooltipProvider.tsx
new file mode 100644
index 0000000000..cd70bb5e0e
--- /dev/null
+++ b/app/packages/core/src/plugins/SchemaIO/components/TooltipProvider.tsx
@@ -0,0 +1,12 @@
+import { Box, Tooltip, TooltipProps } from "@mui/material";
+import React from "react";
+
+export default function TooltipProvider(props: TooltipProps) {
+  const { title, children, ...tooltipProps } = props;
+  if (!title) return children;
+  return (
+    <Tooltip title={title} {...tooltipProps}>
+      <Box>{children}</Box>
+    </Tooltip>
+  );
+}
diff --git a/app/packages/core/src/plugins/SchemaIO/utils/index.ts b/app/packages/core/src/plugins/SchemaIO/utils/index.ts
index d3e8b06013..5108b54c33 100644
--- a/app/packages/core/src/plugins/SchemaIO/utils/index.ts
+++ b/app/packages/core/src/plugins/SchemaIO/utils/index.ts
@@ -75,6 +75,7 @@ export function getErrorsForView(props: ViewPropsType) {
 export { default as autoFocus } from "./auto-focus";
 export * from "./generate-schema";
 export * from "./layout";
+export * from "./style";
 
 // Views that renders DynamicIO as a child component
 const COMPOSITE_VIEWS = [
diff --git a/app/packages/core/src/plugins/SchemaIO/utils/layout.ts b/app/packages/core/src/plugins/SchemaIO/utils/layout.ts
index 4b4298ad16..2b0a539c9f 100644
--- a/app/packages/core/src/plugins/SchemaIO/utils/layout.ts
+++ b/app/packages/core/src/plugins/SchemaIO/utils/layout.ts
@@ -1,4 +1,4 @@
-import { ViewPropsType } from "./types";
+import { SchemaViewType, ViewPropsType } from "./types";
 
 const CSS_UNIT_PATTERN =
   /(\d+)(cm|mm|in|px|pt|pc|em|ex|ch|rem|vw|vh|vmin|vmax|%)$/;
@@ -35,6 +35,30 @@ export function getLayoutProps(props: ViewPropsType) {
   };
 }
 
+export function getPaddingSx(view: SchemaViewType = {}): PaddingSxType {
+  return {
+    p: view.pad,
+    px: view.pad_x || view.px || view.padX,
+    py: view.pad_y || view.py || view.padY,
+    pt: view.pad_t || view.pt || view.padT,
+    pr: view.pad_r || view.pr || view.padR,
+    pb: view.pad_b || view.pb || view.padB,
+    pl: view.pad_l || view.pl || view.padL,
+  };
+}
+
+export function getMarginSx(view: SchemaViewType = {}): PaddingSxType {
+  return {
+    m: view.margin,
+    mx: view.margin_x || view.mx || view.marginX,
+    my: view.margin_y || view.my || view.marginY,
+    mt: view.margin_t || view.mt || view.marginT,
+    mr: view.margin_r || view.mr || view.marginR,
+    mb: view.margin_b || view.mb || view.marginB,
+    ml: view.margin_l || view.ml || view.marginL,
+  };
+}
+
 export const overlayToSx = {
   "top-left": {
     position: "absolute",
@@ -85,3 +109,13 @@ export const overlayToSx = {
     transform: "translateY(-50%)",
   },
 };
+
+type PaddingSxType = {
+  p?: number;
+  px?: number;
+  py?: number;
+  pt?: number;
+  pr?: number;
+  pb?: number;
+  pl?: number;
+};
diff --git a/app/packages/core/src/plugins/SchemaIO/utils/style.ts b/app/packages/core/src/plugins/SchemaIO/utils/style.ts
new file mode 100644
index 0000000000..54f0e25738
--- /dev/null
+++ b/app/packages/core/src/plugins/SchemaIO/utils/style.ts
@@ -0,0 +1,40 @@
+export function getColorByCode(code: ColorType) {
+  if (code) {
+    if (code === "primary") return "var(--fo-palette-text-primary)";
+    if (code === "secondary") return "var(--fo-palette-text-secondary)";
+    if (fiftyOneColorNames.includes(code))
+      return "var(--fo-palette-primary-main)";
+    return code;
+  }
+}
+
+export function getFieldSx(options: FieldsetOptionsType) {
+  const { color, variant } = options;
+  const sx = {
+    "& fieldset": {
+      borderColor: `${getColorByCode(color)}!important`,
+    },
+  };
+  if (variant === "square") {
+    sx["& fieldset"].borderWidth = "0 0 1px 0 !important";
+    sx["& fieldset"].borderRadius = 0;
+    sx.borderRadius = "3px 3px 0 0";
+    sx.backgroundColor = (theme) => theme.palette.background.field;
+  }
+  return sx;
+}
+
+const fiftyOneColorNames = ["51", "orange", "FiftyOne", "fiftyone"];
+
+type ColorType =
+  | "primary"
+  | "secondary"
+  | "51"
+  | "orange"
+  | "FiftyOne"
+  | "fiftyone";
+
+type FieldsetOptionsType = {
+  color: ColorType;
+  variant?: "outlined" | "square";
+};
diff --git a/app/packages/core/src/plugins/SchemaIO/utils/types.ts b/app/packages/core/src/plugins/SchemaIO/utils/types.ts
index f9b851053a..d2f7d3cbf2 100644
--- a/app/packages/core/src/plugins/SchemaIO/utils/types.ts
+++ b/app/packages/core/src/plugins/SchemaIO/utils/types.ts
@@ -1,6 +1,8 @@
+export type SchemaViewType = { [key: string]: any };
+
 export type BaseSchemaType = {
   type: string;
-  view: { [key: string]: any };
+  view: SchemaViewType;
 };
 
 export type ArraySchemaType = BaseSchemaType & {
diff --git a/fiftyone/operators/types.py b/fiftyone/operators/types.py
index 9dda6de95f..e5426dd296 100644
--- a/fiftyone/operators/types.py
+++ b/fiftyone/operators/types.py
@@ -380,7 +380,8 @@ def menu(self, name, **kwargs):
         Returns:
             a :class:`Object`
         """
-        menu = MenuView(**kwargs)
+        menu_kwargs = {"pad": 1, "variant": "square", **kwargs}
+        menu = MenuView(**menu_kwargs)
         obj = Object()
         self.define_property(name, obj, view=menu)
         return obj
@@ -2167,31 +2168,46 @@ def to_json(self):
         }
 
 
-class PaperContainer(BaseType):
+class Container(BaseType):
+    """Represents a base container for a container types."""
+
+    def __init__(self, **kwargs):
+        self._kwargs = kwargs
+
+    def to_json(self):
+        return {**super().to_json(), **self._kwargs}
+
+
+class PaperContainer(Container):
     """Represents an elevated block for a view.
 
     Args:
         elevation (1): the elevation of the container. Can be a value between 0 and 24
+        rounded (True): whether to display the paper container with rounded corners
     """
 
-    def __init__(self, elevation=1):
+    def __init__(self, elevation=1, rounded=True, **kwargs):
+        super().__init__(**kwargs)
         self.elevation = elevation
+        self.rounded = rounded
 
     def to_json(self):
         return {
             **super().to_json(),
             "elevation": self.elevation,
+            "rounded": self.rounded,
         }
 
 
-class OutlinedContainer(BaseType):
+class OutlinedContainer(Container):
     """Represents an elevated block for a view.
 
     Args:
         rounded (True): whether to display the outlined container with rounded corners
     """
 
-    def __init__(self, rounded=True):
+    def __init__(self, rounded=True, **kwargs):
+        super().__init__(**kwargs)
         self.rounded = rounded
 
     def to_json(self):