diff --git a/example/src/LayoutExample.js b/example/src/LayoutExample.js
deleted file mode 100644
index e03b63b91..000000000
--- a/example/src/LayoutExample.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import * as React from "react";
-import { View } from "react-native";
-import {
-  StarRating,
-  Surface,
-  ScreenContainer,
-  Divider,
-  Center,
-  Circle,
-  withTheme,
-} from "@draftbit/ui";
-import Section from "./Section";
-
-function Box({ width = 50, height = 50 }) {
-  return (
-    <View style={{ width, height, backgroundColor: "#5a4fff", margin: 2 }} />
-  );
-}
-
-function LayoutExample({ theme }) {
-  return (
-    <ScreenContainer hasSafeArea={false} scrollable={false}>
-      <Section title="StarRating">
-        <StarRating rating={3.5} />
-        <StarRating />
-        <StarRating
-          starSize={24}
-          maxStars={10}
-          style={{ backgroundColor: "orange", margin: 12 }}
-        />
-      </Section>
-      <Divider />
-      <Section title="Center">
-        <Center>
-          <Box />
-          <Box />
-          <Box />
-        </Center>
-      </Section>
-      <Divider />
-      <Divider />
-      <Section title="Circle">
-        <Circle bgColor="black" />
-      </Section>
-    </ScreenContainer>
-  );
-}
-
-export default withTheme(LayoutExample);
diff --git a/example/src/LayoutExample.tsx b/example/src/LayoutExample.tsx
new file mode 100644
index 000000000..b96d1576a
--- /dev/null
+++ b/example/src/LayoutExample.tsx
@@ -0,0 +1,79 @@
+import * as React from "react";
+import { Text } from "react-native";
+import {
+  AspectRatio,
+  HStack,
+  VStack,
+  ZStack,
+  Center,
+  Circle,
+  Square,
+} from "@draftbit/ui";
+import Section, { Container } from "./Section";
+
+const LayoutExample = () => {
+  return (
+    <Container style={{}}>
+      <Section title="Center" style={{}}>
+        <Center
+          style={{
+            width: 200,
+            height: 50,
+            borderColor: "red",
+            borderWidth: 1,
+          }}
+        >
+          <Text>Centered Text</Text>
+        </Center>
+      </Section>
+      <Section title="Circle" style={{}}>
+        <Circle
+          style={{
+            width: 100,
+            borderColor: "red",
+            borderWidth: 1,
+          }}
+        />
+      </Section>
+      <Section title="Square" style={{}}>
+        <Square
+          style={{
+            width: 100,
+            borderColor: "red",
+            borderWidth: 1,
+          }}
+        />
+      </Section>
+      <Section title="Aspect Ratio" style={{}}>
+        <AspectRatio
+          style={{
+            width: 200,
+            borderColor: "red",
+            borderWidth: 1,
+          }}
+          aspectRatio={16 / 9}
+        />
+      </Section>
+      <Section title="HStack" style={{}}>
+        <HStack>
+          <Text>HStack 1</Text>
+          <Text>HStack 2</Text>
+        </HStack>
+      </Section>
+      <Section title="VStack" style={{}}>
+        <VStack>
+          <Text>VStack 1</Text>
+          <Text>VStack 2</Text>
+        </VStack>
+      </Section>
+      <Section title="ZStack" style={{}}>
+        <ZStack>
+          <Text>ZStack 1</Text>
+          <Text>ZStack 2</Text>
+        </ZStack>
+      </Section>
+    </Container>
+  );
+};
+
+export default LayoutExample;
diff --git a/packages/core/src/components/Layout/AspectRatio.tsx b/packages/core/src/components/Layout/AspectRatio.tsx
new file mode 100644
index 000000000..1769dee91
--- /dev/null
+++ b/packages/core/src/components/Layout/AspectRatio.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import { View, ViewProps } from "react-native";
+
+interface AspectRatioProps extends ViewProps {
+  aspectRatio?: number;
+}
+
+const AspectRatio: React.FC<AspectRatioProps> = ({
+  aspectRatio = 1,
+  style,
+  ...rest
+}) => {
+  return <View {...rest} style={[{ aspectRatio }, style]} />;
+};
+
+export default AspectRatio;
diff --git a/packages/core/src/components/Layout/Center.tsx b/packages/core/src/components/Layout/Center.tsx
new file mode 100644
index 000000000..9d3a86cd1
--- /dev/null
+++ b/packages/core/src/components/Layout/Center.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { View, ViewProps, StyleSheet } from "react-native";
+
+const Center: React.FC<ViewProps> = ({ style, ...rest }) => {
+  return <View {...rest} style={[styles.center, style]} />;
+};
+
+const styles = StyleSheet.create({
+  center: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});
+
+export default Center;
diff --git a/packages/core/src/components/Layout/Circle.tsx b/packages/core/src/components/Layout/Circle.tsx
new file mode 100644
index 000000000..8b930be72
--- /dev/null
+++ b/packages/core/src/components/Layout/Circle.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { ViewProps, StyleSheet } from "react-native";
+import Square from "./Square";
+
+interface CircleProps extends ViewProps {
+  size?: number;
+}
+
+const Circle: React.FC<CircleProps> = ({ size, style, ...rest }) => {
+  return <Square {...rest} size={size} style={[style, styles.circle]} />;
+};
+
+const styles = StyleSheet.create({
+  circle: {
+    borderRadius: 1000, // Border radius maxes out as a circle, use an overly large number to ensure circle in all cases
+  },
+});
+
+export default Circle;
diff --git a/packages/core/src/components/Layout/HStack.tsx b/packages/core/src/components/Layout/HStack.tsx
new file mode 100644
index 000000000..6c7ebdad6
--- /dev/null
+++ b/packages/core/src/components/Layout/HStack.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import { View, ViewProps, StyleSheet } from "react-native";
+
+const HStack: React.FC<ViewProps> = ({ style, ...rest }) => {
+  return <View {...rest} style={[styles.hStack, style]} />;
+};
+
+const styles = StyleSheet.create({
+  hStack: {
+    flexDirection: "row",
+  },
+});
+
+export default HStack;
diff --git a/packages/core/src/components/Layout/Square.tsx b/packages/core/src/components/Layout/Square.tsx
new file mode 100644
index 000000000..493d7f18b
--- /dev/null
+++ b/packages/core/src/components/Layout/Square.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { ViewProps } from "react-native";
+import Center from "./Center";
+
+interface SquareProps extends ViewProps {
+  size?: number;
+}
+
+const Square: React.FC<SquareProps> = ({ size, style, onLayout, ...rest }) => {
+  const [calculatedSize, setCalculatedSize] = React.useState(0);
+
+  return (
+    <Center
+      onLayout={(e) => {
+        const layout = e.nativeEvent.layout;
+        setCalculatedSize(Math.max(layout.width, layout.height));
+        onLayout?.(e);
+      }}
+      {...rest}
+      style={[
+        style,
+        size != undefined ? { width: size, height: size } : {},
+        calculatedSize > 0
+          ? {
+              width: calculatedSize,
+              height: calculatedSize,
+            }
+          : {},
+      ]}
+    />
+  );
+};
+
+export default Square;
diff --git a/packages/core/src/components/Layout/VStack.tsx b/packages/core/src/components/Layout/VStack.tsx
new file mode 100644
index 000000000..035112cf2
--- /dev/null
+++ b/packages/core/src/components/Layout/VStack.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import { View, ViewProps, StyleSheet } from "react-native";
+
+const VStack: React.FC<ViewProps> = ({ style, ...rest }) => {
+  return <View {...rest} style={[styles.vStack, style]} />;
+};
+
+const styles = StyleSheet.create({
+  vStack: {
+    flexDirection: "column",
+  },
+});
+
+export default VStack;
diff --git a/packages/core/src/components/Layout/ZStack.tsx b/packages/core/src/components/Layout/ZStack.tsx
new file mode 100644
index 000000000..086acafdb
--- /dev/null
+++ b/packages/core/src/components/Layout/ZStack.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { View, ViewProps } from "react-native";
+
+interface ZStackProps extends ViewProps {
+  reversed?: boolean;
+}
+
+const ZStack: React.FC<ZStackProps> = ({ reversed, children, ...rest }) => {
+  const absoluteChildren = React.useMemo(() => {
+    let childrenArray = React.Children.toArray(
+      children
+    ) as React.ReactElement[];
+
+    if (reversed) {
+      childrenArray = childrenArray.reverse();
+    }
+
+    return childrenArray.map((child, index) => {
+      const props = child.props || {};
+      return React.cloneElement(
+        child,
+        {
+          ...props,
+          style: { position: "absolute", zIndex: index + 1, ...props.style },
+        },
+        props.children
+      );
+    });
+  }, [children, reversed]);
+
+  return <View {...rest}>{absoluteChildren}</View>;
+};
+
+export default ZStack;
diff --git a/packages/core/src/components/Layout/index.tsx b/packages/core/src/components/Layout/index.tsx
new file mode 100644
index 000000000..c771d3611
--- /dev/null
+++ b/packages/core/src/components/Layout/index.tsx
@@ -0,0 +1,7 @@
+export { default as AspectRatio } from "./AspectRatio";
+export { default as Circle } from "./Circle";
+export { default as Center } from "./Center";
+export { default as HStack } from "./HStack";
+export { default as VStack } from "./VStack";
+export { default as ZStack } from "./ZStack";
+export { default as Square } from "./Square";
diff --git a/packages/core/src/components/Layout.tsx b/packages/core/src/deprecated-components/Layout.tsx
similarity index 95%
rename from packages/core/src/components/Layout.tsx
rename to packages/core/src/deprecated-components/Layout.tsx
index fed4b5790..97cbb2223 100644
--- a/packages/core/src/components/Layout.tsx
+++ b/packages/core/src/deprecated-components/Layout.tsx
@@ -3,6 +3,9 @@ import { View, StyleProp, ViewStyle } from "react-native";
 // @ts-ignore
 import type { ViewStyleProp } from "react-native/Libraries/StyleSheet/StyleSheet";
 
+/**
+ * @deprecated DEPRECATED
+ */
 export function Center({
   width = 240,
   height = 200,
@@ -36,6 +39,9 @@ export function Center({
   );
 }
 
+/**
+ * @deprecated DEPRECATED
+ */
 export function Circle({
   size = 50,
   bgColor,
@@ -65,6 +71,9 @@ export function Circle({
   );
 }
 
+/**
+ * @deprecated DEPRECATED
+ */
 export function Square({
   size = 50,
   bgColor,
@@ -122,6 +131,9 @@ export function Row({
   );
 }
 
+/**
+ * @deprecated DEPRECATED
+ */
 export function Spacer({
   top = 8,
   right = 8,
diff --git a/packages/core/src/index.tsx b/packages/core/src/index.tsx
index 5386d77bd..8ee669220 100644
--- a/packages/core/src/index.tsx
+++ b/packages/core/src/index.tsx
@@ -25,7 +25,6 @@ export {
   ActionSheetCancel,
 } from "./components/ActionSheet";
 export { Swiper, SwiperItem } from "./components/Swiper";
-export { Center, Circle, Square, Spacer } from "./components/Layout";
 export {
   RadioButton,
   RadioButtonGroup,
@@ -64,6 +63,15 @@ export {
   CodeInputCell,
   CodeInputText,
 } from "./components/CodeInput";
+export {
+  AspectRatio,
+  Circle,
+  Center,
+  HStack,
+  VStack,
+  ZStack,
+  Square,
+} from "./components/Layout";
 
 /* Deprecated: Fix or Delete!  */
 export { default as AccordionItem } from "./deprecated-components/AccordionItem";
@@ -77,7 +85,14 @@ export { default as CircleImage } from "./deprecated-components/CircleImage";
 export { default as Container } from "./deprecated-components/Container";
 export { default as FAB } from "./deprecated-components/FAB";
 export { default as FieldSearchBarFull } from "./deprecated-components/FieldSearchBarFull";
-export { Row, Stack } from "./components/Layout";
+export {
+  Center as DeprecatedCenter,
+  Circle as DeprecatedCircle,
+  Square as DeprecatedSquare,
+  Spacer,
+  Row,
+  Stack,
+} from "./deprecated-components/Layout";
 export { default as ToggleButton } from "./deprecated-components/ToggleButton";
 export { default as ProgressBar } from "./deprecated-components/ProgressBar";
 export { default as ProgressCircle } from "./deprecated-components/ProgressCircle";
diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
index 9787f303b..6cdb8f7e9 100644
--- a/packages/ui/src/index.tsx
+++ b/packages/ui/src/index.tsx
@@ -62,6 +62,10 @@ export {
   CodeInput,
   CodeInputCell,
   CodeInputText,
+  AspectRatio,
+  HStack,
+  VStack,
+  ZStack,
 } from "@draftbit/core";
 
 /**