diff --git a/frontend/src/application/index.js b/frontend/src/application/index.js
new file mode 100644
index 00000000..147838c9
--- /dev/null
+++ b/frontend/src/application/index.js
@@ -0,0 +1,43 @@
+import React, { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import Header from "../components/Header";
+import Home from "../components/Home";
+import EmptyBoard from "../components/EmptyBoard";
+import boardsSlice from "../redux/boardsSlice";
+
+function ApplicationPage({ initialData, logout, getData }) {
+  const [isBoardModalOpen, setIsBoardModalOpen] = useState(false);
+  const dispatch = useDispatch();
+  const boards = useSelector((state) => state.boards);
+  const activeBoard = boards.find((board) => board.isActive);
+  useEffect(() => {
+    getData();
+  }, []);
+  if (!activeBoard && boards.length > 0)
+    dispatch(boardsSlice.actions.setBoardActive({ index: 0 }));
+  return (
+    <div className=" overflow-hidden  overflow-x-scroll">
+      <>
+        {boards.length > 0 ? (
+          <>
+            <Header
+              setIsBoardModalOpen={setIsBoardModalOpen}
+              isBoardModalOpen={isBoardModalOpen}
+              logout={logout}
+            />
+            <Home
+              setIsBoardModalOpen={setIsBoardModalOpen}
+              isBoardModalOpen={isBoardModalOpen}
+            />
+          </>
+        ) : (
+          <>
+            <EmptyBoard type="add" />
+          </>
+        )}
+      </>
+    </div>
+  );
+}
+
+export default ApplicationPage;