diff --git a/components/Archive.tsx b/components/Archive.tsx
new file mode 100644
index 00000000..ae8d149a
--- /dev/null
+++ b/components/Archive.tsx
@@ -0,0 +1,9 @@
+import archive from "./archive.svg";
+import styled from "styled-components";
+const ArchiveComponent = styled.img`
+  width: 13px;
+  height: 13px;
+`;
+export const Archive = ({ override }: { override?: React.CSSProperties }) => {
+  return <ArchiveComponent src={archive.src} style={override} />;
+};
diff --git a/components/At.tsx b/components/At.tsx
new file mode 100644
index 00000000..c963df58
--- /dev/null
+++ b/components/At.tsx
@@ -0,0 +1,9 @@
+import at from "./at.svg";
+import styled from "styled-components";
+const AtComponent = styled.img`
+  width: 13px;
+  height: 13px;
+`;
+export const At = ({ override }: { override?: React.CSSProperties }) => {
+  return <AtComponent src={at.src} style={override} />;
+};
diff --git a/components/Calendar.tsx b/components/Calendar.tsx
new file mode 100644
index 00000000..0ad6f5b8
--- /dev/null
+++ b/components/Calendar.tsx
@@ -0,0 +1,9 @@
+import calendar from "./calendar.svg";
+import styled from "styled-components";
+const CalendarComponent = styled.img`
+  width: 13px;
+  height: 13px;
+`;
+export const Calendar = ({ override }: { override?: React.CSSProperties }) => {
+  return <CalendarComponent src={calendar.src} style={override} />;
+};
diff --git a/components/Compose.tsx b/components/Compose.tsx
new file mode 100644
index 00000000..fc7d1b7b
--- /dev/null
+++ b/components/Compose.tsx
@@ -0,0 +1,9 @@
+import compose from "./compose.svg";
+import styled from "styled-components";
+const ComposeComponent = styled.img`
+  width: 14px;
+  height: 14px;
+`;
+export const Compose = ({ override }: { override?: React.CSSProperties }) => {
+  return <ComposeComponent src={compose.src} style={override} />;
+};
diff --git a/components/Contacts.tsx b/components/Contacts.tsx
new file mode 100644
index 00000000..ffa6651f
--- /dev/null
+++ b/components/Contacts.tsx
@@ -0,0 +1,9 @@
+import contacts from "./contacts.svg";
+import styled from "styled-components";
+const ContactsComponent = styled.img`
+  width: 13px;
+  height: 13px;
+`;
+export const Contacts = ({ override }: { override?: React.CSSProperties }) => {
+  return <ContactsComponent src={contacts.src} style={override} />;
+};
diff --git a/components/Draft.tsx b/components/Draft.tsx
new file mode 100644
index 00000000..984e2638
--- /dev/null
+++ b/components/Draft.tsx
@@ -0,0 +1,9 @@
+import draft from "./draft.svg";
+import styled from "styled-components";
+const DraftComponent = styled.img`
+  width: 11px;
+  height: 13px;
+`;
+export const Draft = ({ override }: { override?: React.CSSProperties }) => {
+  return <DraftComponent src={draft.src} style={override} />;
+};
diff --git a/components/Header.tsx b/components/Header.tsx
new file mode 100644
index 00000000..93c34fe0
--- /dev/null
+++ b/components/Header.tsx
@@ -0,0 +1,28 @@
+import styled from "styled-components";
+const Mail = styled.p`
+  color: rgba(255, 255, 255, 0.28);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 16.9px;
+`;
+const HeaderComponent = styled.div`
+  display: flex;
+  align-items: center;
+  height: fit-content;
+  padding: 8px 20px;
+  border-radius: 4px;
+  width: 239px;
+`;
+export const Header = ({
+  override,
+  headerText,
+}: {
+  override?: React.CSSProperties;
+  headerText: string;
+}) => {
+  return (
+    <HeaderComponent style={override}>
+      <Mail>{headerText}</Mail>
+    </HeaderComponent>
+  );
+};
diff --git a/components/Import.tsx b/components/Import.tsx
new file mode 100644
index 00000000..d2c57d5d
--- /dev/null
+++ b/components/Import.tsx
@@ -0,0 +1,17 @@
+import import from "./import.svg";
+import styled from "styled-components";
+const ImportComponent = styled.img`
+  width: 13px;
+  height: 12px;
+`;
+
+
+export const Import = ({
+  override
+}: {
+  override?: React.CSSProperties;
+}) => {
+  
+
+  return <ImportComponent src={import.src} style={override} />;
+};
\ No newline at end of file
diff --git a/components/InboxIcon.tsx b/components/InboxIcon.tsx
new file mode 100644
index 00000000..66bdd0fc
--- /dev/null
+++ b/components/InboxIcon.tsx
@@ -0,0 +1,9 @@
+import inboxIcon from "./inboxIcon.svg";
+import styled from "styled-components";
+const InboxIconComponent = styled.img`
+  width: 16px;
+  height: 16px;
+`;
+export const InboxIcon = ({ override }: { override?: React.CSSProperties }) => {
+  return <InboxIconComponent src={inboxIcon.src} style={override} />;
+};
diff --git a/components/Invite.tsx b/components/Invite.tsx
new file mode 100644
index 00000000..af499f33
--- /dev/null
+++ b/components/Invite.tsx
@@ -0,0 +1,9 @@
+import invite from "./invite.svg";
+import styled from "styled-components";
+const InviteComponent = styled.img`
+  width: 13px;
+  height: 12px;
+`;
+export const Invite = ({ override }: { override?: React.CSSProperties }) => {
+  return <InviteComponent src={invite.src} style={override} />;
+};
diff --git a/components/Search.tsx b/components/Search.tsx
new file mode 100644
index 00000000..46712471
--- /dev/null
+++ b/components/Search.tsx
@@ -0,0 +1,9 @@
+import search from "./search.svg";
+import styled from "styled-components";
+const SearchComponent = styled.img`
+  width: 14px;
+  height: 14px;
+`;
+export const Search = ({ override }: { override?: React.CSSProperties }) => {
+  return <SearchComponent src={search.src} style={override} />;
+};
diff --git a/components/Send.tsx b/components/Send.tsx
new file mode 100644
index 00000000..998e2306
--- /dev/null
+++ b/components/Send.tsx
@@ -0,0 +1,9 @@
+import send from "./send.svg";
+import styled from "styled-components";
+const SendComponent = styled.img`
+  width: 13px;
+  height: 13px;
+`;
+export const Send = ({ override }: { override?: React.CSSProperties }) => {
+  return <SendComponent src={send.src} style={override} />;
+};
diff --git a/components/SendFeedback.tsx b/components/SendFeedback.tsx
new file mode 100644
index 00000000..b51bba4d
--- /dev/null
+++ b/components/SendFeedback.tsx
@@ -0,0 +1,13 @@
+import sendFeedback from "./sendFeedback.svg";
+import styled from "styled-components";
+const SendFeedbackComponent = styled.img`
+  width: 13px;
+  height: 13px;
+`;
+export const SendFeedback = ({
+  override,
+}: {
+  override?: React.CSSProperties;
+}) => {
+  return <SendFeedbackComponent src={sendFeedback.src} style={override} />;
+};
diff --git a/components/Settings.tsx b/components/Settings.tsx
new file mode 100644
index 00000000..aca95623
--- /dev/null
+++ b/components/Settings.tsx
@@ -0,0 +1,9 @@
+import settings from "./settings.svg";
+import styled from "styled-components";
+const SettingsComponent = styled.img`
+  width: 13px;
+  height: 13px;
+`;
+export const Settings = ({ override }: { override?: React.CSSProperties }) => {
+  return <SettingsComponent src={settings.src} style={override} />;
+};
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
new file mode 100644
index 00000000..3e2200d9
--- /dev/null
+++ b/components/Sidebar.tsx
@@ -0,0 +1,251 @@
+import mailIcon from "./mailIcon.png";
+import { SidebarTab } from "./SidebarTab";
+import { Compose } from "./Compose";
+import { Search } from "./Search";
+import { Settings } from "./Settings";
+import { Header } from "./Header";
+import { InboxIcon } from "./InboxIcon";
+import { Send } from "./Send";
+import { Calendar } from "./Calendar";
+import { Draft } from "./Draft";
+import { Import } from "./Import";
+import { Spam } from "./Spam";
+import { Archive } from "./Archive";
+import { Trash } from "./Trash";
+import { At } from "./At";
+import { Contacts } from "./Contacts";
+import { Invite } from "./Invite";
+import { SendFeedback } from "./SendFeedback";
+import styled from "styled-components";
+
+const Image = styled.img`
+  position: absolute;
+  inset: 0;
+  height: 100%;
+  width: 100%;
+`;
+
+const MailIcon = styled.div`
+  overflow: hidden;
+  border-radius: 10px;
+  position: relative;
+  width: 38px;
+  height: 38px;
+`;
+
+const SkiffMail = styled.p`
+  color: rgb(255, 255, 255);
+  font-size: 15px;
+  font-weight: 300;
+  line-height: 19.5px;
+`;
+
+const AryamanSWorkspace = styled.p`
+  color: rgba(255, 255, 255, 0.54);
+  font-size: 13px;
+  font-weight: 300;
+  line-height: 16.9px;
+`;
+
+const Text = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  height: fit-content;
+  width: fit-content;
+`;
+
+const Workspace = styled.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  height: fit-content;
+  padding: 10px;
+  width: 100%;
+`;
+
+const OverallOptions = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  height: fit-content;
+  padding: 0px 0px 13px;
+  width: 100%;
+  border-style: solid;
+  border-color: rgba(255, 255, 255, 0.04);
+  border-bottom-width: 1px;
+`;
+
+const MailTabs = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  height: fit-content;
+  padding: 0px 0px 12px;
+  width: 239px;
+`;
+
+const MailOptions = styled.div`
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0px 0px 140px;
+  width: 100%;
+  height: 598px;
+`;
+
+const ShareOptions = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  height: fit-content;
+  width: 100%;
+`;
+
+const SidebarComponent = styled.div`
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 0px 1px 0px 0px;
+  width: 100%;
+  height: 902px;
+  border-style: solid;
+  border-color: rgba(255, 255, 255, 0.04);
+  border-right-width: 1px;
+  background: linear-gradient(
+      rgba(255, 255, 255, 0.1),
+      rgba(255, 255, 255, 0.1)
+    ),
+    linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0));
+  font-family: Roboto;
+`;
+
+export const Sidebar = ({ override }: { override?: React.CSSProperties }) => {
+  const sidebarTabProps = [
+    {
+      status: "Highlighted",
+      icon: <Compose />,
+      label: "Compose",
+    },
+    {
+      status: "Inactive",
+      icon: <Search />,
+      label: "Search",
+    },
+    {
+      status: "Inactive",
+      icon: <Settings />,
+      label: "Settings",
+    },
+  ];
+  const sidebarTabProps1 = [
+    {
+      status: "Selected",
+      icon: <InboxIcon />,
+      label: "Inbox",
+      override: {
+        height: "fit-content",
+        width: "239px",
+      },
+    },
+    {
+      status: "Inactive",
+      icon: <Send />,
+      label: "Sent",
+    },
+    {
+      status: "Inactive",
+      icon: <Calendar />,
+      label: "Send later",
+    },
+    {
+      status: "Inactive",
+      icon: <Draft />,
+      label: "Drafts",
+    },
+    {
+      status: "Inactive",
+      icon: <Import />,
+      label: "Imports",
+    },
+    {
+      status: "Inactive",
+      icon: <Spam />,
+      label: "Spam",
+    },
+    {
+      status: "Inactive",
+      icon: <Archive />,
+      label: "Archive",
+    },
+    {
+      status: "Inactive",
+      icon: <Trash />,
+      label: "Trash",
+    },
+  ];
+  const sidebarTabProps2 = [
+    {
+      status: "Inactive",
+      icon: <Contacts />,
+      label: "Contacts",
+    },
+    {
+      status: "Inactive",
+      icon: <Invite />,
+      label: "Invite",
+    },
+    {
+      status: "Inactive",
+      icon: <SendFeedback />,
+      label: "Send feedback",
+    },
+  ];
+  return (
+    <SidebarComponent style={override}>
+      <AryamansWorkspace />
+      <OverallOptions>
+        {sidebarTabProps.map((props, i) => (
+          <SidebarTab {...props} key={i} />
+        ))}
+      </OverallOptions>
+      <MailOptions sidebarTabProps1={sidebarTabProps1} />
+      <ShareOptions>
+        {sidebarTabProps2.map((props, i) => (
+          <SidebarTab {...props} key={i} />
+        ))}
+      </ShareOptions>
+    </SidebarComponent>
+  );
+};
+
+const AryamansWorkspace = () => (
+  <Workspace>
+    <MailIcon>
+      <Image src={mailIcon.src} />
+    </MailIcon>
+    <Text>
+      <SkiffMail>Skiff Mail</SkiffMail>
+      <AryamanSWorkspace>aryaman&amp;#39;s workspace</AryamanSWorkspace>
+    </Text>
+  </Workspace>
+);
+
+const MailOptions = ({ sidebarTabProps1 }: any) => (
+  <MailOptions>
+    <Header headerText="MAIL" />
+    <MailTabs>
+      {sidebarTabProps1.map((props, i) => (
+        <SidebarTab {...props} key={i} />
+      ))}
+    </MailTabs>
+    <Header headerText="ALIASES" />
+    <SidebarTab status="Inactive" icon={<At />} label="aryaman@skiff.com" />
+    <Header headerText="FOLDERS" />
+    <Header headerText="LABELS" />
+  </MailOptions>
+);
diff --git a/components/SidebarTab.tsx b/components/SidebarTab.tsx
new file mode 100644
index 00000000..d15ac8ec
--- /dev/null
+++ b/components/SidebarTab.tsx
@@ -0,0 +1,99 @@
+import { InboxIcon } from "./InboxIcon";
+import styled from "styled-components";
+
+const Inbox = styled.p`
+  font-size: 15px;
+  font-weight: 300;
+  line-height: 19.5px;
+`;
+
+const Content = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 2px 5px 2px 9px;
+  border-radius: 6px;
+  width: 100%;
+  height: 32px;
+`;
+
+const SidebarTabComponent = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  height: fit-content;
+  padding: 0px 6px;
+  width: 239px;
+`;
+
+export const SidebarTab = ({
+  override,
+  status,
+  icon,
+  label,
+}: {
+  override?: React.CSSProperties;
+  status: string;
+  icon: React.ReactNode;
+  label: string;
+}) => {
+  const inboxStatus = {
+    Selected: {
+      color: "rgb(255, 255, 255)",
+    },
+    Inactive: {
+      color: "rgb(149, 149, 149)",
+    },
+    Highlighted: {
+      color: "rgb(255, 255, 255)",
+    },
+  }[status];
+  const contentStatus = {
+    Selected: {
+      backgroundColor: "rgb(41, 41, 41)",
+    },
+    Inactive: {
+      backgroundColor: "rgb(25, 25, 25)",
+    },
+    Highlighted: {
+      borderStyle: "solid",
+      borderColor: "rgb(51, 51, 51)",
+      borderWidth: "1px",
+      backgroundColor: "rgb(41, 41, 41)",
+    },
+  }[status];
+  const sidebarTabStatus = {
+    Selected: {
+      justifyContent: "center",
+    },
+    Inactive: {
+      justifyContent: "flex-start",
+    },
+    Highlighted: {
+      justifyContent: "flex-start",
+    },
+  }[status];
+  return (
+    <SidebarTabComponent
+      style={{
+        ...sidebarTabStatus,
+        ...override,
+      }}
+    >
+      <Content
+        style={{
+          ...contentStatus,
+        }}
+      >
+        {icon}
+        <Inbox
+          style={{
+            ...inboxStatus,
+          }}
+        >
+          {label}
+        </Inbox>
+      </Content>
+    </SidebarTabComponent>
+  );
+};
diff --git a/components/Spam.tsx b/components/Spam.tsx
new file mode 100644
index 00000000..a14b4f60
--- /dev/null
+++ b/components/Spam.tsx
@@ -0,0 +1,9 @@
+import spam from "./spam.svg";
+import styled from "styled-components";
+const SpamComponent = styled.img`
+  width: 13px;
+  height: 13px;
+`;
+export const Spam = ({ override }: { override?: React.CSSProperties }) => {
+  return <SpamComponent src={spam.src} style={override} />;
+};
diff --git a/components/Trash.tsx b/components/Trash.tsx
new file mode 100644
index 00000000..10161e87
--- /dev/null
+++ b/components/Trash.tsx
@@ -0,0 +1,9 @@
+import trash from "./trash.svg";
+import styled from "styled-components";
+const TrashComponent = styled.img`
+  width: 11px;
+  height: 13px;
+`;
+export const Trash = ({ override }: { override?: React.CSSProperties }) => {
+  return <TrashComponent src={trash.src} style={override} />;
+};
diff --git a/components/archive.svg b/components/archive.svg
new file mode 100644
index 00000000..d6e4dc9b
--- /dev/null
+++ b/components/archive.svg
@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path vector-effect="non-scaling-stroke" fill-rule="evenodd" clip-rule="evenodd" d="M12.6108 2.1354H1.94417V4.1354H12.6108V2.1354ZM1.94417 0.802063C1.59055 0.802063 1.25141 0.942539 1.00136 1.19259C0.751316 1.44264 0.61084 1.78177 0.61084 2.1354V5.46873H13.9442V2.1354C13.9442 1.78177 13.8037 1.44264 13.5536 1.19259C13.3036 0.942539 12.9645 0.802063 12.6108 0.802063H1.94417ZM1.94417 6.80206V14.1354H12.6108V6.80206H11.2775V12.8021H3.27751V6.80206H1.94417ZM5.27751 10.1354H9.27751V8.80206H5.27751V10.1354Z" fill="white" fill-opacity="0.54"/>
+</svg>
diff --git a/components/at.svg b/components/at.svg
new file mode 100644
index 00000000..91fedd12
--- /dev/null
+++ b/components/at.svg
@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path vector-effect="non-scaling-stroke" d="M7.19827 13.2237C8.60827 13.2237 10.0483 12.8484 11.0683 12.2937L10.5429 11.0937C9.67294 11.5584 8.47294 11.8884 7.22827 11.8884C4.36294 11.8884 2.20294 9.7437 2.20294 6.8937C2.20294 4.0437 4.28827 1.9137 7.12294 1.9137C9.89827 1.9137 11.9683 3.8037 11.9683 6.33837C11.9683 7.77837 11.1883 8.8737 10.1683 8.8737H9.94294C9.92827 8.5737 9.91294 8.2437 9.91294 7.92837V6.0537C9.91294 4.50837 8.75827 3.42837 7.15294 3.42837C5.63827 3.42837 4.48294 4.44837 4.36294 5.82837L6.01294 5.9037C6.05827 5.25837 6.50827 4.8237 7.12294 4.8237C7.76827 4.8237 8.20294 5.2737 8.20294 5.94837V6.2037L6.94294 6.3237C5.23294 6.45837 4.16827 7.2537 4.16827 8.3937C4.16827 9.3837 5.00827 10.0737 6.19294 10.0737C7.19827 10.0737 7.91827 9.54837 8.27827 8.70837C8.27827 9.2037 8.30827 9.6237 8.35294 9.93837H9.43294C11.7583 9.93837 13.3929 8.3637 13.3929 6.03837C13.3929 2.9637 10.6929 0.578369 7.16827 0.578369C3.53827 0.578369 0.762939 3.3537 0.762939 6.8937C0.762939 10.5084 3.50827 13.2237 7.19827 13.2237ZM5.87827 8.2137C5.87827 7.6737 6.35827 7.29837 7.15294 7.20837L8.23294 7.1037V7.32837C8.23294 8.2137 7.63294 8.97837 6.77827 8.97837C6.25294 8.97837 5.87827 8.67837 5.87827 8.2137Z" fill="white" fill-opacity="0.54"/>
+</svg>
diff --git a/components/calendar.svg b/components/calendar.svg
new file mode 100644
index 00000000..679ad376
--- /dev/null
+++ b/components/calendar.svg
@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path vector-effect="non-scaling-stroke" fill-rule="evenodd" clip-rule="evenodd" d="M9.61082 4.80206V3.46873H5.61082V4.80206H4.27749V3.46873H2.27749V6.1354H12.9442V3.46873H10.9442V4.80206H9.61082ZM4.27749 2.1354H2.27749C1.92386 2.1354 1.58473 2.27587 1.33468 2.52592C1.08463 2.77597 0.944153 3.11511 0.944153 3.46873V7.46873H14.2775V3.46873C14.2775 3.11511 14.137 2.77597 13.887 2.52592C13.6369 2.27587 13.2978 2.1354 12.9442 2.1354H10.9442V0.802063H9.61082V2.1354H5.61082V0.802063H4.27749V2.1354ZM2.27749 8.80206V12.8021H12.9442V8.80206H14.2775V14.1354H0.944153V8.80206H2.27749Z" fill="white" fill-opacity="0.54"/>
+</svg>
diff --git a/components/compose.svg b/components/compose.svg
new file mode 100644
index 00000000..a1e2cad3
--- /dev/null
+++ b/components/compose.svg
@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path vector-effect="non-scaling-stroke" fill-rule="evenodd" clip-rule="evenodd" d="M11.8187 0.458403C11.6948 0.334535 11.5478 0.236274 11.386 0.169234C11.2242 0.102194 11.0508 0.067688 10.8757 0.067688C10.7005 0.067688 10.5271 0.102194 10.3653 0.169234C10.2035 0.236274 10.0565 0.334535 9.93267 0.458403L3.33333 7.0584V10.3577H6.63333L10.4047 6.5864L9.46133 5.64374L6.08133 9.0244H4.66667V7.6104L8.99 3.2864L11.3473 5.64374L13.2327 3.7584C13.3565 3.63458 13.4548 3.48758 13.5218 3.32577C13.5889 3.16397 13.6234 2.99054 13.6234 2.8154C13.6234 2.64026 13.5889 2.46684 13.5218 2.30503C13.4548 2.14323 13.3565 1.99622 13.2327 1.8724L11.8187 0.458403ZM11.3473 3.7584L9.93267 2.34374L10.876 1.40107L12.29 2.81507L11.3473 3.7584ZM6.66667 0.40107H0V12.4011C0 12.7547 0.140476 13.0938 0.390524 13.3439C0.640573 13.5939 0.979711 13.7344 1.33333 13.7344H13.3333V7.06774H12V12.4011H1.33333V1.7344H6.66667V0.40107Z" fill="white"/>
+</svg>
diff --git a/components/contacts.svg b/components/contacts.svg
new file mode 100644
index 00000000..275961f3
--- /dev/null
+++ b/components/contacts.svg
@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path vector-effect="non-scaling-stroke" fill-rule="evenodd" clip-rule="evenodd" d="M10.5996 10.5677C11.3163 9.81072 11.7954 8.86032 11.9777 7.83398C12.1601 6.80765 12.0377 5.75038 11.6256 4.79286C11.2136 3.83535 10.5299 3.01958 9.65927 2.44639C8.7886 1.8732 7.76904 1.56773 6.72663 1.56773C5.68422 1.56773 4.66467 1.8732 3.79399 2.44639C2.92332 3.01958 2.23971 3.83535 1.82766 4.79286C1.41561 5.75038 1.29319 6.80765 1.47553 7.83398C1.65787 8.86032 2.13698 9.81072 2.85363 10.5677C3.35203 10.0413 3.95253 9.62195 4.61843 9.33538C5.28434 9.04882 6.00168 8.90102 6.72663 8.90102C7.45158 8.90102 8.16892 9.04882 8.83483 9.33538C9.50074 9.62195 10.1012 10.0413 10.5996 10.5677ZM9.56563 11.4164C9.19471 11.0427 8.75365 10.7459 8.26776 10.543C7.78188 10.3401 7.26072 10.2352 6.73418 10.2342C6.20764 10.2332 5.68609 10.3362 5.19944 10.5372C4.7128 10.7383 4.27063 11.0334 3.8983 11.4057L3.88696 11.4164C4.73692 11.9523 5.72151 12.2359 6.7263 12.2344C7.76963 12.2344 8.74297 11.9344 9.56563 11.4164ZM6.7263 13.5677C10.4083 13.5677 13.393 10.583 13.393 6.90104C13.393 3.21904 10.4083 0.234375 6.7263 0.234375C3.0443 0.234375 0.0596313 3.21904 0.0596313 6.90104C0.0596313 10.583 3.0443 13.5677 6.7263 13.5677ZM6.7263 6.90104C7.07992 6.90104 7.41906 6.76057 7.66911 6.51052C7.91916 6.26047 8.05963 5.92133 8.05963 5.56771C8.05963 5.21409 7.91916 4.87495 7.66911 4.6249C7.41906 4.37485 7.07992 4.23438 6.7263 4.23438C6.37268 4.23438 6.03354 4.37485 5.78349 4.6249C5.53344 4.87495 5.39296 5.21409 5.39296 5.56771C5.39296 5.92133 5.53344 6.26047 5.78349 6.51052C6.03354 6.76057 6.37268 6.90104 6.7263 6.90104ZM6.7263 8.23438C7.43354 8.23438 8.11182 7.95342 8.61192 7.45333C9.11201 6.95323 9.39297 6.27495 9.39297 5.56771C9.39297 4.86046 9.11201 4.18219 8.61192 3.68209C8.11182 3.18199 7.43354 2.90104 6.7263 2.90104C6.01905 2.90104 5.34078 3.18199 4.84068 3.68209C4.34058 4.18219 4.05963 4.86046 4.05963 5.56771C4.05963 6.27495 4.34058 6.95323 4.84068 7.45333C5.34078 7.95342 6.01905 8.23438 6.7263 8.23438Z" fill="white" fill-opacity="0.54"/>
+</svg>
diff --git a/components/draft.svg b/components/draft.svg
new file mode 100644
index 00000000..d7c04260
--- /dev/null
+++ b/components/draft.svg
@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="11" height="15" viewBox="0 0 11 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path vector-effect="non-scaling-stroke" fill-rule="evenodd" clip-rule="evenodd" d="M5.6108 2.1354H1.6108V11.4687H0.277466V2.1354C0.277466 1.78177 0.417942 1.44264 0.66799 1.19259C0.918039 0.942539 1.25718 0.802063 1.6108 0.802063H6.27747L6.94413 1.46873L10.2775 4.80206L10.9441 5.46873V11.4687H9.6108V6.1354H6.94413C6.59051 6.1354 6.25137 5.99492 6.00132 5.74487C5.75128 5.49482 5.6108 5.15568 5.6108 4.80206V2.1354ZM0.277466 14.1354V12.8021H10.9441V14.1354H0.277466ZM8.39213 4.80206L6.94413 3.35406V4.80206H8.39213Z" fill="white" fill-opacity="0.54"/>
+</svg>
diff --git a/components/import.svg b/components/import.svg
new file mode 100644
index 00000000..a93bc104
--- /dev/null
+++ b/components/import.svg
@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path vector-effect="non-scaling-stroke" fill-rule="evenodd" clip-rule="evenodd" d="M12.8975 5.80206H10.9442L9.27749 7.46873H6.27749L4.27749 5.80206H2.27749V9.80206H7.61082V11.1354H1.94415C1.67894 11.1354 1.42458 11.03 1.23705 10.8425C1.04951 10.655 0.944153 10.4006 0.944153 10.1354V5.80206L1.29949 4.46873H4.76015L5.13082 4.77806L6.76015 6.1354H8.72549L10.0015 4.8594L10.3922 4.46873H13.9222L14.2775 5.80206V8.1354H12.9442V5.80206H12.8975ZM2.01349 1.79206L1.65549 3.1354H3.03549L3.30215 2.1354H11.9195L12.1862 3.1354H13.5662L13.2082 1.79206C13.1325 1.5081 12.9651 1.25709 12.7321 1.07806C12.499 0.899023 12.2134 0.801998 11.9195 0.802063H3.30215C3.00828 0.801998 2.72261 0.899023 2.48957 1.07806C2.25653 1.25709 2.08916 1.5081 2.01349 1.79206ZM11.7488 11.6641L10.8868 10.8021H14.2775V9.46873H10.8868L11.7488 8.60673L10.8062 7.66406L8.33482 10.1354L10.8062 12.6067L11.7488 11.6641Z" fill="white" fill-opacity="0.54"/>
+</svg>
diff --git a/components/inboxIcon.svg b/components/inboxIcon.svg
new file mode 100644
index 00000000..2d7680b5
--- /dev/null
+++ b/components/inboxIcon.svg
@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path vector-effect="non-scaling-stroke" fill-rule="evenodd" clip-rule="evenodd" d="M11.3333 8.63541H13.3333V12.6354H2.66665V8.63541H4.66665L6.66665 10.3021H9.66665L11.3333 8.63541ZM14.6666 12.9687V8.63541L14.3113 7.30207H10.7813L10.3906 7.69274L9.11465 8.96874H7.14931L5.51998 7.61141L5.14931 7.30207H1.68865L1.33331 8.63541V12.9687C1.33331 13.234 1.43867 13.4883 1.62621 13.6758C1.81374 13.8634 2.0681 13.9687 2.33331 13.9687H13.6666C13.9319 13.9687 14.1862 13.8634 14.3738 13.6758C14.5613 13.4883 14.6666 13.234 14.6666 12.9687ZM2.04465 5.96874L2.40265 4.62541C2.47832 4.34144 2.64569 4.09043 2.87873 3.9114C3.11177 3.73237 3.39744 3.63534 3.69131 3.63541H12.3086C12.6025 3.63534 12.8882 3.73237 13.1212 3.9114C13.3543 4.09043 13.5216 4.34144 13.5973 4.62541L13.9553 5.96874H12.5753L12.3086 4.96874H3.69131L3.42465 5.96874H2.04465Z" fill="white"/>
+</svg>
diff --git a/components/invite.svg b/components/invite.svg
new file mode 100644
index 00000000..789421fc
--- /dev/null
+++ b/components/invite.svg
@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path vector-effect="non-scaling-stroke" fill-rule="evenodd" clip-rule="evenodd" d="M7.05961 3.5677C7.05961 3.92132 6.91914 4.26046 6.66909 4.51051C6.41904 4.76056 6.0799 4.90103 5.72628 4.90103C5.37266 4.90103 5.03352 4.76056 4.78347 4.51051C4.53342 4.26046 4.39294 3.92132 4.39294 3.5677C4.39294 3.21408 4.53342 2.87494 4.78347 2.62489C5.03352 2.37484 5.37266 2.23436 5.72628 2.23436C6.0799 2.23436 6.41904 2.37484 6.66909 2.62489C6.91914 2.87494 7.05961 3.21408 7.05961 3.5677ZM8.39294 3.5677C8.39294 4.27494 8.11199 4.95322 7.6119 5.45332C7.1118 5.95341 6.43352 6.23436 5.72628 6.23436C5.01903 6.23436 4.34076 5.95341 3.84066 5.45332C3.34056 4.95322 3.05961 4.27494 3.05961 3.5677C3.05961 2.86045 3.34056 2.18218 3.84066 1.68208C4.34076 1.18198 5.01903 0.901031 5.72628 0.901031C6.43352 0.901031 7.1118 1.18198 7.6119 1.68208C8.11199 2.18218 8.39294 2.86045 8.39294 3.5677ZM11.0596 6.23436V4.90103H12.3929V6.23436H13.7263V7.5677H12.3929V8.90103H11.0596V7.5677H9.72628V6.23436H11.0596ZM5.72628 8.90103C4.66541 8.90103 3.648 9.32246 2.89785 10.0726C2.14771 10.8228 1.72628 11.8402 1.72628 12.901H0.392944C0.392944 11.4865 0.954848 10.13 1.95504 9.1298C2.95524 8.1296 4.31179 7.5677 5.72628 7.5677C7.14077 7.5677 8.49732 8.1296 9.49751 9.1298C10.4977 10.13 11.0596 11.4865 11.0596 12.901H9.72628C9.72628 11.8402 9.30485 10.8228 8.5547 10.0726C7.80456 9.32246 6.78714 8.90103 5.72628 8.90103Z" fill="white" fill-opacity="0.54"/>
+</svg>
diff --git a/components/mailIcon.png b/components/mailIcon.png
new file mode 100644
index 00000000..7b464b36
Binary files /dev/null and b/components/mailIcon.png differ
diff --git a/components/search.svg b/components/search.svg
new file mode 100644
index 00000000..1d06aa91
--- /dev/null
+++ b/components/search.svg
@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path vector-effect="non-scaling-stroke" fill-rule="evenodd" clip-rule="evenodd" d="M6.62499 10.6641C7.17499 10.6641 7.70299 10.5687 8.19366 10.3941L9.21232 11.4127C7.88225 12.0489 6.3645 12.1731 4.94871 11.7615C3.53292 11.35 2.31822 10.4316 1.53641 9.18156C0.754607 7.93152 0.460433 6.43738 0.71003 4.98428C0.959626 3.53117 1.73552 2.22084 2.88964 1.30333C4.04376 0.385819 5.4953 -0.0746243 6.96726 0.0098664C8.43923 0.0943571 9.82855 0.717865 10.8701 1.76141C11.9117 2.80495 12.5325 4.19546 12.6142 5.66758C12.6959 7.1397 12.2327 8.59036 11.313 9.74273L14.4297 12.8594L13.487 13.8021L9.48699 9.80207L9.42032 9.7354C10.3081 9.07186 10.9308 8.11399 11.1768 7.03327C11.4228 5.95255 11.2762 4.81955 10.7631 3.83709C10.25 2.85464 9.40397 2.08687 8.37648 1.67125C7.34898 1.25563 6.20711 1.21929 5.15526 1.56874C4.10342 1.91818 3.21029 2.63059 2.63577 3.57843C2.06125 4.52628 1.84284 5.64766 2.01965 6.74184C2.19646 7.83601 2.75694 8.83154 3.60075 9.55019C4.44457 10.2688 5.51662 10.6637 6.62499 10.6641Z" fill="white" fill-opacity="0.54"/>
+</svg>
diff --git a/components/send.svg b/components/send.svg
new file mode 100644
index 00000000..9ddbe459
--- /dev/null
+++ b/components/send.svg
@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="13" height="15" viewBox="0 0 13 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path vector-effect="non-scaling-stroke" fill-rule="evenodd" clip-rule="evenodd" d="M1.72483 2.8134L2.81149 6.7954H6.27749V8.12873H1.79416L0.468827 3.2754L0.0248273 1.64607C-0.130506 1.07807 0.473494 0.602734 0.988827 0.886734L11.5608 6.7014L12.9442 7.4614L11.5608 8.22273L0.988827 14.0374C0.473494 14.3207 -0.130506 13.8454 0.0248273 13.2774L1.06416 9.46207H2.44683L1.72416 12.1107L10.1775 7.46207L1.72483 2.8134Z" fill="white" fill-opacity="0.54"/>
+</svg>
diff --git a/components/sendFeedback.svg b/components/sendFeedback.svg
new file mode 100644
index 00000000..de0a83ca
--- /dev/null
+++ b/components/sendFeedback.svg
@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path vector-effect="non-scaling-stroke" fill-rule="evenodd" clip-rule="evenodd" d="M5.00899 2.13038C6.08388 1.59302 7.30874 1.43442 8.48504 1.68029C9.66134 1.92617 10.7201 2.5621 11.4898 3.48501C12.2594 4.40792 12.6949 5.56371 12.7254 6.76504C12.756 7.96637 12.38 9.14283 11.6583 10.1037L12.7243 10.9037C13.6261 9.70261 14.0958 8.2322 14.0575 6.73075C14.0191 5.2293 13.4749 3.7848 12.5129 2.63132C11.551 1.47784 10.2278 0.682981 8.75762 0.375543C7.28748 0.0681047 5.7566 0.266104 4.41306 0.937456C3.06951 1.60881 1.99203 2.71417 1.35522 4.07443C0.71841 5.43468 0.55958 6.97012 0.904473 8.43192C1.24936 9.89373 2.07777 11.1962 3.25544 12.1284C4.43312 13.0605 5.89105 13.5677 7.39299 13.5677H14.0597V12.2344H7.39299C6.19151 12.2343 5.02525 11.8285 4.08319 11.0828C3.14113 10.3371 2.47846 9.29517 2.20255 8.1258C1.92664 6.95643 2.05366 5.72815 2.56303 4.63999C3.07239 3.55182 3.93427 2.66753 5.00899 2.13038ZM10.7263 4.90105H4.05966V6.23438H10.7263V4.90105ZM4.05966 7.56772H9.39299V8.90105H4.05966V7.56772Z" fill="white" fill-opacity="0.54"/>
+</svg>
diff --git a/components/settings.svg b/components/settings.svg
new file mode 100644
index 00000000..6fc7b4d2
--- /dev/null
+++ b/components/settings.svg
@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path vector-effect="non-scaling-stroke" fill-rule="evenodd" clip-rule="evenodd" d="M6.27096 1.68504C6.29096 1.64504 6.31096 1.60638 6.32896 1.56771H7.86363L7.92163 1.68504C8.06029 1.95971 8.24763 2.28304 8.48829 2.58438C8.72163 2.87704 9.06163 3.21971 9.52563 3.43904C10.203 3.76038 10.9843 3.73371 11.435 3.69237L12.151 4.83771L12.1396 4.85504C11.8763 5.26771 11.4296 6.05037 11.4296 6.90104C11.4296 7.75171 11.8763 8.53438 12.1396 8.94704L12.151 8.96438L11.435 10.1097C10.985 10.0684 10.203 10.0417 9.52563 10.363C9.06163 10.583 8.72163 10.925 8.48829 11.2177C8.24176 11.5316 8.03195 11.8727 7.86296 12.2344H6.32829C6.15951 11.8728 5.94993 11.5317 5.70363 11.2177C5.47029 10.925 5.13029 10.5824 4.66629 10.3624C3.98896 10.0424 3.20696 10.0684 2.75696 10.1097L2.04096 8.96438L2.05229 8.94704C2.31629 8.53438 2.76296 7.75171 2.76296 6.90104C2.76296 6.05037 2.31629 5.26771 2.05296 4.85504L2.04163 4.83771L2.75763 3.69237C3.20763 3.73371 3.98963 3.76038 4.66696 3.43904C5.13096 3.21904 5.47096 2.87704 5.70429 2.58438C5.94496 2.28304 6.13229 1.95971 6.27096 1.68504ZM10.0963 2.23438C9.24763 1.83238 8.76296 0.234375 8.76296 0.234375H5.42963C5.42963 0.234375 4.94496 1.83238 4.09629 2.23438C3.39029 2.56904 2.09629 2.23438 2.09629 2.23438L0.429626 4.90104C0.429626 4.90104 1.42963 6.02771 1.42963 6.90104C1.42963 7.77437 0.429626 8.90104 0.429626 8.90104L2.09629 11.5677C2.09629 11.5677 3.39029 11.233 4.09629 11.5677C4.94496 11.9697 5.42963 13.5677 5.42963 13.5677H8.76296C8.76296 13.5677 9.24763 11.9697 10.0963 11.5677C10.8023 11.233 12.0963 11.5677 12.0963 11.5677L13.763 8.90104C13.763 8.90104 12.763 7.77437 12.763 6.90104C12.763 6.02771 13.763 4.90104 13.763 4.90104L12.0963 2.23438C12.0963 2.23438 10.8023 2.56904 10.0963 2.23438ZM8.42963 6.90104C8.42963 7.25466 8.28915 7.5938 8.0391 7.84385C7.78905 8.0939 7.44992 8.23438 7.09629 8.23438C6.74267 8.23438 6.40353 8.0939 6.15348 7.84385C5.90344 7.5938 5.76296 7.25466 5.76296 6.90104C5.76296 6.54742 5.90344 6.20828 6.15348 5.95823C6.40353 5.70818 6.74267 5.56771 7.09629 5.56771C7.44992 5.56771 7.78905 5.70818 8.0391 5.95823C8.28915 6.20828 8.42963 6.54742 8.42963 6.90104ZM9.76296 6.90104C9.76296 7.60829 9.48201 8.28656 8.98191 8.78666C8.48181 9.28676 7.80354 9.56771 7.09629 9.56771C6.38905 9.56771 5.71077 9.28676 5.21068 8.78666C4.71058 8.28656 4.42963 7.60829 4.42963 6.90104C4.42963 6.1938 4.71058 5.51552 5.21068 5.01542C5.71077 4.51533 6.38905 4.23438 7.09629 4.23438C7.80354 4.23438 8.48181 4.51533 8.98191 5.01542C9.48201 5.51552 9.76296 6.1938 9.76296 6.90104Z" fill="white" fill-opacity="0.54"/>
+</svg>
diff --git a/components/spam.svg b/components/spam.svg
new file mode 100644
index 00000000..329bac38
--- /dev/null
+++ b/components/spam.svg
@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path vector-effect="non-scaling-stroke" fill-rule="evenodd" clip-rule="evenodd" d="M4.31553 0.802063H9.57286L13.6109 4.6094V10.3281L9.57286 14.1354H4.31486L0.277527 10.3281V4.60873L4.31553 0.802063ZM4.84553 2.1354L1.61086 5.18473V9.75273L4.84553 12.8021H9.04286L12.2775 9.75273V5.18473L9.04286 2.1354H4.84553ZM7.58753 4.20206H6.29686V8.91806H7.58753V4.20206ZM6.97019 9.46606C6.54086 9.46606 6.22219 9.7954 6.22219 10.2141C6.22219 10.6341 6.54219 10.9527 6.97019 10.9527C7.38086 10.9527 7.69953 10.6327 7.69953 10.2141C7.69953 9.79673 7.38219 9.46606 6.97019 9.46606Z" fill="white" fill-opacity="0.54"/>
+</svg>
diff --git a/components/trash.svg b/components/trash.svg
new file mode 100644
index 00000000..5c2501c3
--- /dev/null
+++ b/components/trash.svg
@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path vector-effect="non-scaling-stroke" fill-rule="evenodd" clip-rule="evenodd" d="M4.39294 2.23438C4.39294 2.05756 4.46318 1.88799 4.58821 1.76297C4.71323 1.63795 4.8828 1.56771 5.05961 1.56771H6.39294C6.56976 1.56771 6.73932 1.63795 6.86435 1.76297C6.98937 1.88799 7.05961 2.05756 7.05961 2.23438V2.90104H4.39294V2.23438ZM3.05961 2.90104V2.23438C3.05961 1.70394 3.27032 1.19523 3.6454 0.820162C4.02047 0.445089 4.52918 0.234375 5.05961 0.234375H6.39294C6.92338 0.234375 7.43209 0.445089 7.80716 0.820162C8.18223 1.19523 8.39294 1.70394 8.39294 2.23438V2.90104H11.0596V4.23438H0.392944V2.90104H3.05961ZM1.05961 5.56771H2.39294V12.2344H9.05961V5.56771H10.3929V13.5677H1.05961V5.56771Z" fill="white" fill-opacity="0.54"/>
+</svg>