diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index d0291b37..9484899d 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -2,9 +2,9 @@ import { Box, CssBaseline, Theme, useTheme } from '@mui/material'
 import type { Decorator } from '@storybook/react'
 import { InvertibleMuiThemeProvider } from '@xylabs/react-invertible-theme'
 import React from 'react'
-import { XyoTheme, DataismTheme, XyLabsTheme } from '@xylabs/react-theme'
+import { XyoTheme, DataismTheme, XyLabsTheme, XyosTheme } from '@xylabs/react-theme'
 
-const themeNames = ['None', 'XYO', 'Dataism', 'XYLabs'] as const
+const themeNames = ['None', 'XYO', 'Dataism', 'XYLabs', 'xyOS'] as const
 type ThemeName = typeof themeNames[number]
 
 export const globalTypes = {
@@ -28,8 +28,9 @@ const getTheme = (themeName: ThemeName) => {
   const themes: Record<ThemeName, Theme> = {
     'None': theme,
     'XYO': XyoTheme(theme, false),
-    'Dataism': DataismTheme(theme, false),
-    'XYLabs': XyLabsTheme(theme, false),
+    'xyOS': XyosTheme(theme),
+    'Dataism': DataismTheme(theme),
+    'XYLabs': XyLabsTheme(theme),
   }
   return themes[themeName] ?? {}
 }
diff --git a/packages/theme/src/product-theme/ThemeExtensions/index.ts b/packages/theme/src/product-theme/ThemeExtensions/index.ts
index 5f995e99..f7dff7f1 100644
--- a/packages/theme/src/product-theme/ThemeExtensions/index.ts
+++ b/packages/theme/src/product-theme/ThemeExtensions/index.ts
@@ -1 +1,2 @@
 export * from './customThemeColors.ts'
+export * from './typography.ts'
diff --git a/packages/theme/src/product-theme/ThemeExtensions/typography.ts b/packages/theme/src/product-theme/ThemeExtensions/typography.ts
new file mode 100644
index 00000000..d8490af0
--- /dev/null
+++ b/packages/theme/src/product-theme/ThemeExtensions/typography.ts
@@ -0,0 +1,56 @@
+import '@mui/material/styles'
+
+declare module '@mui/material/styles' {
+  interface Typography {
+    display1: React.CSSProperties
+    display2: React.CSSProperties
+    stylize1: React.CSSProperties
+    stylize2: React.CSSProperties
+  }
+
+  interface TypographyOptions {
+    display1?: React.CSSProperties
+    display2?: React.CSSProperties
+    stylize1?: React.CSSProperties
+    stylize2?: React.CSSProperties
+  }
+}
+
+export const display1 = { fontSize: '4rem' }
+
+export const display2 = {
+  fontSize: '3.5rem',
+  fontWeight: 400,
+}
+
+export const stylize1 = {
+  fontSize: '1.25rem',
+  fontWeight: 300,
+  letterSpacing: '0.15em',
+}
+
+export const stylize2 = {
+  fontSize: '1rem',
+  fontWeight: 700,
+  letterSpacing: '0.1em',
+}
+
+export const typographyFragmentDisplay1 = {
+  fontSize: '4rem',
+  fontWeight: 400,
+}
+
+export const typographyFragmentDisplay2 = {
+  fontSize: '4rem',
+  fontWeight: 400,
+}
+
+export const typographyFragmentStylize1 = {
+  fontSize: '4rem',
+  fontWeight: 400,
+}
+
+export const typographyFragmentStylize2 = {
+  fontSize: '4rem',
+  fontWeight: 400,
+}
diff --git a/packages/theme/src/product-theme/dataism/theme.tsx b/packages/theme/src/product-theme/dataism/theme.tsx
index ddd7087b..f1089681 100644
--- a/packages/theme/src/product-theme/dataism/theme.tsx
+++ b/packages/theme/src/product-theme/dataism/theme.tsx
@@ -3,16 +3,17 @@ import {
   alpha, createTheme, lighten,
 } from '@mui/material'
 
+import { shapeFragment } from '../../theme-fragments/shape.tsx'
+import { spacingFragment } from '../../theme-fragments/spacing.tsx'
 import { darkThemePalette } from './darkThemePalette.tsx'
 import { lightThemePalette } from './lightThemePalette.tsx'
 
-export const DataismTheme = (theme: Theme, rtl = false): Theme => createTheme({
+export const DataismTheme = (theme: Theme): Theme => createTheme({
   colorSchemes: {
     dark: { palette: darkThemePalette },
     light: { palette: lightThemePalette },
   },
   cssVariables: { colorSchemeSelector: 'class' },
-  direction: rtl ? 'rtl' : 'ltr',
   breakpoints: {
     values: {
       lg: 1350,
@@ -141,8 +142,8 @@ export const DataismTheme = (theme: Theme, rtl = false): Theme => createTheme({
     },
     MuiLink: { styleOverrides: { root: { textDecoration: 'none' } } },
   },
-  shape: { borderRadius: 8 },
-  spacing: 12,
+  ...spacingFragment,
+  ...shapeFragment,
   typography: {
     body1: { fontSize: '1.1rem' },
     button: {
diff --git a/packages/theme/src/product-theme/index.ts b/packages/theme/src/product-theme/index.ts
index 30094542..25ae59c7 100644
--- a/packages/theme/src/product-theme/index.ts
+++ b/packages/theme/src/product-theme/index.ts
@@ -1,4 +1,5 @@
 export * from './dataism/index.ts'
 export * from './ThemeExtensions/index.ts'
 export * from './xylabs/index.ts'
-export * from './xyo-website/index.ts'
+export * from './xyo/index.ts'
+export * from './xyos/index.ts'
diff --git a/packages/theme/src/product-theme/xylabs/theme.tsx b/packages/theme/src/product-theme/xylabs/theme.tsx
index 863e2a99..c48ffb81 100644
--- a/packages/theme/src/product-theme/xylabs/theme.tsx
+++ b/packages/theme/src/product-theme/xylabs/theme.tsx
@@ -1,38 +1,20 @@
 import { createTheme, type Theme } from '@mui/material'
 
+import {
+  componentFragment, shapeFragment, spacingFragment,
+} from '../../theme-fragments/index.ts'
 import { darkThemeOptions } from './darkThemeOptions.tsx'
 import { lightThemeOptions } from './lightThemeOptions.tsx'
 
-export const XyLabsTheme = (theme: Theme, rtl = false): Theme => createTheme({
+export const XyLabsTheme = (theme: Theme): Theme => createTheme({
   colorSchemes: {
     light: lightThemeOptions,
     dark: darkThemeOptions,
   },
   cssVariables: { colorSchemeSelector: 'class' },
-  direction: rtl ? 'rtl' : 'ltr',
-  components: {
-    MuiAlert: {
-      styleOverrides: {
-        root: {
-          paddingBottom: 0.5,
-          paddingTop: 0.5,
-        },
-      },
-    },
-    MuiButton: {
-      styleOverrides: {
-        outlined: { backgroundColor: 'inherit' },
-        root: { overflow: 'hidden' },
-      },
-    },
-    MuiLink: {
-      defaultProps: { underline: 'none' },
-      styleOverrides: { root: { '&:hover': { filter: 'brightness(75%)' } } },
-    },
-    MuiStepper: { styleOverrides: { root: { padding: '0px' } } },
-  },
-  shape: { borderRadius: 4 },
-  spacing: 12,
+  ...componentFragment,
+  ...spacingFragment,
+  ...shapeFragment,
   typography: {
     fontFamily: '"Outfit", sans-serif',
     body1: { fontSize: '1.1rem' },
diff --git a/packages/theme/src/product-theme/xyo-website/darkThemeOptions.tsx b/packages/theme/src/product-theme/xyo/darkThemeOptions.tsx
similarity index 100%
rename from packages/theme/src/product-theme/xyo-website/darkThemeOptions.tsx
rename to packages/theme/src/product-theme/xyo/darkThemeOptions.tsx
diff --git a/packages/theme/src/product-theme/xyo-website/index.ts b/packages/theme/src/product-theme/xyo/index.ts
similarity index 100%
rename from packages/theme/src/product-theme/xyo-website/index.ts
rename to packages/theme/src/product-theme/xyo/index.ts
diff --git a/packages/theme/src/product-theme/xyo-website/lightThemeOptions.tsx b/packages/theme/src/product-theme/xyo/lightThemeOptions.tsx
similarity index 100%
rename from packages/theme/src/product-theme/xyo-website/lightThemeOptions.tsx
rename to packages/theme/src/product-theme/xyo/lightThemeOptions.tsx
diff --git a/packages/theme/src/product-theme/xyo-website/theme.ts b/packages/theme/src/product-theme/xyo/theme.ts
similarity index 97%
rename from packages/theme/src/product-theme/xyo-website/theme.ts
rename to packages/theme/src/product-theme/xyo/theme.ts
index 16c76774..d5c17b6b 100644
--- a/packages/theme/src/product-theme/xyo-website/theme.ts
+++ b/packages/theme/src/product-theme/xyo/theme.ts
@@ -3,6 +3,7 @@ import {
   alpha, createTheme, darken,
 } from '@mui/material'
 
+import { shapeFragment, spacingFragment } from '../../theme-fragments/index.ts'
 import { darkThemeOptions } from './darkThemeOptions.tsx'
 import { lightThemeOptions } from './lightThemeOptions.tsx'
 
@@ -109,8 +110,8 @@ export const XyoTheme = (theme: Theme, rtl = false): Theme => createTheme({
       },
     },
   },
-  shape: { borderRadius: 8 },
-  spacing: 12,
+  ...spacingFragment,
+  ...shapeFragment,
   typography: {
     fontFamily: '"Lexend Deca", sans-serif',
     body1: { fontSize: '1.1rem' },
diff --git a/packages/theme/src/product-theme/xyos/darkThemeOptions.tsx b/packages/theme/src/product-theme/xyos/darkThemeOptions.tsx
new file mode 100644
index 00000000..d542f796
--- /dev/null
+++ b/packages/theme/src/product-theme/xyos/darkThemeOptions.tsx
@@ -0,0 +1,84 @@
+import {
+  alpha, lighten, type ThemeOptions,
+} from '@mui/material'
+
+import { neutralButtonStylesContained, neutralButtonStylesOutlined } from '../ThemeExtensions/index.ts'
+
+export const darkThemeOptions: ThemeOptions = {
+  palette: {
+    background: {
+      default: '#020223',
+      paper: '#19193F',
+    },
+    error: { main: '#f6594e' },
+    success: {
+      main: '#7efc81',
+      contrastText: '#011e01',
+    },
+    primary: { main: '#5658F3', light: '#7c72ff' },
+    secondary: {
+      main: '#66caf7',
+      contrastText: '#020223',
+    },
+    warning: { main: '#f7d866' },
+    text: {
+      disabled: '#a5acdb',
+      primary: '#E3E4EB',
+      secondary: '#e3e4eba3',
+    },
+  },
+  typography: {
+    body1: { color: '#ffffffa3' },
+    body2: { color: '#B3B3BD' },
+    caption: { color: '#B3B3BD' },
+  },
+  components: {
+    MuiButton: {
+      defaultProps: { color: 'neutral' },
+      variants: [
+        {
+          props: { variant: 'contained', color: 'neutral' },
+          style: neutralButtonStylesContained,
+        },
+        {
+          props: { variant: 'outlined', color: 'neutral' },
+          style: neutralButtonStylesOutlined,
+        },
+        {
+          props: { variant: 'text' },
+          style: {
+            '&:hover': {
+              textDecoration: 'underline 1.5px #66caf7',
+              textUnderlineOffset: '5px',
+              backgroundColor: 'transparent',
+            },
+          },
+        },
+      ],
+    },
+    MuiChip: {
+      styleOverrides: {
+        colorError: { backgroundColor: alpha('#f6594e', 0.2), color: lighten('#f6594e', 0.2) },
+        colorInfo: { backgroundColor: alpha('#72b4f4', 0.2), color: lighten('#72b4f4', 0.2) },
+        colorPrimary: { backgroundColor: alpha('#5658F3', 0.2), color: lighten('#5658F3', 0.2) },
+        colorSecondary: { backgroundColor: alpha('#66caf7', 0.2), color: lighten('#66caf7', 0.2) },
+        colorSuccess: { backgroundColor: alpha('#7efc81', 0.2), color: lighten('#7efc81', 0.2) },
+        colorWarning: { backgroundColor: alpha('#f7d866', 0.2), color: lighten('#f7d866', 0.2) },
+      },
+    },
+    MuiDialog: {
+      styleOverrides: {
+        root: {
+          '& .MuiDialog-paper': {
+            backgroundColor: '#16163D',
+            backgroundImage: 'none',
+            paddingLeft: 2,
+            paddingRight: 2,
+            border: `1px solid ${lighten('#16163D', 0.05)}`,
+          },
+        },
+      },
+    },
+    MuiTable: { styleOverrides: { root: { background: '#20205A' } } },
+  },
+}
diff --git a/packages/theme/src/product-theme/xyos/index.ts b/packages/theme/src/product-theme/xyos/index.ts
new file mode 100644
index 00000000..a685f9b3
--- /dev/null
+++ b/packages/theme/src/product-theme/xyos/index.ts
@@ -0,0 +1 @@
+export * from './theme.ts'
diff --git a/packages/theme/src/product-theme/xyos/lightThemeOptions.tsx b/packages/theme/src/product-theme/xyos/lightThemeOptions.tsx
new file mode 100644
index 00000000..8b3f68f8
--- /dev/null
+++ b/packages/theme/src/product-theme/xyos/lightThemeOptions.tsx
@@ -0,0 +1,28 @@
+import type { ThemeOptions } from '@mui/material'
+
+export const lightThemeOptions: ThemeOptions = {
+  palette: {
+    background: {
+      default: '#F4F4F4',
+      paper: '#FFFFFF',
+    },
+    error: {
+      dark: '#AA0E0E',
+      light: '#F15555',
+      main: '#D81111',
+    },
+    primary: { main: '#463dc6', light: '#b2adfb' },
+    secondary: { main: '#186ecc' },
+    success: {
+      dark: '#347f21',
+      light: '#94dd80',
+      main: '#62bc50',
+    },
+    text: {
+      disabled: '#49454D',
+      primary: '#0d0d47',
+      secondary: '#49454D',
+    },
+    warning: { main: '#ffc805' },
+  },
+}
diff --git a/packages/theme/src/product-theme/xyos/theme.ts b/packages/theme/src/product-theme/xyos/theme.ts
new file mode 100644
index 00000000..f5848209
--- /dev/null
+++ b/packages/theme/src/product-theme/xyos/theme.ts
@@ -0,0 +1,151 @@
+import type { Theme } from '@mui/material'
+import { alpha, createTheme } from '@mui/material'
+
+import { shapeFragment, spacingFragment } from '../../theme-fragments/index.ts'
+import { darkThemeOptions } from './darkThemeOptions.tsx'
+import { lightThemeOptions } from './lightThemeOptions.tsx'
+
+export const XyosTheme = (theme: Theme): Theme => createTheme({
+  colorSchemes: {
+    dark: darkThemeOptions,
+    light: lightThemeOptions,
+  },
+  cssVariables: { colorSchemeSelector: 'class' },
+  components: {
+    MuiAccordion: {
+      styleOverrides: {
+        root: {
+          '&.Mui-expanded': { '&$expanded': { margin: '4px 0' } },
+          'boxShadow': 'none',
+        },
+      },
+    },
+    MuiAccordionSummary: { styleOverrides: { root: { boxShadow: 'none' } } },
+    MuiAppBar: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          WebkitBackdropFilter: 'blur(20px)',
+          backdropFilter: 'blur(20px)',
+          backgroundColor: alpha(theme.palette.background.paper, 0.2),
+          boxShadow: 'none',
+          color: '#16163D',
+          ...theme.applyStyles('dark', { color: '#CBC4CE' }),
+        }),
+      },
+    },
+    MuiCard: {
+      defaultProps: { elevation: 0 },
+      styleOverrides: {
+        root: ({ theme }) => ({
+          WebkitBackdropFilter: 'blur(20px)',
+          backdropFilter: 'blur(20px)',
+          backgroundColor: alpha(theme.palette.background.paper, 0.7),
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'space-between',
+        }),
+      },
+    },
+    MuiCardContent: {
+      styleOverrides: {
+        root: {
+          // This is to get rid of the extra padding at the end of Card Content that misaligns padding when there's only 1 item
+          '&:last-child': { paddingBottom: '16px' },
+        },
+      },
+    },
+    MuiCardHeader: {
+      styleOverrides: {
+        content: {
+          display: 'flex',
+          flexDirection: 'column',
+          overflow: 'hidden',
+        },
+      },
+    },
+    MuiChip: {
+      styleOverrides: {
+        root: {
+          borderRadius: 4,
+          fontWeight: 400,
+        },
+      },
+    },
+    MuiContainer: { styleOverrides: { root: { maxWidth: 'xl' } } },
+    MuiDrawer: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          '& .MuiTypography-root, & .MuiButton-root': { color: '#FFFFFF' },
+          'paperProps': { backgroundColor: '#19193F' },
+          ...theme.applyStyles('dark', { color: theme.palette.secondary.main }),
+        }),
+      },
+    },
+    MuiFilledInput: {
+      defaultProps: { disableUnderline: true },
+      styleOverrides: {
+        root: ({ theme }) => ({
+          '&.Mui-error': { border: `${theme.palette.error.main} 1px solid` },
+          'border': 'transparent 1px solid',
+          'borderRadius': theme.shape.borderRadius,
+        }),
+      },
+    },
+    MuiLink: {
+      defaultProps: { underline: 'none' },
+      styleOverrides: { root: { '&:hover': { filter: 'brightness(75%)' } } },
+    },
+    MuiPaper: { defaultProps: { elevation: 0 } },
+    MuiTableCell: {
+      styleOverrides: {
+        body: {
+          fontFamily: 'monospace',
+          whiteSpace: 'nowrap',
+        },
+        head: {
+          fontWeight: 700,
+          whiteSpace: 'nowrap',
+        },
+      },
+    },
+    MuiTooltip: {
+      styleOverrides: {
+        tooltip: ({ theme }) => ({
+          ...theme.typography.body1,
+          color: 'inherit',
+          maxWidth: 250,
+          border: `1px solid ${theme.palette.background.default}`,
+          backgroundColor: theme.palette.background.paper,
+          padding: theme.spacing(1),
+          boxShadow: 'rgba(17, 12, 46, 0.15) 0px 48px 100px 0px',
+        }),
+      },
+    },
+  },
+  ...spacingFragment,
+  ...shapeFragment,
+  typography: {
+    allVariants: { fontFamily: ['Manrope', 'san-serif'].join(',') },
+    body1: { fontSize: '16px' },
+    button: {
+      fontSize: '1rem',
+      textTransform: 'capitalize',
+    },
+    fontWeightBold: 700,
+    fontWeightLight: 300,
+    fontWeightMedium: 600,
+    fontWeightRegular: 500,
+    h1: { fontSize: '3.2rem' },
+    h2: { fontSize: '2.7rem' },
+    h3: { fontSize: '2.24rem' },
+    h4: { fontSize: '2rem' },
+    h5: { fontSize: '1.5rem' },
+    h6: { fontSize: '1.2rem' },
+    subtitle1: {
+      fontWeight: 300,
+      opacity: '50%',
+      textTransform: 'uppercase',
+    },
+    subtitle2: { opacity: '50%' },
+  },
+})
diff --git a/packages/theme/src/showcase/theme/TypographyShowcase.stories.tsx b/packages/theme/src/showcase/theme/TypographyShowcase.stories.tsx
new file mode 100644
index 00000000..8a813b3f
--- /dev/null
+++ b/packages/theme/src/showcase/theme/TypographyShowcase.stories.tsx
@@ -0,0 +1,28 @@
+import { Box } from '@mui/material'
+import type { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+
+import { TypographyShowcase } from './TypographyShowcase.tsx'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: TypographyShowcase,
+  parameters: { docs: { page: null } },
+  title: 'theme/showcase/TypographyShowcase',
+} as Meta<typeof TypographyShowcase>
+
+const Template: StoryFn<typeof TypographyShowcase> = () => (
+  <Box height="100vh" width="100vw">
+    <TypographyShowcase></TypographyShowcase>
+  </Box>
+)
+
+const Default = Template.bind({})
+Default.args = {
+  error: new Error('Test Error'),
+  title: 'Test Error',
+}
+
+export { Default }
+
+export default StorybookEntry
diff --git a/packages/theme/src/showcase/theme/TypographyShowcase.tsx b/packages/theme/src/showcase/theme/TypographyShowcase.tsx
new file mode 100644
index 00000000..95f29d00
--- /dev/null
+++ b/packages/theme/src/showcase/theme/TypographyShowcase.tsx
@@ -0,0 +1,112 @@
+import {
+  Stack,
+  Typography,
+  useTheme,
+} from '@mui/material'
+import React from 'react'
+
+export const TypographyShowcase: React.FC = () => {
+  const theme = useTheme()
+  return (
+    <Stack flexDirection="column" gap={2}>
+      <Typography variant="h5" gutterBottom>
+        Font Family:
+        <strong>{theme.typography.h1.fontFamily?.toString()}</strong>
+      </Typography>
+      <Stack gap={2} flexDirection="row" flexGrow={1}>
+        <Stack gap={1} flexDirection="column" sx={{ width: '50%' }}>
+          <Stack gap={0.25}>
+            <Typography variant="subtitle2">
+              H1
+            </Typography>
+            <Typography variant="h1">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit.
+            </Typography>
+          </Stack>
+          <Stack gap={0.25}>
+            <Typography variant="subtitle2">
+              H2
+            </Typography>
+            <Typography variant="h2">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit.
+            </Typography>
+          </Stack>
+          <Stack gap={0.25}>
+            <Typography variant="subtitle2">
+              H3
+            </Typography>
+            <Typography variant="h3">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit.
+            </Typography>
+          </Stack>
+          <Stack gap={0.25}>
+            <Typography variant="subtitle2">
+              H4
+            </Typography>
+            <Typography variant="h4">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit.
+            </Typography>
+          </Stack>
+          <Stack gap={0.25}>
+            <Typography variant="subtitle2">
+              H5
+            </Typography>
+            <Typography variant="h5">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit.
+            </Typography>
+          </Stack>
+        </Stack>
+        <Stack gap={1} flexDirection="column" sx={{ width: '50%' }}>
+          <Stack gap={0.25}>
+            <Typography variant="subtitle2">
+              H6
+            </Typography>
+            <Typography variant="h6">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit.
+            </Typography>
+          </Stack>
+          <Stack gap={0.25}>
+            <Typography variant="subtitle2">
+              Body1
+            </Typography>
+            <Typography variant="body1">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur laudantium dolore magni esse nihil quasi ex maiores sunt rem, dicta vitae reprehenderit animi, exercitationem fugit. Consequuntur tenetur adipisci natus eius?
+            </Typography>
+          </Stack>
+          <Stack gap={0.25}>
+            <Typography variant="subtitle2">
+              Body2
+            </Typography>
+            <Typography variant="body2">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur laudantium dolore magni esse nihil quasi ex maiores sunt rem, dicta vitae reprehenderit animi, exercitationem fugit. Consequuntur tenetur adipisci natus eius?
+            </Typography>
+          </Stack>
+          <Stack gap={0.25}>
+            <Typography variant="subtitle2">
+              Subtitle1
+            </Typography>
+            <Typography variant="subtitle1">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur laudantium dolore magni esse nihil quasi ex maiores sunt rem, dicta vitae reprehenderit animi, exercitationem fugit. Consequuntur tenetur adipisci natus eius?
+            </Typography>
+          </Stack>
+          <Stack gap={0.25}>
+            <Typography variant="subtitle2">
+              Subtitle2
+            </Typography>
+            <Typography variant="subtitle2">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur laudantium dolore magni esse nihil quasi ex maiores sunt rem, dicta vitae reprehenderit animi, exercitationem fugit. Consequuntur tenetur adipisci natus eius?
+            </Typography>
+          </Stack>
+          <Stack gap={0.25}>
+            <Typography variant="subtitle2">
+              Caption
+            </Typography>
+            <Typography variant="caption">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur laudantium dolore magni esse nihil quasi ex maiores sunt rem, dicta vitae reprehenderit animi, exercitationem fugit. Consequuntur tenetur adipisci natus eius?
+            </Typography>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Stack>
+  )
+}
diff --git a/packages/theme/src/theme-fragments/components.tsx b/packages/theme/src/theme-fragments/components.tsx
new file mode 100644
index 00000000..1772876d
--- /dev/null
+++ b/packages/theme/src/theme-fragments/components.tsx
@@ -0,0 +1,126 @@
+import type { Theme } from '@mui/material'
+import {
+  alpha, createTheme, lighten,
+} from '@mui/material'
+
+export const componentFragment = (theme: Theme): Theme => createTheme({
+  components: {
+    MuiAlert: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          backgroundColor: alpha(theme.palette.background.paper, 0.3),
+          color: 'inherit',
+        }),
+        standardError: ({ theme }) => ({ backgroundColor: alpha(theme.palette.error.main, 0.3), color: theme.palette.error.light }),
+        standardInfo: ({ theme }) => ({ backgroundColor: alpha(theme.palette.info.main, 0.3), color: theme.palette.info.light }),
+        standardSuccess: ({ theme }) => ({ backgroundColor: alpha(theme.palette.success.main, 0.3), color: theme.palette.success.light }),
+        standardWarning: ({ theme }) => ({ backgroundColor: alpha(theme.palette.warning.main, 0.3), color: theme.palette.warning.light }),
+      },
+    },
+    MuiButton: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          boxShadow: 'none',
+          padding: `${theme.spacing(0.75)} ${theme.spacing(1.5)}`,
+          borderWidth: '2px',
+          borderColor: 'inherit',
+        }),
+      },
+      variants: [
+        {
+          props: { variant: 'outlined' },
+          style: {
+            'WebkitBackdropFilter': 'blur(2px)',
+            'backdropFilter': 'blur(2px)',
+            'border': '2px solid',
+            '&:hover': { border: '2px solid' },
+          },
+        },
+        {
+          props: { variant: 'text' },
+          style: {
+            '&:hover': {
+              textDecoration: 'underline 1.5px #66caf7',
+              textUnderlineOffset: '5px',
+              backgroundColor: 'transparent',
+            },
+          },
+        },
+        {
+          props: { size: 'small' },
+          style: ({ theme }) => ({ padding: `${theme.spacing(0.5)} ${theme.spacing(1)}`, fontSize: '1rem' }),
+        },
+      ],
+    },
+    MuiCard: {
+      defaultProps: { elevation: 0 },
+      styleOverrides: {
+        root: {
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'space-between',
+        },
+      },
+    },
+    MuiCardContent: { styleOverrides: { root: ({ theme }) => ({ '&:last-child': { paddingBottom: theme.spacing(1) } }) } },
+    MuiChip: {
+      styleOverrides: {
+        root: {
+          borderRadius: 4,
+          fontWeight: 400,
+        },
+        colorError: { backgroundColor: alpha('#f6594e', 0.2), color: lighten('#f6594e', 0.2) },
+        colorInfo: { backgroundColor: alpha('#72b4f4', 0.2), color: lighten('#72b4f4', 0.2) },
+        colorPrimary: { backgroundColor: alpha('#5658F3', 0.2), color: lighten('#5658F3', 0.2) },
+        colorSecondary: { backgroundColor: alpha('#66caf7', 0.2), color: lighten('#66caf7', 0.2) },
+        colorSuccess: { backgroundColor: alpha('#7efc81', 0.2), color: lighten('#7efc81', 0.2) },
+        colorWarning: { backgroundColor: alpha('#f7d866', 0.2), color: lighten('#f7d866', 0.2) },
+      },
+    },
+    MuiContainer: { styleOverrides: { root: { maxWidth: 'xl' } }, defaultProps: { maxWidth: 'xl' } },
+    MuiDialog: {
+      styleOverrides: {
+        root: {
+          '& .MuiDialog-paper': {
+            backgroundImage: 'none',
+            paddingLeft: 2,
+            paddingRight: 2,
+          },
+        },
+      },
+    },
+    MuiInputBase: {
+      styleOverrides: {
+        input: {
+          '&:-webkit-autofill': {
+            transitionDelay: '9999s',
+            transitionProperty: 'background-color, color',
+          },
+        },
+      },
+    },
+    MuiFilledInput: {
+      styleOverrides: {
+        input: {
+          '&:-webkit-autofill': {
+            WebkitBoxShadow: 'inherit',
+            WebkitTextFillColor: 'inherit',
+            caretColor: 'inherit',
+          },
+        },
+      },
+    },
+    MuiOutlinedInput: {
+      styleOverrides: {
+        input: {
+          '&:-webkit-autofill': {
+            WebkitBoxShadow: 'inherit',
+            WebkitTextFillColor: 'inherit',
+            caretColor: 'inherit',
+          },
+        },
+      },
+    },
+    MuiLink: { styleOverrides: { root: { textDecoration: 'none' } } },
+  },
+})
diff --git a/packages/theme/src/theme-fragments/index.ts b/packages/theme/src/theme-fragments/index.ts
new file mode 100644
index 00000000..9ccadfe6
--- /dev/null
+++ b/packages/theme/src/theme-fragments/index.ts
@@ -0,0 +1,3 @@
+export * from './components.tsx'
+export * from './shape.tsx'
+export * from './spacing.tsx'
diff --git a/packages/theme/src/theme-fragments/shape.tsx b/packages/theme/src/theme-fragments/shape.tsx
new file mode 100644
index 00000000..87bebb32
--- /dev/null
+++ b/packages/theme/src/theme-fragments/shape.tsx
@@ -0,0 +1,4 @@
+import type { Theme } from '@mui/material'
+import { createTheme } from '@mui/material'
+
+export const shapeFragment = (theme: Theme): Theme => createTheme({ shape: { borderRadius: 4 } })
diff --git a/packages/theme/src/theme-fragments/spacing.tsx b/packages/theme/src/theme-fragments/spacing.tsx
new file mode 100644
index 00000000..de8019e8
--- /dev/null
+++ b/packages/theme/src/theme-fragments/spacing.tsx
@@ -0,0 +1,4 @@
+import type { Theme } from '@mui/material'
+import { createTheme } from '@mui/material'
+
+export const spacingFragment = (theme: Theme): Theme => createTheme({ spacing: 8 })