diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 0000000..1c2831c
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,10 @@
+{
+  "semi": true,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "jsxBracketSameLine": false,
+  "arrowParens": "avoid"
+}
diff --git a/img/Group.png b/img/Group.png
new file mode 100644
index 0000000..8723c66
Binary files /dev/null and b/img/Group.png differ
diff --git a/img/Vector.png b/img/Vector.png
new file mode 100644
index 0000000..a0db004
Binary files /dev/null and b/img/Vector.png differ
diff --git a/img/arrow.png b/img/arrow.png
new file mode 100644
index 0000000..63fc946
Binary files /dev/null and b/img/arrow.png differ
diff --git a/img/heart.png b/img/heart.png
new file mode 100644
index 0000000..2206062
Binary files /dev/null and b/img/heart.png differ
diff --git a/img/like.png b/img/like.png
new file mode 100644
index 0000000..5682478
Binary files /dev/null and b/img/like.png differ
diff --git a/img/person-icon.png b/img/person-icon.png
new file mode 100644
index 0000000..088b367
Binary files /dev/null and b/img/person-icon.png differ
diff --git a/img/retweet.png b/img/retweet.png
new file mode 100644
index 0000000..bddf7e8
Binary files /dev/null and b/img/retweet.png differ
diff --git a/img/share.png b/img/share.png
new file mode 100644
index 0000000..3994fcf
Binary files /dev/null and b/img/share.png differ
diff --git a/index.css b/index.css
index 39a6c4b..e2b97f5 100644
--- a/index.css
+++ b/index.css
@@ -1,46 +1,142 @@
-body {
-  position: fixed;
-  inset: 0;
-  margin: auto;
-  user-select: none;
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+
+* {
+
+  margin: 0;
+  padding: 0;
 }
 
-p {
-  font-size: 5rem;
-  color: white;
-  width: 500px;
-  height: 500px;
-  margin: auto;
-  background-color: cornflowerblue;
-  background-image: linear-gradient(19deg, cornflowerblue 0%, crimson 100%);
-  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
-  box-shadow: 15px 15px 50px rgba(0, 0, 0, 0.2);
-  animation: morphing 10s infinite;
-  overflow: hidden;
-  cursor: url(https://cdn.custom-cursor.com/db/7476/32/minimal-apple-cursor.png),
-    default;
-}
-
-/* https://codepen.io/nickylew/pen/GYMoKM */
-@keyframes morphing {
-  0% {
-    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
-    box-shadow: 15px 15px 50px rgba(0, 0, 0, 0.2);
-  }
-  25% {
-    border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%;
-  }
-  50% {
-    border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%;
-    box-shadow: -10px -5px 50px rgba(0, 0, 0, 0.2);
-  }
-  75% {
-    border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;
-  }
+:root {
+  --gray-color: #6a7a88;
 }
 
 .center {
+  font-family: 'Roboto';
+  box-sizing: border-box;
+  height: 97vh;
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-direction: column;
+}
+
+.container {
+  width: 500px;
+  height: 200px;
+  background: #16202a;
+  position: relative;
+}
+
+.username-container {
+  display: flex;
+  margin-left: 10px;
+  padding-top: 10px;
+  width: 50%;
+}
+
+.username-container .username {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  margin-left: 10px;
+}
+
+.username-container .username .name {
+
+  color: #fff;
+  margin-top: 5px;
+  font-size: 1.1rem;
+}
+
+.username-container .username .username-set {
+  margin-top: 5px;
+  color: var(--gray-color);
+
+}
+
+.img {
+  width: 50px;
+  height: 50px;
+  background-color: #cdd8de;
+
+}
+
+.img .username-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+.tweet, .time {
+  margin: 10px;
+  color: var(--gray-color);
+}
+
+.tweet .tweet-p {
+  color: #feffff;
+  font-size: 1.8rem;
+
+}
+
+.icons-container {
+  border-top: 1px solid var(--gray-color);
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  height: 9vh;
+  width: 90%;
+  margin: 0 auto 0 12px;
+}
+
+.icons-container img {
+  width: 22px;
+  height: 20px;
+  cursor: pointer;
+}
+
+.comment, .retweet, .like, .share {
+  display: flex;
+  justify-content: space-between;
+  width: 50px;
+  color: var(--gray-color);
+  font-size: .8rem;
+  align-items: center;
+  transition: all .3s ease;
+  margin-left: 50px;
 }
+
+.comment-icon:hover, .retweet-icon:hover, .share-icon:hover {
+  transform: scale(1.2);
+}
+
+.retweet {
+  width: 50px;
+  color: #399975;
+}
+
+.retweet .retweet-icon {
+  width: 30px;
+}
+
+.like {
+  width: 70px;
+  color: #e6235f;
+}
+
+.like-icon:hover {
+  transform: scale(1.2);
+}
+
+.arrow {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  color: var(--gray-color);
+  cursor: pointer;
+}
+
+.arrow:hover {
+  transform: scale(1.2);
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 289fb17..e4eab89 100644
--- a/index.html
+++ b/index.html
@@ -1,14 +1,168 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Project Name</title>
-    <link rel="stylesheet" href="./index.css" />
-  </head>
-  <body class="center">
-    <p class="center">My App</p>
-  </body>
-  <script src="index.js"></script>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Project Name</title>
+  <link rel="stylesheet" href="./index.css" />
+</head>
+
+<body class="center">
+  <div id="root">
+
+  </div>
+  <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
+  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
+  <!-- <div class="username-container">
+      <div class="img">
+        <img class="username-img" src="./img/person-icon.png" alt="">
+      </div>
+      <div class="username">
+        <h3 class="name">Name</h3>
+        <h4 class="username-set">@Username</h4>
+      </div>
+    </div>
+    <div class="tweet">
+      <p class="tweet-p">Your tweet here!</p>
+    </div>
+    <div class="time">
+
+    </div>
+
+    <div class="arrow">
+      <img class="arrow-icon" src="./img/arrow.png" alt="">
+
+    </div>
+    <div class="icons-container">
+      <div class="comment">
+        <img class="comment-icon" src="./img/Vector.png" alt="">
+        <h4>44</h4>
+      </div>
+      <div class="retweet">
+        <img class="retweet-icon" src="./img/retweet.png" alt="">
+        <h3>3</h3>
+      </div>
+      <div class="like">
+        <img class="like-icon" src="./img/heart.png" alt="">
+        <h3>3,500</h3>
+      </div>
+      <div class="share">
+        <img class="share-icon" src="./img/share.png" alt="">
+      </div>
+    </div>
+  </div> -->
+
+
+  <script>
+    // function div(children) {
+    //   return React.createElement(
+    //     'div',
+    //     { 'className': 'cool' },
+    //     React.createElement('h1', { 'data-all': 'cool' }, 'hello world'),
+    //   );
+    // }
+
+
+
+    const img = React.createElement('img', { className: 'username-img', src: './img/person-icon.png' })
+    const divImg = React.createElement('div', { className: 'img' }, img)
+
+    const name = React.createElement('h3', { children: 'Name', className: 'name' })
+    const usernameSet = React.createElement('h4', { children: '@Username', className: 'username-set' })
+    const username = React.createElement('div', { className: 'username' }, name, usernameSet)
+    const usernameContainer = React.createElement('div', { className: 'username-container' }, divImg, username);
+
+    const p = React.createElement('p', { children: 'Your tweet here!', className: 'tweet-p' })
+    const tweet = React.createElement('div', { className: 'tweet' }, p);
+
+
+
+    let now = new Date();
+    let hour = now.toLocaleTimeString();
+    let day = now.getUTCDate();
+    let month = now.getUTCMonth();
+    let year = now.getUTCFullYear()
+
+    switch (month) {
+      case 0:
+        month = 'Jan';
+        break;
+      case 1:
+        month = 'Feb';
+        break;
+      case 2:
+        month = 'Mar';
+        break;
+      case 3:
+        month = 'Apr';
+        break;
+      case 4:
+        month = 'May';
+        break;
+      case 5:
+        month = 'Jun';
+        break;
+      case 6:
+        month = 'Jul';
+        break;
+      case 7:
+        month = 'Aug';
+        break;
+      case 8:
+        month = 'Sep';
+        break;
+      case 9:
+        month = 'Oct';
+        break;
+      case 10:
+        month = 'Nov';
+        break;
+      case 11:
+        month = 'Dec';
+        break;
+    }
+
+    let str = hour + " . " + month + " " + day + " " + year;
+    const time = React.createElement('div', { children: str, className: 'time' });
+
+    const arrowIcon = React.createElement('img', { className: 'arrow-icon', src: './img/arrow.png' })
+    const arrow = React.createElement('div', { className: 'arrow' }, arrowIcon);
+
+
+    const h4 = React.createElement('h3', { children: '44' });
+    const commentIcon = React.createElement('img', {
+      className: 'comment-icon', src: './img/Vector.png', onClick: () => { console.log("You clicked on Comment!") }
+    })
+    const comment = React.createElement('div', { className: 'comment' }, commentIcon, h4);
+
+    const h3 = React.createElement('h3', { children: '3' });
+    const retweetIcon = React.createElement('img', { className: 'retweet-icon', src: './img/retweet.png', onClick: () => { console.log("You clicked on retweet!") } })
+    const retweet = React.createElement('div', { className: 'retweet' }, retweetIcon, h3);
+
+    const h31 = React.createElement('h3', { children: '3500' });
+    const likeIcon = React.createElement('img', { className: 'like-icon', src: './img/heart.png', onClick: () => { console.log("You clicked on like!") } })
+    const like = React.createElement('div', { className: 'like' }, likeIcon, h31);
+
+
+    const shareIcon = React.createElement('img', { className: 'share-icon', src: './img/share.png', onClick: () => { console.log("You clicked on share!") } })
+    const share = React.createElement('div', { className: 'like' }, shareIcon);
+
+
+
+    const iconsContainer = React.createElement('div', { className: 'icons-container' }, comment, retweet, like, share);
+
+    const container = React.createElement('div', { className: 'container' }, usernameContainer, tweet, time, arrow, iconsContainer);
+    const root = document.getElementById('root');
+    ReactDOM.render(container, root);
+
+
+
+  </script>
+
+
+</body>
+
+
+</html>
\ No newline at end of file
diff --git a/index.js b/index.js
index c60feaf..081ca16 100644
--- a/index.js
+++ b/index.js
@@ -1,5 +1,16 @@
-const emojiList = ['🤗', '🍀', '(⚈ ̫ ⚈)', '😀', '😁', '😅', '😇', '😉'];
-const p = document.querySelector('p');
-p.addEventListener('click', () => {
-  p.innerText = emojiList[Math.floor((Math.random() * 100) % emojiList.length)];
-});
+
+// comment.addEventListener('click', () => {
+//     console.log('You clicked on comment')
+// });
+// retweet.addEventListener('click', () => {
+//     console.log('You clicked on retweet')
+// });
+// like.addEventListener('click', () => {
+//     console.log('You clicked on like')
+// });
+// share.addEventListener('click', () => {
+//     console.log('You clicked on share')
+// });
+
+
+