diff --git a/src/components/Tweet/Tweet.jsx b/src/components/Tweet/Tweet.jsx
index af7fc1d..163498f 100644
--- a/src/components/Tweet/Tweet.jsx
+++ b/src/components/Tweet/Tweet.jsx
@@ -3,7 +3,7 @@ import Avatar from '../Avatar/Avatar';
import Button from '../Button/Button';
import { CardContainer, CardImage, Line, Logo } from './Tweet.styled';
-const Tweet = ({ imageURL }) => {
+const Tweet = ({ imageURL, folowers, tweets, id }) => {
const [isActive, setIsActive] = useState(false);
const [isLoading, setIsLoading] = useState(true);
diff --git a/src/components/UserList/UserList.jsx b/src/components/UserList/UserList.jsx
new file mode 100644
index 0000000..1986392
--- /dev/null
+++ b/src/components/UserList/UserList.jsx
@@ -0,0 +1,24 @@
+import Tweet from 'components/Tweet/Tweet';
+import { GridContainer } from './UserList.syled';
+
+const UserList = ({ users }) => {
+ return (
+ <>
+
+ {users.map(({ avatar, folowers, tweets, id }) => {
+ return (
+
+ );
+ })}
+
+ >
+ );
+};
+
+export default UserList;
diff --git a/src/components/UserList/UserList.syled.js b/src/components/UserList/UserList.syled.js
new file mode 100644
index 0000000..2b6f94e
--- /dev/null
+++ b/src/components/UserList/UserList.syled.js
@@ -0,0 +1,8 @@
+import styled from "@emotion/styled";
+
+export const GridContainer = styled.ul`
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ grid-gap: 20px;
+ list-style: none;
+`;
\ No newline at end of file
diff --git a/src/pages/TweetsPage.jsx b/src/pages/TweetsPage.jsx
index a3761b0..1a3d9a9 100644
--- a/src/pages/TweetsPage.jsx
+++ b/src/pages/TweetsPage.jsx
@@ -1,3 +1,16 @@
-const TweetsPage = params => {};
+import UserList from 'components/UserList/UserList';
+import { useState } from 'react';
+
+const TweetsPage = () => {
+ const [users, setUsers] = useState([]);
+ const [page, setPage] = useState(1);
+ const [isLoading, setIsLoading] = useState(false);
+
+ return (
+ <>
+
+ >
+ );
+};
export default TweetsPage;