diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index da72dec..b5e89c7 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -14,6 +14,7 @@ import TermsOfServicePage from  './pages/TermsOfServicePage';
 import PrivacyPolicyPage from  './pages/PrivacyPolicyPage';
 import FAQsPage from  './pages/FAQsPage';
 import LoginPage from './pages/LoginPage';
+import SignupPage from './pages/SignupPage';
 
 
 import './styles/styles.css'
@@ -29,6 +30,7 @@ import './styles/terms-of-service-page.css'
 import './styles/privacy-policy-page.css'
 import './styles/faq-page.css'
 import './styles/login-page.css'
+import './styles/signup-page.css'
 
 import './styles/specific-component/resume-template.css'
 
@@ -67,6 +69,7 @@ function App() {
             <Route path="/privacy-policy" element={<PrivacyPolicyPage />} />
             <Route path="/faqs" element={<FAQsPage />} />
             <Route path="/login" element={<LoginPage />} />
+            <Route path="/signup" element={<SignupPage />} />
         </Routes>
     </div>
     )
diff --git a/frontend/src/components/Form.jsx b/frontend/src/components/Form.jsx
index 5f3c29b..809ac22 100644
--- a/frontend/src/components/Form.jsx
+++ b/frontend/src/components/Form.jsx
@@ -56,6 +56,8 @@ function Form() {
     
     // "generateResume" usestate is used to store resume JSON data from endpoint
     const [generatedResume, setGeneratedResume] = useState(null);
+    const [submitError, setSubmitError] = useState("");
+    const [isSubmitting, setIsSubmitting] = useState(false);
 
     /* 
         When submit button is clicked it capture all data stored in input boxes.
@@ -69,6 +71,8 @@ function Form() {
     */
     const handleSubmit = async (e) => {
         e.preventDefault();
+        setSubmitError("");
+        setIsSubmitting(true);
         // console.log("Passed this") // used for dev logs
 
         const payload = {
@@ -83,11 +87,20 @@ function Form() {
             });
 
             const data = await response.json();
-            console.log(data) // used for dev logs
-            setGeneratedResume(data);
-            console.log(data) // used for dev logs
+
+            if (!response.ok) {
+                setGeneratedResume(null);
+                setSubmitError(data.detail || data.error || "Resume generation failed.");
+                return;
+            }
+
+            setGeneratedResume(data.resume);
         } catch (err) {
+            setGeneratedResume(null);
+            setSubmitError("Could not reach the backend. Make sure Docker is running and the API is available at http://localhost:8000.");
             console.error("Error submitting resume:", err);
+        } finally {
+            setIsSubmitting(false);
         }
     };
 
@@ -95,6 +108,11 @@ function Form() {
     return (
         <div id="form-page">
             <h1>Resume Maker</h1>
+            {submitError && (
+                <div role="alert" className="form-error-message" aria-live="polite">
+                    {submitError}
+                </div>
+            )}
                 <form id="resume-form" onSubmit={handleSubmit}>
                     {/* Basic Information */}
                     <h2>Basic Information</h2>
@@ -189,7 +207,7 @@ function Form() {
                             });
                             }}
                         >
-                            Add Section
+                            +
                         </button>
                     </div>
 
@@ -319,7 +337,7 @@ function Form() {
                             });
                             }}
                         >
-                            Add Section
+                            +
                         </button>
                     </div>
 
@@ -450,7 +468,7 @@ function Form() {
                             });
                             }}
                         >
-                            Add Section
+                            +
                         </button>
 
                     </div>
@@ -552,7 +570,7 @@ function Form() {
                         });
                         }}
                     >
-                        Add Section
+                        +
                     </button>
                     </div>
 
@@ -624,7 +642,7 @@ function Form() {
                             });
                             }}
                         >
-                            Add Section
+                            +
                         </button>
                     </div>
 
@@ -697,11 +715,13 @@ function Form() {
                             });
                             }}
                         >
-                            Add Section
+                            +
                         </button>
                     </div>
 
-                    <button type="submit">Submit Resume</button>
+                    <button type="submit" disabled={isSubmitting}>
+                        {isSubmitting ? "Submitting..." : "Submit Resume"}
+                    </button>
                 </form>
                                 
                 {/* Once "generate" usestate updates this will generate a resume at bottom of page */}
diff --git a/frontend/src/pages/AboutPage.jsx b/frontend/src/pages/AboutPage.jsx
index 4908aa7..41d64f3 100644
--- a/frontend/src/pages/AboutPage.jsx
+++ b/frontend/src/pages/AboutPage.jsx
@@ -1,36 +1,60 @@
 function AboutPage() {
     return  (
-        <div id="about-page">
+        <main id="about-page">
             <div id="about-page-content">
-                <a id="go-back-home" href="/">Go back home</a>
-                <h1>About The Method</h1>
-                <h2>Who</h2>
-                <p>Made by a team of 2nd and 3rd year Computer Science students at UCI.</p>
-                <h2>What</h2>
-                <p>The Method is an all-in-one platform for anyone to take control of their job search and career development. We have 4 main features for users to utilize:</p>
-                <ul>
-                    <li>#1) Resume Builder</li>
-                    <li>#2) Interview Practice</li>
-                    <li>#3) Job Search Tools</li>
-                    <li>#4) Progress Tracking</li>
-                </ul>
-                <h2>When</h2>
-                <p>Full version 1.0 releases around Spring 2026. The dates are still being finalized, but our team of 5 is working hard to make it this possible.</p>
-                <h2>Where</h2>
-                <p>Based in Irvine, California, United States</p>
-                <h2>Why</h2>
-                <p>Because job searching is hard and we want to make it easier for everyone. Creating and optimizing resumes is challenging so we built out templates that
-                    can auto generate resumes based on the your input. We also wanted to provide a platform for users to practice their interview skills and get feedback on their
-                    performance. We also wanted to provide a platform for users to connect with mentors and other professionals in their field.
-                </p>
-                <h2>How</h2>
-                <p>For the technical people interested we are using React + Vite, Python + FastAPI, PostgreSQL + SQLAlchemy, Docker, Git, and (WIP).
-                    If you want to join our team please reach out to us (WIP). We are always looking for talented and passionate individuals to join our team.
-                    We accept all forms of experience for different roles such as developer, designer, marketer, and more. We are a remote team so you can work
-                    from anywhere in the world. We also have a flexible schedule so you can work on your own time. We are a fun and supportive team that values diversity and inclusion.
-                </p>
+                <section className="about-card about-intro-card">
+                    <h1>About The Method</h1>
+                    <p>
+                        The Method is designed to help people create, optimize, practice, and track their job search in one place.
+                    </p>
+                </section>
+
+                <section className="about-card">
+                    <h2>Who</h2>
+                    <p>Made by a team of 2nd and 3rd year Computer Science students at UCI.</p>
+                </section>
+
+                <section className="about-card">
+                    <h2>What</h2>
+                    <p>The Method is an all-in-one platform for anyone to take control of their job search and career development. We have 4 main features for users to utilize:</p>
+                    <ul className="about-card-list">
+                        <li>#1) Resume Builder</li>
+                        <li>#2) Interview Practice</li>
+                        <li>#3) Job Search Tools</li>
+                        <li>#4) Progress Tracking</li>
+                    </ul>
+                </section>
+
+                <section className="about-card">
+                    <h2>When</h2>
+                    <p>Full version 1.0 releases around Spring 2026. The dates are still being finalized, but our team of 5 is working hard to make it this possible.</p>
+                </section>
+
+                <section className="about-card">
+                    <h2>Where</h2>
+                    <p>Based in Irvine, California, United States</p>
+                </section>
+
+                <section className="about-card">
+                    <h2>Why</h2>
+                    <p>
+                        Because job searching is hard and we want to make it easier for everyone. Creating and optimizing resumes is challenging so we built out templates that
+                        can auto generate resumes based on the your input. We also wanted to provide a platform for users to practice their interview skills and get feedback on their
+                        performance. We also wanted to provide a platform for users to connect with mentors and other professionals in their field.
+                    </p>
+                </section>
+
+                <section className="about-card">
+                    <h2>How</h2>
+                    <p>
+                        For the technical people interested we are using React + Vite, Python + FastAPI, PostgreSQL + SQLAlchemy, Docker, Git, and (WIP).
+                        If you want to join our team please reach out to us (WIP). We are always looking for talented and passionate individuals to join our team.
+                        We accept all forms of experience for different roles such as developer, designer, marketer, and more. We are a remote team so you can work
+                        from anywhere in the world. We also have a flexible schedule so you can work on your own time. We are a fun and supportive team that values diversity and inclusion.
+                    </p>
+                </section>
             </div>
-        </div>
+        </main>
     );
 }
 
diff --git a/frontend/src/pages/NewsPage.jsx b/frontend/src/pages/NewsPage.jsx
index cb0495e..4b260b7 100644
--- a/frontend/src/pages/NewsPage.jsx
+++ b/frontend/src/pages/NewsPage.jsx
@@ -1,3 +1,5 @@
+import { Link } from "react-router-dom";
+
 function News() {
     const updates = [
         {
@@ -14,49 +16,42 @@ function News() {
             body: "Example text of what this thing does.",
             date: "March 11, 2026 @ 3:00 PM",
         },
-        {
-            id: "idhere2",
-            title: "Title goes here",
-            caption: "Caption would go here",
-            body: "Example text of what this thing does.",
-            date: "March 11, 2026 @ 3:00 PM",
-        },
-        {
-            id: "idhere2",
-            title: "Title goes here",
-            caption: "Caption would go here",
-            body: "Example text of what this thing does.",
-            date: "March 11, 2026 @ 3:00 PM",
-        },
     ];
 
     return (
-        <section id="news" aria-labelledby="news-title">
-            <h1 id="news-title" className="news-title">News</h1>
-            <p className="news-intro">
-                Latest updates about The Method, including features, improvements, and announcements.
-            </p>
+        <div id="news-page">
+            <div id="news-content">
+                <Link to="/" className="back-home-link">
+                    Back Home
+                </Link>
+
+                <h1 id="news-title" className="news-title">News</h1>
+                <p className="news-intro">
+                    Latest updates about The Method, including features, improvements, and announcements.
+                </p>
+
+                <ul className="news-grid" role="list">
+                    {updates.map((item) => (
+                        <li key={item.id}>
+                            <article className="news-card" aria-labelledby={`news-item-title-${item.id}`}>
+                                <header>
+                                    <div className="news-heading">
+                                        <h2 id={`news-item-title-${item.id}`}>{item.title}</h2>
+                                        <p className="news-caption">{item.caption}</p>
+                                    </div>
+
+                                    <p className="news-date">
+                                        <time dateTime={item.date}>{item.date}</time>
+                                    </p>
+                                </header>
 
-            <ul className="news-grid" role="list">
-                {updates.map((item) => (
-                    <li key={item.id}>
-                        <article className="news-card" aria-labelledby={`news-item-title-${item.id}`}>
-                            <header>
-                                <div className="news-heading">
-                                    <h2 id={`news-item-title-${item.id}`}>{item.title}</h2>
-                                    <p className="news-caption">{item.caption}</p>
-                                </div>
-                                
-                                <p className="news-date">
-                                    <time dateTime={item.date}>{item.date}</time>
-                                </p>
-                            </header>
-                            <p>{item.body}</p>
-                        </article>
-                    </li>
-                ))}
-            </ul>
-        </section>
+                                <p>{item.body}</p>
+                            </article>
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        </div>
     );
 }
 
diff --git a/frontend/src/pages/SignupPage.jsx b/frontend/src/pages/SignupPage.jsx
new file mode 100644
index 0000000..f681e88
--- /dev/null
+++ b/frontend/src/pages/SignupPage.jsx
@@ -0,0 +1,70 @@
+function SignupPage() {
+    return (
+        <main id="signup-page">
+            <section id="signup-card" aria-labelledby="signup-title">
+                <header id="signup-header">
+                    <h1 id="signup-title">Create your The Method account</h1>
+                    <p id="signup-subtitle">
+                        Already have an account? <a id="login-link" href="/login">Sign in</a>
+                    </p>
+                </header>
+
+                <form id="signup-form">
+                    <div className="signup-field-group">
+                        <label className="signup-field-label" htmlFor="signup-name">Full name</label>
+                        <input
+                            id="signup-name"
+                            className="signup-input"
+                            type="text"
+                            name="name"
+                            autoComplete="name"
+                            placeholder="Enter your full name"
+                        />
+                    </div>
+
+                    <div className="signup-field-group">
+                        <label className="signup-field-label" htmlFor="signup-email">Email</label>
+                        <input
+                            id="signup-email"
+                            className="signup-input"
+                            type="email"
+                            name="email"
+                            autoComplete="email"
+                            placeholder="Enter your email"
+                        />
+                    </div>
+
+                    <div className="signup-field-group">
+                        <label className="signup-field-label" htmlFor="signup-password">Password</label>
+                        <input
+                            id="signup-password"
+                            className="signup-input"
+                            type="password"
+                            name="password"
+                            autoComplete="new-password"
+                            placeholder="Create a password"
+                        />
+                    </div>
+
+                    <div className="signup-field-group">
+                        <label className="signup-field-label" htmlFor="signup-password-confirm">Confirm password</label>
+                        <input
+                            id="signup-password-confirm"
+                            className="signup-input"
+                            type="password"
+                            name="passwordConfirm"
+                            autoComplete="new-password"
+                            placeholder="Confirm your password"
+                        />
+                    </div>
+
+                    <button id="signup-submit-button" type="submit">
+                        Create account
+                    </button>
+                </form>
+            </section>
+        </main>
+    );
+}
+
+export default SignupPage;
diff --git a/frontend/src/styles/about-page.css b/frontend/src/styles/about-page.css
index d81967a..f0e634d 100644
--- a/frontend/src/styles/about-page.css
+++ b/frontend/src/styles/about-page.css
@@ -1,30 +1,71 @@
 #about-page {
     display: flex;
     flex-direction: column;
-    justify-content: center;
     align-items: center;
-    padding: 8px;
+    justify-content: flex-start;
+    padding: var(--space-3xl) var(--space-lg) var(--space-4xl);
     width: 100%;
+    background-color: var(--tinted-bg-color);
 }
 
 #about-page-content {
     display: flex;
     flex-direction: column;
-    justify-content: center;
-    width: 40%;
-}
-
-    #go-back-home {
-        all: unset;
-        padding: 0.6rem 1.2rem;
-        font-size: 1rem;
-        border-radius: 6px;
-        cursor: pointer;
-        background-color: var(--main-accent-color);
-        color: var(--text-color);
-        width: 125px;
-        height: 35px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
\ No newline at end of file
+    gap: var(--space-lg);
+    width: min(var(--content-width-lg), 100%);
+}
+
+.about-card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+    padding: var(--space-xl) var(--space-xl);
+    border-radius: var(--radius-xl);
+    border: 2px solid var(--box-border-color);
+    background-color: var(--card-bg);
+    box-shadow: var(--shadow-card);
+}
+
+.about-card h1,
+.about-card h2,
+.about-card p,
+.about-card ul {
+    margin: 0;
+}
+
+.about-card h1,
+.about-card h2 {
+    color: var(--text-color);
+    line-height: 1.15;
+}
+
+.about-card h1 {
+    font-size: 2.4rem;
+}
+
+.about-card h2 {
+    font-size: var(--font-size-heading-sm);
+}
+
+.about-card p,
+.about-card li {
+    color: var(--text-color);
+    font-size: var(--font-size-body);
+    line-height: 1.6;
+}
+
+.about-card-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xs);
+    padding-left: 1.2rem;
+}
+
+.about-card-list li::marker {
+    color: var(--main-accent-color);
+}
+
+.about-intro-card {
+    background: linear-gradient(180deg, var(--card-bg) 0%, var(--tinted-card-bg) 100%);
+    border-color: var(--main-accent-color);
+}
\ No newline at end of file
diff --git a/frontend/src/styles/dashboard-page.css b/frontend/src/styles/dashboard-page.css
index 571d875..d1c6d4f 100644
--- a/frontend/src/styles/dashboard-page.css
+++ b/frontend/src/styles/dashboard-page.css
@@ -1,7 +1,7 @@
 #upload-file-area {
     width: 100%;
     min-height: 100vh;
-    padding: 2rem 1rem 4rem;
+    padding: var(--space-xl) var(--space-md) var(--space-4xl);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -10,13 +10,13 @@
 #upload-file-field {
     width: 85%;
     min-height: 45vh;
-    padding: 32px;
+    padding: var(--space-xl);
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     margin: 0;
-    border-radius: 16px;
+    border-radius: var(--radius-lg);
     border: 2px solid var(--box-border-color);
     background-color: var(--true-bg-color);
 }
@@ -30,7 +30,7 @@
     justify-content: center;
     align-items: center;
     margin: 0;
-    border-radius: 16px;
+    border-radius: var(--radius-lg);
     border: 2px dashed var(--box-border-color);
     background-color: var(--true-bg-color);
 }
@@ -41,18 +41,18 @@
 }
 
 #upload-new-resume {
-    font-size: 2rem;
-    margin: 8px 0;
+    font-size: var(--font-size-heading-md);
+    margin: var(--space-xs) 0;
 }
 
 #upload-file-button-div-wrapper {
-    font-size: 2rem;
-    margin: 8px 0;
+    font-size: var(--font-size-heading-md);
+    margin: var(--space-xs) 0;
     padding: 0;
 }
 
 #drag-and-drop-caption {
-    margin: 8px 0;
+    margin: var(--space-xs) 0;
     padding: 0;
 }
 
@@ -60,10 +60,12 @@
         all: unset;
         width: 15rem;
         height: 5rem;
-        border-radius: 16px;
+        border-radius: var(--radius-lg);
         cursor: pointer;
         text-align: center;
         background-color: var(--main-accent-color);
+        color: var(--text-color);
+        transition: background-color var(--transition-fast), transform var(--transition-fast);
     }
 
         #inside-border-dashes button:active {
@@ -72,6 +74,6 @@
         }
 
 #supported-formats-caption {
-    margin: 8px 0;
+    margin: var(--space-xs) 0;
     padding: 0;
 }
\ No newline at end of file
diff --git a/frontend/src/styles/data-page.css b/frontend/src/styles/data-page.css
index de2c79b..9588cd0 100644
--- a/frontend/src/styles/data-page.css
+++ b/frontend/src/styles/data-page.css
@@ -10,18 +10,18 @@
     align-items: flex-start;
     width: 100%;
     max-width: 600px;
-    margin-top: 16px;
+    margin-top: var(--space-md);
 }
 
 .back-home-link {
     background-color: var(--card-bg);
     padding: 0.5rem 0.9rem;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     color: var(--text-color);
     text-decoration: none;
-    margin-bottom: 1.5rem;
+    margin-bottom: var(--space-lg);
     border: 1px solid var(--box-border-color);
-    transition: transform 0.2s ease, background-color 0.2s ease;
+    transition: transform var(--transition-fast), background-color var(--transition-fast);
 }
 
 .back-home-link:hover {
@@ -31,40 +31,41 @@
 
 #data-content h1 {
     color: var(--text-color); 
-    margin: 0 0 0.5rem;
+    margin: 0 0 var(--space-xs);
     font-size: 2.5rem;
 }
 
 .data-info-card {
     background-color: var(--card-bg);
     border: 2px solid var(--box-border-color);
-    border-radius: 10px;
-    padding: 1.5rem;
+    border-radius: var(--radius-md);
+    padding: var(--space-lg);
     width: 100%;
+    box-shadow: var(--shadow-card);
 }
 
 .data-info-card p {
     margin-top: 0;
-    margin-bottom: 1.5rem;
+    margin-bottom: var(--space-lg);
 }
 
 #data-content p {
     color: var(--text-color); 
-    margin: 0.25rem 0 1.5rem;
-    font-size: 1.1rem;
+    margin: var(--space-xxs) 0 var(--space-lg);
+    font-size: var(--font-size-body-lg);
 }
 
 /* Styling the destructive "Delete" button */
 .delete-data-btn {
-    background-color: #ef4444; /* A universal red for 'delete' actions */
-    color: white;
+    background-color: #ef4444;
+    color: #fff;
     border: none;
     padding: 0.75rem 1.5rem;
-    border-radius: 8px;
-    font-size: 1.1rem;
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-body-lg);
     font-weight: 600;
     cursor: pointer;
-    transition: background-color 0.2s, transform 0.1s;
+    transition: background-color var(--transition-fast), transform 0.1s;
 }
 
 .delete-data-btn:hover {
diff --git a/frontend/src/styles/faq-page.css b/frontend/src/styles/faq-page.css
index baf0a30..4614eaf 100644
--- a/frontend/src/styles/faq-page.css
+++ b/frontend/src/styles/faq-page.css
@@ -1,46 +1,48 @@
 #faqs {
     max-width: 700px;
-    margin: 48px auto 0;
-    padding: 32px 24px;
+    margin: var(--space-4xl) auto 0;
+    padding: var(--space-xl) var(--space-lg);
 }
 
 #faqs h1 {
-    font-size: 2rem;
-    margin-bottom: 16px;
+    font-size: var(--font-size-heading-md);
+    margin-bottom: var(--space-md);
     color: var(--text-color, #1e1e1e);
     font-weight: 700;
 }
 
 #faqs p {
     color: var(--text-color, #444);
-    margin-bottom: 20px;
+    margin-bottom: var(--space-lg);
     line-height: 1.6;
 }
 
 .faq-search-input {
     width: 100%;
-    padding: 12px 16px;
-    border: 1px solid #d1d5db;
-    border-radius: 8px;
+    min-height: var(--control-height-md);
+    padding: var(--input-padding-y) var(--input-padding-x);
+    border: 1px solid var(--input-border-color);
+    border-radius: var(--radius-sm);
     font-size: 1rem;
-    margin-bottom: 24px;
+    margin-bottom: var(--space-xl);
     background: var(--tinted-bg-color, #f7f8fa);
     color: var(--text-color, #1e1e1e);
-    transition: border 0.2s;
+    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
 }
 
 .faq-search-input:focus {
     border-color: var(--main-accent-color, #4aa5ff);
     outline: none;
+    box-shadow: var(--shadow-focus);
 }
 
 .back-home-link {
     display: inline-block;
-    margin-bottom: 18px;
+    margin-bottom: var(--space-md);
     color: var(--main-accent-color, #4aa5ff);
     text-decoration: none;
     font-weight: 500;
-    transition: text-decoration 0.2s;
+    transition: text-decoration var(--transition-fast);
 }
 
 .back-home-link:hover {
diff --git a/frontend/src/styles/form-page.css b/frontend/src/styles/form-page.css
index 573ee1a..b394195 100644
--- a/frontend/src/styles/form-page.css
+++ b/frontend/src/styles/form-page.css
@@ -1,64 +1,102 @@
 /* Page layout */
 #form-page {
     width: 100%;
-    min-height: 100vh;
-    padding: 2rem 1rem 4rem;
+    min-height: calc(100vh - var(--nav-height));
+    padding: var(--space-3xl) var(--space-lg) var(--space-4xl);
     display: flex;
     flex-direction: column;
     align-items: center;
+    gap: var(--space-xl);
+    background-color: var(--tinted-bg-color);
 }
 
 #form-page h1 {
-    font-size: 4.5rem;
-    margin: 0 0 2rem;
+    width: 100%;
+    max-width: 980px;
+    margin: 0;
+    font-size: clamp(2.6rem, 5vw, 4.5rem);
+    line-height: 1;
+    letter-spacing: -0.05em;
+    text-align: center;
+    color: var(--text-color);
 }
 
 /* Form container */
 #resume-form {
     width: 100%;
-    max-width: 720px;
+    max-width: 980px;
     display: flex;
     flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: 1.25rem;
+    gap: var(--space-lg);
+}
+
+.form-error-message {
+    width: 100%;
+    max-width: 980px;
+    padding: var(--space-md) var(--space-lg);
+    border-radius: var(--radius-md);
+    border: 1px solid rgb(220 38 38 / 35%);
+    background-color: rgb(220 38 38 / 12%);
+    color: rgb(185 28 28);
+    font-weight: 600;
 }
 
 /* Section headers */
-#resume-form h2 {
-    font-size: 2rem;
-    margin-top: 2rem;
-    margin-bottom: 0.5rem;
+#resume-form > h2 {
+    margin: var(--space-lg) 0 calc(var(--space-xs) * -1);
+    padding-left: var(--space-sm);
+    border-left: 4px solid var(--main-accent-color);
+    font-size: clamp(1.4rem, 2vw, 2rem);
+    line-height: 1.15;
+    font-weight: 700;
+    letter-spacing: -0.04em;
     color: var(--text-color);
 }
 
 /* Line to break up sub-sections */
 .resume-hr-between-sections {
+    grid-column: 1 / -1;
+    width: 100%;
     border: none;
-    border-top: 2px solid skyblue;
-    margin: 1.5rem 0;
+    border-top: 1px solid var(--box-border-color);
+    margin: var(--space-xs) 0 0;
+    opacity: 0.85;
 }
 
 /* Reusable card */
 .card {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    gap: var(--space-lg);
     width: 100%;
-    padding: 1.75rem;
-    border-radius: 10px;
-    border: 4px var(--box-border-color) solid;
-    background-color: var(--true-bg-color);
+    padding: var(--space-xl);
+    border-radius: var(--radius-xl);
+    border: 1.5px solid var(--box-border-color);
+    background-color: var(--card-bg);
+    box-shadow: var(--shadow-card);
 }
 
 /* Labels */
 label {
     display: flex;
     flex-direction: column;
-    gap: 0.35rem;
-    font-size: 1.5rem;
-    font-weight: 500;
-    color: var(--text-color)
+    gap: var(--space-xs);
+    font-size: var(--font-size-label);
+    font-weight: 600;
+    color: var(--text-color);
+    font-family: inherit;
+    letter-spacing: -0.01em;
+}
+
+label:has(input[type="checkbox"]) {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-md);
+    padding: var(--space-sm) var(--space-md);
+    border-radius: var(--radius-md);
+    background-color: var(--tinted-bg-color);
+    border: 1px solid var(--box-border-color);
 }
 
 /* Inputs */
@@ -67,73 +105,186 @@ input[type="email"],
 input[type="url"],
 textarea {
     width: 100%;
-    padding: 0.9rem 1rem;
-    font-size: 1.5rem;
-    border-radius: 8px;
-    border: 1px solid var(--input-border-color);
+    min-height: var(--control-height-md);
+    padding: var(--input-padding-y) var(--input-padding-x);
+    font-size: var(--font-size-body);
+    line-height: 1.45;
+    border-radius: var(--radius-md);
+    border: 1.5px solid var(--input-border-color);
     background-color: var(--input-bg-color);
     color: var(--text-color);
+    font-family: inherit;
+    transition:
+        border-color var(--transition-fast),
+        box-shadow var(--transition-fast),
+        background-color var(--transition-fast),
+        transform var(--transition-fast);
 }
 
-/* Checkbox */
-input[type="checkbox"] {
-    width: fit-content;
-    margin-top: 0.5rem;
-    transform: scale(1.3);
+input[type="text"]::placeholder,
+input[type="email"]::placeholder,
+input[type="url"]::placeholder,
+textarea::placeholder {
+    color: var(--text-color);
+    opacity: 0.55;
 }
 
-/* Textarea resize behavior */
 textarea {
+    min-height: 8rem;
     resize: vertical;
 }
 
-/* Focus styles */
-input:focus,
+input[type="text"]:focus,
+input[type="email"]:focus,
+input[type="url"]:focus,
 textarea:focus {
     outline: none;
     border-color: var(--input-focus-border-color);
-    box-shadow: 0 0 0 10px var(--input-box-shadow-color);
+    box-shadow: 0 0 0 4px var(--input-box-shadow-color);
+    background-color: var(--true-bg-color);
+}
+
+input[type="checkbox"] {
+    width: 1.15rem;
+    height: 1.15rem;
+    margin: 0;
+    accent-color: var(--main-accent-color);
+    transform: translateY(1px);
+}
+
+/* (moved textarea above) */
+
+/* Section blocks */
+.link-block,
+.education-block,
+.experience-block,
+.project-block,
+.certification-block,
+.award-block {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: var(--space-lg);
+    padding: var(--space-lg);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--box-border-color);
+    background-color: var(--tinted-bg-color);
+    grid-column: 1 / -1;
+}
+
+.link-block h3,
+.education-block h3,
+.experience-block h3,
+.project-block h3,
+.certification-block h3,
+.award-block h3 {
+    grid-column: 1 / -1;
+    margin: 0;
+    font-size: 1.05rem;
+    font-weight: 700;
+    letter-spacing: -0.02em;
 }
 
 /* Buttons that add a new section */
 .add-section-form-button {
-    display: flex;
-    justify-content: center;
-    align-self: center;
-    text-align: center;
-    margin-top: 1.5rem;
-    padding: 1rem;
-    width: 35%;
-    font-size: 1.5rem;
-    border: none;
-    border-radius: 10px;
+    display: grid;
+    place-items: center;
+    justify-self: center;
+    width: 3rem;
+    height: 3rem;
+    margin-top: var(--space-xs);
+    padding: 0;
+    border: 1.5px solid var(--box-border-color);
+    border-radius: var(--radius-pill);
+    background-color: var(--true-bg-color);
+    color: var(--main-accent-color);
+    font-size: 1.8rem;
+    font-weight: 700;
+    line-height: 1;
     cursor: pointer;
-    background-color: var(--main-accent-color);
-    color: var(--text-color);
+    box-shadow: var(--shadow-card);
+    transition:
+        transform var(--transition-fast),
+        background-color var(--transition-fast),
+        border-color var(--transition-fast),
+        box-shadow var(--transition-fast);
+}
+
+.add-section-form-button:hover {
+    transform: translateY(-2px);
+    background-color: var(--card-bg-hover);
+    border-color: var(--main-accent-color);
 }
 
-  .add-section-form-button:active {
-    transform: scale(0.95);
-    background-color: var(--main-accent-color-activte);
-  }
+.add-section-form-button:active {
+    transform: translateY(0) scale(0.97);
+    background-color: var(--main-accent-color);
+    color: #fff;
+}
 
 /* Submit button */
 button[type="submit"] {
-    margin-top: 2.5rem;
-    padding: 1rem;
-    width: 85%;
-    font-size: 2.0rem;
-    border: none;
-    border-radius: 10px;
+    all: unset;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    align-self: center;
+    width: min(100%, 340px);
+    min-height: var(--button-height-md);
+    margin-top: var(--space-xl);
+    padding: 0 var(--space-xl);
+    border-radius: var(--radius-md);
+    background: linear-gradient(135deg, var(--main-accent-color), var(--main-accent-color-activte));
+    color: #fff;
     cursor: pointer;
-    background-color: var(--main-accent-color);
-    color: var(text-color);
+    font-size: 1.05rem;
+    font-weight: 700;
+    box-shadow: 0 12px 24px rgb(74 165 255 / 18%);
+    transition:
+        transform var(--transition-fast),
+        box-shadow var(--transition-fast),
+        filter var(--transition-fast);
+}
+
+button[type="submit"]:hover {
+    filter: brightness(1.03);
+    box-shadow: 0 16px 28px rgb(74 165 255 / 24%);
+    transform: translateY(-1px);
 }
 
 button[type="submit"]:active {
-    transform: scale(0.97);
-    background-color: var(--main-accent-color-activte);
+    transform: translateY(0) scale(0.98);
+}
+
+button[type="submit"]:disabled {
+    cursor: not-allowed;
+    opacity: 0.7;
+    transform: none;
+    box-shadow: none;
+}
+
+/* stylelint-disable media-feature-range-notation */
+@media (max-width: 640px) {
+    #form-page {
+        padding: var(--space-xl) var(--space-md) var(--space-4xl);
+    }
+
+    .card,
+    .link-block,
+    .education-block,
+    .experience-block,
+    .project-block,
+    .certification-block,
+    .award-block {
+        gap: var(--space-md);
+        padding: var(--space-lg);
+    }
+
+    label:has(input[type="checkbox"]) {
+        flex-direction: row;
+        align-items: center;
+    }
 }
+/* stylelint-enable media-feature-range-notation */
 
 
 
diff --git a/frontend/src/styles/home-page.css b/frontend/src/styles/home-page.css
index 212ad99..c8f90ea 100644
--- a/frontend/src/styles/home-page.css
+++ b/frontend/src/styles/home-page.css
@@ -7,11 +7,11 @@
     justify-content: center;
     align-items: center;
     text-align: center;
-    gap: 24px;
+    gap: var(--space-xl);
 }
 
     #hero-area h1 {
-        font-size: 12.5rem;
+        font-size: var(--font-size-display-xxl);
         margin: 0;
         padding: 0;
         line-height: 0.9;
@@ -29,7 +29,7 @@
     }
 
     #hero-area p {
-        font-size: 3.5rem;
+        font-size: var(--font-size-display);
         margin: 0;
         padding: 0;
         line-height: 1;
@@ -72,14 +72,14 @@
 
     #make-resume {
         all: unset;
-        width: 20rem;
-        height: 7rem;
-        border-radius: 10px;
+        width: var(--button-width-md);
+        height: var(--button-height-xl);
+        border-radius: var(--radius-md);
         cursor: pointer;
         font-size: 2rem;
         background-color: var(--main-accent-color);
         color: var(--text-color);
-        transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
+        transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
         box-shadow: 0 4px 24px 0 rgb(56 98 255 / 8%);
         opacity: 0;
         transform: translateY(56px) scale(0.98);
@@ -120,7 +120,7 @@
 
 /* How It Works Area */
 #how-it-works {
-    padding: 32px;
+    padding: var(--space-xl);
     background-color: var(--super-tinted-area-main-color);
 }
     
@@ -130,7 +130,7 @@
 }
 
 #how-it-works-title{
-    font-size: 4rem;
+    font-size: var(--font-size-display);
     text-align: center;
     margin-top: 2rem;
 }
@@ -147,10 +147,10 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    gap: 20px;
-    padding: 20px;
+    gap: var(--space-lg);
+    padding: var(--space-lg);
     width: 100%;
-    max-width: 1200px;
+    max-width: var(--content-width-xl);
     margin: 0 auto;
     background-color: var(--super-tinted-area-main-color);
 }
@@ -162,14 +162,14 @@
     max-width: 260px;
     min-width: 250px;
     min-height: 320px;
-    padding: 30px;
-    border-radius: 15px;
+    padding: var(--space-xl);
+    border-radius: var(--radius-lg);
     border: 3px;
     border-style: solid;
     border-color: var(--main-accent-color);
     text-align: left;
     background-color: var(--tinted-card-bg);
-    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
+    transition: transform var(--transition-standard), box-shadow var(--transition-standard), background-color var(--transition-standard);
     will-change: transform;
 }
 
@@ -186,9 +186,9 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin: 72px 0;
-    padding: 0 32px;
-    gap: 32px;
+    margin: var(--space-4xl) 0;
+    padding: 0 var(--space-xl);
+    gap: var(--space-xl);
 }
 
 #home-statistics-header {
@@ -196,25 +196,25 @@
     flex-direction: column;
     align-items: center;
     text-align: center;
-    gap: 12px;
+    gap: var(--space-sm);
 }
 
 #home-statistics-title-row {
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 12px;
+    gap: var(--space-sm);
     flex-wrap: wrap;
 }
 
 #home-statistics-title-h2 {
-    font-size: 4rem;
+    font-size: var(--font-size-display);
     margin: 0;
     padding: 0;
 }
 
 #home-statistics-caption {
-    font-size: 1.25rem;
+    font-size: var(--font-size-body-lg);
     max-width: 760px;
     margin: 0;
     padding: 0;
@@ -223,24 +223,24 @@
 #home-statistics-panels {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 24px;
+    gap: var(--space-xl);
     width: 100%;
-    max-width: 1200px;
+    max-width: var(--content-width-xl);
 }
 
 .home-statistics-panel {
     display: flex;
     flex-direction: column;
-    gap: 18px;
-    padding: 24px;
+    gap: var(--space-lg);
+    padding: var(--space-xl);
     border: 4px solid var(--box-border-color);
-    border-radius: 18px;
+    border-radius: var(--radius-lg);
     background-color: var(--card-bg);
-    box-shadow: 0 10px 22px rgb(0 0 0 / 8%);
+    box-shadow: var(--shadow-card);
 }
 
 .home-statistics-panel-title {
-    font-size: 2rem;
+    font-size: var(--font-size-heading-md);
     margin: 0;
     padding: 0;
 }
@@ -248,7 +248,7 @@
 .home-statistics-grid {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 16px;
+    gap: var(--space-md);
 }
 
 .home-stat-card {
@@ -259,14 +259,14 @@
     min-height: 8.5rem;
     padding: 18px 20px;
     border: 2px solid var(--box-border-color);
-    border-radius: 14px;
+    border-radius: var(--radius-md);
     background-color: var(--card-bg);
-    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
 }
 
 .home-stat-card:hover {
     transform: translateY(-4px);
-    box-shadow: 0 10px 18px rgb(0 0 0 / 10%);
+    box-shadow: var(--shadow-card);
     background-color: var(--card-bg);
 }
 
@@ -277,7 +277,7 @@
     justify-content: center;
     width: 1.6rem;
     height: 1.6rem;
-    border-radius: 999px;
+    border-radius: var(--radius-pill);
     border: 2px solid var(--box-border-color);
     background-color: var(--card-bg);
     color: var(--text-color);
@@ -294,13 +294,13 @@
     transform: translateX(-50%);
     min-width: 240px;
     padding: 0.65rem 0.85rem;
-    border-radius: 10px;
+    border-radius: var(--radius-md);
     background-color: var(--true-bg-color);
     color: var(--text-color);
     font-size: 0.9rem;
     line-height: 1.3;
     text-align: center;
-    box-shadow: 0 10px 24px rgb(0 0 0 / 15%);
+    box-shadow: var(--shadow-menu);
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.18s ease, transform 0.18s ease;
@@ -341,19 +341,19 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    height: 48rem;
+    min-height: 48rem;
     background-color: var(--super-tinted-area-main-color);
 }
 
 #review-header {
-    font-size: 4rem;
-    margin: 8px;
+    font-size: var(--font-size-display);
+    margin: var(--space-xs);
     padding: 0;
 }
 
 #review-caption {
-    font-size: 2rem;
-    margin: 8px;
+    font-size: var(--font-size-heading-md);
+    margin: var(--space-xs);
     padding: 0;
 }
 
@@ -370,20 +370,20 @@
     justify-content: center;
     align-items: start;
     margin: 0;
-    padding: 24px;
+    padding: var(--space-xl);
     width: 36rem;
     height: 24rem;
-    border-radius: 32px;
+    border-radius: var(--radius-xl);
     border: 4px var(--box-border-color) solid;
     background-color: var(--tinted-bg-color);
 }
 
 #review-card-1 p, #review-card-2 p, #review-card-3 p {
-    font-size: 1.25rem;
+    font-size: var(--font-size-body-lg);
 }
 
 .reivew-quote {
-    margin: 32px 0;
+    margin: var(--space-xl) 0;
 }
 
 .reivew-name {
@@ -400,19 +400,19 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    padding: 32px;
-    gap: 16px;
+    padding: var(--space-xl);
+    gap: var(--space-md);
 }
 
 #try-provr-h2 {
-    font-size: 4rem;
-    margin: 8px;
+    font-size: var(--font-size-display);
+    margin: var(--space-xs);
     padding: 0;
 }
 
 #recommend-provr-p {
-    font-size: 1.5rem;
-    margin: 8px;
+    font-size: var(--font-size-heading-sm);
+    margin: var(--space-xs);
     padding: 0;
     max-width: 800px;
     text-align: center;
@@ -427,12 +427,12 @@
         text-align: center;
         color: var(--text-color);
         width: 15rem;
-        height: 5rem;
-        border-radius: 10px;
+        height: var(--button-height-lg);
+        border-radius: var(--radius-md);
         cursor: pointer;
-        font-size: 2rem;
+        font-size: var(--font-size-heading-md);
         background-color: var(--main-accent-color);
-        transition: background-color 0.2s ease, transform 0.2s ease;
+        transition: background-color var(--transition-fast), transform var(--transition-fast);
     }
 
     #visit-provr-button:hover {
@@ -450,25 +450,25 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    padding: 32px;
+    padding: var(--space-xl);
     background-color: var(--super-tinted-area-main-color);
 }
 
 #ready-to-get-started-h2 {
-    font-size: 4rem;
-    margin: 8px;
+    font-size: var(--font-size-display);
+    margin: var(--space-xs);
     padding: 0;
 }
 
 #call-to-action-p-top {
-    font-size: 1.5rem;
-    margin: 8px;
+    font-size: var(--font-size-heading-sm);
+    margin: var(--space-xs);
     padding: 0;
 }
 
 #call-to-action-p-bottom {
-    font-size: 1.5rem;
-    margin: 8px;
+    font-size: var(--font-size-heading-sm);
+    margin: var(--space-xs);
     padding: 0;
 }
 
@@ -477,12 +477,12 @@
     text-align: center;
     color: var(--text-color);
     width: 15rem;
-    height: 5rem;
-    border-radius: 10px;
+        height: var(--button-height-lg);
+        border-radius: var(--radius-md);
     cursor: pointer;
-    font-size: 2rem;
+        font-size: var(--font-size-heading-md);
     background-color: var(--main-accent-color);
-    transition: background-color 0.2s ease, transform 0.2s ease;
+        transition: background-color var(--transition-fast), transform var(--transition-fast);
 }
 
 #call-to-action-sign-up-button:hover {
@@ -501,6 +501,8 @@
     justify-content: space-around;
     margin: 0;
     background-color: var(--true-bg-color);
+    padding: var(--space-lg) var(--space-xl);
+    gap: var(--space-xl);
 }
 
 #footer-information-area h2:not(#footer-moto) {
@@ -515,7 +517,7 @@
 }
 
     #quick-links #home-quick-navlink {
-        margin-bottom: 16px;
+        margin-bottom: var(--space-md);
     }
 
 #team-section {
@@ -526,7 +528,7 @@
 }
 
     #team-section a {
-        margin-bottom: 16px;
+        margin-bottom: var(--space-md);
     }
 
 #socials-section {
@@ -538,7 +540,7 @@
 
     #socials-section p {
         margin: 0;
-        margin-bottom: 16px;
+        margin-bottom: var(--space-md);
     }
 
 #extras-section {
@@ -549,7 +551,7 @@
 }
 
     #extras-section a {
-        margin-bottom: 16px;
+        margin-bottom: var(--space-md);
     }
 
 #copyright {
@@ -557,6 +559,6 @@
     flex-direction: row;
     justify-content: center;
     margin: 0;
-    padding: 16px;
+    padding: var(--space-md);
     background-color: var(--true-bg-color);
 }
\ No newline at end of file
diff --git a/frontend/src/styles/login-page.css b/frontend/src/styles/login-page.css
index 0f1e4cd..2f8310e 100644
--- a/frontend/src/styles/login-page.css
+++ b/frontend/src/styles/login-page.css
@@ -4,29 +4,29 @@
     justify-content: center;
     align-items: center;
     min-height: calc(100vh - 5rem);
-    padding: 48px 24px;
+    padding: var(--space-4xl) var(--space-lg);
     background-color: var(--super-tinted-area-main-color);
 }
 
 #login-card {
     width: 100%;
     max-width: 560px;
-    padding: 40px;
-    border-radius: 20px;
+    padding: var(--space-3xl);
+    border-radius: var(--radius-xl);
     border: 4px solid var(--box-border-color);
     background-color: var(--card-bg);
-    box-shadow: 0 12px 30px rgb(0 0 0 / 10%);
+    box-shadow: var(--shadow-elevated);
 }
 
 #login-header {
     display: flex;
     flex-direction: column;
-    gap: 12px;
-    margin-bottom: 28px;
+    gap: var(--space-sm);
+    margin-bottom: var(--space-xl);
 }
 
 #login-title {
-    font-size: 2.6rem;
+    font-size: var(--font-size-heading-lg);
     line-height: 1.1;
     margin: 0;
     padding: 0;
@@ -34,7 +34,7 @@
 
 #login-subtitle {
     margin: 0;
-    font-size: 1.1rem;
+    font-size: var(--font-size-body-lg);
 }
 
 /* Account and forgot password links */
@@ -45,7 +45,7 @@
     font-weight: 600;
     margin-left: auto;
     font-size: 0.98rem;
-    transition: text-decoration 0.2s;
+    transition: text-decoration var(--transition-fast);
 }
 
 #create-account-link:hover,
@@ -56,36 +56,43 @@
 #login-form {
     display: flex;
     flex-direction: column;
-    gap: 18px;
+    gap: var(--space-lg);
 }
 
 .login-field-group {
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: var(--space-xs);
 }
 
 .login-field-label {
-    font-size: 1rem;
+    font-size: var(--font-size-label);
     font-weight: 600;
     color: var(--text-color);
 }
 
 .login-input {
     width: 100%;
-    padding: 0.95rem 1rem;
-    border-radius: 10px;
+    min-height: var(--control-height-md);
+    padding: var(--input-padding-y) var(--input-padding-x);
+    border-radius: var(--radius-md);
     border: 2px solid var(--box-border-color);
     background-color: var(--true-bg-color);
     color: var(--text-color);
+    font-family: inherit;
     font-size: 1rem;
-    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+    line-height: 1.2;
+    box-sizing: border-box;
+    appearance: none;
+    background-clip: padding-box;
+    caret-color: var(--text-color);
+    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
 }
 
 .login-input:focus {
     outline: none;
     border-color: var(--main-accent-color);
-    box-shadow: 0 0 0 3px rgb(0 0 0 / 6%);
+    box-shadow: var(--shadow-focus);
 }
 
 .login-input::placeholder {
@@ -97,15 +104,15 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    gap: 16px;
+    gap: var(--space-md);
     flex-wrap: wrap;
-    margin-top: 2px;
+    margin-top: var(--space-xxs);
 }
 
 #remember-me-option {
     display: inline-flex;
     align-items: center;
-    gap: 10px;
+    gap: var(--space-xs);
     font-size: 0.98rem;
     cursor: pointer;
 }
@@ -123,15 +130,15 @@
     align-items: center;
     justify-content: center;
     width: 100%;
-    min-height: 3.25rem;
-    margin-top: 8px;
-    border-radius: 10px;
+    min-height: var(--button-height-md);
+    margin-top: var(--space-xs);
+    border-radius: var(--radius-md);
     background-color: var(--main-accent-color);
     color: var(--text-color);
     cursor: pointer;
     font-size: 1.05rem;
     font-weight: 700;
-    transition: background-color 0.2s ease, transform 0.2s ease;
+    transition: background-color var(--transition-fast), transform var(--transition-fast);
 }
 
 #login-submit-button:hover {
diff --git a/frontend/src/styles/news-page.css b/frontend/src/styles/news-page.css
index c39f13f..f33df14 100644
--- a/frontend/src/styles/news-page.css
+++ b/frontend/src/styles/news-page.css
@@ -1,72 +1,54 @@
-/* ...existing code... */
-.news-title {
-    text-align: center;
-    margin-bottom: 0.5rem;
-    color: var(--text-color);
-}
-
-.news-intro {
-    text-align: center;
-    max-width: 65ch;
-    margin: 0 auto 1.5rem;
-    color: var(--text-color);
-}
-
-.news-grid {
-    list-style: none;
-    padding: 0;
-    margin: 0;
+#news-page {
     display: flex;
     flex-direction: column;
-    justify-content: center;
     align-items: center;
-    gap: 1rem;
 }
 
-.news-grid > li {
-    width: 60%;
-    min-width: 280px;
+#news-content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: min(var(--content-width-md), 100%);
+    margin-top: var(--space-md);
 }
 
-.news-card {
-    border: 1px solid var(--box-border-color);
-    border-radius: 12px;
-    padding: 1rem;
-    width: 100%;
-    background-color: var(--tinted-card-bg);
+#news-content .back-home-link {
+    display: inline-block;
+    background-color: var(--card-bg);
+    padding: 0.5rem 0.9rem;
+    border-radius: var(--radius-sm);
     color: var(--text-color);
+    text-decoration: none;
+    margin-bottom: var(--space-xs);
+    border: 1px solid var(--box-border-color);
+    transition: background-color var(--transition-fast), transform var(--transition-fast);
 }
 
-.news-card:hover {
-    background-color: var(--card-bg-hover);
-}
+    #news-content .back-home-link:hover {
+        background-color: var(--card-bg-hover);
+        transform: scale(0.975);
+    }
 
-.news-card header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    gap: 1rem;
+.news-title, .news-intro {
+    color: var(--text-color);
 }
 
-.news-heading h2 {
+.news-title {
     margin: 0;
-    color: var(--text-color);
+    font-size: var(--font-size-heading-md);
 }
 
-.news-caption {
-    font-weight: 600;
-    color: var(--text-color);
-    margin: 0.25rem 0 0.5rem;
+.news-intro {
+    margin: var(--space-xxs) 0 var(--space-lg);
+    font-size: var(--font-size-body-lg);
 }
 
-.news-date {
+.news-grid {
+    list-style: none;
+    padding: 0;
     margin: 0;
-    font-size: 0.875rem;
-    color: var(--text-color);
-    white-space: nowrap;
-    text-align: right;
-}
-
-.news-card time {
-    color: var(--main-accent-color);
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-md);
 }
\ No newline at end of file
diff --git a/frontend/src/styles/pricing-page.css b/frontend/src/styles/pricing-page.css
index 238c9c3..a3c8c76 100644
--- a/frontend/src/styles/pricing-page.css
+++ b/frontend/src/styles/pricing-page.css
@@ -9,7 +9,7 @@
 #pricing-page-h1 {
     font-size: 3.5rem;
     text-align: center;
-    margin-top: 2rem;
+    margin-top: var(--space-xl);
 }
 
 #pricing-tiers-subarea {
@@ -18,7 +18,7 @@
     flex-direction: row;
     justify-content: center;
     align-items: stretch;
-    margin-top: 2rem;
+    margin-top: var(--space-xl);
 }
 
     .pricing-icon {
@@ -33,9 +33,11 @@
         width: 300px;
         background-color: var(--card-bg);
         border: solid 2px var(--main-accent-color);
-        padding: 2rem;
-        border-radius: 8px;
-        margin: 1rem;
+        padding: var(--space-xl);
+        border-radius: var(--radius-sm);
+        margin: var(--space-md);
+        box-shadow: var(--shadow-card);
+        transition: background-color var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);
     }
 
         #pricing-free-tier:hover, #pricing-student-tier:hover, #pricing-premium-tier:hover {
diff --git a/frontend/src/styles/privacy-policy-page.css b/frontend/src/styles/privacy-policy-page.css
index e0caccc..868258b 100644
--- a/frontend/src/styles/privacy-policy-page.css
+++ b/frontend/src/styles/privacy-policy-page.css
@@ -8,17 +8,20 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    width: 35%;
-    margin-top: 16px;
+    width: min(var(--content-width-md), 100%);
+    margin-top: var(--space-md);
+    gap: var(--space-xs);
 }
 
 #privacy-policy-content .back-home-link {
     background-color: var(--card-bg);
     padding: 0.5rem 0.9rem;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     color: var(--text-color);
     text-decoration: none;
-    margin-bottom: 0.5rem;
+    margin-bottom: var(--space-xs);
+    border: 1px solid var(--box-border-color);
+    transition: background-color var(--transition-fast), transform var(--transition-fast);
 }
 
     #privacy-policy-content .back-home-link:hover {
@@ -29,14 +32,15 @@
 #privacy-policy-content h1 {
     color: var(--text-color);
     margin: 0;
+    font-size: var(--font-size-heading-md);
 }
 
 #privacy-policy-content p {
     color: var(--text-color);
-    margin: 0.25rem 0 0.5rem;
+    margin: var(--space-xxs) 0 var(--space-xs);
 }
 
 #privacy-policy-content ol {
     color: var(--text-color);
-    margin: 0.5rem 0 0.75rem;
+    margin: var(--space-xs) 0 var(--space-sm);
 }
\ No newline at end of file
diff --git a/frontend/src/styles/signup-page.css b/frontend/src/styles/signup-page.css
new file mode 100644
index 0000000..6c2f1f0
--- /dev/null
+++ b/frontend/src/styles/signup-page.css
@@ -0,0 +1,143 @@
+/* Signup page styles — mirror login page look and spacing */
+#signup-page {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: calc(100vh - 5rem);
+    padding: var(--space-4xl) var(--space-lg);
+    background-color: var(--super-tinted-area-main-color);
+}
+
+#signup-card {
+    width: 100%;
+    max-width: 560px;
+    padding: var(--space-3xl);
+    border-radius: var(--radius-xl);
+    border: 4px solid var(--box-border-color);
+    background-color: var(--card-bg);
+    box-shadow: var(--shadow-elevated);
+}
+
+#signup-header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+    margin-bottom: var(--space-xl);
+}
+
+#signup-title {
+    font-size: var(--font-size-heading-lg);
+    line-height: 1.1;
+    margin: 0;
+    padding: 0;
+}
+
+#signup-subtitle {
+    margin: 0;
+    font-size: var(--font-size-body-lg);
+}
+
+/* Link that points back to login */
+#login-link {
+    color: var(--main-accent-color);
+    text-decoration: none;
+    font-weight: 600;
+    font-size: 0.98rem;
+}
+
+#login-link:hover {
+    text-decoration: underline;
+}
+
+#signup-form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-lg);
+}
+
+.signup-field-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xs);
+}
+
+.signup-field-label {
+    font-size: var(--font-size-label);
+    font-weight: 600;
+    color: var(--text-color);
+}
+
+.signup-input,
+.signup-input[type="password"] {
+    width: 100%;
+    min-height: var(--control-height-md);
+    padding: var(--input-padding-y) var(--input-padding-x);
+    border-radius: var(--radius-md);
+    border: 2px solid var(--box-border-color);
+    background-color: var(--true-bg-color) !important;
+    color: var(--text-color) !important;
+    font-family: inherit !important;
+    font-size: var(--font-size-body) !important;
+    line-height: 1.2 !important;
+    font-weight: 400;
+    box-sizing: border-box;
+    appearance: none;
+
+    /* vendor prefixes removed; keep appearance generic */
+    -webkit-text-fill-color: var(--text-color) !important;
+    background-clip: padding-box;
+    caret-color: var(--text-color);
+    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
+}
+
+.signup-input[type="password"]::-ms-reveal,
+.signup-input[type="password"]::-ms-clear {
+    display: none;
+}
+
+.signup-input:focus {
+    outline: none;
+    border-color: var(--main-accent-color);
+    box-shadow: var(--shadow-focus);
+}
+
+.signup-input::placeholder {
+    color: var(--text-color);
+    opacity: 0.6;
+}
+
+.signup-input:-webkit-autofill,
+.signup-input:-webkit-autofill:hover,
+.signup-input:-webkit-autofill:focus {
+    /* stylelint-disable property-no-vendor-prefix */
+    -webkit-text-fill-color: var(--text-color);
+    box-shadow: 0 0 0 1000px var(--true-bg-color) inset;
+    -webkit-box-shadow: 0 0 0 1000px var(--true-bg-color) inset;
+    /* stylelint-enable property-no-vendor-prefix */
+    background-color: var(--true-bg-color);
+}
+
+#signup-submit-button {
+    all: unset;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    min-height: var(--button-height-md);
+    margin-top: var(--space-xs);
+    border-radius: var(--radius-md);
+    background-color: var(--main-accent-color);
+    color: var(--text-color);
+    cursor: pointer;
+    font-size: 1.05rem;
+    font-weight: 700;
+    transition: background-color var(--transition-fast), transform var(--transition-fast);
+}
+
+#signup-submit-button:hover {
+    background-color: var(--main-accent-color-activte);
+}
+
+#signup-submit-button:active {
+    transform: scale(0.98);
+}
diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css
index 853343c..a1f6616 100644
--- a/frontend/src/styles/styles.css
+++ b/frontend/src/styles/styles.css
@@ -19,7 +19,6 @@
 
     /* Accent colors */
     --main-accent-color: #4aa5ff;
-    --main-accent-color-activte: #3390e6;
 
     /* Borders */
     --box-border-color: #d1d5db;
@@ -30,6 +29,67 @@
     --input-focus-border-color: #4aa5ff;
     --input-box-shadow-color: rgb(74 165 255 / 25%);
 
+    /* Spacing */
+    --space-xxs: 0.25rem;
+    --space-xs: 0.5rem;
+    --space-sm: 0.75rem;
+    --space-md: 1rem;
+    --space-lg: 1.5rem;
+    --space-xl: 2rem;
+    --space-2xl: 2.5rem;
+    --space-3xl: 3rem;
+    --space-4xl: 4.5rem;
+
+    /* Radius */
+    --radius-sm: 0.5rem;
+    --radius-md: 0.625rem;
+    --radius-lg: 1rem;
+    --radius-xl: 1.25rem;
+    --radius-pill: 999px;
+
+    /* Shadows */
+    --shadow-card: 0 10px 22px rgb(0 0 0 / 8%);
+    --shadow-elevated: 0 12px 30px rgb(0 0 0 / 10%);
+    --shadow-focus: 0 0 0 3px rgb(0 0 0 / 6%);
+
+    /* Typography */
+    --font-size-body: 1rem;
+    --font-size-body-lg: 1.1rem;
+    --font-size-label: 1rem;
+    --font-size-heading-sm: 1.5rem;
+    --font-size-heading-md: 2rem;
+    --font-size-heading-lg: 2.6rem;
+    --font-size-display: 4rem;
+    --font-size-display-xl: 4.5rem;
+    --font-size-display-xxl: 12.5rem;
+
+    /* Component sizing */
+    --control-height-md: 3.4rem;
+    --button-height-md: 3.25rem;
+    --button-height-lg: 5rem;
+    --button-height-xl: 7rem;
+    --button-width-sm: 125px;
+    --button-width-md: 20rem;
+    --button-width-circle: 50px;
+    --input-padding-y: 0.95rem;
+    --input-padding-x: 1rem;
+    --nav-height: 5rem;
+    --nav-padding-inline: 2rem;
+    --icon-size-sm: 18px;
+    --menu-radius: 0.5rem;
+
+    /* Layout */
+    --content-width-md: 720px;
+    --content-width-lg: 900px;
+    --content-width-xl: 1200px;
+
+    /* Motion */
+    --transition-fast: 0.2s ease;
+    --transition-standard: 0.3s ease;
+    --main-accent-color-active: #3390e6;
+    --main-accent-color-activte: var(--main-accent-color-active);
+    --shadow-menu: 0 12px 32px rgb(0 0 0 / 15%);
+
     /* Styling */
     font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
     line-height: 1.5;
@@ -162,8 +222,8 @@ nav {
     grid-template-columns: 1fr auto 1fr;
     align-items: center;
     width: 100%;
-    height: 5rem;
-    padding: 0 2rem;
+    height: var(--nav-height);
+    padding: 0 var(--nav-padding-inline);
     background-color: var(--tinted-bg-color);
     border-bottom: solid 2px var(--main-accent-color);
 }
@@ -171,7 +231,7 @@ nav {
     /* Navigation bar sub areas */
     #nav-bar h2 {
         justify-self: start;
-        font-size: 2rem;
+        font-size: var(--font-size-heading-md);
         margin: 0;
     }
 
@@ -190,7 +250,7 @@ nav {
             color: var(--text-color);
             position: relative;
             display: inline-block;
-            padding-bottom: 4px;
+            padding-bottom: var(--space-xxs);
         }
 
         #nav-bar-links li a::after {
@@ -203,7 +263,7 @@ nav {
             background-color: var(--main-accent-color);
             transform: scaleX(0);
             transform-origin: center;
-            transition: transform 0.20s ease;
+            transition: transform var(--transition-fast);
         }
 
         #nav-bar-links li a:hover::after,
@@ -222,7 +282,7 @@ nav {
     #log-in-sign-up-lightdark-toggle {
         display: flex;
         align-items: center;
-        gap: 2rem;
+        gap: var(--space-xl);
         justify-self: end;
     }
 
@@ -231,13 +291,13 @@ nav {
         all: unset;
         padding: 0.6rem 2rem;
         font-size: 1rem;
-        border-radius: 6px;
+        border-radius: var(--radius-sm);
         cursor: pointer;
         text-align: center;
         background-color: var(--main-accent-color);
         color: var(--text-color);
         display: inline-block;
-        transition: all 0.2s ease;
+        transition: background-color var(--transition-fast), transform var(--transition-fast);
     }
 
     #get-started-btn:hover {
@@ -255,7 +315,7 @@ nav {
         width: 140px;
         padding: 0.6rem 1.2rem;
         font-size: 1rem;
-        border-radius: 6px;
+        border-radius: var(--radius-sm);
         cursor: pointer;
         background-color: var(--main-accent-color);
         color: var(--text-color);
@@ -263,7 +323,7 @@ nav {
         align-items: center;
         justify-content: center;
         text-align: center;
-        transition: all 0.2s ease;
+        transition: background-color var(--transition-fast), transform var(--transition-fast);
         gap: 0.55rem;
     }
 
@@ -275,18 +335,18 @@ nav {
         display: inline-flex;
         align-items: center;
         justify-content: center;
-        flex: 0 0 18px;
-        width: 18px;
-        height: 18px;
+        flex: 0 0 var(--icon-size-sm);
+        width: var(--icon-size-sm);
+        height: var(--icon-size-sm);
         color: currentcolor;
         line-height: 0;
     }
 
     .theme-icon svg {
         display: block;
-        width: 18px;
-        height: 18px;
-               fill: currentcolor;
+        width: var(--icon-size-sm);
+        height: var(--icon-size-sm);
+        fill: currentcolor;
         stroke: currentcolor;
     }
 
@@ -317,8 +377,8 @@ nav {
         margin-top: 0.6rem;
         background-color: var(--card-bg);
         border: 1px solid var(--box-border-color);
-        border-radius: 8px;
-        box-shadow: 0 12px 32px rgb(0 0 0 / 15%);
+        border-radius: var(--menu-radius);
+        box-shadow: var(--shadow-menu);
         min-width: 170px;
         z-index: 1000;
         overflow: hidden;
@@ -352,7 +412,7 @@ nav {
         color: var(--text-color);
         border: none;
         text-align: left;
-        transition: all 0.15s ease;
+        transition: background-color var(--transition-fast), padding-left var(--transition-fast);
         font-weight: 500;
         border-radius: 0;
         gap: 0.75rem;
diff --git a/frontend/src/styles/terms-of-service-page.css b/frontend/src/styles/terms-of-service-page.css
index 72f351f..78c8e64 100644
--- a/frontend/src/styles/terms-of-service-page.css
+++ b/frontend/src/styles/terms-of-service-page.css
@@ -8,17 +8,20 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    width: 35%;
-    margin-top: 16px;
+    width: min(var(--content-width-md), 100%);
+    margin-top: var(--space-md);
+    gap: var(--space-xs);
 }
 
 #terms-of-service-content .back-home-link {
     background-color: var(--card-bg);
     padding: 0.5rem 0.9rem;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-sm);
     color: var(--text-color);
     text-decoration: none;
-    margin-bottom: 0.5rem;
+    margin-bottom: var(--space-xs);
+    border: 1px solid var(--box-border-color);
+    transition: background-color var(--transition-fast), transform var(--transition-fast);
 }
 
     #terms-of-service-content .back-home-link:hover {
@@ -29,14 +32,15 @@
 #terms-of-service-content h1 {
     color: var(--text-color);
     margin: 0;
+    font-size: var(--font-size-heading-md);
 }
 
 #terms-of-service-content p {
     color: var(--text-color);
-    margin: 0.25rem 0 0.5rem;
+    margin: var(--space-xxs) 0 var(--space-xs);
 }
 
 #terms-of-service-content ol {
     color: var(--text-color);
-    margin: 0.5rem 0 0.75rem;
+    margin: var(--space-xs) 0 var(--space-sm);
 }
\ No newline at end of file