feat: Add Layout wrapper component

pages/_app.tsx

@@ -1,8 +1,13 @@
-import '../styles/globals.css'
-import type { AppProps } from 'next/app'
+import "../styles/globals.css";
+import type { AppProps } from "next/app";
+import Layout from "../ui/layout";
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return (
+    <Layout>
+      <Component {...pageProps} />
+    </Layout>
+  );
 }
 
-export default MyApp
+export default MyApp;

ui/layout/Layout.tsx

@@ -0,0 +1,19 @@
+import { Container, Typography } from '@mui/material'
+import { Box } from '@mui/system'
+import React from 'react'
+
+interface LayoutProps {
+    children: JSX.Element
+}
+const Layout = ({ children }: LayoutProps) => {
+    return (
+        <Container maxWidth="sm">
+            <Box textAlign="center" mt={5}>
+                <Typography variant='h2' fontWeight="bold">Quiz App</Typography>
+                {children}
+            </Box>
+        </Container>
+    )
+}
+
+export default Layout

ui/layout/index.tsx

@@ -0,0 +1 @@
+export { default } from './Layout'