diff --git a/src/App.jsx b/src/App.jsx
index c902699..416384d 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,8 +1,11 @@
 import { useState } from 'react'
 
+import EmailList from './components/EmailList'
+
 import initialEmails from './data/emails'
 
 import './styles/App.css'
+import Content from './components/Content'
 
 const getReadEmails = emails => emails.filter(email => !email.read)
 
@@ -12,27 +15,13 @@ function App() {
   const [emails, setEmails] = useState(initialEmails)
   const [hideRead, setHideRead] = useState(false)
   const [currentTab, setCurrentTab] = useState('inbox')
+  const [search, setSearch] = useState("")
+  const [selectedIndex, setSelectedIndex] = useState(-1)
 
   const unreadEmails = emails.filter(email => !email.read)
   const starredEmails = emails.filter(email => email.starred)
 
-  const toggleStar = targetEmail => {
-    const updatedEmails = emails =>
-      emails.map(email =>
-        email.id === targetEmail.id
-          ? { ...email, starred: !email.starred }
-          : email
-      )
-    setEmails(updatedEmails)
-  }
-
-  const toggleRead = targetEmail => {
-    const updatedEmails = emails =>
-      emails.map(email =>
-        email.id === targetEmail.id ? { ...email, read: !email.read } : email
-      )
-    setEmails(updatedEmails)
-  }
+
 
   let filteredEmails = emails
 
@@ -41,6 +30,11 @@ function App() {
   if (currentTab === 'starred')
     filteredEmails = getStarredEmails(filteredEmails)
 
+  if (search != "" && selectedIndex < 0)
+    filteredEmails = filteredEmails.filter((item) => {
+      return item.title.toLowerCase().includes(search);
+    })
+
   return (
     <div className="app">
       <header className="header">
@@ -56,21 +50,27 @@ function App() {
         </div>
 
         <div className="search">
-          <input className="search-bar" placeholder="Search mail" />
+          <input onChange={ (e) => setSearch(e.target.value)} 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')}
+            onClick={() => {
+              setCurrentTab('inbox')
+              setSelectedIndex(-1)
+            }}
           >
             <span className="label">Inbox</span>
             <span className="count">{unreadEmails.length}</span>
           </li>
           <li
             className={`item ${currentTab === 'starred' ? 'active' : ''}`}
-            onClick={() => setCurrentTab('starred')}
+            onClick={() => {
+              setCurrentTab('starred')
+              setSelectedIndex(-1)
+            }}
           >
             <span className="label">Starred</span>
             <span className="count">{starredEmails.length}</span>
@@ -88,34 +88,16 @@ function App() {
         </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>
+        { selectedIndex >= 0 && filteredEmails[selectedIndex] ?(
+          <Content email={ filteredEmails[selectedIndex] } setSelectedIndex={ setSelectedIndex }/>
+        ) : (
+          <EmailList filteredEmails={filteredEmails} setEmails={setEmails} setSelectedIndex={setSelectedIndex}></EmailList>
+          )
+        }
+
       </main>
+      
+
     </div>
   )
 }
diff --git a/src/components/Content/index.jsx b/src/components/Content/index.jsx
new file mode 100644
index 0000000..86ef4c0
--- /dev/null
+++ b/src/components/Content/index.jsx
@@ -0,0 +1,16 @@
+function Content({ email, setSelectedIndex }){
+
+return(
+  <>
+    <button onClick={ () => setSelectedIndex(-1) }> Back </button>
+    <h2> { email.title }</h2>
+    <p> Sender: { email.sender }</p>
+    <p>-----------------------------------------------</p>
+    <p> { email.content }</p>
+  </>
+)
+
+
+}
+
+export default Content
diff --git a/src/components/Email/index.jsx b/src/components/Email/index.jsx
new file mode 100644
index 0000000..02a8e91
--- /dev/null
+++ b/src/components/Email/index.jsx
@@ -0,0 +1,34 @@
+
+function Email({ email, toggleRead, toggleStar, onClick }){
+
+  return(
+    <li
+      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 onClick={onClick} className="title">{email.title}</div>
+    </li>
+    )
+}
+
+export default Email
diff --git a/src/components/EmailList/index.jsx b/src/components/EmailList/index.jsx
new file mode 100644
index 0000000..f443e80
--- /dev/null
+++ b/src/components/EmailList/index.jsx
@@ -0,0 +1,39 @@
+import Email from "../Email"
+
+function EmailList({ filteredEmails, setEmails, setSelectedIndex }){
+
+  const toggleStar = targetEmail => {
+    const updatedEmails = emails =>
+      emails.map(email =>
+        email.id === targetEmail.id
+          ? { ...email, starred: !email.starred }
+          : email
+      )
+    setEmails(updatedEmails)
+  }
+
+  const toggleRead = targetEmail => {
+    const updatedEmails = emails =>
+      emails.map(email =>
+        email.id === targetEmail.id ? { ...email, read: !email.read } : email
+      )
+    setEmails(updatedEmails)
+  }
+
+return (
+  <> 
+    <ul>
+      {filteredEmails.map((email, index) => (
+        <Email onClick={() => setSelectedIndex(index) } key={index} email={email} toggleRead={toggleRead} toggleStar={toggleStar} />
+      ))}
+    </ul>
+  </>
+
+)
+
+}
+
+
+
+
+export default EmailList
diff --git a/src/data/emails.js b/src/data/emails.js
index 68fb1fc..99a4a38 100644
--- a/src/data/emails.js
+++ b/src/data/emails.js
@@ -3,6 +3,7 @@ export default [
     id: 1,
     sender: `Zoom`,
     title: `Cloud Recording - Nicolas Marcora's Personal Meeting Room is now available`,
+    content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mi mi, gravida sit amet odio eget, consectetur hendrerit ante. Proin a dui justo. Fusce turpis dolor, gravida ac sapien id, malesuada auctor diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mollis, orci nec ornare ultrices, lorem ipsum tincidunt purus, id tincidunt turpis purus in nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque dapibus odio nibh, eu bibendum sem euismod sit amet. Sed et nibh quis enim faucibus mattis venenatis eget tortor. Suspendisse et odio faucibus, bibendum quam in, volutpat tellus. Vivamus tempor condimentum purus, ac auctor enim elementum et. Vivamus blandit, est sagittis vulputate lacinia, mauris ante dapibus sapien, sed convallis nulla felis a eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum dictum, neque eget aliquet imperdiet, nisi dui feugiat libero, id pulvinar massa risus sed erat. Vivamus in turpis placerat tortor maximus vulputate ut ac mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit." ,
     starred: false,
     read: true
   },
@@ -10,6 +11,7 @@ export default [
     id: 2,
     sender: `Zoom`,
     title: `Sean Davison has joined your Personal Meeting Room`,
+    content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mi mi, gravida sit amet odio eget, consectetur hendrerit ante. Proin a dui justo. Fusce turpis dolor, gravida ac sapien id, malesuada auctor diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mollis, orci nec ornare ultrices, lorem ipsum tincidunt purus, id tincidunt turpis purus in nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque dapibus odio nibh, eu bibendum sem euismod sit amet. Sed et nibh quis enim faucibus mattis venenatis eget tortor. Suspendisse et odio faucibus, bibendum quam in, volutpat tellus. Vivamus tempor condimentum purus, ac auctor enim elementum et. Vivamus blandit, est sagittis vulputate lacinia, mauris ante dapibus sapien, sed convallis nulla felis a eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum dictum, neque eget aliquet imperdiet, nisi dui feugiat libero, id pulvinar massa risus sed erat. Vivamus in turpis placerat tortor maximus vulputate ut ac mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit." ,
     starred: false,
     read: false
   },
@@ -17,6 +19,7 @@ export default [
     id: 3,
     sender: `Notion`,
     title: `1 update in Boolean`,
+    content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mi mi, gravida sit amet odio eget, consectetur hendrerit ante. Proin a dui justo. Fusce turpis dolor, gravida ac sapien id, malesuada auctor diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mollis, orci nec ornare ultrices, lorem ipsum tincidunt purus, id tincidunt turpis purus in nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque dapibus odio nibh, eu bibendum sem euismod sit amet. Sed et nibh quis enim faucibus mattis venenatis eget tortor. Suspendisse et odio faucibus, bibendum quam in, volutpat tellus. Vivamus tempor condimentum purus, ac auctor enim elementum et. Vivamus blandit, est sagittis vulputate lacinia, mauris ante dapibus sapien, sed convallis nulla felis a eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum dictum, neque eget aliquet imperdiet, nisi dui feugiat libero, id pulvinar massa risus sed erat. Vivamus in turpis placerat tortor maximus vulputate ut ac mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit." ,
     starred: true,
     read: true
   },
@@ -24,6 +27,7 @@ export default [
     id: 4,
     sender: `The Calendly Team`,
     title: `Use more than one calendar?`,
+    content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mi mi, gravida sit amet odio eget, consectetur hendrerit ante. Proin a dui justo. Fusce turpis dolor, gravida ac sapien id, malesuada auctor diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mollis, orci nec ornare ultrices, lorem ipsum tincidunt purus, id tincidunt turpis purus in nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque dapibus odio nibh, eu bibendum sem euismod sit amet. Sed et nibh quis enim faucibus mattis venenatis eget tortor. Suspendisse et odio faucibus, bibendum quam in, volutpat tellus. Vivamus tempor condimentum purus, ac auctor enim elementum et. Vivamus blandit, est sagittis vulputate lacinia, mauris ante dapibus sapien, sed convallis nulla felis a eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum dictum, neque eget aliquet imperdiet, nisi dui feugiat libero, id pulvinar massa risus sed erat. Vivamus in turpis placerat tortor maximus vulputate ut ac mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit." ,
     starred: false,
     read: false
   },
@@ -31,6 +35,7 @@ export default [
     id: 5,
     sender: `Patrick`,
     title: `Updated invitation: Coding chat with Nico`,
+    content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mi mi, gravida sit amet odio eget, consectetur hendrerit ante. Proin a dui justo. Fusce turpis dolor, gravida ac sapien id, malesuada auctor diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mollis, orci nec ornare ultrices, lorem ipsum tincidunt purus, id tincidunt turpis purus in nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque dapibus odio nibh, eu bibendum sem euismod sit amet. Sed et nibh quis enim faucibus mattis venenatis eget tortor. Suspendisse et odio faucibus, bibendum quam in, volutpat tellus. Vivamus tempor condimentum purus, ac auctor enim elementum et. Vivamus blandit, est sagittis vulputate lacinia, mauris ante dapibus sapien, sed convallis nulla felis a eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum dictum, neque eget aliquet imperdiet, nisi dui feugiat libero, id pulvinar massa risus sed erat. Vivamus in turpis placerat tortor maximus vulputate ut ac mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit." ,
     starred: true,
     read: false
   }