diff --git a/src/App.module.css b/src/App.module.css
index f174d99..3811530 100644
--- a/src/App.module.css
+++ b/src/App.module.css
@@ -3,3 +3,23 @@
   grid-template-rows: auto 1fr auto;
   min-height: 100%;
 }
+
+.Layout {
+  display: grid;
+  gap: 20px;
+  margin: 0 auto;
+  max-width: 960px;
+}
+
+.Card {
+  margin: 0 auto;
+  padding: 10px;
+  border-radius: var(--radius);
+  color: var(--color-text);
+  background-color: var(--shade-light-20);
+}
+
+.invert {
+  color: var(--color-bg);
+  background-color: var(--color-text);
+}
diff --git a/src/App.tsx b/src/App.tsx
index 5fbdae4..1519a6d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,3 +1,5 @@
+import {clx} from 'beeftools';
+
 import {BreakpointProvider} from '@src/providers/BreakpointProvider.tsx';
 import {ThemeProvider} from '@src/providers/ThemeProvider.tsx';
 
@@ -5,6 +7,9 @@ import {Footer} from '@src/components/sections/Footer/Footer.tsx';
 import {Header} from '@src/components/sections/Header/Header.tsx';
 import {Main} from '@src/components/sections/Main/Main.tsx';
 
+import {AccordionTest} from '@src/components/ui/Accordion/Accordion.test.tsx';
+import {ButtonTest} from '@src/components/ui/Button/Button.test.tsx';
+
 import styles from './App.module.css';
 
 function AppContent() {
@@ -12,7 +17,27 @@ function AppContent() {
   return (
     <div className={styles.App}>
       <Header />
-      <Main />
+
+      <Main>
+        <div className={styles.Layout}>
+          <div
+            className={clx(styles.Card, {
+              [styles.invert]: false,
+            })}
+          >
+            <AccordionTest />
+          </div>
+
+          <div
+            className={clx(styles.Card, {
+              [styles.invert]: false,
+            })}
+          >
+            <ButtonTest />
+          </div>
+        </div>
+      </Main>
+
       <Footer />
     </div>
   );