diff --git a/src/App.jsx b/src/App.jsx
index c902699..399ea8c 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,9 +1,12 @@
 import { useState } from 'react'
 
 import initialEmails from './data/emails'
-
+import Emails from './components/emails'
+import Nav from './components/nav'
+import Header from './components/header'
 import './styles/App.css'
 
+
 const getReadEmails = emails => emails.filter(email => !email.read)
 
 const getStarredEmails = emails => emails.filter(email => email.starred)
@@ -15,6 +18,7 @@ function App() {
 
   const unreadEmails = emails.filter(email => !email.read)
   const starredEmails = emails.filter(email => email.starred)
+  
 
   const toggleStar = targetEmail => {
     const updatedEmails = emails =>
@@ -33,6 +37,17 @@ function App() {
       )
     setEmails(updatedEmails)
   }
+  
+  const toggleView = targetEmail => {
+    const updatedEmails = emails =>
+      emails.map(email =>
+        email.id === targetEmail.id
+          ? { ...email, open: !email.open }
+          : email
+      )
+    setEmails(updatedEmails)
+  }
+
 
   let filteredEmails = emails
 
@@ -42,81 +57,15 @@ function App() {
     filteredEmails = getStarredEmails(filteredEmails)
 
   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/>
+      <Nav currentTab={currentTab} setCurrentTab={setCurrentTab} unreadEmails={unreadEmails} starredEmails={starredEmails} hideRead={hideRead} setHideRead={setHideRead}/>
+      <Emails filteredEmails={filteredEmails} toggleRead={toggleRead} toggleStar={toggleStar} setEmails={setEmails} Emails={Emails} toggleView={toggleView}/>
+      
     </div>
+
+    </>
   )
 }
 
diff --git a/src/assets/icons/back-arrow.png b/src/assets/icons/back-arrow.png
new file mode 100644
index 0000000..77bf292
Binary files /dev/null and b/src/assets/icons/back-arrow.png differ
diff --git a/src/assets/icons/download-button.png b/src/assets/icons/download-button.png
new file mode 100644
index 0000000..ddb5a11
Binary files /dev/null and b/src/assets/icons/download-button.png differ
diff --git a/src/assets/icons/rate-star-button.png b/src/assets/icons/rate-star-button.png
new file mode 100644
index 0000000..16d6722
Binary files /dev/null and b/src/assets/icons/rate-star-button.png differ
diff --git a/src/assets/icons/rubbish-bin-delete-button.png b/src/assets/icons/rubbish-bin-delete-button.png
new file mode 100644
index 0000000..7090fb1
Binary files /dev/null and b/src/assets/icons/rubbish-bin-delete-button.png differ
diff --git a/src/assets/images/flaticon-welcome-image.png b/src/assets/images/flaticon-welcome-image.png
new file mode 100644
index 0000000..698c431
Binary files /dev/null and b/src/assets/images/flaticon-welcome-image.png differ
diff --git a/src/components/email.jsx b/src/components/email.jsx
new file mode 100644
index 0000000..685316d
--- /dev/null
+++ b/src/components/email.jsx
@@ -0,0 +1,56 @@
+import { useState } from 'react'
+
+import View from "./view";
+
+function Email({index, email1, toggleRead, toggleStar, toggleView}){
+    
+    
+    const viewedEmails = emails => emails.filter(email => email.starred)
+
+    const showView = targetEmail => {
+        return 0;
+    }
+    showView;
+    viewedEmails;
+
+    let message = (
+            <>
+              <div className="select">
+                <input
+                  className="select-checkbox"
+                  type="checkbox"
+                  checked={email1.read}
+                  onChange={() => toggleRead(email1)}
+                />
+              </div>
+              <div className="star">
+                <input
+                  className="star-checkbox"
+                  type="checkbox"
+                  checked={email1.starred}
+                  onChange={() => {toggleView(email1);}}
+                />
+              </div>
+              { email1.open ? <View/> :     ( <>
+              <div className="title">{email1.title}</div>
+              
+              <div className="sender">{email1.sender}</div>
+              </>)
+              
+              }
+              </>
+    );
+    console.log(email1.open)
+    return (<> <li key={index} 
+                  className={`email ${email1.read ? 'read' : 'unread'}`}>
+                  <input
+                  type="checkbox"
+                  checked={email1.open}
+                  onChange={() => {toggleView(email1);}}/>
+        {message}
+        
+        </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..4912390
--- /dev/null
+++ b/src/components/emails.jsx
@@ -0,0 +1,22 @@
+import Email from './email'
+
+function Emails({filteredEmails, toggleRead, toggleStar, toggleView}) {
+    
+    return (<>
+
+    
+        <main className="emails">
+        <ul>
+          {filteredEmails.map((email1, index) => (
+            <>
+            <Email index={index} email1={email1} toggleRead={toggleRead}  toggleStar={toggleStar} toggleView={toggleView}/>
+
+            </>
+          ))}
+        </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..dbd3abd
--- /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/nav.jsx b/src/components/nav.jsx
new file mode 100644
index 0000000..9a0934f
--- /dev/null
+++ b/src/components/nav.jsx
@@ -0,0 +1,42 @@
+function Nav({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>
+          <li
+            className={`item ${currentTab === 'open' ? 'active' : ''}`}
+            onClick={() => setCurrentTab('starred')}
+          >
+            <span className="label">Starred</span>
+            <span className="count">{starredEmails.length}</span>
+          </li>
+        </ul>
+      </nav>
+    </>);
+}
+
+export default Nav
\ No newline at end of file
diff --git a/src/components/view.jsx b/src/components/view.jsx
new file mode 100644
index 0000000..fbf23a7
--- /dev/null
+++ b/src/components/view.jsx
@@ -0,0 +1,86 @@
+import flaticonWelcomeImage from '../assets/images/flaticon-welcome-image.png'
+import backArrow from '../assets/icons/back-arrow.png'
+import downloadButton from '../assets/icons/download-button.png'
+import rateStarButton from '../assets/icons/rate-star-button.png'
+import rubbishButton from '../assets/icons/rubbish-bin-delete-button.png'
+
+function View(){
+
+    return <>
+    <main className="email-view">
+        <nav className="email-toolbar">
+          <ul>
+            <li>
+              <img className="icon" src={backArrow} alt="reply button" />
+            </li>
+            <li>
+              <img className="icon" src={downloadButton} alt="archive button" />
+            </li>
+            <li>
+              <img className="icon" src={rubbishButton} alt="delete button" />
+            </li>
+          </ul>
+          <div className="space"></div>
+          <div>
+            <p>1 of 25</p>
+            <button>&lt;</button>
+            <button>&gt;</button>
+          </div>
+        </nav>
+        <article className="email-content">
+          <div className="title">
+            <h1>Welcome to Flaticon</h1>
+          </div>
+          <header className="email-content--header">
+            <div className="avatar"></div>
+            <div className="email-info">
+              <div className="sender-info">
+                <h2>Freepik Company</h2>
+                <em>&lt;no-reply@freepik.com&gt;</em>
+              </div>
+              <div className="user-info">
+                <p>
+                  to me <em>&lt;nicolas@boolean.co.uk&gt;</em>
+                </p>
+              </div>
+            </div>
+            <div className="date-info">
+              <p>17 March 2021, 09:33</p>
+            </div>
+            <div className="email-action-icons">
+              <ul>
+                <li>
+                  <img className="icon" src={backArrow} alt="reply button" />
+                </li>
+                <li>
+                  <img
+                    className="icon"
+                    src={rateStarButton}
+                    alt="star button"
+                  />
+                </li>
+                <li>
+                  <img
+                    className="icon"
+                    src={rubbishButton}
+                    alt="delete button"
+                  />
+                </li>
+              </ul>
+            </div>
+          </header>
+          <section className="email-body">
+            <div className="content">
+              <img src={flaticonWelcomeImage} alt="Flaticon welcome message" />
+            </div>
+          </section>
+          <section className="email-actions">
+            <button>Reply</button>
+            <button>Forward</button>
+          </section>
+        </article>
+      </main>
+    </>
+}
+
+export default View
\ No newline at end of file
diff --git a/src/data/emails.js b/src/data/emails.jsx
similarity index 78%
rename from src/data/emails.js
rename to src/data/emails.jsx
index 68fb1fc..c5abbc1 100644
--- a/src/data/emails.js
+++ b/src/data/emails.jsx
@@ -4,34 +4,43 @@ export default [
     sender: `Zoom`,
     title: `Cloud Recording - Nicolas Marcora's Personal Meeting Room is now available`,
     starred: false,
-    read: true
+    read: true,
+    open: false
   },
   {
     id: 2,
     sender: `Zoom`,
     title: `Sean Davison has joined your Personal Meeting Room`,
     starred: false,
-    read: false
+    read: false,
+    open: false
+
   },
   {
     id: 3,
     sender: `Notion`,
     title: `1 update in Boolean`,
     starred: true,
-    read: true
+    read: true,
+    open: false
+
   },
   {
     id: 4,
     sender: `The Calendly Team`,
     title: `Use more than one calendar?`,
     starred: false,
-    read: false
+    read: false,
+    open: false
+
   },
   {
     id: 5,
     sender: `Patrick`,
     title: `Updated invitation: Coding chat with Nico`,
     starred: true,
-    read: false
+    read: false,
+    open: false
+
   }
 ]
diff --git a/src/styles/App.css b/src/styles/App.css
index da375b1..c2012bc 100644
--- a/src/styles/App.css
+++ b/src/styles/App.css
@@ -144,3 +144,200 @@
 .email .star-checkbox:checked::before {
   background-image: url(https://www.gstatic.com/images/icons/material/system/2x/star_googyellow500_20dp.png);
 }
+
+
+.app {
+  height: 100vh;
+
+  display: grid;
+  grid-template:
+    'header header' 50px
+    'left-menu emails' 1fr /
+    180px 1fr;
+}
+
+.app > .header {
+  grid-area: header;
+
+  display: grid;
+  grid-template-columns: 180px 1fr;
+
+  border-bottom: solid 1px #00000020;
+}
+
+.app > .header > .left-menu {
+  display: grid;
+  grid-auto-flow: column;
+  align-items: center;
+  justify-content: left;
+}
+
+.app > .header > .left-menu .menu-icon {
+  width: 25px;
+  height: 25px;
+  margin: 10px;
+}
+
+.app > .header > .search {
+  display: grid;
+  padding: 6px;
+}
+
+.app > .header > .search .search-bar {
+  border: none;
+  border-radius: 5px;
+  background-color: rgb(240, 240, 240);
+  padding: 0 10px;
+  font-size: 1rem;
+}
+
+.app > .left-menu {
+  grid-area: left-menu;
+  padding: 10px;
+  padding-left: 0;
+}
+
+.app > .left-menu .inbox-list {
+  display: grid;
+  grid-gap: 10px;
+}
+
+.app > .left-menu .inbox-list .item {
+  padding: 5px 10px;
+  display: grid;
+  grid-auto-flow: column;
+  justify-content: space-between;
+  align-items: center;
+
+  border-top-right-radius: 20px;
+  border-bottom-right-radius: 20px;
+}
+
+.app > .left-menu .inbox-list .item.active {
+  background-color: #ff000050;
+}
+
+.app > .left-menu .inbox-list .item.toggle {
+  background-color: transparent;
+}
+
+.email-toolbar {
+  padding: 0.5rem 2rem;
+
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+
+  border-bottom: 1px solid #eee;
+}
+
+.email-toolbar > * {
+  display: grid;
+  grid-auto-flow: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.email-toolbar > ul {
+  list-style-type: none;
+}
+
+.email-toolbar .icon {
+  width: 24px;
+  height: 24px;
+}
+
+.email-toolbar button {
+  padding: 0.25rem 0.5rem 0.4rem;
+
+  border-radius: 0.5rem;
+  border: 1px solid #a1a1a1;
+  background-color: transparent;
+
+  font-weight: bold;
+}
+
+.title {
+  padding: 1rem;
+}
+
+.title h1 {
+  padding-left: 56px;
+
+  font-weight: normal;
+}
+
+.email-content--header {
+  padding: 0.5rem 1rem;
+
+  display: grid;
+  grid-template-columns: auto 1fr auto auto;
+  gap: 1rem;
+}
+
+.email-content--header .avatar {
+  width: 56px;
+  height: 56px;
+
+  border-radius: 100%;
+  background-color: #eee;
+}
+
+.email-info {
+  padding: 0.25rem 0;
+}
+
+.email-info .sender-info h2 {
+  margin-right: 1rem;
+
+  display: inline-block;
+
+  font-size: 0.925rem;
+}
+
+.email-info .user-info {
+  margin-top: 0.5rem;
+}
+
+.email-info .user-info p {
+  font-size: 0.825rem;
+}
+
+.email-action-icons ul {
+  padding: 0;
+  margin: 0;
+
+  display: grid;
+  grid-auto-flow: column;
+  gap: 0.25rem;
+
+  list-style-type: none;
+}
+
+.email-action-icons .icon {
+  width: 20px;
+  height: 20px;
+}
+
+.email-body .content {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.email-body .content img {
+  width: 100%;
+}
+
+.email-actions {
+  padding: 1rem 0.5rem;
+}
+
+.email-actions button {
+  padding: 0.5rem 1rem;
+  margin-right: 0.5rem;
+
+  border-radius: 0.5rem;
+  border: 1px solid #a1a1a1;
+  background-color: transparent;
+
+  font-weight: bold;
+}