diff --git a/UNRELEASED.md b/UNRELEASED.md
index 6064d129565..d057c0b78c2 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -26,6 +26,7 @@
 
 ### Code quality
 
+- Converted `Layout` into a functional component ([#2538](https://github.com/Shopify/polaris-react/pull/2538))
 - Converted `FormLayout` into a functional component ([#2539](https://github.com/Shopify/polaris-react/pull/2539))
 - Converted `BulkActionButton` into a functional component ([#2542](https://github.com/Shopify/polaris-react/pull/2542))
 - Converted `Focus` into a functional component ([#2540](https://github.com/Shopify/polaris-react/pull/2540))
diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
index f86eaad6c93..c8d8381b821 100644
--- a/src/components/Layout/Layout.tsx
+++ b/src/components/Layout/Layout.tsx
@@ -9,15 +9,14 @@ export interface LayoutProps {
   children?: React.ReactNode;
 }
 
-export class Layout extends React.Component<LayoutProps, never> {
-  static AnnotatedSection = AnnotatedSection;
-  static Section = Section;
+export const Layout: React.FunctionComponent<LayoutProps> & {
+  AnnotatedSection: typeof AnnotatedSection;
+  Section: typeof Section;
+} = function Layout({sectioned, children}: LayoutProps) {
+  const content = sectioned ? <Section>{children}</Section> : children;
 
-  render() {
-    const {children, sectioned} = this.props;
+  return <div className={styles.Layout}>{content}</div>;
+};
 
-    const content = sectioned ? <Section>{children}</Section> : children;
-
-    return <div className={styles.Layout}>{content}</div>;
-  }
-}
+Layout.AnnotatedSection = AnnotatedSection;
+Layout.Section = Section;