✨ Basic layout

src/components/CapAppBar.tsx

@@ -0,0 +1,35 @@
+import { AppBar, Box, IconButton, Toolbar, Typography } from "@mui/material";
+import MenuIcon from "@mui/icons-material/Menu";
+import AccountCircle from "@mui/icons-material/AccountCircle";
+
+export function CapAppBar() {
+  return (
+    <Box sx={{ flexGrow: 1 }}>
+      <AppBar position="static" elevation={0} color="transparent">
+        <Toolbar>
+          <IconButton
+            size="large"
+            edge="start"
+            color="inherit"
+            aria-label="menu"
+            sx={{ mr: 2 }}
+          >
+            <MenuIcon />
+          </IconButton>
+          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+            Capital
+          </Typography>
+          <IconButton
+            size="large"
+            aria-label="account of current user"
+            aria-controls="primary-search-account-menu"
+            aria-haspopup="true"
+            color="inherit"
+          >
+            <AccountCircle />
+          </IconButton>
+        </Toolbar>
+      </AppBar>
+    </Box>
+  );
+}

src/pages/_app.tsx

@@ -1,6 +1,8 @@
 import "@/styles/globals.css";
 import type { AppProps } from "next/app";
+import { createTheme, CssBaseline, ThemeProvider } from "@mui/material";
 import { Roboto } from "next/font/google";
+import { CapAppBar } from "@/components/CapAppBar";
 
 const fontRoboto = Roboto({
   subsets: ["latin"],
@@ -8,6 +10,18 @@ const fontRoboto = Roboto({
   display: "swap",
 });
 
+const siteTheme = createTheme({
+  palette: {
+    mode: "light",
+    primary: {
+      main: "#3949ab",
+    },
+    secondary: {
+      main: "#1e88e5",
+    },
+  },
+});
+
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <>
@@ -16,7 +30,13 @@ export default function App({ Component, pageProps }: AppProps) {
           font-family: ${fontRoboto.style.fontFamily};
         }
       `}</style>
+
+      <ThemeProvider theme={siteTheme}>
+        <CssBaseline />
+
+        <CapAppBar />
         <Component {...pageProps} />
+      </ThemeProvider>
     </>
   );
 }

src/pages/api/hello.ts

@@ -1,13 +0,0 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from "next";
-
-type Data = {
-  name: string;
-};
-
-export default function handler(
-  req: NextApiRequest,
-  res: NextApiResponse<Data>,
-) {
-  res.status(200).json({ name: "John Doe" });
-}

src/pages/index.tsx

@@ -1,9 +1,14 @@
-import { Button } from "@mui/material";
+import { Container, Typography } from "@mui/material";
 
 export default function Home() {
   return (
-    <div>
+    <main>
-      <Button>Say woah!</Button>
+      <Container sx={{ mt: 12 }}>
-    </div>
+        <Typography variant="h3" component="h1">
+          Welcome to <br />
+          the Solsynth Capital.
+        </Typography>
+      </Container>
+    </main>
   );
 }