diff --git a/src/App.jsx b/src/App.jsx
index c902699..8e54f50 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -3,6 +3,7 @@ import { useState } from 'react'
 import initialEmails from './data/emails'
 
 import './styles/App.css'
+import Emails from './components/Emails'
 
 const getReadEmails = emails => emails.filter(email => !email.read)
 
@@ -87,35 +88,7 @@ function App() {
           </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>
+        <Emails emails={filteredEmails}toggleRead={toggleRead} toggleStar={toggleStar}/>
     </div>
   )
 }
diff --git a/src/components/Email.jsx b/src/components/Email.jsx
new file mode 100644
index 0000000..e8c5ea0
--- /dev/null
+++ b/src/components/Email.jsx
@@ -0,0 +1,28 @@
+
+const Email = ({email, toggleRead, toggleStar}) => {
+
+    return (
+        <>
+            <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>
+        </>
+    )
+}
+
+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..e5490ac
--- /dev/null
+++ b/src/components/Emails.jsx
@@ -0,0 +1,23 @@
+import Email from "./Email";
+
+const Emails = ({emails, toggleRead, toggleStar}) => {
+
+    return (
+        <>
+        <main className="emails">
+            <ul>
+            {emails.map((email, index) => (
+                <li
+                key={index}
+                className={`email ${email.read ? 'read' : 'unread'}`}
+                >
+                <Email index={index} email={email} toggleRead={toggleRead} toggleStar={toggleStar}/>
+                </li>
+            ))}
+            </ul>
+        </main>
+        </>
+    )
+}
+
+export default Emails;
\ No newline at end of file