From 73b55ec7923d8687d7811aea5940e521f37f6de0 Mon Sep 17 00:00:00 2001
From: Brendan Donovan <142626107+BrendannnD@users.noreply.github.com>
Date: Wed, 5 Nov 2025 15:22:26 -0800
Subject: [PATCH 1/2] Good version of Triage

---
 app/femr/ui/views/layouts/main.scala.html     |  31 +-
 app/femr/ui/views/partials/footer.scala.html  |  48 +-
 app/femr/ui/views/partials/search.scala.html  |  80 +-
 app/femr/ui/views/partials/sidebar.scala.html | 180 ++++
 .../partials/triage/inputButton.scala.html    |  12 +-
 app/femr/ui/views/triage/index.scala.html     | 717 ++++++++--------
 public/css/redesign.css                       | 394 +++++++++
 public/css/triage_redesign.css                | 782 ++++++++++++++++++
 redesign.html                                 | 161 ++++
 9 files changed, 1966 insertions(+), 439 deletions(-)
 create mode 100644 app/femr/ui/views/partials/sidebar.scala.html
 create mode 100644 public/css/redesign.css
 create mode 100644 public/css/triage_redesign.css
 create mode 100644 redesign.html
diff --git a/app/femr/ui/views/layouts/main.scala.html b/app/femr/ui/views/layouts/main.scala.html
index 86f9ee6b8..64cad059e 100644
--- a/app/femr/ui/views/layouts/main.scala.html
+++ b/app/femr/ui/views/layouts/main.scala.html
@@ -5,33 +5,44 @@
         search: Html = Html(""),
         assets: AssetsFinder)(content: Html)
 @import femr.ui.views.html.partials.footer
-@import femr.ui.views.html.partials.header
+@import femr.ui.views.html.partials.sidebar
 
 <!DOCTYPE html>
-<html class="no-js" xmlns="http://www.w3.org/1999/html">
+<html class="no-js" lang="en" xmlns="http://www.w3.org/1999/html">
     <head>
         <title>@title | fEMR</title>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta name="description" content="">
         <link rel="shortcut icon" type="image/png" href="@assets.path("img/logo_color_wordless.png")">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@@400;500;600;700&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">
         <link rel="stylesheet" href="@assets.path("css/libraries/jquery.dataTables.min.css")">
         <link rel="stylesheet" href="@assets.path("css/libraries/bootstrap.min.css")">
         <link rel="stylesheet" href="@assets.path("css/femr.css")"/>
+        <link rel="stylesheet" href="@assets.path("css/redesign.css")"/>
         @styles
         <script type="text/javascript" src="@assets.path("js/libraries/modernizr-2.6.2.min.js")"></script>
     </head>
-    <body>
-        @header(currentUser, assets)
+    <body class="femr-shell">
+        <div class="femr-shell__layout">
+            @sidebar(currentUser, search, assets)
 
-        @outsideContainerTop
+            <div class="femr-shell__content">
+                @outsideContainerTop
 
-        <div class="container">
-            @search
+                <main class="femr-shell__main">
+                    <div class="femr-shell__main-inner">
+                        @content
+                    </div>
+                </main>
 
-            @content
-
-            @footer(currentUser, assets)
+                <div class="femr-shell__footer">
+                    @footer(currentUser, assets)
+                </div>
+            </div>
         </div>
 
         @outsideContainerBottom
diff --git a/app/femr/ui/views/partials/footer.scala.html b/app/femr/ui/views/partials/footer.scala.html
index a66a838d1..9d96ca975 100644
--- a/app/femr/ui/views/partials/footer.scala.html
+++ b/app/femr/ui/views/partials/footer.scala.html
@@ -24,46 +24,18 @@
             }
         });
 </script>
-<footer>
-    <div class="footerSpacer"></div>
-    <hr/>
-    <div class="row">
-        <div class="col-xs-4">
-                @if(currentUser != null) {
-                    <p>@currentUser.getKitVersion</p> @* We only have access to the version when logged in since currentUser is null if not logged in.*@
-                }
+<footer class="femr-footer">
+    <div class="femr-footer__content">
+        <div>
+            @if(currentUser != null) {
+                <p class="femr-footer__version">@currentUser.getKitVersion</p>
+            }
         </div>
-        <div class="col-xs-4">
-            <div class="leaveFeedback">
-               <a href="/feedback"> <button type="button" class="fButton fRedButton fOtherButton " id="langCode_feedbackBtn"> Leave Feedback </button></a>
-            </div>
+        <div class="femr-footer__actions">
+            <a href="/feedback" class="femr-btn femr-btn--secondary" id="langCode_feedbackBtn">Leave Feedback</a>
         </div>
-        <div class="col-xs-4">
-            <p class="text-right footerTextRight" id="langCode_googleChrome">Designed for Google Chrome</p>
+        <div class="femr-footer__note">
+            <p id="langCode_googleChrome">Designed for Google Chrome</p>
         </div>
     </div>
-    <br/>
 </footer>
-@*<script>*@
-@*        document.addEventListener('DOMContentLoaded', function(event) {*@
-@*            let languageData;*@
-@*            function translateTextNodes(node) {*@
-@*                const targetLang = "es";*@
-@*                if (node.nodeType === Node.TEXT_NODE) {*@
-@*                    const trimmedText = node.nodeValue.trim();*@
-@*                    if (trimmedText !== '' && languageData[targetLang][trimmedText]) {*@
-@*                        node.nodeValue = languageData[targetLang][trimmedText];*@
-@*                    }*@
-@*                } else {*@
-@*                    node.childNodes.forEach(child => translateTextNodes(child, targetLang));*@
-@*                }*@
-@*            }*@
-
-@*            fetch('@routes.Assets.versioned("json/languages.json")')*@
-@*                    .then(response => response.json())*@
-@*                    .then(data => {*@
-@*                        languageData = data;*@
-@*                        translateTextNodes(document.body);*@
-@*                    });*@
-@*        });*@
-@*</script>*@
diff --git a/app/femr/ui/views/partials/search.scala.html b/app/femr/ui/views/partials/search.scala.html
index cdc82438d..81b6f2d78 100644
--- a/app/femr/ui/views/partials/search.scala.html
+++ b/app/femr/ui/views/partials/search.scala.html
@@ -2,51 +2,51 @@
 
 @import femr.ui.controllers.routes.SearchController
 
-<div id="searchContainer">
+@defining(page.toLowerCase.trim) { pageKey =>
+@defining(s"sidebar-search-field-$pageKey") { searchFieldId =>
 
-    @page.toLowerCase match {
-        case "triage" => {
-            @helper.form(action = SearchController.handleSearch("triage")) {
-                <div class="nameOrIdSearchFormWrap">
-                    <label for="nameOrIdSearchForm"></label>
-                    <input type="text" class="fInput" id = "nameOrIdSearchForm" placeholder="ID, Name, or Phone #" name="patientSearchQuery"/>
-                    <button type="submit" id="searchBtn" class="fButton fRedButton fGlobalSearchButton nameOrIdSearchButton">Search</button>
-                </div>
+<div id="searchContainer" class="femr-sidebar__search-container">
+    <label class="femr-sidebar__section-label" for="@searchFieldId">Search Patient</label>
+    <div class="femr-sidebar__search">
+        @pageKey match {
+            case "triage" => {
+                @helper.form(action = SearchController.handleSearch("triage")) {
+                    <div class="nameOrIdSearchFormWrap">
+                        <input type="text" class="fInput" id="@searchFieldId" placeholder="ID, Name, or Phone #" name="patientSearchQuery" autocomplete="off"/>
+                        <button type="submit" class="nameOrIdSearchButton" aria-label="Search patients"></button>
+                    </div>
+                }
             }
-        }
-        case "history" => {
-            @helper.form(action = SearchController.handleSearch("history")) {
-                <div class="nameOrIdSearchFormWrap">
-                    <label for="nameOrIdSearchForm"></label>
-                    <input type="text" class="fInput" id = "nameOrIdSearchForm" placeholder="ID, Name, or Phone #" name="patientSearchQuery"/>
-                    <button type="submit" id="searchBtn" class="fButton fRedButton fGlobalSearchButton nameOrIdSearchButton">Search</button>
-                </div>
+            case "history" => {
+                @helper.form(action = SearchController.handleSearch("history")) {
+                    <div class="nameOrIdSearchFormWrap">
+                        <input type="text" class="fInput" id="@searchFieldId" placeholder="ID, Name, or Phone #" name="patientSearchQuery" autocomplete="off"/>
+                        <button type="submit" class="nameOrIdSearchButton" aria-label="Search patients"></button>
+                    </div>
+                }
             }
-        }
-        case "medical" => {
-            @helper.form(action = SearchController.handleSearch("medical")) {
-                <div class="nameOrIdSearchFormWrap">
-                    <label for="nameOrIdSearchForm"></label>
-                    <input type="text" class="fInput" id = "nameOrIdSearchForm" placeholder="ID, Name, or Phone #" name="patientSearchQuery"/>
-                    <button type="submit" id="searchBtn" class="fButton fRedButton fGlobalSearchButton nameOrIdSearchButton">Search</button>
-                </div>
+            case "medical" => {
+                @helper.form(action = SearchController.handleSearch("medical")) {
+                    <div class="nameOrIdSearchFormWrap">
+                        <input type="text" class="fInput" id="@searchFieldId" placeholder="ID, Name, or Phone #" name="patientSearchQuery" autocomplete="off"/>
+                        <button type="submit" class="nameOrIdSearchButton" aria-label="Search patients"></button>
+                    </div>
+                }
             }
-        }
-        case "pharmacy" => {
-            @helper.form(action = SearchController.handleSearch("pharmacy")) {
-                <div class="nameOrIdSearchFormWrap">
-                    <label for="nameOrIdSearchForm"></label>
-                    <input type="text" class="fInput" id = "nameOrIdSearchForm" placeholder="ID, Name, or Phone #" name="patientSearchQuery"/>
-                    <button type="submit" id="searchBtn" class="fButton fRedButton fGlobalSearchButton nameOrIdSearchButton">Search</button>
-                </div>
+            case "pharmacy" => {
+                @helper.form(action = SearchController.handleSearch("pharmacy")) {
+                    <div class="nameOrIdSearchFormWrap">
+                        <input type="text" class="fInput" id="@searchFieldId" placeholder="ID, Name, or Phone #" name="patientSearchQuery" autocomplete="off"/>
+                        <button type="submit" class="nameOrIdSearchButton" aria-label="Search patients"></button>
+                    </div>
+                }
             }
-        }
-        case _ => {
+            case _ => {
 
+            }
         }
-    }
-    @* Medical also needs an exception. so does pharmacy. History controller should only be
-    for duplicate patients. How to structure this?!*@
-
+    </div>
+</div>
 
-</div>
\ No newline at end of file
+}
+}
\ No newline at end of file
diff --git a/app/femr/ui/views/partials/sidebar.scala.html b/app/femr/ui/views/partials/sidebar.scala.html
new file mode 100644
index 000000000..cfe6dc6e9
--- /dev/null
+++ b/app/femr/ui/views/partials/sidebar.scala.html
@@ -0,0 +1,180 @@
+@(currentUser: femr.common.dtos.CurrentUser = null, search: Html = Html(""), assets: AssetsFinder)
+
+@import femr.ui.views.partials.helpers.AuthenticatedPartialHelper
+@import femr.ui.controllers.routes.HomeController
+@import femr.ui.controllers.routes.SessionsController
+@import femr.ui.controllers.routes.TriageController
+@import femr.ui.controllers.routes.MedicalController
+@import femr.ui.controllers.routes.PharmaciesController
+@import femr.ui.controllers.routes.ResearchController
+@import femr.ui.controllers.routes.ReferenceController
+@import femr.ui.controllers.routes.SettingsController
+@import femr.ui.controllers.manager.routes.ManagerController
+@import femr.ui.controllers.superuser.routes.SuperuserController
+@import femr.ui.controllers.admin.routes.AdminController
+@import femr.ui.controllers.routes.DatabaseDumpController
+@import scala.collection.JavaConverters._
+
+@defining(Option(currentUser).flatMap(u => Option(u.getFirstName)).getOrElse("").trim) { firstName =>
+@defining(Option(currentUser).flatMap(u => Option(u.getLastName)).getOrElse("").trim) { lastName =>
+@defining({
+    val initials = (firstName.headOption.toSeq ++ lastName.headOption.toSeq).map(_.toUpper).mkString
+    if (initials.nonEmpty) initials else "FE"
+}) { initials =>
+@defining(Option(currentUser)
+        .flatMap(u => Option(u.getRoles))
+        .map(_.asScala.toList)
+        .getOrElse(Nil)
+        .headOption
+        .map(_.getName)
+        .getOrElse("").trim) { primaryRole =>
+
+<div class="femr-sidebar">
+    <div class="femr-sidebar__brand">
+        <a href="@HomeController.index()" class="femr-sidebar__brand-link">femr</a>
+    </div>
+
+    @if(currentUser != null) {
+        <script>
+                document.addEventListener('DOMContentLoaded', function(event) {
+                    let languageData;
+                    fetch('@routes.Assets.versioned("json/languages.json")')
+                            .then(response => response.json())
+                            .then(data => {
+                                languageData = data;
+                                updateLanguage("@{currentUser.getLanguageCode}");
+                            });
+
+                    function updateTextContent(elementId, value) {
+                        const element = document.getElementById(elementId);
+                        if (element) {
+                            element.textContent = value;
+                        }
+                    }
+
+                    function updateLanguage(languageCode) {
+                        localStorage.setItem('languageCode', languageCode);
+                        updateTextContent('langCode_triage', languageData[languageCode].langCode_triage);
+                        updateTextContent('langCode_medical', languageData[languageCode].langCode_medical);
+                        updateTextContent('langCode_pharmacy', languageData[languageCode].langCode_pharmacy);
+                        updateTextContent('langCode_research', languageData[languageCode].langCode_research);
+                        updateTextContent('langCode_manager', languageData[languageCode].langCode_manager);
+                        updateTextContent('langCode_admin', languageData[languageCode].langCode_admin);
+                        updateTextContent('langCode_superUser', languageData[languageCode].langCode_superUser);
+                        updateTextContent('langCode_reference', languageData[languageCode].langCode_reference);
+                        updateTextContent('langCode_settings', languageData[languageCode].langCode_settings);
+                    }
+                });
+        </script>
+
+        @if(search.body.trim.nonEmpty) {
+            <div class="femr-sidebar__section">
+                @search
+            </div>
+        }
+
+        <nav class="femr-sidebar__section" aria-label="Primary">
+            <ul class="femr-sidebar__nav-list">
+                @if(AuthenticatedPartialHelper.showMedicalPersonnelMenu(currentUser.getRoles)) {
+                    <li>
+                        <a class="femr-sidebar__nav-link" href="@TriageController.indexGet()">
+                            <span class="material-symbols-outlined femr-sidebar__nav-icon">person_add</span>
+                            <span class="femr-sidebar__nav-text" id="langCode_triage">Triage</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="femr-sidebar__nav-link" href="@MedicalController.indexGet()">
+                            <span class="material-symbols-outlined femr-sidebar__nav-icon">medical_services</span>
+                            <span class="femr-sidebar__nav-text" id="langCode_medical">Medical</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="femr-sidebar__nav-link" href="@PharmaciesController.indexGet()">
+                            <span class="material-symbols-outlined femr-sidebar__nav-icon">vaccines</span>
+                            <span class="femr-sidebar__nav-text" id="langCode_pharmacy">Pharmacy</span>
+                        </a>
+                    </li>
+                }
+                @if(AuthenticatedPartialHelper.showResearcherMenu(currentUser.getRoles)) {
+                    <li>
+                        <a class="femr-sidebar__nav-link" href="@ResearchController.indexGet()">
+                            <span class="material-symbols-outlined femr-sidebar__nav-icon">science</span>
+                            <span class="femr-sidebar__nav-text" id="langCode_research">Research</span>
+                        </a>
+                    </li>
+                }
+                @if(AuthenticatedPartialHelper.showManagerMenu(currentUser.getRoles)){
+                    <li>
+                        <a class="femr-sidebar__nav-link" href="@ManagerController.indexGet()">
+                            <span class="material-symbols-outlined femr-sidebar__nav-icon">admin_panel_settings</span>
+                            <span class="femr-sidebar__nav-text" id="langCode_manager">Manager</span>
+                        </a>
+                    </li>
+                }
+                @if(AuthenticatedPartialHelper.showAdminMenu(currentUser.getRoles) && !AuthenticatedPartialHelper.showSuperUserMenu(currentUser.getRoles)) {
+                    <li>
+                        <a class="femr-sidebar__nav-link" href="@AdminController.index()">
+                            <span class="material-symbols-outlined femr-sidebar__nav-icon">shield_person</span>
+                            <span class="femr-sidebar__nav-text" id="langCode_admin">Admin Panel</span>
+                        </a>
+                    </li>
+                }
+                @if(AuthenticatedPartialHelper.showSuperUserMenu(currentUser.getRoles)) {
+                    <li>
+                        <a class="femr-sidebar__nav-link" href="@SuperuserController.indexGet()">
+                            <span class="material-symbols-outlined femr-sidebar__nav-icon">shield_person</span>
+                            <span class="femr-sidebar__nav-text" id="langCode_superUser">Admin Panel</span>
+                        </a>
+                    </li>
+                }
+                <li>
+                    <a class="femr-sidebar__nav-link" href="@DatabaseDumpController.indexGet()">
+                        <span class="material-symbols-outlined femr-sidebar__nav-icon">download</span>
+                        <span class="femr-sidebar__nav-text">Backup Data</span>
+                    </a>
+                </li>
+                <li>
+                    <a class="femr-sidebar__nav-link" href="@ReferenceController.indexGet()" target="_blank" rel="noopener">
+                        <span class="material-symbols-outlined femr-sidebar__nav-icon">library_books</span>
+                        <span class="femr-sidebar__nav-text" id="langCode_reference">Reference</span>
+                    </a>
+                </li>
+            </ul>
+        </nav>
+
+        <div class="femr-sidebar__spacer"></div>
+
+        <div class="femr-sidebar__user">
+            <div class="femr-sidebar__avatar" aria-hidden="true">@initials</div>
+            <div class="femr-sidebar__user-meta">
+                <p class="femr-sidebar__user-name">@firstName @lastName</p>
+                @if(primaryRole.nonEmpty) {
+                    <p class="femr-sidebar__user-role">@primaryRole</p>
+                }
+            </div>
+            <div class="femr-sidebar__user-actions">
+                <a href="@SettingsController.index()" class="femr-sidebar__icon-button" title="Settings">
+                    <span class="material-symbols-outlined" aria-hidden="true">settings</span>
+                    <span class="femr-sidebar__sr" id="langCode_settings">Settings</span>
+                </a>
+                <a href="@SessionsController.delete()" class="femr-sidebar__icon-button" title="Sign out">
+                    <span class="material-symbols-outlined" aria-hidden="true">logout</span>
+                    <span class="femr-sidebar__sr">Sign out</span>
+                </a>
+            </div>
+        </div>
+    } else {
+        <div class="femr-sidebar__section femr-sidebar__section--anonymous">
+            <p class="femr-sidebar__anonymous-title">Welcome to femr</p>
+            <p class="femr-sidebar__anonymous-subtitle">Please sign in to continue.</p>
+        </div>
+    }
+
+    @if(currentUser != null) {
+        <input type="hidden" value="@currentUser.getTimeout2()" id='h_v' class='h_v'>
+    }
+</div>
+}
+}
+}
+}
diff --git a/app/femr/ui/views/partials/triage/inputButton.scala.html b/app/femr/ui/views/partials/triage/inputButton.scala.html
index 2c14e9b49..e2a89dce4 100644
--- a/app/femr/ui/views/partials/triage/inputButton.scala.html
+++ b/app/femr/ui/views/partials/triage/inputButton.scala.html
@@ -2,20 +2,20 @@
 
   @inputBlock = {
   @if(Boolean2boolean(emptyModel)) {
-    <label class="btn btn-default width-50">
+    <label class="btn btn-default width-50 femr-segmented__option">
       <input type="radio" name="@forInput" id="@id" value="@value">
-      @name
+      <span class="gender-label-text">@name</span>
     </label>
   } else {
     @if(Boolean2boolean(active)) {
-      <label class="btn btn-primary active disabled  width-50">
+      <label class="btn btn-primary active disabled width-50 femr-segmented__option">
         <input type="radio" name="@forInput" id="@id" value="@value" checked="checked">
-        @name
+        <span class="gender-label-text">@name</span>
       </label>
     } else {
-      <label class="btn btn-default disabled  width-50">
+      <label class="btn btn-default disabled width-50 femr-segmented__option">
         <input type="radio" name="@forInput" id="@id" value="@value">
-        @name
+        <span class="gender-label-text">@name</span>
       </label>
     }
   }
diff --git a/app/femr/ui/views/triage/index.scala.html b/app/femr/ui/views/triage/index.scala.html
index e0d5dbbe4..616a646c4 100644
--- a/app/femr/ui/views/triage/index.scala.html
+++ b/app/femr/ui/views/triage/index.scala.html
@@ -22,7 +22,6 @@
     <script type="text/javascript" src="@assets.path("js/libraries/typeahead.bundle.min.js")"></script>
     <script>
             let languageData = {};
-            // MutationObserver to detect when elements are added to the DOM for warning messages
             const observer = new MutationObserver((mutations) => {
                 mutations.forEach((mutation) => {
                     mutation.addedNodes.forEach((node) => {
@@ -33,7 +32,6 @@
                 });
             });
 
-            // Start observing the body for added elements
             observer.observe(document.body, { childList: true, subtree: true });
 
             function updateWarning(languageCode = "en") {
@@ -46,6 +44,7 @@
 
             document.addEventListener('DOMContentLoaded', function(event) {
                 initializeGenderLabels();
+                initializeTabs();
                 fetch('@routes.Assets.versioned("json/languages.json")')
                         .then(response => response.json())
                         .then(data => {
@@ -53,16 +52,56 @@
                             updateLanguage("@{currentUser.getLanguageCode()}");
                         });
 
+                const photoInput = document.getElementById('photoInput');
+                if (photoInput) {
+                    photoInput.addEventListener('change', function() {
+                        const fileChosenText = document.getElementById('fileChosenText');
+                        if (fileChosenText) {
+                            const languageCode = localStorage.getItem('languageCode') || '@currentUser.getLanguageCode()';
+                            fileChosenText.textContent = this.files.length ? this.files[0].name : languageData[languageCode].triage_index_No;
+                        }
+                    });
+                }
+
+                function initializeTabs() {
+                    const tabButtons = document.querySelectorAll('[data-triage-target]');
+                    const tabPanels = document.querySelectorAll('.femr-tabpanel');
+                    if (tabButtons.length === 0) {
+                        return;
+                    }
+
+                    tabButtons.forEach((button) => {
+                        button.addEventListener('click', () => {
+                            const targetId = button.getAttribute('data-triage-target');
+
+                            tabButtons.forEach((btn) => {
+                                const isActive = btn === button;
+                                btn.classList.toggle('is-active', isActive);
+                                btn.setAttribute('aria-selected', isActive);
+                            });
+
+                            tabPanels.forEach((panel) => {
+                                const isTarget = panel.id === targetId;
+                                panel.classList.toggle('femr-tabpanel--active', isTarget);
+                                panel.toggleAttribute('hidden', !isTarget);
+                            });
+                        });
+                    });
+                }
 
                 function updateTextContent(elementId, value) {
                     const element = document.getElementById(elementId);
                     if (element) {
-                        element.textContent = value;
+                        const textTarget = element.querySelector('[data-i18n-text="true"]');
+                        if (textTarget) {
+                            textTarget.textContent = value;
+                        } else {
+                            element.textContent = value;
+                        }
                     }
                 }
                 function updateInputFieldValue(identifier, value) {
                     const inputElement = document.getElementById(identifier);
-                    // No need to find a label element if you're just updating an input's placeholder
                     if (inputElement) {
                         inputElement.placeholder = value;
                     }
@@ -71,31 +110,25 @@
                     const inputElement = document.getElementById(identifier);
                     const labelElement = document.querySelector(`label[for='${identifier}']`);
                     if (inputElement && labelElement) {
-                        labelElement.textContent = value;
+                        const labelTextNode = labelElement.querySelector('[data-i18n-text="true"]');
+                        if (labelTextNode) {
+                            labelTextNode.textContent = value;
+                        } else {
+                            labelElement.childNodes[0].nodeValue = value + ' ';
+                        }
                         inputElement.placeholder = value;
                     }
                 }
 
                 function replaceGenderString(languageData, language) {
-                    // Only proceed if the language data for "Gender" is available
                     if(languageData[language] && languageData[language]['triage_index_Gender']) {
-                        // Select all label elements in the document
                         const labels = document.querySelectorAll('label[data-original-text="Gender"]');
-
-                        // Iterate over each label
                         labels.forEach(label => {
-                            // Replace the label's text content with the translated term from your language data
-                            label.textContent = languageData[language]['triage_index_Gender'];
-                            // If there is a nested span with specific classes, re-append it to keep the markup consistent
-                            const redBoldSpan = label.querySelector('.red.bold');
-                            if (redBoldSpan) {
-                                label.appendChild(redBoldSpan);
-                            }
+                            label.childNodes[0].nodeValue = languageData[language]['triage_index_Gender'] + ' ';
                         });
                     }
                 }
 
-                // Call this function once on page load to initialize the data-original-text attributes
                 function initializeGenderLabels() {
                     const genderLabels = document.querySelectorAll('label');
                     genderLabels.forEach(label => {
@@ -106,26 +139,23 @@
                 }
 
                 function updateGenderLabels(languageData, language) {
-                    // Check if the language data exists for the selected language
                     if(languageData[language]) {
-                        // Update the Male button
-                        // if(languageData[language]['triage_index_Gender']) {
-                        //     const genderLabelElement = document.querySelector("label[for='genderBtns']");
-                        //     if (genderLabelElement) {
-                        //         genderLabelElement.textContent = languageData[language]['triage_index_Gender'] + " ";
-                        //     }
-                        // }
                         if(languageData[language]['triage_index_Male']) {
                             const maleBtn = document.getElementById('maleBtn');
                             if (maleBtn) {
-                                maleBtn.nextSibling.textContent = languageData[language]['triage_index_Male'];
+                                const label = maleBtn.closest('label');
+                                if (label) {
+                                    label.querySelector('.gender-label-text').textContent = languageData[language]['triage_index_Male'];
+                                }
                             }
                         }
-                        // Update the Female button
                         if(languageData[language]['triage_index_Female']) {
                             const femaleBtn = document.getElementById('femaleBtn');
                             if (femaleBtn) {
-                                femaleBtn.nextSibling.textContent = languageData[language]['triage_index_Female'];
+                                const label = femaleBtn.closest('label');
+                                if (label) {
+                                    label.querySelector('.gender-label-text').textContent = languageData[language]['triage_index_Female'];
+                                }
                             }
                         }
                     }
@@ -135,40 +165,31 @@
                     const fileChosenText = document.getElementById('fileChosenText');
 
                     if (fileInputLabel && languageData[language] && languageData[language]['triage_index_choose']) {
-                        fileInputLabel.textContent = languageData[language]['triage_index_choose'];
+                        fileInputLabel.textContent = languageData[language].triage_index_choose;
                     }
 
                     if (fileChosenText && languageData[language] && languageData[language]['triage_index_No']) {
-                        fileChosenText.textContent = languageData[language]['triage_index_No'];
+                        fileChosenText.textContent = languageData[language].triage_index_No;
                     }
                 }
-                document.getElementById('photoInput').addEventListener('change', function() {
-                    const fileChosenText = document.getElementById('fileChosenText');
-                    fileChosenText.textContent = this.files.length ? this.files[0].name : languageData[currentLanguage]['triage_index_No'];
-                });
 
                 function updateAgeClassificationLabels(languageData, language) {
-                    const classifications = document.querySelectorAll('#classificationRadioWrap label');
-                    classifications.forEach(label => {
-                        // Extracting the key from the label's ID (label_infant -> infant)
-                        const classification = label.id.replace('label_', '');
-                        const span = label.querySelector('span'); // Finds the span inside the current label
-                        const translationKey = "ageClassification_" + classification; // Constructs the translation key
-
-                        // Check if the translation exists for the given key and language
+                    const classifications = document.querySelectorAll('#classificationRadioWrap label span');
+                    classifications.forEach(span => {
+                        const parentLabel = span.parentElement;
+                        if (!parentLabel) {
+                            return;
+                        }
+                        const classification = parentLabel.id.replace('label_', '');
+                        const translationKey = `ageClassification_${classification}`;
                         if(languageData[language] && languageData[language][translationKey]) {
-                            const labelText = languageData[language][translationKey];
-                            // Updating the text inside the span
-                            if (span) {
-                                span.textContent = labelText;
-                            }
+                            span.textContent = languageData[language][translationKey];
                         }
                     });
                 }
                 function updateAgeInputPlaceholders(languageCode) {
-                    // Update placeholders
-                    const yearsInput = document.getElementById('yearsInput'); // You need to ensure this is the correct ID
-                    const monthsInput = document.getElementById('monthsInput'); // You need to ensure this is the correct ID
+                    const yearsInput = document.getElementById('yearsInput');
+                    const monthsInput = document.getElementById('monthsInput');
 
                     if (yearsInput && monthsInput && languageData[languageCode]) {
                         yearsInput.placeholder = languageData[languageCode].triage_index_Years;
@@ -183,39 +204,40 @@
                     updateTextContent("triage_index_p_Patient", languageData[language].triage_index_p_Patient);
                     updateTextContent("triage_index_a_Go", languageData[language].triage_index_a_Go);
                     updateTextContent("triage_index_h2_Check", languageData[language].triage_index_h2_Check);
+                    updateTextContent("general-info-tab", languageData[language].triage_index_h2_General);
+                    updateTextContent("vitals-tab", languageData[language].triage_index_Vitals);
                     updateTextContent("triage_index_h2_General", languageData[language].triage_index_h2_General);
                     updateTextContent("triageSubmitBtn", languageData[language].triage_index_button_submit_patient);
                     updateTextContent("triageResetBtn", languageData[language].triage_index_button_reset_fields);
                     const patientDemographics = document.getElementById("triage_index_b_patientDemographics");
                     if (patientDemographics) {
                         patientDemographics.title = languageData[language].triage_index_b_patientDemographics;
+                        patientDemographics.setAttribute('aria-label', languageData[language].triage_index_b_patientDemographics);
                     }
                     updateInputField("firstName", languageData[language].triage_index_firstName);
                     updateInputField("lastName", languageData[language].triage_index_lastName);
                     updateInputField("phoneNumber", languageData[language].triage_index_phoneNumber);
                     updateInputField("address", languageData[language].triage_index_address);
-
                     updateInputField("city", languageData[language].triage_index_City);
                     updateTextContent("ageLabel", languageData[language].triage_index_Age);
-                    const orTexts = document.querySelectorAll(".orSpan");
-                    orTexts.forEach(orText => {
+                    document.querySelectorAll('.orSpan').forEach(orText => {
                         orText.textContent = languageData[language].triage_index_OR;
                     });
                     updateTextContent("birthDateLabel", languageData[language].triage_index_Birth);
                     updateAgeClassificationLabels(languageData, language);
                     updateGenderLabels(languageData, language);
                     replaceGenderString(languageData, language);
-                    updateTextContent("photoLabel", languageData[language].triage_index_Patient1);
+                            updateTextContent("photoLabel", languageData[language].triage_index_Patient1);
                     updateFileInputText(languageData, language);
                     updateTextContent("vitalsHeading", languageData[language].triage_index_Vitals);
                     updateTextContent("temperatureLabel", languageData[language].triage_index_Temperature);
                     updateTextContent("oxygenLabel", languageData[language].triage_index_Oxygen);
                     updateTextContent("bloodPressureTitle", languageData[language].triage_index_Blood);
                     updateTextContent("heightLabel", languageData[language].triage_index_Height);
-                    updateInputFieldValue("systolicInput", languageData[language].triage_index_Systolic);
-                    updateInputFieldValue("diastolicInput", languageData[language].triage_index_Diastolic);
-                    updateInputFieldValue("metersInput", languageData[language].triage_index_Meters);
-                    updateInputFieldValue("centimetersInput", languageData[language].triage_index_Centimeters);
+                    updateInputFieldValue("@viewModel.getVitalNames.get(7).getName", languageData[language].triage_index_Systolic);
+                    updateInputFieldValue("@viewModel.getVitalNames.get(8).getName", languageData[language].triage_index_Diastolic);
+                    updateInputFieldValue("@viewModel.getVitalNames.get(4).getName", languageData[language].triage_index_Meters);
+                    updateInputFieldValue("@viewModel.getVitalNames.get(5).getName", languageData[language].triage_index_Centimeters);
                     updateTextContent("heartRateLabel", languageData[language].triage_index_Heart);
                     updateTextContent("weightLabel", languageData[language].triage_index_Weight);
                     updateTextContent("respirationsLabel", languageData[language].triage_index_Respirations);
@@ -236,332 +258,337 @@
     </script>
 }
 @additionalStyles = {
-    <link rel="stylesheet" href="@assets.path("css/triage.css")">
+    <link rel="stylesheet" href="@assets.path("css/triage_redesign.css")">
     <link rel="stylesheet" href="@assets.path("css/libraries/datepicker.css")">
-    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
-
 }
 @main("Triage", currentUser, styles = additionalStyles, scripts = additionalScripts, search = search("triage"), assets = assets) {
 
-    <div id="triageContentWrap">
+    <div id="triageContentWrap" class="femr-triage">
         @if(viewModel.isSearchError) {
-            <p id="triage_index_p_That">That patient could not be found.</p>
+            <div class="femr-alert femr-alert--error" role="alert" id="triage_index_p_That">
+                <span data-i18n-text="true">That patient could not be found.</span>
+            </div>
         }
         @if(viewModel.isLinkToMedical()){
-            <p class="newEncounterWrap" id="triage_index_p_Patient"> Patient has an open encounter <a class="btn btn-danger" href="/medical/edit/@viewModel.getPatient().getId()" target="blank" id="triage_index_a_Go">Go To Medical</a></p>
+            <div class="femr-alert femr-alert--info" role="alert" id="triage_index_p_Patient">
+                <span data-i18n-text="true">Patient has an open encounter</span>
+                <a class="femr-link femr-link--accent" href="/medical/edit/@viewModel.getPatient().getId()" target="_blank" id="triage_index_a_Go" data-i18n-text="true">Go To Medical</a>
+            </div>
         }
-        <h2 class="text-center triageTitle" id="triage_index_h2_Check">Check In - Triage</h2>
 
         @helper.form(action = TriageController.indexPost(viewModel.getPatient.getId), 'class -> "form-horizontal triage-form", 'enctype -> "multipart/form-data") {
-            <div id="genInfoWrap" class="sectionBackground backgroundForWrap">
-                <div class="generalTitleWrap">
-                    <h2 class="generalTitle" id="triage_index_h2_General">General Info</h2>
-                    <h2 class="generalTitleQuestion">
-                        <b id="triage_index_b_patientDemographics" title="Complete form with patient demographics as instructed. Any box with an asterix (*) is required. Shared contact information would be if two patients have a household phone or email that they share, for example.">
-                            <i class="fa fa-question-circle " style="font-size: 0.5em;"></i>
-                        </b>
-                    </h2>
-                </div>
-                @inputText("First Name", "firstName", true, if(viewModel != null) viewModel.getPatient.getFirstName else null, "text")
-                <br>
-                @inputText("Last Name", "lastName", true, if(viewModel != null) viewModel.getPatient.getLastName else null, "text")
-                <br>
-                @inputText("Phone Number", "phoneNumber", false, if(viewModel != null) viewModel.getPatient.getPhoneNumber else null, "tel")
-                <br>
-                @inputText("Address", "address", false, if(viewModel != null) viewModel.getPatient.getAddress else null, "text")
-                <br>
-                <div class="generalInfoInput" id="citySearchContainer">
-                    <label for="city">City</label><span class="red bold">*</span>
-                    @if(viewModel.getPatient.getCity == null) {
-                        <input type="text" class="citySearch fInput" name="city" id="city" required>
-                    } else {
-                        <input type="text" class="citySearch fInput" name="city" id="city" value="@viewModel.getPatient.getCity"readonly>
-                        }
-                </div>
-                <br>
-                <div id="ageInputWrap">
-                    <div class="generalInfoInput">
-                        <label id="ageLabel">Age</label><span class="red bold">*</span>
-                        <input class="fInput ageInput" type="text" id="yearsInput" placeholder="Years" />
-                        <input class="fInput ageInput" type="text" id="monthsInput" placeholder="Months" />
+            <div class="femr-card femr-card--elevated">
+                <div class="femr-card__header">
+                    <div class="femr-card__patient">
+                        <h2 class="femr-card__title" id="triage_index_h2_Check"><span data-i18n-text="true">Patient Triage</span></h2>
+                        <p class="femr-card__subtitle">Patient ID: <span class="femr-card__subtitle-value">@viewModel.getPatient.getId</span></p>
                     </div>
-
-                    <span class="orSpan">OR</span>
-                    <div class="generalInfoInput" id="birthDateWrapper">
-                        <div class="generalInfoInput">
-                            <label id="birthDateLabel" for="birthDateInput">Birth Date</label><span class="red bold">*</span>
-                            <input type="date" class="fInput" id="birthDateInput" name="age" value="@{if(viewModel != null) viewModel.getPatient.getBirth() else ""}" />
-                        </div>
-                    </div>
-                    <span class="orSpan">OR</span>
-                    @*                    <div class="generalInfoInput">*@
-                    @*                        <div id="classificationRadioWrap">*@
-                    @*                        @for((key, valyew) <- viewModel.getPossibleAgeClassifications) {*@
-                    @*                            <label><input type="radio" name="ageClassification" value="@key" /> @key <span>@valyew</span></label>*@
-                    @*                        }*@
-                    @*                        </div>*@
-                    @*                    </div>*@
-                    <div class="generalInfoInput">
-                        <div id="classificationRadioWrap">
-                        @for((key, value) <- viewModel.getPossibleAgeClassifications) {
-                            <label class="ageRadio" id="@("label_" + key)"><input type="radio" name="ageClassification" value="@key" />
-                                <span id="@("span_" + key)">@value</span>
-                            </label>
+                    <div class="femr-triage__actions">
+                        <button type="button" class="femr-btn femr-btn--ghost" id="triageResetBtn">
+                            <span class="material-symbols-outlined" aria-hidden="true">refresh</span>
+                            <span class="femr-btn__label" data-i18n-text="true">Reset Fields</span>
+                        </button>
+                        <button type="submit" class="femr-btn femr-btn--primary" id="triageSubmitBtn">
+                            <span class="material-symbols-outlined" aria-hidden="true">send</span>
+                            <span class="femr-btn__label" data-i18n-text="true">Submit Patient</span>
+                        </button>
+                        @if(viewModel.getPatient.getId != 0) {
+                            <a href="@HistoryController.indexPatientGet(viewModel.getPatient.getId.toString)" class="femr-btn femr-btn--secondary" target="_blank">
+                                <span class="material-symbols-outlined" aria-hidden="true">history</span>
+                                <span class="femr-btn__label">Patient History</span>
+                            </a>
                         }
-                        </div>
                     </div>
                 </div>
 
-                <br>
-                @inputGender(viewModel)
-                <br>
-
-                <div class="generalInfoInput">
-
-
-                    <label id="photoLabel" for="photo">Patient Photo</label>
-                    <style>
-                            #chooseFileLabel {
-                                background-color: #ffffff; /* White color */
-                                /* Other styling properties for your button */
-                                padding: 10px 20px;
-                                border: 1px solid #ccc; /* Light gray border for some definition */
-                                border-radius: 5px;
-                                display: inline-block;
-                                cursor: pointer;
-                                /* Add more styling here if needed */
-                            }
-
-                            /* Optional: Style for hover effect */
-                            #chooseFileLabel:hover {
-                                background-color: #f0f0f0; /* Slightly off-white color on hover */
-                            }
-                    </style>
-
-                    <div id="photoInputFormDiv">
-                        <label for="photoInput" id="chooseFileLabel" class="btn">Choose File</label>
-                        <input type="file" class="fInput hidden" id="photoInput" name="patientPhoto" />
-                        <span id="fileChosenText">No file chosen</span>
-                        <textarea id="photoInputCropped" class="hidden" name="patientPhotoCropped"></textarea>
-                    </div>
-
-
-                    <div id="patientPhotoDiv" hidden="true">
-                        <div class="btn-group" >
-                            <img id="patientPhoto" class="crop_me" alt="" src="@viewModel.getPatient.getPathToPhoto" />
-
-                            <div class="btn-toolbar" role="buttons">
-                                <div class="btn-group" id="zoomControls">
-                                    <button type="button" id="btnZoomIn" class="btn btn-default btn-lg">
-                                        <span class="glyphicon glyphicon-zoom-in"></span>
-                                    </button>
-                                    <button type="button" id="btnZoomOut" class="btn btn-default btn-lg">
-                                        <span class="glyphicon glyphicon-zoom-out"></span>
-                                    </button>
-                                </div>
-                                <div class="btn-group">
-                                    <button id="btnDeletePhoto" type="button" class="btn btn-danger btn-lg pull-right">
-                                        <span class="glyphicon glyphicon-trash"></span>
-                                    </button>
-                                </div>
-                            </div>
-                            <canvas id="patientPhotoCanvas" class="hidden"></canvas>
-                        </div>
-                    </div>
-                    <input class="hidden" type="checkbox" name="deletePhoto" value="true" id="deletePhoto">
-
-
+                <div class="femr-tabs" role="tablist">
+                    <button type="button" class="femr-tab is-active" id="general-info-tab" data-triage-target="genInfoWrap" aria-controls="genInfoWrap" aria-selected="true">
+                        <span data-i18n-text="true">General Info</span>
+                    </button>
+                    <button type="button" class="femr-tab" id="vitals-tab" data-triage-target="vitalsWrap" aria-controls="vitalsWrap" aria-selected="false">
+                        <span data-i18n-text="true">Vitals</span>
+                    </button>
                 </div>
 
-            </div>
-
-            <div id="vitalsWrap" class="sectionBackground backgroundForWrap">
-                <h2 id="vitalsHeading">Vitals</h2>
-
-                <div id="vitalContainer">
+                <div class="femr-tabs__panels">
+                    <section id="genInfoWrap" class="femr-tabpanel femr-tabpanel--active" role="tabpanel" aria-labelledby="general-info-tab">
+                        <div class="femr-section__header">
+                            <h3 class="femr-section__title" id="triage_index_h2_General"><span data-i18n-text="true">General Info</span></h3>
+                        </div>
 
-                    <div id="leftVitalsWrap">
-                            <!-- Alaa Serhan - Referenced in triage.js for calculating proper BMI
-                            as well as in vitalClientValidation.js for validating height inputs -->
-                        @if(viewModel.getSettings.isMetric) {
-                            <input type="hidden" id="vitalsUnits" value="metric" />
-                        } else {
-                            <input type="hidden" id="vitalUnits" value="imp" />
-                        }
-                        <div class="vitalWrap">
-                            <label for="temperature" id="temperatureLabel">Temperature</label> <!---  Alaa Serhan -->
-                            @if(viewModel.getSettings.isMetric) {
-                                <input type="number" step="any" min="0" class="fInput fVital" id="@viewModel.getVitalNames.get(2).getName" name="@viewModel.getVitalNames.get(2).getName" placeholder="&#176;C"/>
-                            } else {
-                                <input type="number" step="any" min="0" class="fInput fVital" id="@viewModel.getVitalNames.get(2).getName" name="@viewModel.getVitalNames.get(2).getName" placeholder="&#176;F"/>
-                            }
+                        <div class="femr-grid femr-grid--cols-3 femr-grid--gap-lg">
+                            <div class="generalInfoInput femr-field">
+                                <label for="firstName">
+                                    <span data-i18n-text="true">First Name</span>
+                                    <span class="femr-required">*</span>
+                                </label>
+                                @if(viewModel != null && viewModel.getPatient.getFirstName != null) {
+                                    <input type="text" class="fInput femr-input" id="firstName" name="firstName" value="@viewModel.getPatient.getFirstName" readonly/>
+                                } else {
+                                    <input type="text" class="fInput femr-input" id="firstName" name="firstName" placeholder="First Name" required/>
+                                }
+                            </div>
+                            <div class="generalInfoInput femr-field">
+                                <label for="lastName">
+                                    <span data-i18n-text="true">Last Name</span>
+                                    <span class="femr-required">*</span>
+                                </label>
+                                @if(viewModel != null && viewModel.getPatient.getLastName != null) {
+                                    <input type="text" class="fInput femr-input" id="lastName" name="lastName" value="@viewModel.getPatient.getLastName" readonly/>
+                                } else {
+                                    <input type="text" class="fInput femr-input" id="lastName" name="lastName" placeholder="Last Name" required/>
+                                }
+                            </div>
+                            <div class="generalInfoInput femr-field">
+                                <label for="phoneNumber">
+                                    <span data-i18n-text="true">Phone Number</span>
+                                </label>
+                                @if(viewModel != null && viewModel.getPatient.getPhoneNumber != null) {
+                                    <input type="tel" class="fInput femr-input" id="phoneNumber" name="phoneNumber" value="@viewModel.getPatient.getPhoneNumber" readonly/>
+                                } else {
+                                    <input type="tel" class="fInput femr-input" id="phoneNumber" name="phoneNumber" placeholder="Phone Number"/>
+                                }
+                            </div>
+                            <div class="generalInfoInput femr-field femr-field--span-2">
+                                <label for="address">
+                                    <span data-i18n-text="true">Address</span>
+                                </label>
+                                @if(viewModel != null && viewModel.getPatient.getAddress != null) {
+                                    <input type="text" class="fInput femr-input" id="address" name="address" value="@viewModel.getPatient.getAddress" readonly/>
+                                } else {
+                                    <input type="text" class="fInput femr-input" id="address" name="address" placeholder="Address"/>
+                                }
+                            </div>
+                            <div class="generalInfoInput femr-field" id="citySearchContainer">
+                                <label for="city">
+                                    <span data-i18n-text="true">City</span>
+                                    <span class="femr-required">*</span>
+                                </label>
+                                @if(viewModel.getPatient.getCity == null) {
+                                    <input type="text" class="citySearch fInput femr-input" name="city" id="city" required>
+                                } else {
+                                    <input type="text" class="citySearch fInput femr-input" name="city" id="city" value="@viewModel.getPatient.getCity" readonly>
+                                }
+                            </div>
                         </div>
 
-                        <div class="vitalWrap">
-                            <label for="bloodPressureSystolic" id="bloodPressureTitle">Blood Pressure</label>
-                            <div class="doubleVital">
-                                <div class="vitalWrap">
-                                    <input type="number" step="number" min="0" class="fInput" id="@viewModel.getVitalNames.get(7).getName" placeholder="Systolic" name="@viewModel.getVitalNames.get(7).getName"/>
+                        <div class="femr-age-section">
+                            <div class="femr-age-row">
+                                <div class="generalInfoInput femr-field femr-field--stack">
+                                    <label id="ageLabel"><span data-i18n-text="true">Age</span> <span class="femr-required">*</span></label>
+                                    <div class="femr-age-inputs">
+                                        <input class="fInput ageInput femr-input" type="text" id="yearsInput" placeholder="Years" />
+                                        <input class="fInput ageInput femr-input" type="text" id="monthsInput" placeholder="Months" />
+                                    </div>
                                 </div>
-                                <div class="vitalWrap">
-                                    <input type="number" step="number" min="0" class="fInput" id="@viewModel.getVitalNames.get(8).getName" placeholder="Diastolic" name="@viewModel.getVitalNames.get(8).getName"/>
+                                <div class="femr-age-separator"><span class="orSpan">OR</span></div>
+                                <div class="generalInfoInput femr-field femr-field--stack" id="birthDateWrapper">
+                                    <label id="birthDateLabel" for="birthDateInput"><span data-i18n-text="true">Birth Date</span> <span class="femr-required">*</span></label>
+                                    <input type="date" class="fInput femr-input" id="birthDateInput" name="age" value="@{if(viewModel != null) viewModel.getPatient.getBirth() else ""}" />
+                                </div>
+                            </div>
+                            <div class="femr-age-separator"><span class="orSpan">OR</span></div>
+                            <div class="generalInfoInput femr-field femr-field--stack femr-field--full">
+                                <label><span data-i18n-text="true">Age Classification</span></label>
+                                <div id="classificationRadioWrap" class="femr-classification">
+                                @for((key, value) <- viewModel.getPossibleAgeClassifications) {
+                                    <label class="ageRadio femr-chip" id="@("label_" + key)">
+                                        <input type="radio" name="ageClassification" value="@key" />
+                                        <span id="@("span_" + key)">@value</span>
+                                    </label>
+                                }
                                 </div>
                             </div>
-                        </div>
-                        <div class="vitalWrap">
-                            <label for="heartRate" id="heartRateLabel">Heart Rate</label>
-                            <input type="number" step="number" min="0" class="fInput" id="@viewModel.getVitalNames.get(1).getName" name="@viewModel.getVitalNames.get(1).getName" placeholder="bpm"/>
-                        </div>
-
-                        <div class="vitalWrap">
-                            <label id="respirationsLabel" for="respirations">Respirations</label>
-                            <input type="number" step="number" min="0" class="fInput" id="@viewModel.getVitalNames.get(0).getName" name="@viewModel.getVitalNames.get(0).getName" placeholder="bpm"/>
                         </div>
 
-                        <div class="vitalWrap">
-                            <label id="weeksPregnantLabel" for="weeksPregnant">Weeks Pregnant</label>
-
-                            @if(viewModel.getPatient.getSex == "Female") {
-                                <input type="number" step="number" min="0" class="fInput" id="weeksPregnant" name="weeksPregnant" placeholder="Weeks"/>
-                            } else {
-                                <input type="number" step="number" min="0" class="fInput" id="weeksPregnant" name="weeksPregnant" placeholder="Weeks" disabled/>
-                            }
-
+                        <div class="femr-gender-section">
+                            <div class="generalInfoInput femr-field femr-field--stack">
+                                <label>Gender <span class="femr-required">*</span></label>
+                                <div class="btn-group femr-segmented" id="genderBtns" data-toggle="buttons">
+                                    @inputButton("Male", "sex", "maleBtn", if(viewModel != null) viewModel.getPatient.getSex == "" || viewModel.getPatient.getSex == null else true, if(viewModel != null) viewModel.getPatient.getSex == "Male" else false, "Male")
+                                    @inputButton("Female", "sex", "femaleBtn", if(viewModel != null) viewModel.getPatient.getSex == "" || viewModel.getPatient.getSex == null else true, if(viewModel != null) viewModel.getPatient.getSex == "Female" else false, "Female")
+                                </div>
+                            </div>
                         </div>
 
-                    </div>
-
-                    <div id="rightVitalsWrap">
-                        @if(viewModel.getSettings.isMetric) { <!-- Alaa Serhan -->
-                            <input type="hidden" id="vitalsUnits" value="metric" />
-                        } else {
-                            <input type="hidden" id="vitalUnits" value="imp" />
-                        }
-
-                        <div class="vitalWrap">
-                            <label for="oxygen" id="oxygenLabel">Oxygen Saturation</label>
-
-                            <input type="number" step="any" min="0" class="fInput" id="@viewModel.getVitalNames.get(3).getName" name="@viewModel.getVitalNames.get(3).getName" placeholder="%"/>
-                        </div>
-                        <div class="vitalWrap">
-
-                            <label for="heightFeet" id="heightLabel">Height</label>
-                            <div class="doubleVital">
-                            @if(viewModel.getSettings.isMetric) { <!---  Alaa Serhan -->
-                                <input type="number" step="number" min="0" class="fInput" id="@viewModel.getVitalNames.get(4).getName" placeholder="Meters" name="@viewModel.getVitalNames.get(4).getName"/>
-                                <input type="number" step="number" min="0" class="fInput" id="@viewModel.getVitalNames.get(5).getName" placeholder="Centimeters" name="@viewModel.getVitalNames.get(5).getName"/>
-                            } else {
-                                <input type="number" step="number" min="0" class="fInput" id="@viewModel.getVitalNames.get(4).getName" placeholder="Feet" name="@viewModel.getVitalNames.get(4).getName"/>
-                                <input type="number" step="number" min="0" class="fInput" id="@viewModel.getVitalNames.get(5).getName" placeholder="Inches" name="@viewModel.getVitalNames.get(5).getName"/>
-                            }
+                        <div class="femr-photo-section">
+                            <div class="generalInfoInput femr-field femr-field--photo">
+                                <label id="photoLabel" for="photoInput"><span data-i18n-text="true">Patient Photo</span></label>
+                                <div class="femr-photo-upload">
+                                    <div id="photoInputFormDiv" class="femr-photo-upload__input">
+                                        <label for="photoInput" id="chooseFileLabel" class="femr-btn femr-btn--ghost">Choose File</label>
+                                        <input type="file" class="fInput hidden" id="photoInput" name="patientPhoto" />
+                                        <span id="fileChosenText">No file chosen</span>
+                                        <textarea id="photoInputCropped" class="hidden" name="patientPhotoCropped"></textarea>
+                                    </div>
+                                    <div id="patientPhotoDiv" class="femr-photo-upload__preview" hidden="true">
+                                        <div class="btn-group">
+                                            <img id="patientPhoto" class="crop_me" alt="" src="@viewModel.getPatient.getPathToPhoto" />
+
+                                            <div class="btn-toolbar" role="toolbar">
+                                                <div class="btn-group" id="zoomControls">
+                                                    <button type="button" id="btnZoomIn" class="btn btn-default btn-lg">
+                                                        <span class="glyphicon glyphicon-zoom-in"></span>
+                                                    </button>
+                                                    <button type="button" id="btnZoomOut" class="btn btn-default btn-lg">
+                                                        <span class="glyphicon glyphicon-zoom-out"></span>
+                                                    </button>
+                                                </div>
+                                                <div class="btn-group">
+                                                    <button id="btnDeletePhoto" type="button" class="btn btn-danger btn-lg pull-right">
+                                                        <span class="glyphicon glyphicon-trash"></span>
+                                                    </button>
+                                                </div>
+                                            </div>
+                                            <canvas id="patientPhotoCanvas" class="hidden"></canvas>
+                                        </div>
+                                    </div>
+                                    <input class="hidden" type="checkbox" name="deletePhoto" value="true" id="deletePhoto">
+                                </div>
                             </div>
                         </div>
-                        <div class="vitalWrap">
-                            <label for="weight" id="weightLabel">Weight</label>
-                            @if(viewModel.getSettings.isMetric) { <!---  Alaa Serhan -->
-                                <input type="number" step="any" min="0" class="fInput" id="@viewModel.getVitalNames.get(6).getName" name="@viewModel.getVitalNames.get(6).getName" placeholder="kgs"/>
-                            } else {
-                                <input type="number" step="any" min="0" class="fInput" id="@viewModel.getVitalNames.get(6).getName" name="@viewModel.getVitalNames.get(6).getName" placeholder="lbs"/>
-                            }
+                    </section>
 
+                    <section id="vitalsWrap" class="femr-tabpanel" role="tabpanel" aria-labelledby="vitals-tab" hidden>
+                        <div class="femr-section__header">
+                            <h3 class="femr-section__title" id="vitalsHeading"><span data-i18n-text="true">Vitals</span></h3>
                         </div>
-                        <div class="vitalWrap">
-                            <label id="bmiLabel">BMI</label>
+                        <div id="vitalContainer" class="femr-vitals">
+                            <div class="femr-vitals__column" id="leftVitalsWrap">
+                                @if(viewModel.getSettings.isMetric) {
+                                    <input type="hidden" id="vitalsUnits" value="metric" />
+                                } else {
+                                    <input type="hidden" id="vitalUnits" value="imp" />
+                                }
+                                <div class="vitalWrap femr-field">
+                                    <label for="@viewModel.getVitalNames.get(2).getName" id="temperatureLabel"><span data-i18n-text="true">Temperature</span></label>
+                                    @if(viewModel.getSettings.isMetric) {
+                                        <input type="number" step="any" min="0" class="fInput fVital femr-input" id="@viewModel.getVitalNames.get(2).getName" name="@viewModel.getVitalNames.get(2).getName" placeholder="&#176;C"/>
+                                    } else {
+                                        <input type="number" step="any" min="0" class="fInput fVital femr-input" id="@viewModel.getVitalNames.get(2).getName" name="@viewModel.getVitalNames.get(2).getName" placeholder="&#176;F"/>
+                                    }
+                                </div>
+                                <div class="vitalWrap femr-field">
+                                    <label for="@viewModel.getVitalNames.get(7).getName" id="bloodPressureTitle"><span data-i18n-text="true">Blood Pressure</span></label>
+                                    <div class="doubleVital femr-double-field">
+                                        <input type="number" step="number" min="0" class="fInput femr-input" id="@viewModel.getVitalNames.get(7).getName" placeholder="Systolic" name="@viewModel.getVitalNames.get(7).getName"/>
+                                        <input type="number" step="number" min="0" class="fInput femr-input" id="@viewModel.getVitalNames.get(8).getName" placeholder="Diastolic" name="@viewModel.getVitalNames.get(8).getName"/>
+                                    </div>
+                                </div>
+                                <div class="vitalWrap femr-field">
+                                    <label for="@viewModel.getVitalNames.get(1).getName" id="heartRateLabel"><span data-i18n-text="true">Heart Rate</span></label>
+                                    <input type="number" step="number" min="0" class="fInput femr-input" id="@viewModel.getVitalNames.get(1).getName" name="@viewModel.getVitalNames.get(1).getName" placeholder="bpm"/>
+                                </div>
+                                <div class="vitalWrap femr-field">
+                                    <label id="respirationsLabel" for="@viewModel.getVitalNames.get(0).getName"><span data-i18n-text="true">Respirations</span></label>
+                                    <input type="number" step="number" min="0" class="fInput femr-input" id="@viewModel.getVitalNames.get(0).getName" name="@viewModel.getVitalNames.get(0).getName" placeholder="bpm"/>
+                                </div>
+                                <div class="vitalWrap femr-field">
+                                    <label id="weeksPregnantLabel" for="weeksPregnant"><span data-i18n-text="true">Weeks Pregnant</span></label>
+                                    @if(viewModel.getPatient.getSex == "Female") {
+                                        <input type="number" step="number" min="0" class="fInput femr-input" id="weeksPregnant" name="weeksPregnant" placeholder="Weeks"/>
+                                    } else {
+                                        <input type="number" step="number" min="0" class="fInput femr-input" id="weeksPregnant" name="weeksPregnant" placeholder="Weeks" disabled/>
+                                    }
+                                </div>
+                            </div>
 
-                            <input type="text" id="bmi" class="fInput" disabled/>
+                            <div class="femr-vitals__column" id="rightVitalsWrap">
+                                <div class="vitalWrap femr-field">
+                                    <label for="@viewModel.getVitalNames.get(3).getName" id="oxygenLabel"><span data-i18n-text="true">Oxygen Saturation</span></label>
+                                    <input type="number" step="any" min="0" class="fInput femr-input" id="@viewModel.getVitalNames.get(3).getName" name="@viewModel.getVitalNames.get(3).getName" placeholder="%"/>
+                                </div>
+                                <div class="vitalWrap femr-field">
+                                    <label for="@viewModel.getVitalNames.get(4).getName" id="heightLabel"><span data-i18n-text="true">Height</span></label>
+                                    <div class="doubleVital femr-double-field">
+                                    @if(viewModel.getSettings.isMetric) {
+                                        <input type="number" step="number" min="0" class="fInput femr-input" id="@viewModel.getVitalNames.get(4).getName" placeholder="Meters" name="@viewModel.getVitalNames.get(4).getName"/>
+                                        <input type="number" step="number" min="0" class="fInput femr-input" id="@viewModel.getVitalNames.get(5).getName" placeholder="Centimeters" name="@viewModel.getVitalNames.get(5).getName"/>
+                                    } else {
+                                        <input type="number" step="number" min="0" class="fInput femr-input" id="@viewModel.getVitalNames.get(4).getName" placeholder="Feet" name="@viewModel.getVitalNames.get(4).getName"/>
+                                        <input type="number" step="number" min="0" class="fInput femr-input" id="@viewModel.getVitalNames.get(5).getName" placeholder="Inches" name="@viewModel.getVitalNames.get(5).getName"/>
+                                    }
+                                    </div>
+                                </div>
+                                <div class="vitalWrap femr-field">
+                                    <label for="@viewModel.getVitalNames.get(6).getName" id="weightLabel"><span data-i18n-text="true">Weight</span></label>
+                                    @if(viewModel.getSettings.isMetric) {
+                                        <input type="number" step="any" min="0" class="fInput femr-input" id="@viewModel.getVitalNames.get(6).getName" name="@viewModel.getVitalNames.get(6).getName" placeholder="kgs"/>
+                                    } else {
+                                        <input type="number" step="any" min="0" class="fInput femr-input" id="@viewModel.getVitalNames.get(6).getName" name="@viewModel.getVitalNames.get(6).getName" placeholder="lbs"/>
+                                    }
+                                </div>
+                                <div class="vitalWrap femr-field">
+                                    <label id="bmiLabel"><span data-i18n-text="true">BMI</span></label>
+                                    <input type="text" id="bmi" class="fInput femr-input" disabled/>
+                                </div>
+                                <div class="vitalWrap femr-field">
+                                    <label id="glucoseLabel"><span data-i18n-text="true">Glucose</span></label>
+                                    <input type="number" step="number" min="0" class="fInput femr-input" id="@viewModel.getVitalNames.get(9).getName" name="@viewModel.getVitalNames.get(9).getName" placeholder="mg/dl"/>
+                                </div>
+                            </div>
                         </div>
-                        <div class="vitalWrap">
-                            <label id="glucoseLabel">Glucose</label>
 
-                            <input type="number" step="number" min="0" class="fInput" id="@viewModel.getVitalNames.get(9).getName" name="@viewModel.getVitalNames.get(9).getName" placeholder="mg/dl"/>
+                        <div class="femr-history">
+                            <label id="historyOfLabel"><span data-i18n-text="true">History of:</span></label>
+                            <div class="historyOfWrap femr-chip-group">
+                                <label class="historyOfButton femr-chip">
+                                    <input type="checkbox" step="any" id="diabetic" name="diabetic" value="1">
+                                    <span id="diabetesLabel" data-i18n-text="true">Diabetes</span>
+                                </label>
+                                <label class="historyOfButton femr-chip">
+                                    <input type="checkbox" step="any" id="hypertension" name="hypertension" value="1">
+                                    <span id="hypertensionLabel" data-i18n-text="true">Hypertension</span>
+                                </label>
+                                <label class="historyOfButton femr-chip">
+                                    <input type="checkbox" step="any" id="cholesterol" name="cholesterol" value="1">
+                                    <span id="highCholesterolLabel" data-i18n-text="true">High Cholesterol</span>
+                                </label>
+                                <label class="historyOfButton femr-chip">
+                                    <input type="checkbox" step="any" id="smoker" name="smoker" value="1">
+                                    <span id="tobaccoUseDisorderLabel" data-i18n-text="true">Tobacco Use Disorder</span>
+                                </label>
+                                <label class="historyOfButton femr-chip">
+                                    <input type="checkbox" step="any" id="alcohol" name="alcohol" value="1">
+                                    <span id="substanceAlcoholAbuseLabel" data-i18n-text="true">Substance/Alcohol Abuse</span>
+                                </label>
+                            </div>
                         </div>
 
-                            <!--Osman-->
-                        <br/>
-
-                    </div>
-
-                        <!--Osman-->
-                    <br/>
-
-                    <label id="historyOfLabel">History of:</label>
-
-                    <div class="historyOfWrap">
-                        <label class="btn btn-default historyOfButton">
-                            <span id="diabetesLabel">Diabetes</span>
-                            <input type="checkbox" step="any" class="fButton" id="diabetic" name="diabetic" value="1">
-                        </label>
-
-                        <br>
-                        <label class="btn btn-default historyOfButton">
-                            <span id="hypertensionLabel">Hypertension</span>
-                            <input type="checkbox" step="any" class="fButton" id="hypertension" name="hypertension" value="1">
-                        </label>
-                        <br>
-                        <label class="btn btn-default historyOfButton">
-                            <span id="highCholesterolLabel">High Cholesterol</span>
-                            <input type="checkbox" step="any" class="fButton" id="cholesterol" name="cholesterol" value="1">
-                        </label>
-                        <br>
-                        <label class="btn btn-default historyOfButton">
-                            <span id="tobaccoUseDisorderLabel">Tobacco Use Disorder</span>
-                            <input type="checkbox" step="any" class="fButton" id="smoker" name="smoker" value="1">
-                        </label>
-                        <br>
-                        <label class="btn btn-default historyOfButton">
-                            <span id="substanceAlcoholAbuseLabel">Substance/Alcohol Abuse</span>
-                            <input type="checkbox" step="any" class="fButton" id="alcohol" name="alcohol" value="1">
-                        </label>
-                    </div>
-                </div>
-
-                <div id="chiefComplaintWrap">
-
-                        <label for="chiefComplaint" class="chiefComplaintLabel">
+                        <div id="chiefComplaintWrap" class="femr-chief">
+                            <div class="femr-chief__header">
+                                <label for="chiefComplaint" class="chiefComplaintLabel">
+                                    @if(viewModel.getSettings.isMultipleChiefComplaint) {
+                                        <span id="addChiefComplaint" class="femr-add-chip">+</span>
+                                    }
+                                    <span id="chiefComplaintTitle" data-i18n-text="true">Chief Complaint</span>
+                                </label>
+                            </div>
+                            <input type="text" class="hidden" name="chiefComplaintsJSON"/>
+                            <textarea class="fTextArea femr-textarea" id="chiefComplaint" name="chiefComplaint"></textarea>
                             @if(viewModel.getSettings.isMultipleChiefComplaint) {
-                                <span id="addChiefComplaint">+</span>
+                                <ol id="chiefComplaintList" class="femr-chief__list"></ol>
                             }
-                            <div id="chiefComplaintTitle">
-                            Chief Complaint
-                            </div>
-                        </label>
-
-                    <input type="text" class="hidden" name="chiefComplaintsJSON"/>
-
-                    <textarea class="fTextArea" id="chiefComplaint" name="chiefComplaint"></textarea>
-                    @if(viewModel.getSettings.isMultipleChiefComplaint) {
-                        <ol id="chiefComplaintList">
-                            @*Javascript targets this to show user the current chief complaints they are working with*@
-                        </ol>
-                    }
-
-                </div>
-
-
-                <div class="submitResetWrap hidden">
-                    <h3>Did you screen this patient for Diabetes?</h3>
-                    <button type="submit" id="noDiabetesScreen" class="fButton fSubmitButton pull-right">
-                        No</button>
-                    <button type="submit" id="yesDiabetesScreen" class="fButton fSubmitButton pull-left">
-                        Yes</button>
-                        <!-- Data elements for server-side logic, Diabetes Screen
-                             Initial value for isDiabetesScreenPerformed set to empty string, only if
-                             prompted will it receive a true/false value -->
-                    <input type="hidden" id="isDiabetesScreenSettingEnabled" value="@viewModel.getSettings.isDiabetesPrompt"/>
-                    <input type="hidden" name="isDiabetesScreenPerformed" value="" />
+                        </div>
+                    </section>
                 </div>
-                <div class="submitResetWrap">
-                    <button type="submit" id="triageSubmitBtn" class="fButton fRedButton fSubmitButton pull-right">
-                        Submit Patient</button>
-                    <button type="button" class="fButton fOtherButton newPatientBtn pull-left" id="triageResetBtn">Reset Fields</button>
-
-
-                    @if(viewModel.getPatient.getId != 0) {
-                        <a href="@HistoryController.indexPatientGet(viewModel.getPatient.getId.toString)" class="fButton fOtherButton pull-left" target="_blank">Patient History</a>
-                    }
 
+                <div class="femr-card__footer">
+                    <div class="submitResetWrap hidden femr-diabetes-prompt">
+                        <h3>Did you screen this patient for Diabetes?</h3>
+                        <div class="femr-diabetes-prompt__actions">
+                            <button type="submit" id="noDiabetesScreen" class="femr-btn femr-btn--ghost">
+                                <span class="femr-btn__label">No</span>
+                            </button>
+                            <button type="submit" id="yesDiabetesScreen" class="femr-btn femr-btn--primary">
+                                <span class="femr-btn__label">Yes</span>
+                            </button>
+                        </div>
+                        <input type="hidden" id="isDiabetesScreenSettingEnabled" value="@viewModel.getSettings.isDiabetesPrompt"/>
+                        <input type="hidden" name="isDiabetesScreenPerformed" value="" />
+                    </div>
                 </div>
             </div>
-
-        </div>
-}}
+        }
+    </div>
+}
diff --git a/public/css/redesign.css b/public/css/redesign.css
new file mode 100644
index 000000000..2b9242719
--- /dev/null
+++ b/public/css/redesign.css
@@ -0,0 +1,394 @@
+:root {
+    --femr-color-primary: #dc2626;
+    --femr-color-primary-hover: #b91c1c;
+    --femr-color-bg: #f3f4f6;
+    --femr-color-bg-dark: #1c1917;
+    --femr-color-surface: #ffffff;
+    --femr-color-surface-dark: #292524;
+    --femr-color-text: #1c1917;
+    --femr-color-text-muted: #6b7280;
+    --femr-color-border: #e5e7eb;
+    --femr-color-sidebar-bg: #1f1b19;
+    --femr-color-sidebar-elevated: rgba(255, 255, 255, 0.08);
+    --femr-radius-md: 12px;
+    --femr-radius-lg: 16px;
+    --femr-shadow-md: 0 20px 25px -15px rgba(0, 0, 0, 0.35);
+}
+
+body.femr-shell {
+    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
+    background-color: var(--femr-color-bg);
+    color: var(--femr-color-text);
+    margin: 0;
+    padding: 0;
+    min-height: 100vh;
+}
+
+.femr-shell__layout {
+    display: flex;
+    min-height: 100vh;
+    background-color: inherit;
+}
+
+.femr-sidebar {
+    width: 280px;
+    flex-shrink: 0;
+    background-color: var(--femr-color-sidebar-bg);
+    color: #f5f5f4;
+    display: flex;
+    flex-direction: column;
+    padding: 32px 24px;
+    box-shadow: var(--femr-shadow-md);
+    position: sticky;
+    top: 0;
+    align-self: flex-start;
+    min-height: 100vh;
+    z-index: 10;
+}
+
+.femr-sidebar__brand-link {
+    display: inline-block;
+    font-size: 28px;
+    font-weight: 700;
+    color: var(--femr-color-primary);
+    text-decoration: none;
+    letter-spacing: -0.02em;
+}
+
+.femr-sidebar__section {
+    margin-top: 28px;
+}
+
+.femr-sidebar__section:first-of-type {
+    margin-top: 24px;
+}
+
+.femr-sidebar__search-container {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.femr-sidebar__section-label {
+    display: block;
+    font-size: 13px;
+    font-weight: 600;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    color: rgba(255, 255, 255, 0.6);
+    margin-bottom: 4px;
+}
+
+.femr-sidebar__search form {
+    position: relative;
+}
+
+.femr-sidebar__search input[type="text"],
+.femr-sidebar__search input[type="search"],
+.femr-sidebar__search input[type="tel"],
+.femr-sidebar__search input[type="number"] {
+    width: 100%;
+    padding: 12px 16px 12px 44px;
+    border-radius: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background-color: rgba(255, 255, 255, 0.08);
+    color: #f9fafb;
+    font-size: 14px;
+    transition: border-color 0.2s ease, background-color 0.2s ease;
+}
+
+.femr-sidebar__search input::placeholder {
+    color: rgba(229, 231, 235, 0.7);
+}
+
+.femr-sidebar__search button,
+.femr-sidebar__search .nameOrIdSearchButton {
+    position: absolute;
+    top: 50%;
+    left: 12px;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 8px;
+    border: none;
+    background: transparent;
+    color: rgba(229, 231, 235, 0.7);
+    padding: 0;
+    font-size: 0;
+}
+
+.femr-sidebar__search button::before,
+.femr-sidebar__search .nameOrIdSearchButton::before {
+    content: '\e8b6';
+    font-family: 'Material Symbols Outlined';
+    font-size: 22px;
+    line-height: 1;
+    color: inherit;
+}
+
+.femr-sidebar__search button:hover,
+.femr-sidebar__search .nameOrIdSearchButton:hover {
+    color: #f9fafb;
+}
+
+.femr-sidebar__nav-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.femr-sidebar__nav-link {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 16px;
+    border-radius: var(--femr-radius-md);
+    text-decoration: none;
+    color: rgba(255, 255, 255, 0.78);
+    font-weight: 500;
+    transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.femr-sidebar__nav-link:hover,
+.femr-sidebar__nav-link:focus {
+    background-color: rgba(255, 255, 255, 0.08);
+    color: #ffffff;
+}
+
+.femr-sidebar__nav-link.is-active {
+    background-color: rgba(220, 38, 38, 0.16);
+    color: #ffffff;
+}
+
+.femr-sidebar__nav-icon {
+    font-size: 24px;
+    color: inherit;
+}
+
+.femr-sidebar__nav-text {
+    font-size: 15px;
+    flex: 1;
+}
+
+.femr-sidebar__spacer {
+    flex: 1;
+}
+
+.femr-sidebar__user {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 16px;
+    background-color: rgba(255, 255, 255, 0.08);
+    border-radius: var(--femr-radius-lg);
+}
+
+.femr-sidebar__avatar {
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.16);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 600;
+    font-size: 18px;
+}
+
+.femr-sidebar__user-meta {
+    flex: 1;
+}
+
+.femr-sidebar__user-name {
+    margin: 0;
+    font-weight: 600;
+    color: #ffffff;
+}
+
+.femr-sidebar__user-role {
+    margin: 2px 0 0 0;
+    font-size: 13px;
+    color: rgba(229, 231, 235, 0.7);
+}
+
+.femr-sidebar__user-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.femr-sidebar__icon-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 6px;
+    border-radius: 10px;
+    color: rgba(229, 231, 235, 0.8);
+    text-decoration: none;
+    transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.femr-sidebar__icon-button:hover,
+.femr-sidebar__icon-button:focus {
+    background-color: rgba(255, 255, 255, 0.12);
+    color: #ffffff;
+}
+
+.femr-sidebar__icon-button .material-symbols-outlined {
+    font-size: 22px;
+}
+
+.femr-sidebar__sr {
+    position: absolute;
+    clip: rect(1px, 1px, 1px, 1px);
+    padding: 0;
+    border: 0;
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+}
+
+.femr-sidebar__section--anonymous {
+    padding: 16px;
+    background-color: rgba(255, 255, 255, 0.08);
+    border-radius: var(--femr-radius-lg);
+}
+
+.femr-sidebar__anonymous-title {
+    margin: 0 0 6px 0;
+    font-weight: 600;
+    color: #ffffff;
+}
+
+.femr-sidebar__anonymous-subtitle {
+    margin: 0;
+    font-size: 14px;
+    color: rgba(229, 231, 235, 0.75);
+}
+
+.femr-shell__content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--femr-color-bg);
+    min-height: 100vh;
+}
+
+.femr-shell__main {
+    flex: 1;
+    padding: 40px 48px;
+}
+
+.femr-shell__main-inner {
+    max-width: 1200px;
+    margin: 0 auto;
+    width: 100%;
+}
+
+.femr-shell__footer {
+    padding: 0 48px 32px;
+}
+
+.femr-shell__footer footer {
+    background: transparent;
+}
+
+/* Legacy search override */
+.femr-sidebar__search #searchContainer {
+    margin: 0;
+}
+
+.femr-sidebar__search .nameOrIdSearchFormWrap {
+    position: relative;
+    margin-top: 0;
+}
+
+.femr-sidebar__search .nameOrIdSearchFormWrap input {
+    margin: 0;
+}
+
+.femr-footer {
+    padding: 32px 0 0;
+    border-top: 1px solid rgba(28, 25, 23, 0.08);
+}
+
+.femr-footer__content {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+    gap: 16px;
+    color: var(--femr-color-text-muted, #6b7280);
+    font-size: 14px;
+}
+
+.femr-footer__version {
+    margin: 0;
+    font-weight: 500;
+    color: var(--femr-color-text-muted, #6b7280);
+}
+
+.femr-footer__actions {
+    display: flex;
+    align-items: center;
+}
+
+.femr-footer__note {
+    margin-left: auto;
+    color: var(--femr-color-text-muted, #6b7280);
+}
+
+.femr-footer__note p {
+    margin: 0;
+}
+
+.femr-sidebar__search .nameOrIdSearchFormWrap label {
+    display: none;
+}
+
+.femr-sidebar__search .nameOrIdSearchButton {
+    background: transparent;
+    border: none;
+    box-shadow: none;
+}
+
+/* Responsive adjustments */
+@media (max-width: 1024px) {
+    .femr-shell__layout {
+        flex-direction: column;
+    }
+
+    .femr-sidebar {
+        position: relative;
+        width: 100%;
+        min-height: auto;
+        flex-direction: column;
+        gap: 24px;
+    }
+
+    .femr-shell__main {
+        padding: 32px 24px;
+    }
+
+    .femr-shell__footer {
+        padding: 0 24px 24px;
+    }
+}
+
+@media (max-width: 640px) {
+    .femr-sidebar__user {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .femr-sidebar__user-actions {
+        align-self: stretch;
+    }
+}
diff --git a/public/css/triage_redesign.css b/public/css/triage_redesign.css
new file mode 100644
index 000000000..5817bbb03
--- /dev/null
+++ b/public/css/triage_redesign.css
@@ -0,0 +1,782 @@
+.femr-triage {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    color: var(--femr-color-text, #1c1917);
+}
+
+.femr-alert {
+    padding: 16px 20px;
+    border-radius: 12px;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.35);
+}
+
+.femr-alert--error {
+    background: rgba(220, 38, 38, 0.12);
+    color: #7f1d1d;
+    border: 1px solid rgba(220, 38, 38, 0.32);
+}
+
+.femr-alert--info {
+    background: rgba(37, 99, 235, 0.12);
+    color: #1d4ed8;
+    border: 1px solid rgba(37, 99, 235, 0.24);
+}
+
+.femr-link {
+    font-weight: 600;
+    text-decoration: none;
+}
+
+.femr-link--accent {
+    color: var(--femr-color-primary, #dc2626);
+}
+
+.femr-card {
+    background: var(--femr-color-surface, #ffffff);
+    border-radius: 18px;
+    box-shadow: 0 30px 40px -35px rgba(0, 0, 0, 0.4);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+.femr-card__header {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 16px;
+    padding: 32px 32px 24px;
+}
+
+.femr-card__patient {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    align-items: flex-start;
+}
+
+.femr-card__title {
+    margin: 0;
+    font-size: 28px;
+    font-weight: 700;
+}
+
+.femr-card__subtitle {
+    margin: 4px 0 0;
+    color: var(--femr-color-text-muted, #6b7280);
+    font-size: 14px;
+}
+
+.femr-card__subtitle-value {
+    color: var(--femr-color-text, #1c1917);
+    font-weight: 600;
+}
+
+.femr-triage__actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 12px;
+}
+
+.femr-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    border-radius: 12px;
+    padding: 10px 18px;
+    font-weight: 600;
+    border: 1px solid transparent;
+    text-decoration: none;
+    cursor: pointer;
+    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
+}
+
+.femr-btn:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 12px 24px -18px rgba(0, 0, 0, 0.5);
+}
+
+.fButton.femr-btn {
+    background: transparent;
+}
+
+.fButton.femr-btn.femr-btn--primary {
+    background: var(--femr-color-primary, #dc2626);
+}
+
+.fButton.femr-btn.femr-btn--ghost {
+    background: rgba(255, 255, 255, 0.08);
+    border-color: rgba(28, 25, 23, 0.14);
+    color: var(--femr-color-text, #1c1917);
+}
+
+.femr-btn--primary {
+    background: var(--femr-color-primary, #dc2626);
+    color: #ffffff;
+    box-shadow: 0 12px 30px -12px rgba(220, 38, 38, 0.6);
+}
+
+.femr-btn--ghost {
+    background: rgba(255, 255, 255, 0.08);
+    border-color: rgba(28, 25, 23, 0.14);
+    color: var(--femr-color-text, #1c1917);
+}
+
+.femr-btn--link {
+    background: transparent;
+    color: var(--femr-color-primary, #dc2626);
+    border-color: transparent;
+}
+
+.femr-btn--secondary {
+    background: rgba(220, 38, 38, 0.12);
+    color: var(--femr-color-primary, #dc2626);
+    border-color: rgba(220, 38, 38, 0.24);
+    box-shadow: none;
+}
+
+.femr-btn--secondary:hover {
+    background: rgba(220, 38, 38, 0.18);
+    box-shadow: 0 12px 24px -18px rgba(220, 38, 38, 0.4);
+}
+
+.femr-btn__label {
+    font-size: 14px;
+}
+
+.femr-tabs {
+    display: flex;
+    border-bottom: 1px solid var(--femr-color-border, #e5e7eb);
+    padding: 0 32px;
+    gap: 24px;
+}
+
+.femr-tab {
+    position: relative;
+    background: transparent;
+    border: none;
+    padding: 16px 4px;
+    font-weight: 600;
+    color: var(--femr-color-text-muted, #6b7280);
+    cursor: pointer;
+}
+
+.femr-tab span {
+    display: inline-block;
+}
+
+.femr-tab.is-active {
+    color: var(--femr-color-primary, #dc2626);
+}
+
+.femr-tab.is-active::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -1px;
+    height: 3px;
+    background: var(--femr-color-primary, #dc2626);
+    border-radius: 999px;
+}
+
+.femr-tabs__panels {
+    padding: 24px 32px 32px;
+}
+
+.femr-tabpanel {
+    display: none;
+}
+
+.femr-tabpanel--active {
+    display: block;
+}
+
+.femr-section__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 24px;
+}
+
+.femr-section__title {
+    margin: 0;
+    font-size: 22px;
+    font-weight: 600;
+    color: var(--femr-color-text, #1c1917);
+}
+
+.femr-icon-button {
+    border: none;
+    background: rgba(220, 38, 38, 0.14);
+    color: var(--femr-color-primary, #dc2626);
+    width: 36px;
+    height: 36px;
+    border-radius: 12px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+}
+
+.femr-grid {
+    display: grid;
+    gap: 24px;
+}
+
+.femr-grid--cols-3 {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 24px;
+}
+
+.femr-grid--gap-lg {
+    gap: 24px;
+}
+
+.femr-field {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    position: relative;
+    min-width: 0;
+}
+
+.femr-field--stack {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.femr-field label {
+    font-weight: 600;
+    font-size: 14px;
+    color: var(--femr-color-text, #1c1917);
+    line-height: 1.4;
+}
+
+.femr-field .fInput,
+.femr-field .fSelect,
+.femr-field select,
+.femr-field textarea,
+.femr-field input[type="text"],
+.femr-field input[type="tel"],
+.femr-field input[type="number"],
+.femr-field input[type="date"],
+.femr-field input[type="email"],
+.femr-field .citySearch {
+    width: 100%;
+    min-height: 44px;
+    border-radius: 12px;
+    border: 1px solid var(--femr-color-border, #e5e7eb);
+    padding: 11px 16px;
+    background: rgba(249, 250, 251, 0.92) !important;
+    color: var(--femr-color-text, #1c1917);
+    font-size: 14px;
+    line-height: 1.5;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    box-sizing: border-box;
+}
+
+.femr-field .fInput:focus,
+.femr-field select:focus,
+.femr-field textarea:focus,
+.femr-field input[type="text"]:focus,
+.femr-field input[type="tel"]:focus,
+.femr-field input[type="number"]:focus,
+.femr-field input[type="date"]:focus,
+.femr-field input[type="email"]:focus,
+.femr-field .citySearch:focus {
+    border-color: var(--femr-color-primary, #dc2626);
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
+}
+
+.femr-field--span-2 {
+    grid-column: span 2;
+}
+
+.femr-field--full {
+    grid-column: 1 / -1;
+}
+
+.femr-required {
+    color: var(--femr-color-primary, #dc2626);
+    margin-left: 4px;
+}
+
+.femr-input,
+.femr-textarea,
+.femr-photo-upload input[type="text"],
+.femr-photo-upload input[type="tel"],
+.femr-photo-upload input[type="date"],
+.femr-photo-upload input[type="number"] {
+    border-radius: 12px;
+    border: 1px solid var(--femr-color-border, #e5e7eb);
+    padding: 11px 16px;
+    font-size: 14px;
+    line-height: 1.5;
+    background: rgba(249, 250, 251, 0.92);
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    min-height: 44px;
+}
+
+.femr-input:focus,
+.femr-textarea:focus {
+    border-color: var(--femr-color-primary, #dc2626);
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
+}
+
+.generalInfoInput.has-errors label,
+.generalInfoInput.has-errors .femr-input {
+    color: #b91c1c;
+    border-color: rgba(220, 38, 38, 0.6);
+}
+
+/* City search field overrides */
+#citySearchContainer {
+    padding: 0 !important;
+}
+
+#citySearchContainer .citySearch {
+    background: rgba(249, 250, 251, 0.92) !important;
+}
+
+.femr-age-section {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    margin-top: 32px;
+    padding: 28px;
+    background: rgba(249, 250, 251, 0.6);
+    border-radius: 16px;
+    border: 1px solid rgba(229, 231, 235, 0.8);
+}
+
+.femr-age-row {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: end;
+    gap: 32px;
+}
+
+.femr-age-inputs {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
+}
+
+.femr-age-separator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--femr-color-text-muted, #6b7280);
+    font-weight: 700;
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    padding-bottom: 8px;
+    min-width: 48px;
+}
+
+.femr-classification {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 14px;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 8px 0;
+}
+
+.femr-chip {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 13px 24px;
+    border-radius: 999px;
+    background: #ffffff;
+    border: 2px solid rgba(28, 25, 23, 0.12);
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 1.4;
+    min-height: 48px;
+    transition: all 0.2s ease;
+    cursor: pointer;
+    user-select: none;
+}
+
+.femr-chip input {
+    display: none;
+}
+
+.femr-chip input:checked + span,
+.femr-chip input:checked ~ span {
+    color: var(--femr-color-primary, #dc2626);
+}
+
+.femr-chip:has(input:checked) {
+    background: rgba(220, 38, 38, 0.12);
+    border-color: rgba(220, 38, 38, 0.5);
+    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
+}
+
+.femr-chip:hover {
+    background: rgba(220, 38, 38, 0.04);
+    border-color: rgba(220, 38, 38, 0.25);
+}
+
+.femr-segmented {
+    display: inline-flex;
+    gap: 14px;
+    width: 100%;
+}
+
+.femr-segmented__option {
+    flex: 1;
+    border-radius: 999px;
+    border: 2px solid rgba(28, 25, 23, 0.12);
+    padding: 13px 28px;
+    background: #ffffff;
+    color: var(--femr-color-text, #1c1917);
+    font-weight: 600;
+    font-size: 14px;
+    min-height: 48px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    user-select: none;
+}
+
+.femr-segmented__option:hover {
+    background: rgba(220, 38, 38, 0.04);
+    border-color: rgba(220, 38, 38, 0.25);
+}
+
+.femr-segmented__option.active,
+.femr-segmented__option.btn-primary {
+    background: rgba(220, 38, 38, 0.12);
+    color: var(--femr-color-primary, #dc2626);
+    border-color: rgba(220, 38, 38, 0.5);
+    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
+}
+
+.femr-gender-section {
+    margin-top: 24px;
+}
+
+.femr-photo-section {
+    margin-top: 24px;
+}
+
+.femr-photo-upload {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.femr-photo-upload__input {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    flex-wrap: wrap;
+}
+
+#chooseFileLabel {
+    cursor: pointer;
+    white-space: nowrap;
+}
+
+#fileChosenText {
+    color: var(--femr-color-text-muted, #6b7280);
+    font-size: 14px;
+}
+
+.femr-photo-upload__preview img {
+    width: 220px;
+    height: 220px;
+    border-radius: 16px;
+    object-fit: cover;
+}
+
+.femr-vitals {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 32px;
+    margin-top: 24px;
+}
+
+.femr-vitals__column {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+}
+
+.femr-double-field {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
+}
+
+.femr-history {
+    margin-top: 32px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.femr-chip-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+}
+
+.historyOfButton {
+    cursor: pointer;
+    border: 1px solid rgba(28, 25, 23, 0.12);
+    background: rgba(17, 24, 39, 0.04);
+    padding: 10px 16px;
+    border-radius: 999px;
+    color: var(--femr-color-text, #1c1917);
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.historyOfButton input {
+    display: none;
+}
+
+.historyOfButton input:checked + span,
+.historyOfButton input:checked ~ span {
+    color: var(--femr-color-primary, #dc2626);
+}
+
+.femr-chief {
+    margin-top: 32px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.femr-chief__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.femr-add-chip {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 8px;
+    margin-right: 10px;
+    background: rgba(220, 38, 38, 0.16);
+    color: var(--femr-color-primary, #dc2626);
+    font-weight: 600;
+}
+
+.femr-textarea {
+    min-height: 140px;
+    resize: vertical;
+}
+
+.femr-chief__list {
+    list-style: decimal inside;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.femr-diabetes-prompt {
+    padding: 24px;
+    border-radius: 16px;
+    background: rgba(220, 38, 38, 0.08);
+    display: grid;
+    gap: 12px;
+}
+
+.femr-diabetes-prompt__actions {
+    display: flex;
+    gap: 12px;
+}
+
+.femr-card__footer {
+    padding: 0 32px 32px;
+}
+
+.triage-form .has-errors label.range-message {
+    padding-left: 10px;
+    font-size: 0.85em;
+    margin: 2px 0;
+    clear: both;
+    color: #b91c1c;
+}
+
+.triage-form .error-message {
+    display: block;
+    color: #b91c1c;
+    text-align: center;
+    border: 1px solid rgba(185, 28, 28, 0.6);
+    padding: 8px 12px;
+    border-radius: 8px;
+    background-color: rgba(254, 226, 226, 0.6);
+    margin: 0 auto 12px;
+}
+
+@media (max-width: 1280px) {
+    .femr-grid--cols-3 {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .femr-age-section {
+        gap: 24px;
+    }
+    
+    .femr-age-row {
+        grid-template-columns: 1fr;
+        gap: 20px;
+    }
+    
+    .femr-age-separator {
+        display: none;
+    }
+}
+
+@media (max-width: 900px) {
+    .femr-card__header {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .femr-grid--cols-3 {
+        grid-template-columns: 1fr;
+    }
+
+    .femr-field--span-2 {
+        grid-column: span 1;
+    }
+
+    .femr-age-section {
+        gap: 20px;
+        padding: 20px;
+    }
+    
+    .femr-age-row {
+        grid-template-columns: 1fr;
+        gap: 20px;
+    }
+    
+    .femr-age-separator {
+        display: none;
+    }
+
+    .femr-tabs {
+        padding: 0 24px;
+    }
+
+    .femr-tabs__panels {
+        padding: 20px 24px 28px;
+    }
+
+    .femr-card__footer {
+        padding: 0 24px 24px;
+    }
+
+    .femr-vitals {
+        grid-template-columns: 1fr;
+        gap: 24px;
+    }
+}
+
+@media (max-width: 640px) {
+    .femr-grid--cols-3 {
+        grid-template-columns: 1fr;
+    }
+    
+    .femr-field--span-2 {
+        grid-column: span 1;
+    }
+
+    .femr-card__header {
+        padding: 24px 20px 16px;
+    }
+    
+    .femr-age-section {
+        padding: 20px;
+        gap: 16px;
+    }
+    
+    .femr-segmented {
+        flex-direction: column;
+    }
+    
+    .femr-segmented__option {
+        width: 100%;
+    }
+
+    .femr-tabs {
+        padding: 0 20px;
+        gap: 16px;
+    }
+
+    .femr-tabs__panels {
+        padding: 16px 20px 24px;
+    }
+
+    .femr-card__footer {
+        padding: 0 20px 20px;
+    }
+
+    .femr-triage__actions {
+        width: 100%;
+    }
+
+    .femr-btn {
+        flex: 1;
+        justify-content: center;
+    }
+
+    .femr-age-section {
+        grid-template-columns: 1fr;
+    }
+    
+    .femr-age-separator {
+        display: none;
+    }
+
+    .femr-vitals {
+        gap: 20px;
+    }
+
+    .femr-vitals__column {
+        gap: 20px;
+    }
+
+    .femr-double-field {
+        grid-template-columns: 1fr;
+    }
+
+    .femr-chip,
+    .historyOfButton {
+        width: 100%;
+        justify-content: space-between;
+    }
+
+    .femr-diabetes-prompt__actions {
+        flex-direction: column;
+        align-items: stretch;
+    }
+}
diff --git a/redesign.html b/redesign.html
new file mode 100644
index 000000000..a1d0e8ac0
--- /dev/null
+++ b/redesign.html
@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html lang="en"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>Triage - femr</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,typography,container-queries"></script>
+<script>
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    colors: {
+                        primary: "#dc2626", // red-600
+                        "background-light": "#f3f4f6", // gray-100
+                        "background-dark": "#1c1917", // stone-900
+                    },
+                    fontFamily: {
+                        display: ["Inter", "sans-serif"],
+                    },
+                    borderRadius: {
+                        DEFAULT: "0.5rem", // 8px
+                    },
+                },
+            },
+        };
+    </script>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/>
+<style>
+        body {
+            font-family: 'Inter', sans-serif;
+        }
+    </style>
+</head>
+<body class="bg-background-light dark:bg-background-dark text-stone-900 dark:text-stone-100 font-display">
+<div class="flex min-h-screen">
+<aside class="w-64 bg-stone-900 dark:bg-stone-950 text-white flex flex-col p-6 shadow-2xl">
+<h1 class="text-3xl font-bold text-primary mb-8">femr</h1>
+<div class="mb-8">
+<label class="text-sm font-medium text-stone-300 mb-2 block" for="patient-search">Search Patient</label>
+<div class="relative">
+<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-stone-400">search</span>
+<input class="w-full bg-stone-800 border-stone-700 rounded-md shadow-sm pl-10 pr-4 py-2 text-white focus:ring-primary focus:border-primary" id="patient-search" placeholder="ID or Name..." type="text"/>
+</div>
+</div>
+<nav class="flex flex-col space-y-2">
+<a class="flex items-center gap-3 px-4 py-2 rounded-md bg-primary/20 text-primary transition-colors duration-200" href="#">
+<span class="material-symbols-outlined">person_add</span>
+                Triage
+            </a>
+<a class="flex items-center gap-3 px-4 py-2 rounded-md text-stone-300 hover:bg-stone-800 hover:text-white transition-colors duration-200" href="#">
+<span class="material-symbols-outlined">medical_services</span>
+                Medical
+            </a>
+<a class="flex items-center gap-3 px-4 py-2 rounded-md text-stone-300 hover:bg-stone-800 hover:text-white transition-colors duration-200" href="#">
+<span class="material-symbols-outlined">vaccines</span>
+                Pharmacy
+            </a>
+<a class="flex items-center gap-3 px-4 py-2 rounded-md text-stone-300 hover:bg-stone-800 hover:text-white transition-colors duration-200" href="#">
+<span class="material-symbols-outlined">science</span>
+                Research
+            </a>
+<a class="flex items-center gap-3 px-4 py-2 rounded-md text-stone-300 hover:bg-stone-800 hover:text-white transition-colors duration-200" href="#">
+<span class="material-symbols-outlined">admin_panel_settings</span>
+                Manager
+            </a>
+</nav>
+<div class="mt-auto">
+<div class="flex items-center space-x-3 p-3 bg-stone-800/50 rounded-lg">
+<div class="w-10 h-10 rounded-full bg-stone-700 flex items-center justify-center">
+<span class="text-lg font-semibold text-stone-300">TT</span>
+</div>
+<div>
+<p class="font-semibold text-white">test test</p>
+<p class="text-xs text-stone-400">Clinician</p>
+</div>
+<button class="ml-auto text-stone-400 hover:text-white">
+<span class="material-symbols-outlined text-xl">settings</span>
+</button>
+</div>
+</div>
+</aside>
+<main class="flex-grow p-8">
+<div class="bg-white dark:bg-stone-800 p-8 rounded-lg shadow-lg w-full max-w-6xl mx-auto">
+<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
+<div class="flex items-center space-x-4">
+<div class="w-16 h-16 rounded-full bg-stone-200 dark:bg-stone-700 flex items-center justify-center">
+<span class="material-symbols-outlined text-4xl text-stone-500">person</span>
+</div>
+<div>
+<h2 class="text-2xl font-bold text-stone-800 dark:text-stone-100">Patient Triage</h2>
+<p class="text-stone-500 dark:text-stone-400">Patient ID: <span class="font-semibold text-stone-600 dark:text-stone-300">123-456-789</span></p>
+</div>
+</div>
+<div class="flex gap-4 mt-4 md:mt-0">
+<button class="flex items-center justify-center gap-2 px-6 py-2 border border-stone-300 dark:border-stone-600 text-stone-600 dark:text-stone-300 rounded-lg hover:bg-stone-100 dark:hover:bg-stone-700 transition-colors duration-200">
+<span class="material-symbols-outlined text-xl">refresh</span>
+                        Reset Fields
+                    </button>
+<button class="flex items-center justify-center gap-2 px-6 py-3 bg-primary text-white rounded-lg hover:opacity-90 transition-opacity duration-200 shadow-md shadow-primary/30 font-semibold">
+<span class="material-symbols-outlined text-xl">send</span>
+                        Submit Patient
+                    </button>
+</div>
+</div>
+<div class="w-full">
+<div class="border-b border-stone-200 dark:border-stone-700 mb-6">
+<nav aria-label="Tabs" class="flex -mb-px space-x-8">
+<a aria-current="page" class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-lg border-primary text-primary" href="#">
+                            General Info
+                        </a>
+<a class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-lg border-transparent text-stone-500 dark:text-stone-400 hover:text-stone-700 dark:hover:text-stone-200 hover:border-stone-300 dark:hover:border-stone-600" href="#">
+                            Vitals
+                        </a>
+</nav>
+</div>
+<div class="space-y-6">
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 pt-4">
+<div>
+<label class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1" for="first-name">First Name <span class="text-primary">*</span></label>
+<input class="w-full bg-stone-50 dark:bg-stone-700 border-stone-300 dark:border-stone-600 rounded-md shadow-sm focus:ring-primary focus:border-primary" id="first-name" type="text"/>
+</div>
+<div>
+<label class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1" for="last-name">Last Name <span class="text-primary">*</span></label>
+<input class="w-full bg-stone-50 dark:bg-stone-700 border-stone-300 dark:border-stone-600 rounded-md shadow-sm focus:ring-primary focus:border-primary" id="last-name" type="text"/>
+</div>
+<div>
+<label class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1" for="phone-number">Phone Number</label>
+<input class="w-full bg-stone-50 dark:bg-stone-700 border-stone-300 dark:border-stone-600 rounded-md shadow-sm focus:ring-primary focus:border-primary" id="phone-number" type="tel"/>
+</div>
+<div class="lg:col-span-2">
+<label class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1" for="address">Address</label>
+<input class="w-full bg-stone-50 dark:bg-stone-700 border-stone-300 dark:border-stone-600 rounded-md shadow-sm focus:ring-primary focus:border-primary" id="address" type="text"/>
+</div>
+<div>
+<label class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1" for="city">City <span class="text-primary">*</span></label>
+<input class="w-full bg-stone-50 dark:bg-stone-700 border-stone-300 dark:border-stone-600 rounded-md shadow-sm focus:ring-primary focus:border-primary" id="city" type="text"/>
+</div>
+<div>
+<label class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1" for="birth-date">Birth Date <span class="text-primary">*</span></label>
+<input class="w-full bg-stone-50 dark:bg-stone-700 border-stone-300 dark:border-stone-600 rounded-md shadow-sm focus:ring-primary focus:border-primary" id="birth-date" type="date"/>
+</div>
+<div>
+<label class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1">Gender <span class="text-primary">*</span></label>
+<select class="w-full bg-stone-50 dark:bg-stone-700 border-stone-300 dark:border-stone-600 rounded-md shadow-sm focus:ring-primary focus:border-primary" id="gender">
+<option>Male</option>
+<option>Female</option>
+<option>Other</option>
+</select>
+</div>
+<div>
+<label class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1" for="patient-photo">Patient Photo</label>
+<input class="w-full text-sm text-stone-500 dark:text-stone-400 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-primary/10 dark:file:bg-primary/20 file:text-primary hover:file:bg-primary/20 dark:hover:file:bg-primary/30" id="patient-photo" type="file"/>
+</div>
+</div>
+</div>
+</div>
+</div>
+</main>
+</div>
+</body></html>
\ No newline at end of file

From d39d2b5f4b9ccd87b4c2e62584031562b6fba29c Mon Sep 17 00:00:00 2001
From: Brendan Donovan <142626107+BrendannnD@users.noreply.github.com>
Date: Tue, 3 Mar 2026 12:38:01 -0800
Subject: [PATCH 2/2] Changed to using python3

---
 app/femr/business/services/system/UpdatesService.java | 4 ++--
 app/femr/ui/controllers/BackEndControllerHelper.java  | 4 ++--
 app/femr/util/translation/TranslationServer.java      | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/femr/business/services/system/UpdatesService.java b/app/femr/business/services/system/UpdatesService.java
index 7ac00bb9d..969a88066 100644
--- a/app/femr/business/services/system/UpdatesService.java
+++ b/app/femr/business/services/system/UpdatesService.java
@@ -272,7 +272,7 @@ public ServiceResponse<List<? extends ILanguageCode>> downloadPackages(String la
             List<LanguageCode> optimizedLanguages = getOptimizedLanguages();
             for (ILanguageCode optLang : optimizedLanguages) {
                 System.out.println("Updating " + optLang.getCode() + " and " + langCode);
-                ProcessBuilder pb = new ProcessBuilder("python",
+                ProcessBuilder pb = new ProcessBuilder("python3",
                         "translator/optimizeLanguage.py", langCode, optLang.getCode());
                 Process p = pb.start();
                 BufferedReader bfr = new BufferedReader(new InputStreamReader(p.getInputStream(), "UTF-8"));
@@ -291,7 +291,7 @@ public ServiceResponse<List<? extends ILanguageCode>> initializeLanguages() {
         ServiceResponse<List<? extends ILanguageCode>> response = new ServiceResponse<>();
         try {
             languagesRepository.delete(languagesRepository.findAll(LanguageCode.class));
-            ProcessBuilder pb = new ProcessBuilder("python", "translator/libargos.py");
+            ProcessBuilder pb = new ProcessBuilder("python3", "translator/libargos.py");
             Process p = pb.start();
             BufferedReader bfr = new BufferedReader(new InputStreamReader(p.getInputStream(), "UTF-8"));
             String line;
diff --git a/app/femr/ui/controllers/BackEndControllerHelper.java b/app/femr/ui/controllers/BackEndControllerHelper.java
index c9e8292f8..b16f1c28b 100644
--- a/app/femr/ui/controllers/BackEndControllerHelper.java
+++ b/app/femr/ui/controllers/BackEndControllerHelper.java
@@ -9,7 +9,7 @@ public class BackEndControllerHelper  {
 
   public static void executePythonScript(String absPath) {
     try {
-      ProcessBuilder pb = new ProcessBuilder("python", absPath);
+  ProcessBuilder pb = new ProcessBuilder("python3", absPath);
       pb.start();
     } catch (NullPointerException e) {
       System.out.println("The python script does not exist or could not be opened.");
@@ -27,7 +27,7 @@ public static ArrayList<String> executeSpeedTestScript(String absPath) {
       if(absPath.equals("/usr/src/speedtest/sptest.py")){
         pb = new ProcessBuilder("python3", absPath);
       }else{
-        pb = new ProcessBuilder("python", absPath);
+  pb = new ProcessBuilder("python3", absPath);
       }
       Process p = pb.start();
       BufferedReader bfr = new BufferedReader(new InputStreamReader(p.getInputStream(), "UTF-8"));
diff --git a/app/femr/util/translation/TranslationServer.java b/app/femr/util/translation/TranslationServer.java
index f4f77a60b..84f357ff8 100644
--- a/app/femr/util/translation/TranslationServer.java
+++ b/app/femr/util/translation/TranslationServer.java
@@ -105,7 +105,7 @@ public static void start(String timeout) {
             File log = new File(logPath);
             try {
                 log.createNewFile();
-                ProcessBuilder pb = new ProcessBuilder("python", absPath, timeout);
+                ProcessBuilder pb = new ProcessBuilder("python3", absPath, timeout);
                 pb.redirectOutput(log);
                 pb.redirectErrorStream(true);
                 pb.start();
