diff --git a/frontends/main/src/app-pages/DashboardPage/ProfileContent.tsx b/frontends/main/src/app-pages/DashboardPage/ProfileContent.tsx
index bf9361aea8..3cb94251ba 100644
--- a/frontends/main/src/app-pages/DashboardPage/ProfileContent.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/ProfileContent.tsx
@@ -135,7 +135,7 @@ const ProfileContent: React.FC = () => {
                 xs: 3,
               },
             }}
-            gridItemProps={{ xs: 3 }}
+            gridItemProps={{ size: 3 }}
           />
           <CheckboxChoiceField
             name="goals"
diff --git a/frontends/main/src/app-pages/LearningPathListingPage/LearningPathListingPage.tsx b/frontends/main/src/app-pages/LearningPathListingPage/LearningPathListingPage.tsx
index d9d1617756..8a14025871 100644
--- a/frontends/main/src/app-pages/LearningPathListingPage/LearningPathListingPage.tsx
+++ b/frontends/main/src/app-pages/LearningPathListingPage/LearningPathListingPage.tsx
@@ -3,7 +3,7 @@
 import React, { useCallback, useMemo } from "react"
 import {
   SimpleMenu,
-  Grid,
+  Grid2 as Grid,
   LoadingSpinner,
   BannerPage,
   Container,
@@ -20,8 +20,6 @@ import { RiPencilFill, RiMore2Line, RiDeleteBinLine } from "@remixicon/react"
 import type { LearningPathResource } from "api"
 import { useLearningPathsList } from "api/hooks/learningPaths"
 
-import { GridColumn, GridContainer } from "@/components/GridLayout/GridLayout"
-
 import { manageListDialogs } from "@/page-components/ManageListDialogs/ManageListDialogs"
 import * as urls from "@/common/urls"
 import { useUserMe } from "api/hooks/user"
@@ -85,51 +83,40 @@ const LearningPathListingPage: React.FC = () => {
       className="learningpaths-page"
     >
       <Container maxWidth="md" style={{ paddingBottom: 100 }}>
-        <GridContainer>
-          <GridColumn variant="single-full">
-            <ListHeaderGrid container justifyContent="space-between">
-              <Grid item>
-                <Typography variant="h3" component="h1">
-                  Learning Paths
-                </Typography>
-              </Grid>
-              <Grid
-                item
-                justifyContent="flex-end"
-                alignItems="center"
-                display="flex"
-              >
-                {canEdit ? (
-                  <Button variant="primary" onClick={handleCreate}>
-                    Create new list
-                  </Button>
-                ) : null}
-              </Grid>
-            </ListHeaderGrid>
-            <section>
-              <LoadingSpinner loading={listingQuery.isLoading} />
-              {listingQuery.data && (
-                <PlainList itemSpacing={3}>
-                  {listingQuery.data.results?.map((resource) => {
-                    return (
-                      <li key={resource.id}>
-                        <LearningResourceListCard
-                          resource={resource}
-                          href={urls.learningPathsView(resource.id)}
-                          editMenu={
-                            canEdit ? (
-                              <EditListMenu resource={resource} />
-                            ) : null
-                          }
-                        />
-                      </li>
-                    )
-                  })}
-                </PlainList>
-              )}
-            </section>
-          </GridColumn>
-        </GridContainer>
+        <ListHeaderGrid container justifyContent="space-between">
+          <Grid>
+            <Typography variant="h3" component="h1">
+              Learning Paths
+            </Typography>
+          </Grid>
+          <Grid justifyContent="flex-end" alignItems="center" display="flex">
+            {canEdit ? (
+              <Button variant="primary" onClick={handleCreate}>
+                Create new list
+              </Button>
+            ) : null}
+          </Grid>
+        </ListHeaderGrid>
+        <section>
+          <LoadingSpinner loading={listingQuery.isLoading} />
+          {listingQuery.data && (
+            <PlainList itemSpacing={3}>
+              {listingQuery.data.results?.map((resource) => {
+                return (
+                  <li key={resource.id}>
+                    <LearningResourceListCard
+                      resource={resource}
+                      href={urls.learningPathsView(resource.id)}
+                      editMenu={
+                        canEdit ? <EditListMenu resource={resource} /> : null
+                      }
+                    />
+                  </li>
+                )
+              })}
+            </PlainList>
+          )}
+        </section>
       </Container>
     </BannerPage>
   )
diff --git a/frontends/main/src/app-pages/OnboardingPage/OnboardingPage.tsx b/frontends/main/src/app-pages/OnboardingPage/OnboardingPage.tsx
index 5ed32e1fa3..c96cb9318e 100644
--- a/frontends/main/src/app-pages/OnboardingPage/OnboardingPage.tsx
+++ b/frontends/main/src/app-pages/OnboardingPage/OnboardingPage.tsx
@@ -140,7 +140,7 @@ const GridStyle = (
       columns: columns,
       maxWidth: maxWidth,
     },
-    gridItemProps: { xs: 3 },
+    gridItemProps: { size: 3 },
   }
 }
 
diff --git a/frontends/main/src/components/GridLayout/GridLayout.tsx b/frontends/main/src/components/GridLayout/GridLayout.tsx
deleted file mode 100644
index d18de6aa51..0000000000
--- a/frontends/main/src/components/GridLayout/GridLayout.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import React from "react"
-import { Grid } from "ol-components"
-import type { GridProps } from "ol-components"
-
-type GridContainerProps = Omit<
-  GridProps,
-  "item" | "container" | "columnSpacing"
-> & { component?: React.ElementType }
-
-type ColumnVariant =
-  | "single-full"
-  | "main-2"
-  | "sidebar-2"
-  | "main-2-wide-main"
-  | "sidebar-2-wide-main"
-type GridItemProps = Omit<
-  GridProps,
-  "item" | "xs" | "sm" | "md" | "lg" | "xl"
-> & { variant: ColumnVariant; component?: React.ElementType }
-
-const columnVariants: Record<ColumnVariant, GridProps> = {
-  "single-full": {
-    xs: 12,
-    md: 12,
-  },
-  "main-2": {
-    xs: 12,
-    md: 9,
-  },
-  "sidebar-2": {
-    xs: 12,
-    md: 3,
-  },
-  "main-2-wide-main": {
-    xs: 12,
-    md: 8,
-  },
-  "sidebar-2-wide-main": {
-    xs: 12,
-    md: 4,
-  },
-}
-
-/**
- * This is a thin wrapper around MUI's [Grid](https://mui.com/material-ui/react-grid/)
- * component specifying some app-specific props.
- * @deprecated The grid presets in this component predates formal designs for
- * MIT Learn site and should be avoided.
- */
-const GridContainer: React.FC<GridContainerProps> = (props) => (
-  <Grid container columnSpacing={6} {...props} />
-)
-
-/**
- * Represents a grid column and accepts a `variant` prop that determines the
- * column width.
- *
- * This is a thin wrapper around MUI's [Grid](https://mui.com/material-ui/react-grid/)
- * component. This is a `<Grid item />` with breakpoint widths specified by `variant`.
- *
- * @deprecated The grid presets in this component predates formal designs for
- * MIT Learn site and should be avoided.
- */
-const GridColumn: React.FC<GridItemProps> = ({ variant, ...others }) => (
-  <Grid item {...columnVariants[variant]} {...others} />
-)
-
-export { GridContainer, GridColumn }
diff --git a/frontends/main/src/page-components/ItemsListing/ItemsListingComponent.tsx b/frontends/main/src/page-components/ItemsListing/ItemsListingComponent.tsx
index 62fd51a43a..4e8a217bab 100644
--- a/frontends/main/src/page-components/ItemsListing/ItemsListingComponent.tsx
+++ b/frontends/main/src/page-components/ItemsListing/ItemsListingComponent.tsx
@@ -1,9 +1,8 @@
 import React from "react"
-import { Grid, Typography, styled } from "ol-components"
+import { Grid2 as Grid, Typography, styled } from "ol-components"
 import { Button, ButtonLink } from "@mitodl/smoot-design"
 import { RiArrowLeftLine, RiArrowUpDownLine } from "@remixicon/react"
 import { useToggle, pluralize } from "ol-utilities"
-import { GridColumn, GridContainer } from "@/components/GridLayout/GridLayout"
 import ItemsListing from "./ItemsListing"
 import type { LearningResourceListItem } from "./ItemsListing"
 import { MY_LISTS } from "@/common/urls"
@@ -84,83 +83,81 @@ const ItemsListingComponent: React.FC<ItemsListingComponentProps> = ({
   const count = list?.item_count
 
   return (
-    <GridContainer>
-      <GridColumn variant="single-full">
-        <Grid container>
-          <Grid
-            item
-            container
-            alignItems="center"
-            justifyContent="space-between"
-            marginBottom="24px"
-          >
-            <Grid item>
-              <ButtonLink
-                href={MY_LISTS}
-                variant="tertiary"
-                startIcon={<RiArrowLeftLine />}
+    <>
+      <Grid container>
+        <Grid
+          container
+          size={12}
+          alignItems="center"
+          justifyContent="space-between"
+          marginBottom="24px"
+        >
+          <Grid>
+            <ButtonLink
+              href={MY_LISTS}
+              variant="tertiary"
+              startIcon={<RiArrowLeftLine />}
+            >
+              My Lists
+            </ButtonLink>
+          </Grid>
+        </Grid>
+        <Grid
+          container
+          size={12}
+          alignItems="center"
+          justifyContent="space-between"
+          marginBottom="24px"
+        >
+          <HeaderGrid>
+            <HeaderText>{list?.title}</HeaderText>
+            {list?.description && (
+              <DescriptionText>{list.description}</DescriptionText>
+            )}
+          </HeaderGrid>
+          <HeaderGrid alignSelf="flex-start">
+            {canEdit ? (
+              <EditButton variant="primary" onClick={handleEdit}>
+                Edit List
+              </EditButton>
+            ) : null}
+          </HeaderGrid>
+        </Grid>
+        <ReorderGrid
+          container
+          size={12}
+          alignItems="center"
+          justifyContent="space-between"
+        >
+          <Grid>
+            {showSort && !!items.length && (
+              <Button
+                variant="text"
+                disabled={count === 0}
+                startIcon={isSorting ? undefined : <RiArrowUpDownLine />}
+                onClick={toggleIsSorting.toggle}
               >
-                My Lists
-              </ButtonLink>
-            </Grid>
+                {isSorting ? "Done ordering" : "Reorder"}
+              </Button>
+            )}
           </Grid>
-          <Grid
-            item
-            container
-            alignItems="center"
-            justifyContent="space-between"
-            marginBottom="24px"
-          >
-            <HeaderGrid item>
-              <HeaderText>{list?.title}</HeaderText>
-              {list?.description && (
-                <DescriptionText>{list.description}</DescriptionText>
-              )}
-            </HeaderGrid>
-            <HeaderGrid item alignSelf="flex-start">
-              {canEdit ? (
-                <EditButton variant="primary" onClick={handleEdit}>
-                  Edit List
-                </EditButton>
-              ) : null}
-            </HeaderGrid>
+          <Grid>
+            {count !== undefined && count > 0 ? (
+              <CountText>{`${count} ${pluralize("item", count)}`}</CountText>
+            ) : null}
           </Grid>
-          <ReorderGrid
-            item
-            container
-            alignItems="center"
-            justifyContent="space-between"
-          >
-            <Grid item>
-              {showSort && !!items.length && (
-                <Button
-                  variant="text"
-                  disabled={count === 0}
-                  startIcon={isSorting ? undefined : <RiArrowUpDownLine />}
-                  onClick={toggleIsSorting.toggle}
-                >
-                  {isSorting ? "Done ordering" : "Reorder"}
-                </Button>
-              )}
-            </Grid>
-            <Grid item>
-              {count !== undefined && count > 0 ? (
-                <CountText>{`${count} ${pluralize("item", count)}`}</CountText>
-              ) : null}
-            </Grid>
-          </ReorderGrid>
-        </Grid>
-        <ItemsListing
-          listType={listType}
-          items={items}
-          isLoading={isLoading}
-          isRefetching={isFetching}
-          sortable={isSorting}
-          emptyMessage="There are no items in this list yet."
-          condensed={condensed}
-        />
-      </GridColumn>
-    </GridContainer>
+        </ReorderGrid>
+      </Grid>
+      <ItemsListing
+        listType={listType}
+        items={items}
+        isLoading={isLoading}
+        isRefetching={isFetching}
+        sortable={isSorting}
+        emptyMessage="There are no items in this list yet."
+        condensed={condensed}
+      />
+    </>
   )
 }
 
diff --git a/frontends/ol-components/src/components/ChoiceBox/ChoiceBox.tsx b/frontends/ol-components/src/components/ChoiceBox/ChoiceBox.tsx
index 4fe50f8e3f..77f738bd03 100644
--- a/frontends/ol-components/src/components/ChoiceBox/ChoiceBox.tsx
+++ b/frontends/ol-components/src/components/ChoiceBox/ChoiceBox.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import styled from "@emotion/styled"
-import { type GridProps } from "@mui/material/Grid"
+import { type Grid2Props } from "@mui/material/Grid2"
 import { Checkbox } from "@mitodl/smoot-design"
 import { Radio } from "../Radio/Radio"
 
@@ -110,7 +110,7 @@ interface ChoiceBoxChoice {
   description?: string
 }
 
-type FieldGridProps = Omit<GridProps, "container" | "item">
+type FieldGridProps = Omit<Grid2Props, "container">
 
 interface ChoiceBoxGridProps {
   gridProps?: FieldGridProps
diff --git a/frontends/ol-components/src/components/ChoiceBox/ChoiceBoxField.tsx b/frontends/ol-components/src/components/ChoiceBox/ChoiceBoxField.tsx
index eede76afae..3bb74143e5 100644
--- a/frontends/ol-components/src/components/ChoiceBox/ChoiceBoxField.tsx
+++ b/frontends/ol-components/src/components/ChoiceBox/ChoiceBoxField.tsx
@@ -3,7 +3,7 @@ import styled from "@emotion/styled"
 import FormControl from "@mui/material/FormControl"
 import FormGroup from "@mui/material/FormGroup"
 import FormLabel from "@mui/material/FormLabel"
-import Grid, { type GridProps } from "@mui/material/Grid"
+import Grid, { type Grid2Props } from "@mui/material/Grid2"
 import { theme } from "../ThemeProvider/ThemeProvider"
 import { ChoiceBox } from "./ChoiceBox"
 import type {
@@ -44,7 +44,7 @@ const ChoiceBoxField: React.FC<ChoiceBoxFieldProps> = ({
   gridProps,
   gridItemProps,
 }: ChoiceBoxFieldProps) => {
-  const fieldGridProps: GridProps = {
+  const fieldGridProps: Grid2Props = {
     spacing: "12px",
     justifyContent: "center",
     columns: {
@@ -65,7 +65,7 @@ const ChoiceBoxField: React.FC<ChoiceBoxFieldProps> = ({
       <FormGroup>
         <Grid container {...fieldGridProps}>
           {choices.map((choice, index) => (
-            <Grid item {...gridItemProps} key={index}>
+            <Grid {...gridItemProps} key={index}>
               <ChoiceBox
                 type={type}
                 name={name}
diff --git a/frontends/ol-components/src/components/ChoiceBox/ChoiceBoxFieldCheckbox.stories.tsx b/frontends/ol-components/src/components/ChoiceBox/ChoiceBoxFieldCheckbox.stories.tsx
index 42305d9621..a2e3a9bcb7 100644
--- a/frontends/ol-components/src/components/ChoiceBox/ChoiceBoxFieldCheckbox.stories.tsx
+++ b/frontends/ol-components/src/components/ChoiceBox/ChoiceBoxFieldCheckbox.stories.tsx
@@ -45,7 +45,7 @@ const StateWrapper = (props: CheckboxChoiceBoxFieldProps) => {
         },
       }}
       gridItemProps={{
-        xs: 4,
+        size: 4,
       }}
     />
   )
diff --git a/frontends/ol-components/src/components/ChoiceBox/ChoiceBoxFieldRadio.stories.tsx b/frontends/ol-components/src/components/ChoiceBox/ChoiceBoxFieldRadio.stories.tsx
index 400b22fd61..896ea85166 100644
--- a/frontends/ol-components/src/components/ChoiceBox/ChoiceBoxFieldRadio.stories.tsx
+++ b/frontends/ol-components/src/components/ChoiceBox/ChoiceBoxFieldRadio.stories.tsx
@@ -37,7 +37,7 @@ const StateWrapper = (props: RadioChoiceBoxFieldProps) => {
         },
       }}
       gridItemProps={{
-        xs: 4,
+        size: 4,
       }}
     />
   )
diff --git a/frontends/ol-components/src/components/Logo/Logo.stories.tsx b/frontends/ol-components/src/components/Logo/Logo.stories.tsx
index 7a1c257f69..8c9156f9a2 100644
--- a/frontends/ol-components/src/components/Logo/Logo.stories.tsx
+++ b/frontends/ol-components/src/components/Logo/Logo.stories.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import type { Meta, StoryObj } from "@storybook/nextjs"
 import { PlatformLogo, PLATFORM_LOGOS } from "./Logo"
-import Grid from "@mui/material/Grid"
+import Grid from "@mui/material/Grid2"
 import styled from "@emotion/styled"
 import { PlatformEnum } from "api"
 
@@ -22,20 +22,18 @@ const meta: Meta<StoryProps> = {
   render: ({ showIconBackground, iconHeight }) => {
     return (
       <Grid container rowSpacing="12px">
-        <Grid item xs={12}>
+        <Grid size={12}>
           <strong>Note</strong>: the <code>showIconBackground</code> and{" "}
           <code>iconHeight</code>
           args are only for this story. Not applicable to the actual component.
         </Grid>
         {Object.entries(PLATFORM_LOGOS).map(([platformCode, platform]) => (
           <React.Fragment key={platformCode}>
-            <Grid item xs={2}>
+            <Grid size={2}>
               <code>{platformCode}</code>
             </Grid>
-            <Grid item xs={2}>
-              {platform.name}
-            </Grid>
-            <Grid item xs={8}>
+            <Grid size={2}>{platform.name}</Grid>
+            <Grid size={8}>
               <SizedPlatformLogo
                 height={27}
                 iconHeight={iconHeight}
diff --git a/frontends/ol-components/src/components/SelectField/SelectField.stories.tsx b/frontends/ol-components/src/components/SelectField/SelectField.stories.tsx
index c54e7f8fc4..a0c8027407 100644
--- a/frontends/ol-components/src/components/SelectField/SelectField.stories.tsx
+++ b/frontends/ol-components/src/components/SelectField/SelectField.stories.tsx
@@ -6,7 +6,7 @@ import type { SelectFieldProps } from "./SelectField"
 import { MenuItem } from "../MenuItem/MenuItem"
 
 import Stack from "@mui/material/Stack"
-import Grid from "@mui/material/Grid"
+import Grid from "@mui/material/Grid2"
 import { fn } from "storybook/test"
 
 const SIZES = ["small", "medium", "large"] satisfies SelectFieldProps["size"][]
@@ -88,10 +88,8 @@ export const States: Story = {
       <Grid container spacing={2} alignItems="top" maxWidth="400px">
         {STATES.map(({ label, extraProps }) => (
           <>
-            <Grid item xs={4}>
-              {label}
-            </Grid>
-            <Grid item xs={8}>
+            <Grid size={4}>{label}</Grid>
+            <Grid size={8}>
               <SelectField {...props} {...extraProps}>
                 {ITEMS.map((item) => (
                   <MenuItem
diff --git a/frontends/ol-components/src/index.ts b/frontends/ol-components/src/index.ts
index ea9e7d3825..62ed4dad15 100644
--- a/frontends/ol-components/src/index.ts
+++ b/frontends/ol-components/src/index.ts
@@ -53,8 +53,6 @@ export type { DividerProps } from "@mui/material/Divider"
 export { default as Drawer } from "@mui/material/Drawer"
 export type { DrawerProps } from "@mui/material/Drawer"
 
-export { default as Grid } from "@mui/material/Grid"
-export type { GridProps } from "@mui/material/Grid"
 export { default as Grid2 } from "@mui/material/Grid2"
 export type { Grid2Props } from "@mui/material/Grid2"