diff --git a/src/App.tsx b/src/App.tsx
index b3ab9e3..d3771be 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,17 +5,18 @@ import {
   //EditGuesser,//
   ShowGuesser,
 } from "react-admin";
-import { Layout } from "./Layout";
+//import { Layout } from "./Layout";//
 import { dataProvider } from "./dataProvider";
 import {UserList} from "./Users.tsx";
 import {UserEdit} from "./UserEdit.tsx";
 import {PostEdit} from "./PostEdit.tsx";
 import {CommentEdit} from "./CommentEdit.tsx";
 import {AlbumEdit} from "./AlbumEdit.tsx";
-import {PhotoEdit} from "./PhotoEdit.tsx"
+import {PhotoEdit} from "./PhotoEdit.tsx";
+import {MyLayout} from "./MyLayout.tsx";
 
 export const App = () => (
-  <Admin layout={Layout} dataProvider={dataProvider}>
+  <Admin layout={MyLayout} dataProvider={dataProvider}>
     <Resource
       name="users"
       list={UserList}
diff --git a/src/MyAppBar.tsx b/src/MyAppBar.tsx
new file mode 100644
index 0000000..676f034
--- /dev/null
+++ b/src/MyAppBar.tsx
@@ -0,0 +1,9 @@
+import {AppBar} from "react-admin";
+
+export const MyAppBar = () => (
+    <AppBar
+        sx = {{
+            backgroundColor: "#ffeb3b",
+        }}
+    />
+);
diff --git a/src/MyLayout.tsx b/src/MyLayout.tsx
new file mode 100644
index 0000000..bfa6e39
--- /dev/null
+++ b/src/MyLayout.tsx
@@ -0,0 +1,7 @@
+import {Layout} from 'react-admin';
+import {MyAppBar} from "./MyAppBar";
+
+export const MyLayout = ({ children } ) => (<Layout appBar={MyAppBar} >
+    {children}
+    </Layout>
+    );