diff --git a/src/containers/drawers/cart-drawer/components/CartDrawerList.tsx b/src/containers/drawers/cart-drawer/components/CartDrawerList.tsx
index 0f441bbf..95323a21 100644
--- a/src/containers/drawers/cart-drawer/components/CartDrawerList.tsx
+++ b/src/containers/drawers/cart-drawer/components/CartDrawerList.tsx
@@ -1,9 +1,9 @@
 import { Fragment } from "react/jsx-runtime";
 
+import { styled } from "@mui/material";
 import Divider from "@mui/material/Divider";
 import List from "@mui/material/List";
 import Typography from "@mui/material/Typography";
-import styled from "@mui/material/styles/styled";
 
 import CartDrawerItem from "@/containers/drawers/cart-drawer/components/CartDrawerItem";
 import { useCartStore } from "@/store/cart/cartStore";
diff --git a/src/layouts/root-layout/RootLayout.styles.tsx b/src/layouts/root-layout/RootLayout.styles.tsx
new file mode 100644
index 00000000..b3f87401
--- /dev/null
+++ b/src/layouts/root-layout/RootLayout.styles.tsx
@@ -0,0 +1,12 @@
+import { styled } from "@mui/material";
+import Box from "@mui/material/Box";
+
+import theme from "@/theme/theme";
+
+export const SidebarOmitWrapper = styled(Box)({
+  margin: "auto",
+  maxWidth: "1900px",
+  [theme.breakpoints.up("md")]: {
+    paddingLeft: "78px",
+  },
+});
diff --git a/src/layouts/root-layout/RootLayout.tsx b/src/layouts/root-layout/RootLayout.tsx
index a15e35fd..46341bcb 100644
--- a/src/layouts/root-layout/RootLayout.tsx
+++ b/src/layouts/root-layout/RootLayout.tsx
@@ -1,21 +1,11 @@
 import { ScrollRestoration } from "react-router-dom";
 
-import { styled } from "@mui/material";
-import Box from "@mui/material/Box";
-
 import AppSuspenseWithOutlet from "@/components/app-suspense-with-outlet/AppSuspenseWithOutlet";
 import Footer from "@/layouts/footer/Footer";
 import Navbar from "@/layouts/navbar/Navbar";
+import { SidebarOmitWrapper } from "@/layouts/root-layout/RootLayout.styles";
 import Sidebar from "@/layouts/sidebar/Sidebar";
 
-const SidebarOmitWrapper = styled(Box)(({ theme }) => ({
-  margin: "auto",
-  maxWidth: "1900px",
-  [theme.breakpoints.up("md")]: {
-    paddingLeft: "78px",
-  },
-}));
-
 export default function RootLayout() {
   return (
     <>
diff --git a/tests/unit/src/layouts/root-layout/RootLayout.spec.tsx b/tests/unit/src/layouts/root-layout/RootLayout.spec.tsx
new file mode 100644
index 00000000..f6e39676
--- /dev/null
+++ b/tests/unit/src/layouts/root-layout/RootLayout.spec.tsx
@@ -0,0 +1,35 @@
+import { screen } from "@testing-library/react";
+
+import renderWithProviders from "@tests/unit/utils/renderWithProviders";
+
+import RootLayout from "@/layouts/root-layout/RootLayout";
+
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  ScrollRestoration: () => <div data-testid="scroll-restoration" />,
+}));
+
+jest.mock("@/layouts/footer/Footer", () => ({
+  __esModule: true,
+  default: () => <div data-testid="footer" />,
+}));
+
+jest.mock(
+  "@/components/app-suspense-with-outlet/AppSuspenseWithOutlet",
+  () => ({
+    __esModule: true,
+    default: () => <div data-testid="children" />,
+  })
+);
+
+describe("<RootLayout />", () => {
+  it("should render correctly", () => {
+    renderWithProviders(<RootLayout />);
+
+    const footer = screen.getByTestId("footer");
+    expect(footer).toBeInTheDocument();
+
+    const children = screen.getByTestId("children");
+    expect(children).toBeInTheDocument();
+  });
+});