diff --git a/Components/CalendlyMail/index.jsx b/Components/CalendlyMail/index.jsx
new file mode 100644
index 0000000..52f6944
--- /dev/null
+++ b/Components/CalendlyMail/index.jsx
@@ -0,0 +1,83 @@
+
+function CalendlyMail({backArrow, downloadButton, rubbishButton, rateStarButton, calendlypic ,backButton, toggleSelectMail}) {
+    return (
+      <main className="email-view">
+        <nav className="email-toolbar">
+          <ul>
+            <li>
+              <img className="icon" src={backButton} alt="back button" onClick={() => toggleSelectMail(null)} />
+            </li>
+            <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>4 of 5</p>
+            <button>&lt;</button>
+            <button>&gt;</button>
+          </div>
+        </nav>
+        <article className="email-content">
+          <div className="title">
+            <h1>Use more than one calendar?</h1>
+          </div>
+          <header className="email-content--header">
+            <div className="avatar"></div>
+            <div className="email-info">
+              <div className="sender-info">
+                <h2>Calendly for teams</h2>
+                <em>&lt;no-reply@calendly.com&gt;</em>
+              </div>
+              <div className="user-info">
+                <p>
+                  to me <em>&lt;linda@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={calendlypic} alt="Calendly for teams" />
+            </div>
+          </section>
+          <section className="email-actions">
+            <button>Reply</button>
+            <button>Forward</button>
+          </section>
+        </article>
+      </main>
+    )
+  }
+
+  export default CalendlyMail
\ No newline at end of file
diff --git a/Components/Email/index.jsx b/Components/Email/index.jsx
new file mode 100644
index 0000000..fe4a6a0
--- /dev/null
+++ b/Components/Email/index.jsx
@@ -0,0 +1,29 @@
+function Email({index, email, toggleRead, toggleStar, toggleSelectMail}) {
+    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" onClick={() => toggleSelectMail(email)}>{email.sender}</div>
+              <div className="title" onClick={() => toggleSelectMail(email)}>{email.title}</div>
+            </li>
+    )
+}
+
+export default Email
\ No newline at end of file
diff --git a/Components/Emails/index.jsx b/Components/Emails/index.jsx
new file mode 100644
index 0000000..d5ecc72
--- /dev/null
+++ b/Components/Emails/index.jsx
@@ -0,0 +1,18 @@
+import Email from "../Email"
+
+
+function Emails({filteredEmails, toggleRead, toggleStar, toggleSelectMail}) {
+    return (
+        <main className="emails">
+        <ul>
+          {filteredEmails.map((email, index) => (
+            <>
+            <Email index={index} email={email} toggleRead={toggleRead}  toggleStar={toggleStar} toggleSelectMail={toggleSelectMail}/>
+            </>
+          ))}
+        </ul>
+      </main>
+    )
+}
+
+export default Emails
\ No newline at end of file
diff --git a/Components/FirstMail/index.jsx b/Components/FirstMail/index.jsx
new file mode 100644
index 0000000..f379751
--- /dev/null
+++ b/Components/FirstMail/index.jsx
@@ -0,0 +1,86 @@
+
+
+
+
+function FirstMail({backArrow, downloadButton, rubbishButton, rateStarButton, zoomImage,backButton, toggleSelectMail}) {
+    return (
+      <main className="email-view">
+        <nav className="email-toolbar">
+          <ul>
+            <li>
+              <img className="icon" src={backButton} alt="back button" onClick={() => toggleSelectMail(null)} />
+            </li>
+            <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 5</p>
+            <button>&lt;</button>
+            <button>&gt;</button>
+          </div>
+        </nav>
+        <article className="email-content">
+          <div className="title">
+            <h1>Cloud Recording - Nicolas Marcoras Personal Meeting Room is available</h1>
+          </div>
+          <header className="email-content--header">
+            <div className="avatar"></div>
+            <div className="email-info">
+              <div className="sender-info">
+                <h2>Zoom</h2>
+                <em>&lt;no-reply@zoom.com&gt;</em>
+              </div>
+              <div className="user-info">
+                <p>
+                  to me <em>&lt;linda@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={zoomImage} alt="Zoom logo" />
+            </div>
+          </section>
+          <section className="email-actions">
+            <button>Reply</button>
+            <button>Forward</button>
+          </section>
+        </article>
+      </main>
+    )
+  }
+
+  export default FirstMail
\ No newline at end of file
diff --git a/Components/Header/index.jsx b/Components/Header/index.jsx
new file mode 100644
index 0000000..5828bf0
--- /dev/null
+++ b/Components/Header/index.jsx
@@ -0,0 +1,24 @@
+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/Components/Left-Menu/index.jsx b/Components/Left-Menu/index.jsx
new file mode 100644
index 0000000..9d3bd8c
--- /dev/null
+++ b/Components/Left-Menu/index.jsx
@@ -0,0 +1,34 @@
+function LeftMenu({currentTab, setCurrentTab, setHideRead, unreadEmails, starredEmails, hideRead}) {
+    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
diff --git a/Components/NotionMail/index.jsx b/Components/NotionMail/index.jsx
new file mode 100644
index 0000000..1bf2594
--- /dev/null
+++ b/Components/NotionMail/index.jsx
@@ -0,0 +1,83 @@
+
+function NotionMail({backArrow, downloadButton, rubbishButton, rateStarButton, booleanImage ,backButton, toggleSelectMail}) {
+    return (
+      <main className="email-view">
+        <nav className="email-toolbar">
+          <ul>
+            <li>
+              <img className="icon" src={backButton} alt="back button" onClick={() => toggleSelectMail(null)} />
+            </li>
+            <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>3 of 5</p>
+            <button>&lt;</button>
+            <button>&gt;</button>
+          </div>
+        </nav>
+        <article className="email-content">
+          <div className="title">
+            <h1>You received an update in Boolean</h1>
+          </div>
+          <header className="email-content--header">
+            <div className="avatar"></div>
+            <div className="email-info">
+              <div className="sender-info">
+                <h2>Zoom</h2>
+                <em>&lt;no-reply@boolean.co.uk&gt;</em>
+              </div>
+              <div className="user-info">
+                <p>
+                  to me <em>&lt;linda@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={booleanImage} alt="Boolean logo" />
+            </div>
+          </section>
+          <section className="email-actions">
+            <button>Reply</button>
+            <button>Forward</button>
+          </section>
+        </article>
+      </main>
+    )
+  }
+
+  export default NotionMail
\ No newline at end of file
diff --git a/Components/PatrickMail/index.jsx b/Components/PatrickMail/index.jsx
new file mode 100644
index 0000000..6cf0139
--- /dev/null
+++ b/Components/PatrickMail/index.jsx
@@ -0,0 +1,83 @@
+
+function PatrickMail({backArrow, downloadButton, rubbishButton, rateStarButton, patrickpic ,backButton, toggleSelectMail}) {
+    return (
+      <main className="email-view">
+        <nav className="email-toolbar">
+          <ul>
+            <li>
+              <img className="icon" src={backButton} alt="back button" onClick={() => toggleSelectMail(null)} />
+            </li>
+            <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>5 of 5</p>
+            <button>&lt;</button>
+            <button>&gt;</button>
+          </div>
+        </nav>
+        <article className="email-content">
+          <div className="title">
+            <h1>Updated invitation: Coding chat with Nico</h1>
+          </div>
+          <header className="email-content--header">
+            <div className="avatar"></div>
+            <div className="email-info">
+              <div className="sender-info">
+                <h2>Coding chat with Nico</h2>
+                <em>&lt;patrick@patrick.com&gt;</em>
+              </div>
+              <div className="user-info">
+                <p>
+                  to me <em>&lt;linda@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={patrickpic} alt="Calendly for teams" />
+            </div>
+          </section>
+          <section className="email-actions">
+            <button>Reply</button>
+            <button>Forward</button>
+          </section>
+        </article>
+      </main>
+    )
+  }
+
+  export default PatrickMail
\ No newline at end of file
diff --git a/Components/SecondMail/index.jsx b/Components/SecondMail/index.jsx
new file mode 100644
index 0000000..49f6401
--- /dev/null
+++ b/Components/SecondMail/index.jsx
@@ -0,0 +1,86 @@
+
+
+
+
+function SecondMail({backArrow, downloadButton, rubbishButton, rateStarButton, zoomImage,backButton, toggleSelectMail}) {
+    return (
+      <main className="email-view">
+        <nav className="email-toolbar">
+          <ul>
+            <li>
+              <img className="icon" src={backButton} alt="back button" onClick={() => toggleSelectMail(null)} />
+            </li>
+            <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>2 of 5</p>
+            <button>&lt;</button>
+            <button>&gt;</button>
+          </div>
+        </nav>
+        <article className="email-content">
+          <div className="title">
+            <h1>Sean Davison has joined your personal Meeting Room</h1>
+          </div>
+          <header className="email-content--header">
+            <div className="avatar"></div>
+            <div className="email-info">
+              <div className="sender-info">
+                <h2>Zoom</h2>
+                <em>&lt;no-reply@zoom.com&gt;</em>
+              </div>
+              <div className="user-info">
+                <p>
+                  to me <em>&lt;linda@boolean.co.uk&gt;</em>
+                </p>
+              </div>
+            </div>
+            <div className="date-info">
+              <p>18 February 2021, 10: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={zoomImage} alt="Zoom logo" />
+            </div>
+          </section>
+          <section className="email-actions">
+            <button>Reply</button>
+            <button>Forward</button>
+          </section>
+        </article>
+      </main>
+    )
+  }
+
+  export default SecondMail
\ No newline at end of file
diff --git a/src/App.jsx b/src/App.jsx
index c902699..e025004 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -3,6 +3,23 @@ import { useState } from 'react'
 import initialEmails from './data/emails'
 
 import './styles/App.css'
+import Header from '../Components/Header'
+import LeftMenu from '../Components/Left-Menu'
+import Emails from '../Components/Emails'
+import FirstMail from '../Components/FirstMail'
+import SecondMail from '../Components/SecondMail'
+import NotionMail from '../Components/NotionMail'
+import CalendlyMail from '../Components/CalendlyMail'
+import PatrickMail from '../Components/PatrickMail'
+
+import zoomImage from './assets/images/zoom-logo-png.webp'
+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'
+import backButton from './assets/icons/back-button.webp'
+import booleanImage from './assets/images/boolean.png'
+import calendlypic from './assets/images/Teams.png'
 
 const getReadEmails = emails => emails.filter(email => !email.read)
 
@@ -12,6 +29,9 @@ function App() {
   const [emails, setEmails] = useState(initialEmails)
   const [hideRead, setHideRead] = useState(false)
   const [currentTab, setCurrentTab] = useState('inbox')
+  const [selectedEmail, setSelectedEmail] = useState(null)
+
+ 
 
   const unreadEmails = emails.filter(email => !email.read)
   const starredEmails = emails.filter(email => email.starred)
@@ -34,6 +54,10 @@ function App() {
     setEmails(updatedEmails)
   }
 
+  const toggleSelectMail = targetEmail => {
+    setSelectedEmail(targetEmail)
+  }
+
   let filteredEmails = emails
 
   if (hideRead) filteredEmails = getReadEmails(filteredEmails)
@@ -43,80 +67,70 @@ 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} setHideRead = {setHideRead} unreadEmails = {unreadEmails} starredEmails = {starredEmails} hideRead = {hideRead}/>
+      
+  {selectedEmail === null ? (
+    <Emails
+      filteredEmails={filteredEmails}
+      toggleRead={toggleRead}
+      toggleStar={toggleStar}
+      toggleSelectMail={toggleSelectMail}
+    />
+  ) : selectedEmail.id === 1 ? (
+    <FirstMail
+      backArrow={backArrow}
+      downloadButton={downloadButton}
+      rubbishButton={rubbishButton}
+      rateStarButton={rateStarButton}
+      zoomImage={zoomImage}
+      backButton={backButton}
+      toggleSelectMail={toggleSelectMail}
+    />
+  ) : selectedEmail.id === 2 ?(
+    <SecondMail
+      backArrow={backArrow}
+      downloadButton={downloadButton}
+      rubbishButton={rubbishButton}
+      rateStarButton={rateStarButton}
+      zoomImage={zoomImage}
+      backButton={backButton}
+      toggleSelectMail={toggleSelectMail}
+    />
+  ) : selectedEmail.id === 3 ? (
+    <NotionMail
+      backArrow={backArrow}
+      downloadButton={downloadButton}
+      rubbishButton={rubbishButton}
+      rateStarButton={rateStarButton}
+      booleanImage={booleanImage}
+      backButton={backButton}
+      toggleSelectMail={toggleSelectMail}
+    />  
+  ) : selectedEmail.id === 4 ? (
+    <CalendlyMail
+      backArrow={backArrow}
+      downloadButton={downloadButton}
+      rubbishButton={rubbishButton}
+      rateStarButton={rateStarButton}
+      calendlypic={calendlypic}
+      backButton={backButton}
+      toggleSelectMail={toggleSelectMail}
+    />  
+  ) : (
+    <PatrickMail
+      backArrow={backArrow}
+      downloadButton={downloadButton}
+      rubbishButton={rubbishButton}
+      rateStarButton={rateStarButton}
+      patrickpic={calendlypic}
+      backButton={backButton}
+      toggleSelectMail={toggleSelectMail}
+    />
+  )}
     </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/back-button.webp b/src/assets/icons/back-button.webp
new file mode 100644
index 0000000..21b6deb
Binary files /dev/null and b/src/assets/icons/back-button.webp 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/Teams.png b/src/assets/images/Teams.png
new file mode 100644
index 0000000..687aacc
Binary files /dev/null and b/src/assets/images/Teams.png differ
diff --git a/src/assets/images/boolean.png b/src/assets/images/boolean.png
new file mode 100644
index 0000000..7697fe3
Binary files /dev/null and b/src/assets/images/boolean.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/assets/images/zoom-logo-png.webp b/src/assets/images/zoom-logo-png.webp
new file mode 100644
index 0000000..c7a8659
Binary files /dev/null and b/src/assets/images/zoom-logo-png.webp differ
diff --git a/src/styles/App.css b/src/styles/App.css
index da375b1..743d3d1 100644
--- a/src/styles/App.css
+++ b/src/styles/App.css
@@ -144,3 +144,125 @@
 .email .star-checkbox:checked::before {
   background-image: url(https://www.gstatic.com/images/icons/material/system/2x/star_googyellow500_20dp.png);
 }
+
+
+.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;
+}