diff --git a/packages/react-native-ficus-ui/src/components/center/index.tsx b/packages/react-native-ficus-ui/src/components/center/index.tsx
index d5089a6a..ed05e41d 100644
--- a/packages/react-native-ficus-ui/src/components/center/index.tsx
+++ b/packages/react-native-ficus-ui/src/components/center/index.tsx
@@ -1,11 +1,13 @@
-import { NativeFicusProps, ficus } from '../system';
+import { ThemingProps, omitThemingProps } from '../../style-system';
+import { NativeFicusProps, ficus, useStyleConfig } from '../system';
 
-export interface CenterProps extends NativeFicusProps<'View'> {}
+export interface CenterProps
+  extends NativeFicusProps<'View'>,
+    ThemingProps<'View'> {}
 
-export const Center = ficus('View', {
-  baseStyle: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
+export const Center = function Center(props: CenterProps) {
+  const styles = useStyleConfig('Center', props);
+  const { ...rest } = omitThemingProps(props);
+
+  return <ficus.View __styles={styles} {...rest} />;
+};
diff --git a/packages/react-native-ficus-ui/src/theme/components/center.ts b/packages/react-native-ficus-ui/src/theme/components/center.ts
new file mode 100644
index 00000000..a5e6780b
--- /dev/null
+++ b/packages/react-native-ficus-ui/src/theme/components/center.ts
@@ -0,0 +1,13 @@
+import { TextProps } from '../../components';
+import { defineStyle, defineStyleConfig } from '../../style-system';
+
+const baseStyle = defineStyle<TextProps>({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+export const centerTheme = defineStyleConfig({
+  baseStyle,
+  defaultProps: {},
+});
diff --git a/packages/react-native-ficus-ui/src/theme/components/index.ts b/packages/react-native-ficus-ui/src/theme/components/index.ts
index 4f8f073c..3e1fcdd6 100644
--- a/packages/react-native-ficus-ui/src/theme/components/index.ts
+++ b/packages/react-native-ficus-ui/src/theme/components/index.ts
@@ -1,6 +1,7 @@
 import { avatarTheme } from './avatar';
 import { badgeTheme } from './badge';
 import { buttonTheme } from './button';
+import { centerTheme } from './center';
 import { checkboxTheme } from './checkbox';
 import { checkboxGroupTheme } from './checkbox-group';
 import { iconButtonTheme } from './icon-button';
@@ -20,6 +21,7 @@ export const components = {
   Badge: badgeTheme,
   Button: buttonTheme,
   Checkbox: checkboxTheme,
+  Center: centerTheme,
   CheckboxGroup: checkboxGroupTheme,
   Radio: radioTheme,
   RadioGroup: radioGroupTheme,