diff --git a/src/App.jsx b/src/App.jsx
index c902699..f199219 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -3,6 +3,9 @@ import { useState } from 'react'
 import initialEmails from './data/emails'
 
 import './styles/App.css'
+import Header from "./components/Header"
+import LeftMenu from "./components/LeftMenu"
+import Emails from "./components/Emails"
 
 const getReadEmails = emails => emails.filter(email => !email.read)
 
@@ -43,79 +46,20 @@ function App() {
 
   return (
     <div className="app">
-      <header className="header">
-        <div className="left-menu">
-          <svg className="menu-icon" focusable="false" viewBox="0 0 24 24">
-            <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
-          </svg>
-
-          <img
-            src="https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_default_1x_r2.png"
-            alt="gmail logo"
-          />
-        </div>
-
-        <div className="search">
-          <input className="search-bar" placeholder="Search mail" />
-        </div>
-      </header>
-      <nav className="left-menu">
-        <ul className="inbox-list">
-          <li
-            className={`item ${currentTab === 'inbox' ? 'active' : ''}`}
-            onClick={() => setCurrentTab('inbox')}
-          >
-            <span className="label">Inbox</span>
-            <span className="count">{unreadEmails.length}</span>
-          </li>
-          <li
-            className={`item ${currentTab === 'starred' ? 'active' : ''}`}
-            onClick={() => setCurrentTab('starred')}
-          >
-            <span className="label">Starred</span>
-            <span className="count">{starredEmails.length}</span>
-          </li>
-
-          <li className="item toggle">
-            <label htmlFor="hide-read">Hide read</label>
-            <input
-              id="hide-read"
-              type="checkbox"
-              checked={hideRead}
-              onChange={e => setHideRead(e.target.checked)}
-            />
-          </li>
-        </ul>
-      </nav>
-      <main className="emails">
-        <ul>
-          {filteredEmails.map((email, index) => (
-            <li
-              key={index}
-              className={`email ${email.read ? 'read' : 'unread'}`}
-            >
-              <div className="select">
-                <input
-                  className="select-checkbox"
-                  type="checkbox"
-                  checked={email.read}
-                  onChange={() => toggleRead(email)}
-                />
-              </div>
-              <div className="star">
-                <input
-                  className="star-checkbox"
-                  type="checkbox"
-                  checked={email.starred}
-                  onChange={() => toggleStar(email)}
-                />
-              </div>
-              <div className="sender">{email.sender}</div>
-              <div className="title">{email.title}</div>
-            </li>
-          ))}
-        </ul>
-      </main>
+      <Header/>
+      <LeftMenu
+        currentTab={currentTab}
+        setCurrentTab={setCurrentTab}
+        unreadEmails={unreadEmails}
+        starredEmails={starredEmails}
+        hideRead={hideRead}
+        setHideRead={setHideRead}
+      />
+      <Emails
+        toggleStar={toggleStar}
+        filteredEmails={filteredEmails}
+        toggleRead={toggleRead}
+      />
     </div>
   )
 }
diff --git a/src/components/Email.jsx b/src/components/Email.jsx
new file mode 100644
index 0000000..c21c880
--- /dev/null
+++ b/src/components/Email.jsx
@@ -0,0 +1,29 @@
+function Email({email, index, toggleStar, toggleRead}){
+    return(
+        <li
+            key={index}
+            className={`email ${email.read ? 'read' : 'unread'}`}
+        >
+            <div className="select">
+            <input
+                className="select-checkbox"
+                type="checkbox"
+                checked={email.read}
+                onChange={() => toggleRead(email)}
+            />
+            </div>
+            <div className="star">
+            <input
+                className="star-checkbox"
+                type="checkbox"
+                checked={email.starred}
+                onChange={() => toggleStar(email)}
+            />
+            </div>
+            <div className="sender">{email.sender}</div>
+            <div className="title">{email.title}</div>
+        </li>
+    )
+}
+
+export default Email;
\ No newline at end of file
diff --git a/src/components/Emails.jsx b/src/components/Emails.jsx
new file mode 100644
index 0000000..af9b5fd
--- /dev/null
+++ b/src/components/Emails.jsx
@@ -0,0 +1,21 @@
+import Email from "./Email"
+
+function Emails({toggleStar, filteredEmails, toggleRead}){
+    return(
+      <main className="emails">
+        <ul>
+          {filteredEmails.map((email, index) => (
+            <Email
+                key={email.id}
+                email={email}
+                index={index}
+                toggleStar={toggleStar}
+                toggleRead={toggleRead}
+            />
+          ))}
+        </ul>
+      </main>
+    )
+}
+
+export default Emails;
\ No newline at end of file
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
new file mode 100644
index 0000000..d94a0a7
--- /dev/null
+++ b/src/components/Header.jsx
@@ -0,0 +1,22 @@
+function Header(){
+    return(
+        <header className="header">
+            <div className="left-menu">
+                <svg className="menu-icon" focusable="false" viewBox="0 0 24 24">
+                    <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
+                </svg>
+
+                <img
+                    src="https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_default_1x_r2.png"
+                    alt="gmail logo"
+                />
+            </div>
+
+            <div className="search">
+                <input className="search-bar" placeholder="Search mail" />
+            </div>
+        </header>
+    )
+}
+
+export default Header;
\ No newline at end of file
diff --git a/src/components/LeftMenu.jsx b/src/components/LeftMenu.jsx
new file mode 100644
index 0000000..56d25cf
--- /dev/null
+++ b/src/components/LeftMenu.jsx
@@ -0,0 +1,34 @@
+function LeftMenu({currentTab, setCurrentTab, unreadEmails, starredEmails, hideRead, setHideRead}){
+    return(
+      <nav className="left-menu">
+        <ul className="inbox-list">
+          <li
+            className={`item ${currentTab === 'inbox' ? 'active' : ''}`}
+            onClick={() => setCurrentTab('inbox')}
+          >
+            <span className="label">Inbox</span>
+            <span className="count">{unreadEmails.length}</span>
+          </li>
+          <li
+            className={`item ${currentTab === 'starred' ? 'active' : ''}`}
+            onClick={() => setCurrentTab('starred')}
+          >
+            <span className="label">Starred</span>
+            <span className="count">{starredEmails.length}</span>
+          </li>
+
+          <li className="item toggle">
+            <label htmlFor="hide-read">Hide read</label>
+            <input
+              id="hide-read"
+              type="checkbox"
+              checked={hideRead}
+              onChange={e => setHideRead(e.target.checked)}
+            />
+          </li>
+        </ul>
+      </nav>
+    )
+}
+
+export default LeftMenu;
\ No newline at end of file