diff --git a/frontend/src/App.css b/frontend/src/App.css
index 74b5e053..a5051589 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -1,5 +1,6 @@
 .App {
   text-align: center;
+  height: 100%;
 }
 
 .App-logo {
diff --git a/frontend/src/App.js b/frontend/src/App.js
index ecb3d950..41cccb54 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -5,11 +5,12 @@ import 'bootstrap-icons/font/bootstrap-icons.css';
 import MainPage from "./main_page/MainPage";
 
 function App() {
+    const theme = 'light'; ///TODO use a toggle button and update either here or within pages
 
   return (
     <div className="App">
         <Routes>
-            <Route path="/inbox" element={<MainPage/>} />
+            <Route path="/inbox" element={<MainPage theme={theme} />} />
         </Routes>
     </div>
   );
diff --git a/frontend/src/index.css b/frontend/src/index.css
index ec2585e8..90e0959a 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -11,3 +11,11 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+html,
+body,
+#root {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
\ No newline at end of file
diff --git a/frontend/src/main_page/MainPage.css b/frontend/src/main_page/MainPage.css
index e4539fc6..f8b6586b 100644
--- a/frontend/src/main_page/MainPage.css
+++ b/frontend/src/main_page/MainPage.css
@@ -1,62 +1,115 @@
-/* FOR THE TOP MENU PLACEHOLDER */
-.custom-navbar {
+@import "../theme.css";
+
+/* ──── FOR THE TOP MENU PLACEHOLDER ───────────────────────────────── */
+.light-custom-navbar {
+    /* Stronger drop shadow for Material feel: */
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
     border-radius: 0;
     align-content: center;
     padding: 20px;
-    background-color: #f1f1f1;
+    background-color: var(--light-bg-mails);
 }
-
-/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
-.row.content {
-    height: 450px
+.dark-custom-navbar {
+    /* Stronger drop shadow for Material feel: */
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
+    border-radius: 0;
+    align-content: center;
+    padding: 20px;
+    color: white;
+    background-color: #13315C;
 }
-
 /* Set gray background color and 100% height */
-.custom-side-col .custom-sidenav {
+.light-custom-sidenav {
+    /* Stronger drop shadow for Material feel: */
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
     padding-top: 20px;
     margin: 0;
     width: 100%;
     height: 100%;
     align-content: center;
-    background-color: #f1f1f1;
+    background-color: var(--light-bg-mails);
+}
+/* Set gray background color and 100% height */
+.dark-custom-sidenav {
+    /* Stronger drop shadow for Material feel: */
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
+    padding-top: 20px;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    align-content: center;
+    color: white;
+    background-color: #13315C;
+}
+
+/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
+.row.content {
+    height: 450px
+}
+
+
+
+/* ─── LIGHT THEME ───────────────────────────────── */
+.light-main-page {
+    background-color: var(--light-bg-page);
+    height: 100%;
+    margin: 0;
+    padding: 1px;
 }
 
-/* ─── MAIL CONTAINER (glass effect) ───────────────────────────────── */
-.mail-container {
+/* MAIL CONTAINER (glass effect) */
+.light-mail-container {
     /* Override default card radius to be slightly larger: */
     border-radius: 0.75rem; /* 12px */
-
     /* Stronger drop shadow for Material feel: */
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12),
     0 1px 4px rgba(0, 0, 0, 0.08);
-
     /* Ensure the card’s background is pure white: */
-    background-color: #ffffff;
-
-    /* If your parent container is light gray, you can add a thin border:
-       border: 1px solid rgba(0, 0, 0, 0.05);
-    */
-}
+    background-color: var(--light-bg-mails);
 
-.mail-container {
     padding-top: 16px;
     padding-bottom: 16px;
     padding-left: 24px;
     padding-right: 24px;
 }
 
+/* ─── DARK THEME ───────────────────────────────── */
 
+.dark-main-page {
+    background-color: var(--dark-bg-page);
+    height: 100%;
+    margin: 0;
+    padding: 1px;
+}
 
+.dark-main-layout {
+    background-color: var(--dark-bg-unread-mail-row);
+    padding: 2px;
+    border-radius: 0.75rem; /* 12px */
+}
 
+/* MAIL CONTAINER (glass effect) */
+.dark-mail-container {
+    /* Override default card radius to be slightly larger: */
+    border-radius: 0.75rem; /* 12px */
+    /* Stronger drop shadow for Material feel: */
+    box-shadow: 0 4px 12px #252525,
+    0 1px 2px #555555;
+    /* Ensure the card’s background is pure white: */
+    background-color: var(--dark-bg-mails);
 
+    padding-top: 16px;
+    padding-bottom: 16px;
+    padding-left: 24px;
+    padding-right: 24px;
+}
+
+
+/*  ─── SHARED ─────────────────────────────────  */
 /* On small screens, set height to 'auto' for sidenav and grid */
 @media screen and (max-width: 767px) {
-    .sidenav {
-        height: auto;
-        padding: 15px;
-    }
 
     .row.content {
         height: auto;
     }
-}
+}
\ No newline at end of file
diff --git a/frontend/src/main_page/MainPage.js b/frontend/src/main_page/MainPage.js
index a733d729..1e736fbe 100644
--- a/frontend/src/main_page/MainPage.js
+++ b/frontend/src/main_page/MainPage.js
@@ -5,14 +5,15 @@ import MailRow from "./mail_row/MailRow";
 import ToolBar from "./toolbar/ToolBar";
 import {useMailToolbarHandlers} from "./toolbar/useMailToolbarHandlers";
 
+
 /// TODO replace the placeholders with the real menus and real data
 // Placeholder for top menu
-const TopMenuPlaceholder = () => (
-    <div className="custom-navbar">Top menu</div>
+const TopMenuPlaceholder = ({theme}) => (
+    <div className={`${theme}-custom-navbar`}>Top menu</div>
 );
 // Placeholder for side menu
-const SideMenuPlaceholder = () => (
-    <div className="custom-sidenav">Side menu</div>
+const SideMenuPlaceholder = ({theme}) => (
+    <div className={`${theme}-custom-sidenav`}>Side menu</div>
 );
 
 const DUMMY_EMAILS = [
@@ -30,7 +31,7 @@ const DUMMY_EMAILS = [
         subject: "Meeting reminder",
         snippet: "Don’t forget the team meeting at 9AM tomorrow.",
         date: "2025/06/03",
-        is_read: false
+        is_read: true
     },
     {
         id: 3,
@@ -38,11 +39,19 @@ const DUMMY_EMAILS = [
         subject: "Your daily digest",
         snippet: "Top tech news today: React 21.0 is out...",
         date: "2025/06/02",
-        is_read: true
+        is_read: false
     },
+    {
+        id: 4,
+        sender: "bob@work.org",
+        subject: "blublublu",
+        snippet: "Don’t forget....",
+        date: "2025/06/03",
+        is_read: true
+    }
 ];
 
-const MainPage = () => {
+const MainPage = ({theme}) => {
     const allEmailIds = DUMMY_EMAILS.map((mail) => mail.id);
 
 
@@ -61,23 +70,19 @@ const MainPage = () => {
         });
     };
 
+
     return (
-        <div className="container-fluid p-3">
-            {/* ---- TOP MENU ---- */}
-            <div className="row mb-3">
-                <div className="col-12">
-                    <TopMenuPlaceholder/>
-                </div>
-            </div>
+        <div className={`container-fluid p-3 ${theme}-main-page`}>
+            {/* ---- TODO TOP MENU ---- */}
+            <div className="row mb-3"><div className="col-12"><TopMenuPlaceholder theme={theme}/></div></div>
             {/* ---- MAIN LAYOUT ---- */}
             <div className="row">
-                {/* ---- SIDE MENU ---- */}
-                <div className="col-md-3 mb-3 custom-side-col">
-                    <SideMenuPlaceholder/>
-                </div>
+                {/* ---- TODO SIDE MENU ---- */}
+                <div className="col-md-3 mb-3 custom-side-col"><SideMenuPlaceholder theme={theme}/></div>
                 {/* ---- MAIL LIST CONTAINER ---- */}
                 <div className="col-md-9 mb-3">
-                    <div className="mail-container">
+                    <div className={`${theme}-mail-container`}
+                         style={{backgroundColor: `var(--${theme}-bg-unread-mail-row)`}}>
                         {/* ---- TOOLBAR ---- */}
                         <ToolBar
                             allSelected={allSelected}
@@ -88,10 +93,10 @@ const MainPage = () => {
                             handleMarkAsRead={handlers.handleMarkAsRead}
                             handleMarkSpam={handlers.handleMarkSpam}
                         />
-
                         {/* ---- ACTUAL MAIL ROWS ---- */}
                         {DUMMY_EMAILS.map((email) => (
                             <MailRow
+                                theme={theme}
                                 key={email.id}
                                 id={email.id}
                                 sender={email.sender}
diff --git a/frontend/src/main_page/mail_row/MailRow.css b/frontend/src/main_page/mail_row/MailRow.css
index 6a46445e..e9be9fdd 100644
--- a/frontend/src/main_page/mail_row/MailRow.css
+++ b/frontend/src/main_page/mail_row/MailRow.css
@@ -1,8 +1,14 @@
-.mail-row {
-    background-color: rgba(255, 255, 255, 0.2); /* slight white tint */
-    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+@import "../../theme.css";
+
+/* ─── LIGHT THEME ───────────────────────────────── */
+.light-mail-row {
+    text-align: left;
+    background-color: var(--light-bg-mail-row);
     cursor: pointer;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+    border-bottom: 1px solid var(--light-strong-border-mail-row);
+    border-top: 1px solid var(--light-strong-border-mail-row);
+    border-left: 1px solid var(--light-strong-border-mail-row);
+    border-right: 1px solid var(--light-strong-border-mail-row);
     padding: 0.75rem 1.5rem;
     transition:
             background-color 0.2s ease,      /* fade background */
@@ -11,35 +17,58 @@
 }
 
 /* Give unread a light-gray background */
-.mail-row.unread {
-    background-color: #efefef;
-}
-
-/* If mail is unread, make subject/body bold (or a slightly different background) */
-.mail-row.unread .subject-col,
-.mail-row.unread .body-col {
+.light-mail-row.unread {
+    background-color: var(--light-bg-unread-mail-row);
     font-weight: 600;
 }
 
 /* If already read, normal text */
-.mail-row.read .subject-col,
-.mail-row.read .body-col {
+.light-mail-row.read {
+    background-color: var(--light-bg-read-mail-row);
     font-weight: 400;
 }
 
 /* On hover, lift the row and slide it in from the left */
-.mail-row:hover {
-    background-color: #f1f3f5;          /* very light gray */
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+.light-mail-row:hover {
+    background-color: var(--light-hover-bg-mail-row);
+    box-shadow: 0 2px 8px var(--light-shadow-bg-mail-row);
     transform: translateX(4px);         /* shift 4px to the right */
     border-left: 4px solid #0d6efd;     /* Bootstrap’s primary blue */
     padding-left: 1.25rem;              /* account for the new left border */
 }
 
-/* Ensure columns of text aligned to the left like in Gmail */
-.mail-row .col,
-.mail-row .col-auto {
+
+/* ─── DARK THEME ───────────────────────────────── */
+.dark-mail-row {
     text-align: left;
+    background-color: var(--dark-bg-read-mail-row);
+    cursor: pointer;
+    border-bottom: 1px solid var(--dark-strong-border-mail-row);
+    border-top: 1px solid var(--dark-strong-border-mail-row);
+    border-right: 1px solid var(--dark-strong-border-mail-row);
+    border-left: 1px solid var(--dark-strong-border-mail-row);
+    padding: 0.75rem 1.5rem;
+    transition:
+            background-color 0.2s ease,      /* fade background */
+            box-shadow 0.2s ease,             /* elevate */
+            transform 0.15s ease;             /* slide slightly */
 }
 
+.dark-mail-row.unread {
+    background-color: var(--dark-bg-unread-mail-row);
+    font-weight: 600;
+}
+
+.dark-mail-row.read {
+    font-weight: 400;
+    background-color: var(--dark-bg-read-mail-row);
+}
 
+/* On hover, lift the row and slide it in from the left */
+.dark-mail-row:hover {
+    background-color: var(--dark-hover-bg-mail-row);
+    box-shadow: 0 2px 8px var(--dark-shadow-bg-mail-row);
+    transform: translateX(4px);         /* shift 4px to the right */
+    border-left: 4px solid #0d6efd;     /* Bootstrap’s primary blue */
+    padding-left: 1.25rem;              /* account for the new left border */
+}
diff --git a/frontend/src/main_page/mail_row/MailRow.jsx b/frontend/src/main_page/mail_row/MailRow.jsx
index 44aecc69..7d51b841 100644
--- a/frontend/src/main_page/mail_row/MailRow.jsx
+++ b/frontend/src/main_page/mail_row/MailRow.jsx
@@ -3,6 +3,7 @@ import "./MailRow.css"
 
 /**
  * props:
+ *   - theme: {String} dark or light according to user prefrence
  *   - id: {Number} unique identifier for an email
  *   - sender: {String} name of the sender
  *   - subject: {string}
@@ -12,17 +13,17 @@ import "./MailRow.css"
  *   - isSelected: {boolean} (whether this row is currently checked)
  *   - onSelect: function when marking a mail as selected for mass actions on them
  */
-const MailRow = ({id, sender, subject, body, date, isRead, isSelected, onSelect}) => {
+const MailRow = ({theme, id, sender, subject, body, date, isRead, isSelected, onSelect}) => {
 
     const handleMailOpen = () => {
         console.log(">> Open Mail Row:", {id, sender, subject, body, date});
         /// TODO open the mail to read
     }
 
-    const rowClass = isRead ? "mail-row read" : "mail-row unread";
+    const rowClass = isRead ? "read" : "unread";
 
     return (
-        <div className={`row align-items-center ${rowClass} py-2`}
+        <div className={`row align-items-center ${theme}-mail-row ${rowClass} py-2`}
              onClick={handleMailOpen}>
             <div className="col-auto">
                 <input
@@ -35,14 +36,14 @@ const MailRow = ({id, sender, subject, body, date, isRead, isSelected, onSelect}
             </div>
 
             <div className="col">
-                <strong>{sender}</strong>
+                <strong style={{color: `var(--${theme}-text-color)`}}>{sender}</strong>
             </div>
 
-            <div className="col">{subject}</div>
+            <div className="col" style={{color: `var(--${theme}-text-color)`}}>{subject}</div>
 
-            <div className="col">{body}</div>
+            <div className="col" style={{color: `var(--${theme}-text-color)`}}>{body}</div>
 
-            <div className="col text-end">{date}</div>
+            <div className="col text-end" style={{color: `var(--${theme}-text-color)`}}>{date}</div>
         </div>
     );
 }
diff --git a/frontend/src/main_page/toolbar/ToolBar.css b/frontend/src/main_page/toolbar/ToolBar.css
index 2173cb70..22b513d7 100644
--- a/frontend/src/main_page/toolbar/ToolBar.css
+++ b/frontend/src/main_page/toolbar/ToolBar.css
@@ -1,16 +1,12 @@
-.mail-container .custom-checkbox {
-    margin-right: 12px;
-}
-
 .mail-container .btn:hover {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
 /* Disabled buttons - used when no mail is selected */
 .btn:disabled, .btn[disabled] {
-    background-color: #dee2e6 !important;   /* dull gray */
-    border-color: #cfd3d7 !important;       /* matching gray border */
-    color: #6c757d !important;              /* dark muted text/icon */
+    background-color: transparent !important;   /* dull gray */
+    border-color: var(--light-disabled-icon-border-toolbar) !important;       /* matching gray border */
+    color: var(--light-disabled-icon-text-toolbar) !important;              /* dark muted text/icon */
     opacity: 1 !important;                  /* remove Bootstrap fade */
     box-shadow: none !important;           /* no elevation */
     cursor: not-allowed !important;        /* no cursor */
@@ -19,4 +15,9 @@
 /* Disabled icon - used when no mail is selected */
 .btn:disabled i {
     opacity: 0.6;
+}
+
+/* New rule to align the toolbar checkbox */
+.mail-toolbar-alignment {
+    padding-left: 24px; /* Matches the padding-left of .light-mail-container and .dark-mail-container */
 }
\ No newline at end of file
diff --git a/frontend/src/main_page/toolbar/ToolBar.jsx b/frontend/src/main_page/toolbar/ToolBar.jsx
index 6f2d073e..8f1ed821 100644
--- a/frontend/src/main_page/toolbar/ToolBar.jsx
+++ b/frontend/src/main_page/toolbar/ToolBar.jsx
@@ -20,55 +20,52 @@ const ToolBar = ({
     }, [allSelected, anySelected]);
 
     return (
-        <div className="col-md-9 mb-3">
-            <div className="d-flex align-items-center mb-2">
-                {/* SELECT ALL */}
-                <div className="col-auto custom-checkbox">
-                    <input
-                        ref={selectAllRef}
-                        className="custom-checkbox"
-                        type="checkbox"
-                        checked={allSelected}
-                        onChange={handleSelectAll}
-                    />
-                </div>
-                {/* --- REFRESH --- */}
-                <button
-                    className="btn btn-outline-secondary me-2"
+        // The d-flex container is what we want to directly style.
+        // We removed the outer col-md-9 mb-3 because it was the wrong level of abstraction here.
+        <div className="d-flex align-items-center mb-2 mail-toolbar-alignment"> {/* Add a new class for styling */}
+            {/* SELECT ALL */}
+            <div className="col-auto" style={{marginRight: '12px'}}>
+                <input
+                    ref={selectAllRef}
+                    type="checkbox"
+                    checked={allSelected}
+                    onChange={handleSelectAll}
+                />
+            </div>
+            {/* --- REFRESH --- */}
+            <button className="btn btn-info btn-sm me-2"
                     onClick={handleRefresh}
                     title="Refresh"
-                >
-                    <i className="bi bi-arrow-clockwise"></i>
-                </button>
-                {/* --- DELETE --- */}
-                <button
-                    className="btn btn-outline-danger me-2"
-                    onClick={handleDelete}
-                    disabled={!anySelected}
-                    title="Delete"
-                >
-                    <i className="bi bi-trash"></i>
-                </button>
-                {/* MARK READ */}
-                <button
-                    className="btn btn-outline-primary me-2"
-                    onClick={handleMarkAsRead}
-                    disabled={!anySelected}
-                    title="Mark as Read"
-                >
-                    <i className="bi bi-envelope-open"></i>
-                </button>
-                {/* REPORT SPAM */}
-                <button
-                    className="btn btn-outline-warning"
-                    onClick={handleMarkSpam}
-                    disabled={!anySelected}
-                    title="Report Spam"
-                >
-                    <i className="bi bi-exclamation-octagon"></i>
-                </button>
-
-            </div>
+            >
+                <i className="bi bi-arrow-clockwise"></i>
+            </button>
+            {/* MARK READ */}
+            <button
+                className="btn btn-success btn-sm me-2"
+                onClick={handleMarkAsRead}
+                disabled={!anySelected}
+                title="Mark as Read"
+            >
+                <i className="bi bi-envelope-open"></i>
+            </button>
+            {/* --- DELETE --- */}
+            <button
+                className="btn btn-danger btn-sm me-2"
+                onClick={handleDelete}
+                disabled={!anySelected}
+                title="Delete"
+            >
+                <i className="bi bi-trash"></i>
+            </button>
+            {/* REPORT SPAM */}
+            <button
+                className="btn btn-warning btn-sm"
+                onClick={handleMarkSpam}
+                disabled={!anySelected}
+                title="Report Spam"
+            >
+                <i className="bi bi-exclamation-octagon"></i>
+            </button>
         </div>
     )
 }
diff --git a/frontend/src/theme.css b/frontend/src/theme.css
new file mode 100644
index 00000000..6c36e47c
--- /dev/null
+++ b/frontend/src/theme.css
@@ -0,0 +1,37 @@
+:root {
+    /* ----- Light theme palette ----- */
+    /* FROM DARKEST TO LIGHTEST: fdfdfd eeeeee f4f4f4
+    /* page */
+    --light-bg-page: #f4f4f4;
+    --light-bg-mails: #fdfdfd;
+    --light-text-color: #000000;
+    /* mail rows */
+    --light-bg-mail-row: rgba(255, 255, 255, 0.2);
+    --light-strong-border-mail-row: rgba(255, 255, 255, 0.3);
+    --light-weak-border-mail-row: rgba(0, 0, 0, 0.08);
+    --light-bg-unread-mail-row: #fdfdfd;
+    --light-bg-read-mail-row: #eeeeee;
+    --light-hover-bg-mail-row: #f1f3f5;
+    --light-shadow-bg-mail-row: rgba(0, 0, 0, 0.12);
+    /* tool bar */
+    --light-disabled-icon-bg-toolbar: #dee2e6;
+    --light-disabled-icon-border-toolbar: #cfd3d7;
+    --light-disabled-icon-text-toolbar: #6c757d;
+
+    /* ----- Dark theme palette ----- */
+    /* FROM DARKEST TO LIGHTEST: 121212 161616 272727
+    /* page */
+    --dark-bg-page: #121212;
+    --dark-bg-mails: #161616;
+    --dark-text-color: #eef4ed;
+    /* mail rows */
+    --dark-bg-unread-mail-row: #272727;
+    --dark-bg-read-mail-row: #161616;
+
+    --dark-strong-border-mail-row: rgba(255, 255, 255, 0.3); /* or pick a darker/lighter tone if desired */
+    --dark-weak-border-mail-row: rgba(0, 0, 0, 0.08);
+
+    /* Hover/background effects for dark rows */
+    --dark-hover-bg-mail-row: rgba(255, 255, 255, 0.1);     /* subtle light tint on hover */
+    --dark-shadow-bg-mail-row: rgba(0, 0, 0, 0.3);
+}
\ No newline at end of file