diff --git a/package-lock.json b/package-lock.json
index fd7a612..27a7f18 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,16 +1,17 @@
 {
   "name": "univent-planner-frontend",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "univent-planner-frontend",
-      "version": "0.0.0",
+      "version": "0.0.1",
       "dependencies": {
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.5",
         "@mui/base": "^5.0.0-beta.40",
+        "@mui/icons-material": "^5.16.4",
         "@mui/material": "^5.4.0",
         "@mui/styled-engine": "^5.4.0",
         "react": "^18.3.1",
@@ -1256,6 +1257,31 @@
         "url": "https://opencollective.com/mui-org"
       }
     },
+    "node_modules/@mui/icons-material": {
+      "version": "5.16.4",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.16.4.tgz",
+      "integrity": "sha512-j9/CWctv6TH6Dou2uR2EH7UOgu79CW/YcozxCYVLJ7l03pCsiOlJ5sBArnWJxJ+nGkFwyL/1d1k8JEPMDR125A==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@mui/material": "^5.0.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/material": {
       "version": "5.16.0",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.16.0.tgz",
diff --git a/package.json b/package.json
index 323bd85..191e2dd 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@mui/base": "^5.0.0-beta.40",
+    "@mui/icons-material": "^5.16.4",
     "@mui/material": "^5.4.0",
     "@mui/styled-engine": "^5.4.0",
     "react": "^18.3.1",
diff --git a/src/App.tsx b/src/App.tsx
index e82e5bb..c6c4d66 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,13 @@
+import React from 'react';
+import { CssBaseline } from '@mui/material';
+import { ManageUsers } from './manageUsers/manageUsers';
 const App = () => {
-  return <h1>Univent Planner</h1>
+  return (
+    <>
+      <CssBaseline />
+      <ManageUsers />
+    </>
+  );
 };
 
 export default App;
diff --git a/src/manageUsers/manageUsers.tsx b/src/manageUsers/manageUsers.tsx
new file mode 100644
index 0000000..f829fa8
--- /dev/null
+++ b/src/manageUsers/manageUsers.tsx
@@ -0,0 +1,57 @@
+import * as React from 'react';
+import List from '@mui/material/List';
+import ListItemAvatar from '@mui/material/ListItemAvatar';
+import ListItemText from '@mui/material/ListItemText';
+import Avatar from '@mui/material/Avatar';
+import Typography from '@mui/material/Typography';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import GroupRemoveIcon from '@mui/icons-material/GroupRemove';
+import { BackButton, Item, RemoveButton, Wrapper } from './manageUsersStyle';
+
+export const ManageUsers = () => {
+  function generate(element: React.ReactElement) {
+    return [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((value) =>
+      React.cloneElement(element, {
+        key: value,
+      })
+    );
+  }
+  const [secondary, setSecondary] = React.useState(false);
+  return (
+    <Wrapper>
+      <BackButton>
+        <ArrowBackIcon></ArrowBackIcon>
+      </BackButton>
+      <Typography sx={{ mt: 8, mb: 2, ml: 1 }} variant="h6" component="div">
+        Członkowie
+        <Typography
+          variant="h6"
+          component="div"
+          fontStyle={'italic'}
+          fontWeight={600}
+        >
+          NAZWA_GRUPY
+        </Typography>
+      </Typography>
+      <List>
+        {generate(
+          <Item
+            secondaryAction={
+              <RemoveButton edge="end" aria-label="delete">
+                <GroupRemoveIcon />
+              </RemoveButton>
+            }
+          >
+            <ListItemAvatar>
+              <Avatar src={''}></Avatar>
+            </ListItemAvatar>
+            <ListItemText
+              primary="Użytkownik"
+              secondary={secondary ? 'Secondary text' : null}
+            />
+          </Item>
+        )}
+      </List>
+    </Wrapper>
+  );
+};
diff --git a/src/manageUsers/manageUsersStyle.ts b/src/manageUsers/manageUsersStyle.ts
new file mode 100644
index 0000000..3eb14ba
--- /dev/null
+++ b/src/manageUsers/manageUsersStyle.ts
@@ -0,0 +1,51 @@
+import { styled } from '@mui/material';
+import { ListItem, IconButton, Box } from '@mui/material';
+
+export const Wrapper = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  padding: 32px;
+  box-sizing: border-box;
+  position: relative;
+  @media (max-width: 600px) {
+    padding: 16px;
+  }
+`;
+export const Content = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+  width: 100%;
+  padding: 16px;
+  @media (max-width: 600px) {
+    padding: 8px;
+  }
+`;
+
+export const BackButton = styled(IconButton)`\
+    position: absolute;
+    border-radius: 9999px;
+    border: 2px solid #bbbbbb;
+  @media {
+    color: black;
+  }
+`;
+export const RemoveButton = styled(IconButton)`
+  position: relative;
+`;
+
+export const Item = styled(ListItem)`
+    position absolute;
+  background-color: #ffcccc;
+  border-radius: 12px;
+  margin-bottom: 8px;
+`;
+
+export const BackButtonWrapper = styled(Box)`
+  display: flex;
+  justify-content: flex-start;
+  background-color: #;
+`;