diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 37b2228..58c5475 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -7,19 +7,23 @@ import HomePage from './pages/HomePage';
 import FormPage from  './pages/FormPage';
 import DashboardPage from  './pages/DashboardPage';
 import AboutPage from  './pages/AboutPage';
-import ContactPage from  './pages/ContactPage';
+import PricingPage from  './pages/PricingPage';
 
 import './styles/styles.css'
 import './styles/home-page.css'
 import './styles/form-page.css'
 import './styles/dashboard-page.css'
 import './styles/about-page.css'
+import './styles/pricing-page.css'
+
 import './styles/contact-page.css'
+
 import './styles/specific-component/resume-template.css'
 
 // Defines what Page Component appears for each of the 5 webpages 
 // based on the current path
 function App() {
+    // Initialize theme based on what user set. If new user, default to light
     const [theme, setTheme] = useState(() => {
         return localStorage.getItem("theme") || "light";
     });
@@ -30,8 +34,14 @@ function App() {
         localStorage.setItem("theme", theme);
     }, [theme]);
 
+    // Cycles through: light -> dark -> cream -> light
     const toggleTheme = () => {
-        setTheme(prev => prev === "light" ? "dark" : "light");
+        setTheme(prev => {
+            if (prev === "light") return "cream";
+            if (prev === "cream") return "midnight"; // New step!
+            if (prev === "midnight") return "dark";
+            return "light";
+        });
     };
 
     return (
@@ -43,7 +53,7 @@ function App() {
             <Route path="/form" element={<FormPage />} />
             <Route path="/dashboard" element={<DashboardPage />} />
             <Route path="/about" element={<AboutPage />} />
-            <Route path="/contact" element={<ContactPage />} />
+            <Route path="/pricing" element={<PricingPage />} />
         </Routes>
     </div>
     )
diff --git a/frontend/src/components/CallToAction.jsx b/frontend/src/components/CallToAction.jsx
new file mode 100644
index 0000000..0c166ee
--- /dev/null
+++ b/frontend/src/components/CallToAction.jsx
@@ -0,0 +1,24 @@
+import { useNavigate } from 'react-router-dom'
+
+function CallToAction() {
+    const navigate = useNavigate()
+
+    return  (
+        <div id="call-to-action-area">
+            <h2 id="ready-to-get-started-h2">Ready to get started?</h2>
+            <p id="call-to-action-p-top">Make Resumes. Prep for Interviews. Get Hired.</p>
+            <p id="call-to-action-p-bottom">Its the 3 step Method</p>
+            <button 
+                id="call-to-action-sign-up-button" 
+                onClick={() => {
+                    navigate('/form');
+                    window.scrollTo(0, 0);
+                }}
+            >
+                Sign Up Now
+            </button>
+        </div>
+    );
+}
+
+export default CallToAction;
\ No newline at end of file
diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx
index 31eddc1..52511cd 100644
--- a/frontend/src/components/Footer.jsx
+++ b/frontend/src/components/Footer.jsx
@@ -23,11 +23,20 @@ function Footer() {
                     <p>Ved Patel</p>
                 </div>
                 <div>
-                    <h2>Socials</h2>
+                    <h2>Socials/Contacts</h2>
                     <p>LinkedIn</p>
                     <p>Email</p>
-                    <p></p>
-                    <p></p>
+                    <p>GitHub</p>
+                    <p>Reddit</p>
+                    <p>Discord</p>
+                </div>
+                <div>
+                    <h2>Extras</h2>
+                    <p>Pricing</p>
+                    <p>About</p>
+                    <p>Terms of Service</p>
+                    <p>Privacy Policy</p>
+                    <p>FAQs</p>
                 </div>
             </div>
             <p id="copyright">
diff --git a/frontend/src/components/HomeStatistics.jsx b/frontend/src/components/HomeStatistics.jsx
new file mode 100644
index 0000000..a5745a5
--- /dev/null
+++ b/frontend/src/components/HomeStatistics.jsx
@@ -0,0 +1,53 @@
+function HomeStatistics() {
+    return  (
+        <div id="home-statistics-area">
+            <div id="home-users-count-subarea">
+                <h2 id="home-statistics-title-h2">Real Success</h2>
+                <div id="home-users-count">
+                    <h4>Users</h4>
+                    <p>0</p>
+                </div>
+            </div>
+
+            <div id="home-statistics">
+                <div id="home-impact-statistics-subarea">
+                    <h3 id="home-impact-statistics-h3">Impact Statistics</h3>
+                    <div id="impact-statistics-data">
+                        <div id="home-resumes-sent">
+                            <h4>Resumes Sent</h4>
+                            <p>0</p>
+                        </div>
+                        <div id="home-interviews-held">
+                            <h4>Interviews Held</h4>
+                            <p>0</p>
+                        </div>
+                        <div id="home-jobs-offered">
+                            <h4>Jobs Offered</h4>
+                            <p>0</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div id="home-impact-statistics-subarea">
+                    <h3 id="home-the-method-statistics-h3">The Method Statistics</h3>
+                    <div id="home-the-method-statistics-data">
+                        <div id="home-resumes-optimized">
+                            <h4>Resumes Optimized</h4>
+                            <p>0</p>
+                        </div>
+                        <div id="home-hours-practicing-interviews">
+                            <h4>Hours Practicing Interviews</h4>
+                            <p>0</p>
+                        </div>
+                        <div id="home-jobs-found">
+                            <h4>Jobs Recommended</h4>
+                            <p>0</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default HomeStatistics;
\ No newline at end of file
diff --git a/frontend/src/components/NavBar.jsx b/frontend/src/components/NavBar.jsx
index 09503fe..c5f9633 100644
--- a/frontend/src/components/NavBar.jsx
+++ b/frontend/src/components/NavBar.jsx
@@ -44,10 +44,10 @@ function NavBar({ toggleTheme, theme }) {
 
                 <li>
                     <NavLink
-                        to="/contact"
+                        to="/pricing"
                         className={({ isActive }) => isActive ? 'active-link' : undefined}
                     >
-                        Contact
+                        Pricing
                     </NavLink>
                 </li>
             </ul>
@@ -58,7 +58,10 @@ function NavBar({ toggleTheme, theme }) {
                 </div>  
                 <div id="light-dark-toggle">
                     <button onClick={toggleTheme}>
-                        {theme === "light" ? "Dark Mode" : "Light Mode"}
+                        {theme === "light" && "Switch to Cream"}
+                        {theme === "cream" && "Switch to Midnight"}
+                        {theme === "midnight" && "Switch to Dark"}
+                        {theme === "dark" && "Switch to Light"}
                     </button>
                 </div>
             </div>
diff --git a/frontend/src/components/RecommendProvr.jsx b/frontend/src/components/RecommendProvr.jsx
new file mode 100644
index 0000000..0f0eb95
--- /dev/null
+++ b/frontend/src/components/RecommendProvr.jsx
@@ -0,0 +1,16 @@
+function RecommendProvr() {
+    return  (
+        <div id="recommend-provr-area">
+            <h2 id="try-provr-h2">Try Provr!</h2>
+            <p id="recommend-provr-p">Want to master a new skill or improve your existing one? Provr focus on real 
+                learning as opposed to shallow AI learning. It focuses on building real 
+                connections and skills that take time to devleop.
+            </p>
+            <a href="https://www.provr.me/" target="_blank" rel="noopener noreferrer" id="visit-provr-link">
+                <button id="visit-provr-button">Visit Provr</button>
+            </a>
+        </div>
+    );
+}
+
+export default RecommendProvr;
\ No newline at end of file
diff --git a/frontend/src/pages/AboutPage.jsx b/frontend/src/pages/AboutPage.jsx
index c82befa..48db944 100644
--- a/frontend/src/pages/AboutPage.jsx
+++ b/frontend/src/pages/AboutPage.jsx
@@ -1,5 +1,3 @@
-import NavBar from "../components/NavBar";
-
 function AboutPage() {
     return  (
         <div>
diff --git a/frontend/src/pages/ContactPage.jsx b/frontend/src/pages/ContactPage.jsx
index 6f3c654..625b340 100644
--- a/frontend/src/pages/ContactPage.jsx
+++ b/frontend/src/pages/ContactPage.jsx
@@ -1,5 +1,3 @@
-import NavBar from "../components/NavBar";
-
 function ContactPage() {
     return  (
         <div>
diff --git a/frontend/src/pages/DashboardPage.jsx b/frontend/src/pages/DashboardPage.jsx
index 43af1b9..41a945e 100644
--- a/frontend/src/pages/DashboardPage.jsx
+++ b/frontend/src/pages/DashboardPage.jsx
@@ -1,4 +1,3 @@
-import NavBar from "../components/NavBar";
 import FileUpload from "../components/FileUpload";
 
 function DashboardPage() {
diff --git a/frontend/src/pages/FAQs.jsx b/frontend/src/pages/FAQs.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/pages/FormPage.jsx b/frontend/src/pages/FormPage.jsx
index afa9362..4a035ab 100644
--- a/frontend/src/pages/FormPage.jsx
+++ b/frontend/src/pages/FormPage.jsx
@@ -1,4 +1,3 @@
-import NavBar from "../components/NavBar";
 import Form from "../components/Form";
 
 function FormPage() {
diff --git a/frontend/src/pages/HomePage.jsx b/frontend/src/pages/HomePage.jsx
index 1e12c3a..8c7cd63 100644
--- a/frontend/src/pages/HomePage.jsx
+++ b/frontend/src/pages/HomePage.jsx
@@ -1,15 +1,20 @@
-import NavBar from "../components/NavBar";
 import HeroArea from "../components/HeroArea";
+import HowItWorks from "../components/HowItWorks";
+import HomeStatistics from "../components/HomeStatistics";
 import Reviews from "../components/Reviews";
+import RecommendProvr from "../components/RecommendProvr";
+import CallToAction from "../components/CallToAction";
 import Footer from "../components/Footer";
-import HowItWorks from "../components/HowItWorks";
 
 function HomePage() {
     return  (
         <div>
             <HeroArea />
             <HowItWorks />
+            <HomeStatistics />
             <Reviews />
+            <RecommendProvr />
+            <CallToAction />
             <Footer />
         </div>
     );
diff --git a/frontend/src/pages/PricingPage.jsx b/frontend/src/pages/PricingPage.jsx
new file mode 100644
index 0000000..0b996a7
--- /dev/null
+++ b/frontend/src/pages/PricingPage.jsx
@@ -0,0 +1,53 @@
+function PricingPage() {
+    return  (
+        <div id="pricing-page">
+            <h1 id="pricing-page-h1">Pricing Page</h1>
+            <div id="pricing-tiers-subarea">
+                <div id="pricing-free-tier">
+                    <h2 className="pricing-h2">Free</h2>
+                    <p className="pricing-p">Basic features for everyone</p>
+                    <p className="pricing-price-p">$0/month</p>
+                    <div>
+                        <ul>
+                            <li>Basic access to all features</li>
+                            <li>Community support</li>
+                            <li>Interview Prep</li>
+                            <li>Job Apply</li>
+                            <li>WIP</li>
+                        </ul>
+                    </div>
+                </div>
+                <div id="pricing-student-tier">
+                    <h2 className="pricing-h2">Student</h2>
+                    <p className="pricing-p">Discounted pricing for students</p>
+                    <p className="pricing-price-p">$2.49/month</p>
+                    <div>
+                        <ul>
+                            <li>Everything in free plan +</li>
+                            <li>Store 10 more resumes</li>
+                            <li>Priority support</li>
+                            <li>Feature requests</li>
+                            <li>WIP</li>
+                        </ul>
+                    </div>
+                </div>
+                <div id="pricing-premium-tier">
+                    <h2 className="pricing-h2">Premium</h2>
+                    <p className="pricing-p">All features for professionals</p>
+                    <p className="pricing-price-p">$6.99/month</p>
+                    <div>
+                        <ul>
+                            <li>Everything in free plan +</li>
+                            <li>Store 15 more resumes</li>
+                            <li>Use more optimization options</li>
+                            <li>5 more resume templates</li>
+                            <li>WIP</li>
+                        </ul>
+                    </div>
+                </div>
+                        </div>
+            </div>
+    );
+}
+
+export default PricingPage;
\ No newline at end of file
diff --git a/frontend/src/pages/PrivacyPolicyPage.jsx b/frontend/src/pages/PrivacyPolicyPage.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/pages/TermsOfServicePage.jsx b/frontend/src/pages/TermsOfServicePage.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/styles/home-page.css b/frontend/src/styles/home-page.css
index b5f21b4..8b9f670 100644
--- a/frontend/src/styles/home-page.css
+++ b/frontend/src/styles/home-page.css
@@ -37,8 +37,11 @@
         background-color: var(--main-accent-color-activte);
     }
 
+
+/* How It Works Area */
 #how-it-works {
-    background-color: var(--tinted-bg-color);
+    padding: 32px;
+    background-color: var(--super-tinted-area-main-color);
 }
     
 #how-it-works-method-section {
@@ -47,6 +50,7 @@
 }
 
 #how-it-works-title{
+    font-size: 4rem;
     text-align: center;
     margin-top: 2rem;
 }
@@ -68,7 +72,7 @@
     width: 100%;
     max-width: 1200px;
     margin: 0 auto;
-    background-color: var(--tinted-bg-color);
+    background-color: var(--super-tinted-area-main-color);
 }
 
 .steps-box {
@@ -96,6 +100,146 @@
         cursor: pointer;
     }
 
+
+/* Home Statistics Area */
+#home-statistics-area {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    margin: 64px 0;
+    gap: 32px
+}
+
+#home-users-count-subarea {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+    /* Style h3 */
+    #home-statistics-area h3 {
+        font-size: 2rem;
+        margin: 8px;
+        padding: 0;
+    }
+
+    /* Style all h4 */
+    #home-statistics-area h4 {
+        font-size: 1.25rem;
+        margin: 8px;
+        padding: 0;
+    }
+
+    /* Style all paragraphs */
+    #home-statistics-area p {
+        font-size: 1.5rem;
+        margin: 8px;
+        padding: 0;
+    }
+
+#home-statistics-title-h2 {
+    font-size: 4rem;
+    margin: 8px;
+    padding: 0;
+}
+
+#home-users-count {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-size: 2rem;
+    width: 50%;
+    height: auto;
+    margin: 8px;
+    padding: 8px;
+    background-color: var(--card-bg);
+    border: 4px var(--box-border-color) solid;
+    border-radius: 10px;
+}
+
+#home-statistics {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    width: 100%;
+    gap: 32px;
+}
+
+    #home-impact-statistics-subarea {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+    }
+
+        #home-impact-statistics-h3 {
+            font-size: 2rem;
+            margin: 8px;
+            padding: 0;
+        }
+
+            #impact-statistics-data {
+                display: flex;
+                flex-direction: row;
+                justify-content: space-around;
+                width: 60%;
+            }
+
+            #impact-statistics-data div {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                width: 20%;
+                height: auto;
+                margin: 8px;
+                padding: 8px;
+                background-color: var(--card-bg);
+                border: 4px var(--box-border-color) solid;
+                border-radius: 10px;
+            }
+
+    #home-the-method-statistics-subarea {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+    }
+
+        #home-the-method-statistics-h3 {
+            font-size: 2rem;
+            margin: 8px;
+            padding: 0;
+        }
+
+            #home-the-method-statistics-data {
+                display: flex;
+                flex-direction: row;
+                justify-content: space-around;
+                width: 75%;
+            }
+
+            #home-the-method-statistics-data div {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                width: 20%;
+                height: auto;
+                margin: 8px;
+                padding: 8px;
+                background-color: var(--card-bg);
+                border: 4px var(--box-border-color) solid;
+                border-radius: 10px;
+            }
+
+
 /* Reviews Area */
 #reviews-area {
     display: flex;
@@ -155,6 +299,96 @@
     margin: 0;
 }
 
+/* Recommend Provr Area */
+#recommend-provr-area {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 32px;
+    gap: 16px;
+}
+
+#try-provr-h2 {
+    font-size: 4rem;
+    margin: 8px;
+    padding: 0;
+}
+
+#recommend-provr-p {
+    font-size: 1.5rem;
+    margin: 8px;
+    padding: 0;
+    max-width: 800px;
+    text-align: center;
+}
+
+#visit-provr-link {
+    text-decoration: none;
+}
+
+    #visit-provr-button {
+        all: unset;
+        text-align: center;
+        color: var(--text-color);
+        width: 15rem;
+        height: 5rem;
+        border-radius: 10px;
+        cursor: pointer;
+        font-size: 2rem;
+        background-color: var(--main-accent-color);
+    }
+
+        #visit-provr-button:active {
+            transform: scale(0.95);
+            background-color: var(--main-accent-color-activte);
+        }
+
+/* Call To Action Area */
+#call-to-action-area {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 32px;
+    background-color: var(--super-tinted-area-main-color);
+}
+
+#ready-to-get-started-h2 {
+    font-size: 4rem;
+    margin: 8px;
+    padding: 0;
+}
+
+#call-to-action-p-top {
+    font-size: 1.5rem;
+    margin: 8px;
+    padding: 0;
+}
+
+#call-to-action-p-bottom {
+    font-size: 1.5rem;
+    margin: 8px;
+    padding: 0;
+}
+
+#call-to-action-sign-up-button {
+    all: unset;
+    text-align: center;
+    color: var(--text-color);
+    width: 15rem;
+    height: 5rem;
+    border-radius: 10px;
+    cursor: pointer;
+    font-size: 2rem;
+    background-color: var(--main-accent-color);
+}
+
+    #call-to-action-sign-up-button:active {
+        transform: scale(0.95);
+        background-color: var(--main-accent-color-activte);
+    }
+
 /* Footer Area */
 #footer-information-area {
     display: flex;
diff --git a/frontend/src/styles/pricing-page.css b/frontend/src/styles/pricing-page.css
new file mode 100644
index 0000000..5241b77
--- /dev/null
+++ b/frontend/src/styles/pricing-page.css
@@ -0,0 +1,41 @@
+/* Pricing Page Area */
+#pricing-page {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 2rem;
+}
+
+#pricing-page-h1 {
+    font-size: 3.5rem;
+    text-align: center;
+    margin-top: 2rem;
+}
+
+#pricing-tiers-subarea {
+    width: 50%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 2rem;
+}
+
+    #pricing-free-tier, #pricing-student-tier, #pricing-premium-tier {
+        width: 300px;
+        height: 100%;
+        background-color: var(--card-bg);
+        border: solid 2px var(--main-accent-color);
+        padding: 2rem;
+        border-radius: 8px;
+        margin: 1rem;
+    }
+
+        #pricing-free-tier:hover, #pricing-student-tier:hover, #pricing-premium-tier:hover {
+            background-color: var(--main-accent-color);
+            color: var(--tinted-bg-color);
+            cursor: pointer;
+            transition: background-color 0.3s ease, color 0.3s ease;
+        }
+
diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css
index c820158..5b020f9 100644
--- a/frontend/src/styles/styles.css
+++ b/frontend/src/styles/styles.css
@@ -1,4 +1,4 @@
-/* Light Mode & Dark Mode colors variables.
+/* Light Mode(Default) & Dark Mode colors.
    Also sets html, body, and root defaults & standardized stylings. */
 :root {
     /* Backgrounds */
@@ -43,7 +43,75 @@
     background-color: var(--tinted-bg-color);
 }
 
-/* Dark Mode(WIP) */
+/* Cream Mode */
+[data-theme="cream"] {
+    /* Backgrounds: Warm Peach/Sand */
+    --true-bg-color: #F9F1E7;
+    --tinted-bg-color: #EFE4D8;
+
+    /* Text */
+    --text-color: #4A3B31;
+
+    /* Cards & Areas */
+    --card-bg: #FDF9F3;
+    --card-bg-hover: #F5EBE0;
+    --tinted-card-bg: #E8DDD2;
+    --tinted-card-bg-hover: #DCCFBF;
+    --super-tinted-area-main-color: #DCCFBF;
+
+    /* Accent */
+    --main-accent-color: #5B85AA;       
+    --main-accent-color-activte: #466A8D;
+
+    /* Borders */
+    --box-border-color: #D6C8B8;
+    
+    /* Inputs */
+    --input-bg-color: #FFF;
+    --input-border-color: #D6C8B8;
+    --input-focus-border-color: #5B85AA;
+
+    /* Force UI elements to light-mode style */
+    color-scheme: light;
+}
+
+/* Global stylings */
+* {
+    box-sizing: border-box;
+}
+
+/* Midnight Blue Mode */
+[data-theme="midnight"] {
+    /* Backgrounds: Deep charcoal-blue */
+    --true-bg-color: #242933;           /* Dark but clearly blue-grey */
+    --tinted-bg-color: #2E3440;         /* Soft "Nord" blue-dark */
+
+    /* Text: Snow White/Frost */
+    --text-color: #ECEFF4;
+
+    /* Cards */
+    --card-bg: #3B4252;
+    --card-bg-hover: #434C5E;
+    --tinted-card-bg: #3B4252;
+    --tinted-card-bg-hover: #4C566A;
+    --super-tinted-area-main-color: #434C5E;
+
+    /* Accent: Electric Blue (Vibrant against the dark blue) */
+    --main-accent-color: #88C0D0;
+    --main-accent-color-activte: #81A1C1;
+
+    /* Borders */
+    --box-border-color: #4C566A;
+
+    /* Inputs */
+    --input-bg-color: #3B4252;
+    --input-border-color: #4C566A;
+    --input-focus-border-color: #88C0D0;
+
+    color-scheme: dark; /* Even though it's blue, it's dark enough for dark scrollbars */
+}
+
+/* Dark Mode */
 [data-theme="dark"] {
     /* Backgrounds */
     --true-bg-color: #121212;
@@ -58,6 +126,7 @@
     --tinted-card-bg: #2a2a2a;
     --tinted-card-bg-hover: #333;
     --tinted-card-shadowcolor-hover: rgb(0 0 0 / 40%);
+    --super-tinted-area-main-color: #3f3c3c;
 
     /* Accent colors */
     --main-accent-color: #4ea8ff;
@@ -76,10 +145,6 @@
     --input-box-shadow-color: rgb(78 168 255 / 35%);
 }
 
-/* Global stylings */
-* {
-    box-sizing: border-box;
-}
 
 /* More global stylings */
 html, body, #root {