diff --git a/apps/applicant-tracking/src/app/layout.tsx b/apps/applicant-tracking/src/app/layout.tsx
index 5ee9057..a7bdf53 100644
--- a/apps/applicant-tracking/src/app/layout.tsx
+++ b/apps/applicant-tracking/src/app/layout.tsx
@@ -1,3 +1,6 @@
+import Layout from '@/components/Layout';
+import React from 'react';
+
 export const metadata = {
   title: 'Next.js',
   description: 'Generated by Next.js',
@@ -10,7 +13,9 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body style={{ display: 'flex' }}>{children}</body>
+      <body style={{ display: 'flex' }}>
+        <Layout>{children}</Layout>
+      </body>
     </html>
   );
 }
diff --git a/apps/applicant-tracking/src/app/page.tsx b/apps/applicant-tracking/src/app/page.tsx
index 19b4b6a..f8b5cbb 100644
--- a/apps/applicant-tracking/src/app/page.tsx
+++ b/apps/applicant-tracking/src/app/page.tsx
@@ -1,3 +1,21 @@
+'use client';
+
+import useSnackbar from '@/hooks/useSnackbar';
+import { Button } from '@mui/material';
+
 export default function DashboardPage() {
-  return <h1>Dashboard page</h1>;
+  const { openSnackbar } = useSnackbar();
+  return (
+    <>
+      <h1>Dashboard page</h1>
+      <Button
+        variant="contained"
+        onClick={() => {
+          openSnackbar('hello world', 'success');
+        }}
+      >
+        open snackbar
+      </Button>
+    </>
+  );
 }
diff --git a/apps/applicant-tracking/src/components/ATSAppBar/index.tsx b/apps/applicant-tracking/src/components/ATSAppBar/index.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/apps/applicant-tracking/src/components/Layout/index.tsx b/apps/applicant-tracking/src/components/Layout/index.tsx
new file mode 100644
index 0000000..72f70fc
--- /dev/null
+++ b/apps/applicant-tracking/src/components/Layout/index.tsx
@@ -0,0 +1,34 @@
+'use client';
+
+import { SnackbarProvider } from '@/hooks/useSnackbar';
+import { Snackbar, Alert, AlertColor } from '@mui/material';
+
+interface LayoutProps {
+  children: React.ReactNode;
+}
+
+export default function Layout({ children }: LayoutProps) {
+  return (
+    <SnackbarProvider
+      snackbar={(open, onClose, message, severity) => (
+        <Snackbar
+          open={open}
+          message={message}
+          autoHideDuration={6000}
+          onClose={onClose}
+          anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+        >
+          <Alert
+            onClose={onClose}
+            severity={severity as AlertColor}
+            sx={{ width: '100%' }}
+          >
+            {message}
+          </Alert>
+        </Snackbar>
+      )}
+    >
+      {children}
+    </SnackbarProvider>
+  );
+}
diff --git a/apps/applicant-tracking/src/hooks/useSnackbar/SnackbarContext.tsx b/apps/applicant-tracking/src/hooks/useSnackbar/SnackbarContext.tsx
new file mode 100644
index 0000000..d425fae
--- /dev/null
+++ b/apps/applicant-tracking/src/hooks/useSnackbar/SnackbarContext.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { createContext } from 'react';
+
+export type SnackbarContextType = {
+  openSnackbar: (message: string, severity: string) => void;
+  closeSnackbar: () => void;
+};
+
+export const SnackbarContext = createContext<SnackbarContextType | null>(null);
+
+type SnackbarProviderProps = {
+  snackbar: (
+    open: boolean,
+    onClose: () => void,
+    message?: string,
+    severity?: string
+  ) => React.ReactNode;
+  children: React.ReactNode;
+};
+
+const SnackbarProvider = ({ snackbar, children }: SnackbarProviderProps) => {
+  const [open, setOpen] = React.useState(false);
+  const [message, setMessage] = React.useState('');
+  const [severity, setSeverity] = React.useState('');
+
+  const onClose = () => setOpen(false);
+
+  return (
+    <SnackbarContext.Provider
+      value={{
+        openSnackbar: (message, severity) => {
+          setOpen(true);
+          setMessage(message);
+          setSeverity(severity);
+        },
+        closeSnackbar: () => setOpen(false),
+      }}
+    >
+      {children}
+      {snackbar(open, onClose, message, severity)}
+    </SnackbarContext.Provider>
+  );
+};
+
+export default SnackbarProvider;
diff --git a/apps/applicant-tracking/src/hooks/useSnackbar/index.ts b/apps/applicant-tracking/src/hooks/useSnackbar/index.ts
new file mode 100644
index 0000000..7ba9ee7
--- /dev/null
+++ b/apps/applicant-tracking/src/hooks/useSnackbar/index.ts
@@ -0,0 +1,16 @@
+'use client';
+import { useContext } from 'react';
+import SnackbarProvider, {
+  SnackbarContext,
+  SnackbarContextType,
+} from './SnackbarContext';
+
+export default function useSnackbar() {
+  const { openSnackbar, closeSnackbar } = useContext(
+    SnackbarContext
+  ) as SnackbarContextType;
+
+  return { openSnackbar, closeSnackbar };
+}
+
+export { SnackbarProvider };
