diff --git a/src/App.js b/src/App.js
index ff90fa8..7ff3919 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,10 +1,23 @@
-import React from "react";
+import React, { useState } from "react";
+import { ThemeProvider, createMuiTheme } from "@material-ui/core/styles";
+import CustomAppBar from "./CustomAppBar";
 import ItemTable from "./ItemTable";
 
 function App(){
-  return (
-    <ItemTable />
-  );
+	const [darkMode, setDarkMode] = useState(false);
+
+	const theme = createMuiTheme({
+		"palette": {
+			"type": darkMode ? "dark" : "light",
+		}
+	})
+
+	return (
+		<ThemeProvider theme={theme}>
+			<CustomAppBar title="webqueue2" darkMode={darkMode} setDarkMode={setDarkMode} theme={theme}/>
+			<ItemTable />
+		</ThemeProvider>
+	);
 }
 
 export default App;
\ No newline at end of file
diff --git a/src/ItemTable.js b/src/ItemTable.js
index 10f170e..e230dd9 100644
--- a/src/ItemTable.js
+++ b/src/ItemTable.js
@@ -1,9 +1,7 @@
-import React, { useState } from 'react';
+import React from 'react';
 import MaterialTable from "material-table";
-import {useTheme} from "@material-ui/core/styles";
 
 function ItemTable() {
-  const theme = useTheme();
 
   const columns = [
     { title: 'Queue', field: 'queue', filterPlaceholder: "Ex: \"ME\""},