diff --git a/query-connector/e2e/alternate_queries.spec.ts b/query-connector/e2e/alternate_queries.spec.ts
index 2f07aef13..9e1436552 100644
--- a/query-connector/e2e/alternate_queries.spec.ts
+++ b/query-connector/e2e/alternate_queries.spec.ts
@@ -1,6 +1,6 @@
 import { test, expect } from "@playwright/test";
 import { TEST_URL } from "../playwright-setup";
-import { PAGE_TITLES } from "@/app/query/stepIndicator/StepIndicator";
+import { PAGE_TITLES } from "@/app/query/components/stepIndicator/StepIndicator";
 
 import { TEST_PATIENT, TEST_PATIENT_NAME } from "./constants";
 
diff --git a/query-connector/e2e/customize_query.spec.ts b/query-connector/e2e/customize_query.spec.ts
index b935c528b..4e2fb2373 100644
--- a/query-connector/e2e/customize_query.spec.ts
+++ b/query-connector/e2e/customize_query.spec.ts
@@ -2,7 +2,7 @@
 
 import { test, expect } from "@playwright/test";
 import { TEST_URL } from "../playwright-setup";
-import { PAGE_TITLES } from "@/app/query/stepIndicator/StepIndicator";
+import { PAGE_TITLES } from "@/app/query/components/stepIndicator/StepIndicator";
 
 import { TEST_PATIENT, TEST_PATIENT_NAME } from "./constants";
 
diff --git a/query-connector/e2e/query_workflow.spec.ts b/query-connector/e2e/query_workflow.spec.ts
index 2437a4530..9cff37987 100644
--- a/query-connector/e2e/query_workflow.spec.ts
+++ b/query-connector/e2e/query_workflow.spec.ts
@@ -2,7 +2,7 @@
 
 import { test, expect } from "@playwright/test";
 import { TEST_URL } from "../playwright-setup";
-import { PAGE_TITLES } from "@/app/query/stepIndicator/StepIndicator";
+import { PAGE_TITLES } from "@/app/query/components/stepIndicator/StepIndicator";
 import {
   CONTACT_US_DISCLAIMER_EMAIL,
   CONTACT_US_DISCLAIMER_TEXT,
diff --git a/query-connector/src/app/footer.tsx b/query-connector/src/app/footer.tsx
deleted file mode 100644
index e0b1a4d48..000000000
--- a/query-connector/src/app/footer.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import Image from "next/image";
-
-/**
- * Produces the footer.
- * @returns The footer component.
- */
-export default function FooterComponent() {
-  return (
-    <footer className="usa-footer">
-      <div className="usa-footer__secondary-section max-w-full bg-primary-darker">
-        <div className="header-footer-content grid-container usa-nav-container">
-          <div className="grid-row grid-gap">
-            <div
-              className="
-                usa-footer__logo
-                grid-row
-                mobile-lg:grid-col-10 mobile-lg:grid-gap-1
-              "
-              style={{ width: "80%" }}
-            >
-              <div className="mobile-lg:grid-col-auto">
-                <Image
-                  src="/tefca-viewer/CDC_logo.png"
-                  alt="CDC logo"
-                  width={62}
-                  height={36}
-                  className="usa-footer__logo-img"
-                />
-              </div>
-              <div className="mobile-lg:grid-col-auto">
-                <p className="text-base-lightest">
-                  Centers for Disease Control and Prevention
-                </p>
-              </div>
-            </div>
-            <div
-              className="
-                usa-footer__logo
-                grid-row
-                mobile-lg:grid-col-2 mobile-lg:grid-gap-1
-              "
-              style={{
-                width: "20%",
-                display: "flex",
-                justifyContent: "flex-end",
-                alignItems: "center",
-              }}
-            >
-              <div style={{ whiteSpace: "nowrap", textAlign: "right" }}>
-                <p className="text-base-lightest">
-                  For more information about this solution, send us an email at{" "}
-                  <a
-                    href="mailto:dibbs@cdc.gov"
-                    style={{
-                      color: "inherit",
-                      fontWeight: "bold",
-                      textDecoration: "underline",
-                    }}
-                  >
-                    dibbs@cdc.gov
-                  </a>
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </footer>
-  );
-}
diff --git a/query-connector/src/app/layout.tsx b/query-connector/src/app/layout.tsx
index e360e1dca..8dcc653f9 100644
--- a/query-connector/src/app/layout.tsx
+++ b/query-connector/src/app/layout.tsx
@@ -1,6 +1,6 @@
 import "../styles/styles.scss";
 import Header from "./query/components/header/header";
-import Footer from "./footer";
+import Footer from "./query/components/footer/footer";
 import { DataProvider } from "./utils";
 
 /**
diff --git a/query-connector/src/app/page.module.scss b/query-connector/src/app/page.module.scss
new file mode 100644
index 000000000..e076dc817
--- /dev/null
+++ b/query-connector/src/app/page.module.scss
@@ -0,0 +1,14 @@
+.pageSubtitle {
+    margin: 2rem 0 0.5rem 0;
+}
+
+.pageSubtitle:last-of-type{
+    margin-top: 1.5rem;
+}
+
+.pageContent {
+    font-weight: 300;
+    margin-top: 0;
+    font-size:1rem;
+    margin-bottom: 0.5rem
+}
\ No newline at end of file
diff --git a/query-connector/src/app/page.tsx b/query-connector/src/app/page.tsx
index 62061d0cb..16a3ee215 100644
--- a/query-connector/src/app/page.tsx
+++ b/query-connector/src/app/page.tsx
@@ -7,7 +7,7 @@ import {
 } from "@trussworks/react-uswds";
 import { useRouter } from "next/navigation";
 import Image from "next/image";
-
+import styles from "./page.module.scss";
 /**
  * The landing page for the TEFCA Viewer.
  * @returns The LandingPage component.
@@ -15,7 +15,7 @@ import Image from "next/image";
 export default function LandingPage() {
   const router = useRouter();
 
-  const handleClick = () => {
+  const handleGoToDemo = () => {
     router.push(`/query`);
   };
 
@@ -25,10 +25,10 @@ export default function LandingPage() {
         <div className="gradient-blue-background">
           <div className="container">
             <div className="text-holder">
-              <h1 className="font-sans-2xl text-bold">
+              <h1 className={styles.pageSubtitle}>
                 Data collection made easier
               </h1>
-              <h2 className="font-sans-md text-light margin-top-2">
+              <h2 className={styles.pageContent}>
                 The TEFCA Query Connector allows your jurisdiction to query a
                 wide network of healthcare organizations (HCOs) enabled by
                 TEFCA, giving you access to more complete and timely data.
@@ -44,8 +44,8 @@ export default function LandingPage() {
           </div>
         </div>
         <div className="home">
-          <h3 className="font-sans-l text-bold margin-top-5">What is it?</h3>
-          <h2 className="font-sans-md text-light margin-top-0">
+          <h3 className={styles.pageSubtitle}>What is it?</h3>
+          <h2 className={styles.pageContent}>
             The TEFCA Query Connector aims to streamline the collection of
             health data using an intuitive querying process that leverages
             Qualified Health Information Networks (QHINs) within the Trusted
@@ -54,10 +54,8 @@ export default function LandingPage() {
             quickly retrieve patient records and relevant case information from
             HCOs without requiring direct connection and onboarding.
           </h2>
-          <h3 className="font-sans-l text-bold margin-top-5">
-            How does it work?
-          </h3>
-          <h2 className="font-sans-md text-light margin-top-0">
+          <h3 className={styles.pageSubtitle}>How does it work?</h3>
+          <h2 className={styles.pageContent}>
             Public health staff can interact with the TEFCA Query Connector
             manually by entering simple patient details — such as name, date of
             birth, or medical identifiers — along with a query use case, into
@@ -97,7 +95,7 @@ export default function LandingPage() {
               className="next-button"
               type="button"
               id="next-button"
-              onClick={() => handleClick()}
+              onClick={() => handleGoToDemo()}
             >
               Go to the demo
             </Button>
diff --git a/query-connector/src/app/query/components/CustomizeQuery.tsx b/query-connector/src/app/query/components/CustomizeQuery.tsx
index c4b51f068..9a98ad641 100644
--- a/query-connector/src/app/query/components/CustomizeQuery.tsx
+++ b/query-connector/src/app/query/components/CustomizeQuery.tsx
@@ -20,10 +20,10 @@ import CustomizeQueryNav from "./customizeQuery/CustomizeQueryNav";
 import {
   GroupedValueSet,
   mapValueSetsToValueSetTypes,
+  countDibbsConceptTypeToVsMapItems,
 } from "./customizeQuery/customizeQueryUtils";
 import Backlink from "./backLink/Backlink";
-import { RETURN_LABEL } from "../stepIndicator/StepIndicator";
-import { countDibbsConceptTypeToVsMapItems } from "./utils";
+import { RETURN_LABEL } from "./stepIndicator/StepIndicator";
 
 interface CustomizeQueryProps {
   useCaseQueryResponse: UseCaseQueryResponse;
diff --git a/query-connector/src/app/query/components/PatientSearchResults.tsx b/query-connector/src/app/query/components/PatientSearchResults.tsx
index 5ac19f407..e4356726e 100644
--- a/query-connector/src/app/query/components/PatientSearchResults.tsx
+++ b/query-connector/src/app/query/components/PatientSearchResults.tsx
@@ -5,7 +5,7 @@ import { Mode } from "@/app/constants";
 import Backlink from "./backLink/Backlink";
 import PatientSearchResultsTable from "./patientSearchResults/PatientSearchResultsTable";
 import NoPatientsFound from "./patientSearchResults/NoPatientsFound";
-import { RETURN_LABEL } from "@/app/query/stepIndicator/StepIndicator";
+import { RETURN_LABEL } from "@/app/query/components/stepIndicator/StepIndicator";
 
 /**
  * The props for the PatientSearchResults component.
diff --git a/query-connector/src/app/query/components/ResultsView.tsx b/query-connector/src/app/query/components/ResultsView.tsx
index 518e3172e..095be31e3 100644
--- a/query-connector/src/app/query/components/ResultsView.tsx
+++ b/query-connector/src/app/query/components/ResultsView.tsx
@@ -16,7 +16,7 @@ import { USE_CASES, demoQueryValToLabelMap } from "@/app/constants";
 import {
   PAGE_TITLES,
   RETURN_LABEL,
-} from "@/app/query/stepIndicator/StepIndicator";
+} from "@/app/query/components/stepIndicator/StepIndicator";
 
 type ResultsViewProps = {
   useCaseQueryResponse: UseCaseQueryResponse;
diff --git a/query-connector/src/app/query/components/SearchForm.tsx b/query-connector/src/app/query/components/SearchForm.tsx
index 5be044800..30e71c10f 100644
--- a/query-connector/src/app/query/components/SearchForm.tsx
+++ b/query-connector/src/app/query/components/SearchForm.tsx
@@ -17,7 +17,7 @@ import { UseCaseQueryResponse, UseCaseQuery } from "@/app/query-service";
 import { fhirServers } from "@/app/fhir-servers";
 import styles from "./searchForm/searchForm.module.scss";
 import { FormatPhoneAsDigits } from "@/app/format-service";
-import { PAGE_TITLES } from "@/app/query/stepIndicator/StepIndicator";
+import { PAGE_TITLES } from "@/app/query/components/stepIndicator/StepIndicator";
 
 interface SearchFormProps {
   useCase: USE_CASES;
@@ -371,7 +371,7 @@ const SearchForm: React.FC<SearchFormProps> = ({
             </div>
           </div>
         </Fieldset>
-        <button className="usa-button patient-search-button" type="submit">
+        <button className="usa-button margin-top-5" type="submit">
           Search for patient
         </button>
       </form>
diff --git a/query-connector/src/app/query/SelectQuery.tsx b/query-connector/src/app/query/components/SelectQuery.tsx
similarity index 94%
rename from query-connector/src/app/query/SelectQuery.tsx
rename to query-connector/src/app/query/components/SelectQuery.tsx
index e7af0c56a..abe4947ce 100644
--- a/query-connector/src/app/query/SelectQuery.tsx
+++ b/query-connector/src/app/query/components/SelectQuery.tsx
@@ -5,17 +5,17 @@ import {
   USE_CASES,
   UseCaseToQueryName,
   ValueSet,
-} from "../constants";
-import CustomizeQuery from "./components/CustomizeQuery";
-import SelectSavedQuery from "./components/selectQuery/SelectSavedQuery";
+} from "../../constants";
+import CustomizeQuery from "./CustomizeQuery";
+import SelectSavedQuery from "./selectQuery/SelectSavedQuery";
 
 import { QueryResponse } from "@/app/query-service";
 import { Patient } from "fhir/r4";
 import {
   fetchQueryResponse,
   fetchUseCaseValueSets,
-} from "./components/selectQuery/queryHooks";
-import LoadingView from "./components/LoadingView";
+} from "./selectQuery/queryHooks";
+import LoadingView from "./LoadingView";
 
 interface SelectQueryProps {
   goForward: () => void;
diff --git a/query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionBody.tsx b/query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionBody.tsx
index 911b36069..33d5f78af 100644
--- a/query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionBody.tsx
+++ b/query-connector/src/app/query/components/customizeQuery/CustomizeQueryAccordionBody.tsx
@@ -35,7 +35,7 @@ const CustomizeQueryAccordionBody: React.FC<
 > = ({ group, toggleInclude, groupIndex }) => {
   return (
     <Table className={`${styles.customizeQueryGridContainer}`}>
-      <thead className={` margin-top-10`}>
+      <thead>
         <tr className={styles.customizeQueryGridHeader}>
           <th className={`${styles.accordionTableHeader}`}>Include</th>
           <th className={`${styles.accordionTableHeader}`}>Code</th>
diff --git a/query-connector/src/app/query/components/customizeQuery/customizeQueryUtils.ts b/query-connector/src/app/query/components/customizeQuery/customizeQueryUtils.ts
index 488c7e4fb..8dfb36058 100644
--- a/query-connector/src/app/query/components/customizeQuery/customizeQueryUtils.ts
+++ b/query-connector/src/app/query/components/customizeQuery/customizeQueryUtils.ts
@@ -138,3 +138,20 @@ export const mapValueSetsToValueSetType = (valueSets: ValueSet[]) => {
 
   return results;
 };
+
+/**
+ * Utility function to count the number of labs / meds / conditions that we display
+ * on the customize query page
+ * @param obj a grouped ValueSet dictionary that we render as an individual accordion
+ * @returns A count of the number of items in each of the DibbsConceptTypes
+ */
+export const countDibbsConceptTypeToVsMapItems = (obj: {
+  [vsNameAuthorSystem: string]: GroupedValueSet;
+}) => {
+  return Object.values(obj).reduce((runningSum, gvs) => {
+    gvs.items.forEach((vs) => {
+      runningSum += vs.concepts.length;
+    });
+    return runningSum;
+  }, 0);
+};
diff --git a/query-connector/src/app/query/components/footer/footer.module.scss b/query-connector/src/app/query/components/footer/footer.module.scss
new file mode 100644
index 000000000..2c9a2c668
--- /dev/null
+++ b/query-connector/src/app/query/components/footer/footer.module.scss
@@ -0,0 +1,24 @@
+@use "../../../../styles/_variables" as *;
+
+.footerContainer {
+  height: 5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: $primary-darker;
+}
+
+.footerContainer > div {
+  flex-grow: 1;
+}
+
+.cdcLogoContainer {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.contactUsContainer {
+  display: flex;
+  justify-content: end;
+}
diff --git a/query-connector/src/app/query/components/footer/footer.tsx b/query-connector/src/app/query/components/footer/footer.tsx
new file mode 100644
index 000000000..e44f7b783
--- /dev/null
+++ b/query-connector/src/app/query/components/footer/footer.tsx
@@ -0,0 +1,43 @@
+import Image from "next/image";
+import styles from "./footer.module.scss";
+import classNames from "classnames";
+
+/**
+ * Produces the footer.
+ * @returns The footer component.
+ */
+export default function FooterComponent() {
+  return (
+    <footer className={classNames("usa-footer", styles.footerContainer)}>
+      <div className={styles.cdcLogoContainer}>
+        <div>
+          <Image
+            src="/tefca-viewer/CDC_logo.png"
+            alt="CDC logo"
+            width={62}
+            height={36}
+            className="usa-footer__logo-img"
+          />
+        </div>
+        <div>
+          <p className="text-base-lightest-important">
+            Centers for Disease Control and Prevention
+          </p>
+        </div>
+      </div>
+      <div className={styles.contactUsContainer}>
+        <div className="width-fit-content">
+          <p className="text-base-lightest-important">
+            For more information about this solution, send us an email at{" "}
+            <a
+              className="text-base-lightest-important"
+              href="mailto:dibbs@cdc.gov"
+            >
+              dibbs@cdc.gov
+            </a>
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/query-connector/src/app/query/components/header/header.module.css b/query-connector/src/app/query/components/header/header.module.css
index e4b59b2cb..3474ae1a5 100644
--- a/query-connector/src/app/query/components/header/header.module.css
+++ b/query-connector/src/app/query/components/header/header.module.css
@@ -9,7 +9,7 @@
 }
 
 .signinButton {
-  padding: 0.75rem 1.25rem !important;
+  padding: 0.5rem 1.25rem !important;
   cursor: pointer;
   background: none !important;
   border: 2px solid white !important;
@@ -27,6 +27,7 @@
   font: inherit !important;
   margin: 0 !important;
   height: 1.5rem !important;
+  width: 1.5rem !important;
 }
 
 .menuDropdownContainer {
@@ -47,10 +48,19 @@
 
 .menuItem {
   color: black !important;
-  text-decoration: none;
+  text-decoration: none !important;
   padding: 0.5rem 1rem !important;
+  cursor: pointer;
 }
 
 .menuItem:hover {
   text-decoration: none !important;
 }
+
+.headerContentContainer {
+  align-items: center !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  height: 4.5rem;
+  max-width: 100% !important;
+}
diff --git a/query-connector/src/app/query/components/header/header.tsx b/query-connector/src/app/query/components/header/header.tsx
index 5ba5ee857..b146aa349 100644
--- a/query-connector/src/app/query/components/header/header.tsx
+++ b/query-connector/src/app/query/components/header/header.tsx
@@ -2,10 +2,11 @@
 
 import { useEffect, useRef, useState } from "react";
 import { Modal, ModalButton } from "../../designSystem/Modal";
-import { ModalRef, Button, Icon } from "@trussworks/react-uswds";
+import { useRouter, usePathname } from "next/navigation";
+import { Button, Icon, ModalRef } from "@trussworks/react-uswds";
 import styles from "./header.module.css";
 import { metadata } from "@/app/constants";
-import { useRouter, usePathname } from "next/navigation";
+import classNames from "classnames";
 /**
  * Produces the header.
  * @returns The HeaderComponent component.
@@ -29,25 +30,23 @@ export default function HeaderComponent() {
   const toggleMenuDropdown = () => {
     setShowMenu(!showMenu);
   };
-  const backLink =
-    process.env.NODE_ENV === "production" ? "/tefca-viewer" : "/";
+  const isProduction = process.env.NODE_ENV === "production";
+  const backLink = isProduction ? "/tefca-viewer" : "/";
+
   return (
     <>
       <header className="usa-header usa-header--basic bg-primary-darker">
         <div
-          className="header-footer-content usa-nav-container"
-          style={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            height: "4.5rem !important",
-          }}
+          className={classNames(
+            "usa-nav-container",
+            styles.headerContentContainer,
+          )}
         >
-          <div style={{ display: "flex", alignItems: "center" }}>
-            <div className="usa-logo" style={{ marginLeft: "16px" }}>
-              <em className="usa-logo__text text-base-lightest">
+          <div className={classNames("display-flex", "flex-align-center")}>
+            <div className="usa-logo">
+              <em className="usa-logo__text text-base-lightest-important">
                 <a
-                  className="text-base-lightest font-sans-xl text-bold"
+                  className="font-mono-lg text-base-lightest-important font-weight-normal-important"
                   href={backLink}
                   title={metadata.title}
                 >
@@ -57,12 +56,11 @@ export default function HeaderComponent() {
             </div>
           </div>
           <div
-            style={{
-              whiteSpace: "nowrap",
-              textAlign: "right",
-              marginLeft: "auto",
-              display: "flex",
-            }}
+            className={classNames(
+              "margin-left-auto",
+              "display-flex",
+              "flex-align-center",
+            )}
           >
             {path != "/signin" && isClient && (
               <ModalButton
@@ -72,7 +70,7 @@ export default function HeaderComponent() {
               />
             )}
             {/* TODO: Rework show/hide rules based on actual auth status */}
-            {path != "/signin" && path != "/query" && (
+            {path != "/signin" && !LOGGED_IN_PATHS.includes(path) && (
               <Button
                 className={styles.signinButton}
                 type="button"
@@ -83,19 +81,17 @@ export default function HeaderComponent() {
                 Sign in
               </Button>
             )}
-            {path == "/query" && (
+            {LOGGED_IN_PATHS.includes(path) && (
               <button
                 onClick={toggleMenuDropdown}
-                className={`${styles.menuButton} usa-accordion__button usa-nav__link usa-current`}
+                className={classNames(
+                  styles.menuButton,
+                  "usa-accordion__button",
+                  "usa-nav__link",
+                  "usa-current",
+                )}
                 aria-expanded="false"
                 aria-controls="dropdown-menu"
-                style={{
-                  background: "transparent",
-                  padding: "0 !important",
-                  height: "1.5rem !important",
-                  width: "1.5rem !important",
-                  margin: "0 1rem 0 0 !important",
-                }}
               >
                 <Icon.Settings
                   className="usa-icon qc-settings"
@@ -124,11 +120,13 @@ export default function HeaderComponent() {
             id="dropdown-menu"
             className={`usa-nav__submenu ${styles.menuDropdown}`}
           >
-            {/* <li className={`usa-nav__submenu-item`}>
-              <a className={styles.menuItem} href="#">
-                My queries
-              </a>
-            </li> */}
+            {!isProduction && (
+              <li className={`usa-nav__submenu-item`}>
+                <a className={styles.menuItem} href={"/queryBuilding"}>
+                  My queries
+                </a>
+              </li>
+            )}
             <li className={`usa-nav__submenu-item`}>
               <a className={styles.menuItem} href={backLink}>
                 Log out
@@ -140,3 +138,5 @@ export default function HeaderComponent() {
     </>
   );
 }
+
+const LOGGED_IN_PATHS = ["/query", "/queryBuilding"];
diff --git a/query-connector/src/app/query/components/patientSearchResults/PatientSearchResultsTable.tsx b/query-connector/src/app/query/components/patientSearchResults/PatientSearchResultsTable.tsx
index 293669a94..7e08e364a 100644
--- a/query-connector/src/app/query/components/patientSearchResults/PatientSearchResultsTable.tsx
+++ b/query-connector/src/app/query/components/patientSearchResults/PatientSearchResultsTable.tsx
@@ -6,7 +6,7 @@ import {
   formatMRN,
   formatName,
 } from "@/app/format-service";
-import { PAGE_TITLES } from "@/app/query/stepIndicator/StepIndicator";
+import { PAGE_TITLES } from "@/app/query/components/stepIndicator/StepIndicator";
 
 type PatientSeacrchResultsTableProps = {
   patients: Patient[];
@@ -29,10 +29,10 @@ const PatientSearchResultsTable: React.FC<PatientSeacrchResultsTableProps> = ({
   return (
     <>
       <h1 className="page-title">{PAGE_TITLES["patient-results"]}</h1>
-      <p className="page-explainer">
+      <h2 className="page-explainer">
         The following records match your search. Select a patient to continue.
-      </p>
-      <Table className="margin-top-5">
+      </h2>
+      <Table className="margin-top-4">
         <thead>
           <tr>
             <th>Name</th>
diff --git a/query-connector/src/app/query/components/resultsView/resultsView.module.scss b/query-connector/src/app/query/components/resultsView/resultsView.module.scss
index 13d13f370..536ade936 100644
--- a/query-connector/src/app/query/components/resultsView/resultsView.module.scss
+++ b/query-connector/src/app/query/components/resultsView/resultsView.module.scss
@@ -1,7 +1,7 @@
 @use "../../../../styles/_variables" as *;
 
 .accordionInstance {
-  margin-bottom: $margin-between-group;
+  margin-bottom: 2rem;
 }
 
 .accordionWrapper > h3 {
diff --git a/query-connector/src/app/query/components/searchForm/searchForm.module.scss b/query-connector/src/app/query/components/searchForm/searchForm.module.scss
index 351fa257f..62911ffef 100644
--- a/query-connector/src/app/query/components/searchForm/searchForm.module.scss
+++ b/query-connector/src/app/query/components/searchForm/searchForm.module.scss
@@ -8,7 +8,7 @@
 }
 
 .searchFormContainer {
-  margin-top: $margin-within-group;
+  margin-top: 1rem;
   padding: 1.5rem;
 }
 
diff --git a/query-connector/src/app/query/components/selectQuery/SelectSavedQuery.tsx b/query-connector/src/app/query/components/selectQuery/SelectSavedQuery.tsx
index ccd5f21f2..e87ee9fc6 100644
--- a/query-connector/src/app/query/components/selectQuery/SelectSavedQuery.tsx
+++ b/query-connector/src/app/query/components/selectQuery/SelectSavedQuery.tsx
@@ -11,7 +11,7 @@ import { useState } from "react";
 import {
   PAGE_TITLES,
   RETURN_LABEL,
-} from "@/app/query/stepIndicator/StepIndicator";
+} from "@/app/query/components/stepIndicator/StepIndicator";
 
 type SelectSavedQueryProps = {
   selectedQuery: string;
@@ -64,7 +64,7 @@ const SelectSavedQuery: React.FC<SelectSavedQueryProps> = ({
         systems and protect patient privacy. If you would like to customize the
         query response, click on the "customize query" button.
       </h2>
-      <h3 className="margin-bottom-105">Query</h3>
+      <h3 className={styles.queryDropdownLabel}>Query</h3>
       <div className={styles.queryRow}>
         {/* Select a query drop down */}
         <Select
@@ -98,7 +98,9 @@ const SelectSavedQuery: React.FC<SelectSavedQueryProps> = ({
 
       {showAdvanced && (
         <div>
-          <h3 className="margin-bottom-105">Health Care Organization (HCO)</h3>
+          <h3 className={styles.queryDropdownLabel}>
+            Health Care Organization (HCO)
+          </h3>
           <Select
             id="fhir_server"
             name="fhir_server"
diff --git a/query-connector/src/app/query/components/selectQuery/selectQuery.module.scss b/query-connector/src/app/query/components/selectQuery/selectQuery.module.scss
index 39dafee1f..45ad1dc17 100644
--- a/query-connector/src/app/query/components/selectQuery/selectQuery.module.scss
+++ b/query-connector/src/app/query/components/selectQuery/selectQuery.module.scss
@@ -11,7 +11,7 @@
 }
 
 .selectQueryExplanationText {
-  padding-top: $margin-within-group;
+  padding-top: 1rem;
   padding-bottom: 1.5rem;
   line-height: 2.0625rem;
   word-wrap: break-word;
@@ -32,3 +32,8 @@
   align-items: flex-start;
   gap: 0.5rem;
 }
+
+.queryDropdownLabel {
+  margin-top: 2rem;
+  margin-bottom: 0.5rem;
+}
diff --git a/query-connector/src/app/query/stepIndicator/StepIndicator.tsx b/query-connector/src/app/query/components/stepIndicator/StepIndicator.tsx
similarity index 100%
rename from query-connector/src/app/query/stepIndicator/StepIndicator.tsx
rename to query-connector/src/app/query/components/stepIndicator/StepIndicator.tsx
diff --git a/query-connector/src/app/query/stepIndicator/stepIndicator.module.scss b/query-connector/src/app/query/components/stepIndicator/stepIndicator.module.scss
similarity index 61%
rename from query-connector/src/app/query/stepIndicator/stepIndicator.module.scss
rename to query-connector/src/app/query/components/stepIndicator/stepIndicator.module.scss
index ea9e4024c..3e1daabc4 100644
--- a/query-connector/src/app/query/stepIndicator/stepIndicator.module.scss
+++ b/query-connector/src/app/query/components/stepIndicator/stepIndicator.module.scss
@@ -1,4 +1,4 @@
-@use "../../../styles/_variables" as *;
+@use "../../../../styles/_variables" as *;
 
 .container > ol {
   justify-content: space-between;
@@ -7,5 +7,5 @@
 }
 
 .container {
-  margin-bottom: $margin-between-group;
+  margin-bottom: 2rem;
 }
diff --git a/query-connector/src/app/query/components/utils.ts b/query-connector/src/app/query/components/utils.ts
deleted file mode 100644
index bb41bf37e..000000000
--- a/query-connector/src/app/query/components/utils.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { GroupedValueSet } from "./customizeQuery/customizeQueryUtils";
-
-/**
- * Utility function to count the number of labs / meds / conditions that we display
- * on the customize query page
- * @param obj a grouped ValueSet dictionary that we render as an individual accordion
- * @returns A count of the number of items in each of the DibbsConceptTypes
- */
-export const countDibbsConceptTypeToVsMapItems = (obj: {
-  [vsNameAuthorSystem: string]: GroupedValueSet;
-}) => {
-  return Object.values(obj).reduce((runningSum, gvs) => {
-    gvs.items.forEach((vs) => {
-      runningSum += vs.concepts.length;
-    });
-    return runningSum;
-  }, 0);
-};
diff --git a/query-connector/src/app/query/page.tsx b/query-connector/src/app/query/page.tsx
index 7f530f3f6..e08b2634b 100644
--- a/query-connector/src/app/query/page.tsx
+++ b/query-connector/src/app/query/page.tsx
@@ -4,7 +4,7 @@ import { UseCaseQueryResponse } from "../query-service";
 import ResultsView from "./components/ResultsView";
 import PatientSearchResults from "./components/PatientSearchResults";
 import SearchForm from "./components/SearchForm";
-import SelectQuery from "./SelectQuery";
+import SelectQuery from "./components/SelectQuery";
 import {
   DEFAULT_DEMO_FHIR_SERVER,
   FHIR_SERVERS,
@@ -17,7 +17,7 @@ import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.min.css";
 import StepIndicator, {
   CUSTOMIZE_QUERY_STEPS,
-} from "./stepIndicator/StepIndicator";
+} from "./components/stepIndicator/StepIndicator";
 import SiteAlert from "./designSystem/SiteAlert";
 import { Patient } from "fhir/r4";
 
diff --git a/query-connector/src/app/queryBuilding/emptyState/EmptyQueriesDisplay.tsx b/query-connector/src/app/queryBuilding/emptyState/EmptyQueriesDisplay.tsx
new file mode 100644
index 000000000..a73c1c12f
--- /dev/null
+++ b/query-connector/src/app/queryBuilding/emptyState/EmptyQueriesDisplay.tsx
@@ -0,0 +1,30 @@
+import { Button, Icon } from "@trussworks/react-uswds";
+import styles from "../query.module.scss";
+
+/**
+ * Empty-state component for query building
+ * @returns the EmptyQueriesDisplay to render the empty state status
+ */
+export const EmptyQueriesDisplay: React.FC = () => {
+  return (
+    <>
+      <div className={styles.emptyStateQueryContainer}>
+        <div className="display-flex flex-column flex-align-center">
+          <Icon.GridView
+            aria-label="Icon of four boxes in a grid to indicate empty query state"
+            className={styles.emptyQueryIcon}
+          ></Icon.GridView>
+          <h2 className={styles.emptyQueryTitle}>
+            No custom queries available
+          </h2>
+
+          <Button className={styles.createQueryButton} type={"button"}>
+            Create Query
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default EmptyQueriesDisplay;
diff --git a/query-connector/src/app/queryBuilding/page.tsx b/query-connector/src/app/queryBuilding/page.tsx
new file mode 100644
index 000000000..f84d2ab4e
--- /dev/null
+++ b/query-connector/src/app/queryBuilding/page.tsx
@@ -0,0 +1,17 @@
+"use client";
+import styles from "./query.module.scss";
+import EmptyQueriesDisplay from "./emptyState/EmptyQueriesDisplay";
+/**
+ * Component for Query Building Flow
+ * @returns The Query Building component flow
+ */
+const QueryBuilding: React.FC = () => {
+  return (
+    <div className="main-container">
+      <h1 className={styles.queryTitle}>My queries</h1>
+      <EmptyQueriesDisplay></EmptyQueriesDisplay>
+    </div>
+  );
+};
+
+export default QueryBuilding;
diff --git a/query-connector/src/app/queryBuilding/query.module.scss b/query-connector/src/app/queryBuilding/query.module.scss
new file mode 100644
index 000000000..092a1f7f5
--- /dev/null
+++ b/query-connector/src/app/queryBuilding/query.module.scss
@@ -0,0 +1,42 @@
+@use "../../styles/variables" as *;
+
+.queryBuildingContainer {
+  display: flex;
+  flex-direction: column;
+  width: 15rem;
+  margin: auto;
+}
+
+.queryTitle {
+  font-size: 2rem;
+  margin-top: 1rem;
+  margin-bottom: 2rem;
+}
+.queryBuildingContainer > * {
+  margin-top: 1rem;
+}
+
+.emptyStateQueryContainer {
+  background-color: #edeff0;
+  height: 27.75rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.emptyQueryTitle {
+  width: fit-content;
+  margin: 0.5rem 0 1.5rem 0;
+  font-family: $sans-serif-font;
+}
+
+.emptyQueryIcon {
+  width: 7.5rem;
+  height: 7.5rem;
+  color: $gray-cool-20;
+}
+
+.createQueryButton {
+  width: fit-content;
+  padding: 1rem !important;
+}
diff --git a/query-connector/src/app/signin/signinPage.module.scss b/query-connector/src/app/signin/signinPage.module.scss
index 70ddd89f1..f0a5c5ea3 100644
--- a/query-connector/src/app/signin/signinPage.module.scss
+++ b/query-connector/src/app/signin/signinPage.module.scss
@@ -1,136 +1,136 @@
 @use "../../styles/_variables" as *;
 
 .column {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 
 .column-left {
-    background: #adcfdc;
+  background: #adcfdc;
 }
 
 .signin-button {
-    margin: 0;
-    width: 100%;
-    padding: 0.75rem 1.25rem 0.75rem 1.25rem;
-    font-size: 16px;
-    line-height: 19px;
-    font-weight: 700;
+  margin: 0;
+  width: 100%;
+  padding: 0.75rem 1.25rem 0.75rem 1.25rem;
+  font-size: 16px;
+  line-height: 19px;
+  font-weight: 700;
 }
 
 .card {
-    min-width: 50%;
-    max-width: 25rem;
-    color: #5c5c5c;
-    margin: 1.5rem;
+  min-width: 50%;
+  max-width: 25rem;
+  color: #5c5c5c;
+  margin: 1.5rem;
 }
 
 .image {
-    max-height: 66%;
-    padding: 1.5rem;
+  max-height: 66%;
+  padding: 1.5rem;
 }
 
 @media screen and (max-width: 786px) {
-    .column-left {
-        display: none;
-    }
+  .column-left {
+    display: none;
+  }
 }
 
 .formContainer {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 0.75rem 2.5rem 0.75rem 2.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0.75rem 2.5rem 0.75rem 2.5rem;
 }
 
 .formContent {
-    padding: 0.75rem 0 0.75rem 0;
+  padding: 0.75rem 0 0.75rem 0;
 }
 
 .formHeader {
-    text-align: center;
-    margin: 0 0 0.5rem 0;
-    padding: 0 0 0.5rem 0;
-
-    h3 {
-        font-size: 20px;
-        line-height: 23.5px;
-        margin: 0;
-        padding: 2.25px 0;
-    }
-
-    p {
-        font-size: 14px;
-        line-height: 19px;
-        font-weight: 400;
-        padding: 0;
-        margin: 0;
-    }
-}
+  text-align: center;
+  margin: 0 0 0.5rem 0;
+  padding: 0 0 0.5rem 0;
 
-.formFields {
+  h3 {
+    font-size: 20px;
+    line-height: 23.5px;
+    margin: 0;
+    padding: 2.25px 0;
+  }
+
+  p {
+    font-size: 14px;
+    line-height: 19px;
+    font-weight: 400;
     padding: 0;
     margin: 0;
+  }
+}
+
+.formFields {
+  padding: 0;
+  margin: 0;
 }
 
 .formInputGroup {
-    label {
-        font-size: 14px;
-        line-height: 19px;
-        margin-bottom: 0.25rem;
-    }
+  label {
+    font-size: 14px;
+    line-height: 19px;
+    margin-bottom: 0.25rem;
+  }
 
-    padding-bottom: 1.5rem;
+  padding-bottom: 1.5rem;
 }
 
 .formInput {
-    border-radius: 0.25rem;
-    padding: 0.75rem;
-    margin: 0;
-    font-size: 14px;
-    line-height: 17px;
-    height: unset;
+  border-radius: 0.25rem;
+  padding: 0.75rem;
+  margin: 0;
+  font-size: 14px;
+  line-height: 17px;
+  height: unset;
 }
 
 .formError {
-    border-radius: 0.25rem;
-    padding: 0.75rem;
-    margin: 0;
-    font-size: 14px;
-    line-height: 17px;
-    height: unset;
-    border: 1px solid #e41d3d !important;
+  border-radius: 0.25rem;
+  padding: 0.75rem;
+  margin: 0;
+  font-size: 14px;
+  line-height: 17px;
+  height: unset;
+  border: 1px solid #e41d3d !important;
 }
 
 .inlineError {
-    width: 100%;
-    display: inline-flex;
-    color: #e41d3d;
-    align-items: center;
-    justify-content: center;
-
-    p {
-        margin: 0 0 0 0.5rem;
-        font-size: 14px;
-        line-height: 19px;
-    }
+  width: 100%;
+  display: inline-flex;
+  color: #e41d3d;
+  align-items: center;
+  justify-content: center;
+
+  p {
+    margin: 0 0 0 0.5rem;
+    font-size: 14px;
+    line-height: 19px;
+  }
 }
 
 .hidden {
-    visibility: hidden;
-    width: 100%;
-    display: inline-flex;
-    color: #e41d3d;
-    align-items: center;
-    justify-content: center;
-
-    p {
-        margin: 0 0 0 0.5rem;
-        font-size: 14px;
-        line-height: 19px;
-    }
+  visibility: hidden;
+  width: 100%;
+  display: inline-flex;
+  color: #e41d3d;
+  align-items: center;
+  justify-content: center;
+
+  p {
+    margin: 0 0 0 0.5rem;
+    font-size: 14px;
+    line-height: 19px;
+  }
 }
diff --git a/query-connector/src/styles/_variables.scss b/query-connector/src/styles/_variables.scss
index a33166aef..f16d4454e 100644
--- a/query-connector/src/styles/_variables.scss
+++ b/query-connector/src/styles/_variables.scss
@@ -1,9 +1,20 @@
+@use "uswds-core" as *;
+
 // taken as values from Figma
 $query-connector-max-width: 45rem;
 $query-connector-wide-max-width: 90rem;
 $query-connector-content-margins: 13.75rem;
 
-$margin-within-group: 0.75rem;
-$margin-between-group: 2.5rem;
+// Pulled from the Design System Figma
+// https://www.figma.com/design/9Aa7G6xMt06JZUrSAxfiZv/CDC%2FSkylight-Design-System?node-id=1177-2479&node-type=rounded_rectangle&m=dev
+$text-base-lightest: #f0f0f0;
+$primary-primary: #005ea2;
+$primary-darker: #162e51;
 
+$gray-cool-20: #c6cace;
+$base-lighter: #dfe1e2;
 $background-hover-color: #d9e8f680;
+
+$serif-font: family("heading");
+$sans-serif-font: "Public Sans Web", family("body");
+$mono-font: "Consolas", family("mono");
diff --git a/query-connector/src/styles/custom-styles.scss b/query-connector/src/styles/custom-styles.scss
index b2b05a5a6..2cdeac602 100644
--- a/query-connector/src/styles/custom-styles.scss
+++ b/query-connector/src/styles/custom-styles.scss
@@ -1,170 +1,150 @@
 @use "uswds-core" as *;
 @use "_variables" as *;
 
-.section__line {
-  border-top: 1px solid #99deea;
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
+html {
+  scroll-behavior: auto;
 }
 
-.section__line_gray {
-  border-top: 1px solid #dfe1e2;
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
+body {
+  font-family: $sans-serif-font;
+  line-height: 1.4;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background-color: rgba(247, 249, 250, 1);
 }
 
-.card__line {
-  border-top: 8px solid #edeff0;
+header,
+footer {
+  padding: 0 2rem;
+  margin: 0;
 }
 
-.maxw7 {
-  max-width: 70%;
+h1 {
+  font-family: $serif-font;
+}
+
+.main-body {
+  background-color: rgba(247, 249, 250, 1);
+  flex: auto; // Sizes main-body to fill space between header and footer
 }
 
 .page-title {
-  margin: $margin-within-group 0rem;
+  margin-bottom: 0.5rem;
   font-weight: 700;
-  font-size: 2.66rem;
+  font-size: 2rem;
 }
 
 .page-explainer {
-  margin: $margin-within-group 0rem $margin-between-group 0rem;
-  font-family: family("sans");
-  font-size: 1.375rem;
-  font-style: normal;
+  margin: 0.5rem 0 1rem 0;
   font-weight: 300;
+  font-size: 1.125rem;
   line-height: 150%;
 }
 
-.data-title {
-  flex: 0 1 auto;
-  width: 190px;
-  font-weight: bold;
+// Utility classes
+// Numbers correspond to the USWDS spacing classes
+// https://designsystem.digital.gov/utilities/margin-and-padding/
+.margin-top-0-important {
+  margin-top: 0 !important;
 }
 
-.accordion-rr {
-  border: #111111 1px solid;
-  border-radius: 0.25rem;
-  overflow: hidden;
-  margin-top: 1rem;
-  padding-bottom: 0.5rem;
-
-  .usa-accordion__button {
-    &:hover {
-      background-color: #f0f0f0;
-    }
-
-    position: relative;
-    background: white;
-    padding: 12px;
-    font-weight: normal;
-
-    &[aria-expanded="true"] {
-      border-bottom: #111111 1px solid;
-    }
-  }
-
-  .usa-accordion__content {
-    padding: 0;
-  }
+.margin-bottom-0-important {
+  margin-bottom: 0 !important;
 }
 
-.usa-accordion__content {
-  margin-top: -80px;
+.margin-x-0-important {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
 }
 
-.minimize-container {
-  position: absolute;
-  right: 12px;
+.margin-bottom-05-important {
+  margin-bottom: 0.25rem !important;
 }
 
-.list-style-none {
-  list-style: none;
+.margin-bottom-3-important {
+  margin-bottom: 1.5rem !important;
 }
 
-.ecrTable {
-  table-layout: fixed;
-  margin-bottom: 0;
-  width: 100%;
+.margin-left-1-important {
+  margin-left: 0.5rem !important;
+}
 
-  td:first-child,
-  th:first-child {
-    padding-left: 24px;
-  }
+.margin-0-important {
+  margin: 0 !important;
+}
 
-  td:last-child,
-  th:last-child {
-    padding-right: 24px;
-  }
+.padding-0-important {
+  padding: 0 !important;
+}
 
-  td {
-    padding-top: 14px;
-    padding-bottom: 14px;
-  }
+.text-base-lightest-important {
+  color: $text-base-lightest !important;
+}
 
-  thead th {
-    border-bottom-color: #a9aeb1;
-  }
+.font-weight-normal-important {
+  font-weight: 400 !important;
+}
 
-  tr td {
-    border-bottom: none;
-  }
+.maxw7 {
+  max-width: 70%;
 }
 
-.usa-summary-box__body:not(:first-child) .summary-box-key-information {
-  margin-top: 20px;
+.lh-18 {
+  line-height: 18px;
 }
 
-.table-caption-margin {
-  caption {
-    margin-bottom: 8px;
-  }
+.unchanged-color-on-visit:visited {
+  color: $primary-primary;
 }
 
-.usa-sidenav__item a:not(.usa-sidenav__sublist a) {
-  font-weight: bold;
+.content-hidden {
+  visibility: hidden;
 }
 
-.sticky-nav {
-  position: sticky;
-  top: 0;
+.width-fit-content {
+  width: fit-content;
 }
 
-.ecr-content h2:first-of-type {
-  margin-top: 0;
-  padding-top: 0;
+.section__line_gray {
+  border-top: 1px solid $base-lighter;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 
-.lh-18 {
-  line-height: 18px;
+.gradient-blue-background {
+  background: linear-gradient(
+    109.54deg,
+    rgba(173, 207, 220, 0.025) 8.02%,
+    rgba(46, 98, 118, 0.5) 117.53%
+  );
+
+  padding: 0.5rem;
+  /* Optional: some padding to make the background more noticeable */
+  justify-content: left;
+  display: flex;
+
+  .container {
+    display: flex;
+    margin: 0 auto; // Centers the container itself if needed
+    max-width: $query-connector-max-width;
+    column-gap: 2rem;
+  }
 }
 
-ul.usa-sidenav
-  > li.usa-sidenav__item
-  > ul.usa-sidenav__sublist
-  > li.usa-sidenav__item
-  > a {
-  font-weight: bold;
+.blue-background-container {
+  width: 100%;
+  background-color: #e7f2f5;
+  padding: 2rem 0;
 }
 
-ul.usa-sidenav
-  > li.usa-sidenav__item
-  > ul.usa-sidenav__sublist
-  > li.usa-sidenav__item
-  > a.usa-current {
-  &::after {
-    background-color: rgb(0, 94, 162);
-    content: "";
-    display: block;
-    position: absolute;
-    bottom: 0.25rem;
-    top: 0.25rem;
-    width: 0.25rem;
-    left: 0rem;
-    border-radius: 99rem;
-  }
+.blue-background-container .text-holder {
+  max-width: $query-connector-max-width;
+  margin: 0 auto;
+  text-align: left;
 }
 
+// Context classes
 .clinical_info_container table {
   @include usa-table;
   @include usa-table--borderless;
@@ -179,71 +159,45 @@ ul.usa-sidenav
   min-width: 120px;
 }
 
-body {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  background-color: rgba(247, 249, 250, 1);
-}
-
-.main-body {
-  display: grid;
-  grid-template-columns: 1fr; // Defines a single column
-  justify-content: center; // Centers the column in the container
-  background-color: rgba(247, 249, 250, 1);
-  flex: auto; // Sizes main-body to fill space between header and footer
-}
-
 .home {
   display: grid;
   grid-template-columns: 1fr; // Defines a single column
   justify-content: center; // Centers the column in the container
   margin: 0 auto; // Centers the container itself if needed
   row-gap: 0.1em; // Adjusts the gap between rows/items
-  max-width: 640px;
-  padding: 1em;
-}
-
-.usa-footer {
-  margin-top: auto;
-  background-color: green !important;
-}
-
-.next-button {
-  max-width: 10em;
-}
-
-.usa-label {
-  margin-top: 1.5rem;
-}
-
-.patient-search-button {
-  margin-top: 2rem;
-  margin-bottom: 4rem;
-  max-width: 11em;
+  max-width: $query-connector-max-width;
 }
 
-.text-base-lightest {
-  color: #f0f0f0 !important;
+.data-title {
+  flex: 0 1 auto;
+  width: 190px;
+  font-weight: bold;
 }
 
-.usa-table--borderless {
-  border: 1px solid black;
+.test-query-filler {
+  background: #faf3d1;
+  border: 1px solid #fee685;
+  border-radius: 4px;
 
-  thead tr th {
-    background-color: #f0f0f0;
+  .usa-label {
+    margin-top: 0;
   }
+}
 
-  width: 100%;
+.query-page-wrapper {
+  display: flex;
+  align-items: flex-start;
+  gap: 20px;
 }
 
-.header-footer-content {
-  max-width: 100% !important;
+.sticky-nav {
+  position: sticky;
+  top: 0;
 }
 
-.usa-logo {
-  margin-top: 2rem;
-  margin-bottom: 2rem;
+.ecr-content h2:first-of-type {
+  margin-top: 0;
+  padding-top: 0;
 }
 
 .overlay {
@@ -269,10 +223,6 @@ body {
   animation: spin 2s linear infinite;
 }
 
-.content-hidden {
-  visibility: hidden;
-}
-
 @keyframes spin {
   0% {
     transform: rotate(0deg);
@@ -283,44 +233,107 @@ body {
   }
 }
 
-html {
-  scroll-behavior: auto;
+.back-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
 }
 
-.gradient-blue-background {
-  background: linear-gradient(
-    109.54deg,
-    rgba(173, 207, 220, 0.025) 8.02%,
-    rgba(46, 98, 118, 0.5) 117.53%
-  );
+.next-button {
+  max-width: 10em;
+}
 
-  padding: 0.5rem;
-  /* Optional: some padding to make the background more noticeable */
-  justify-content: left;
+/* Styles for the customize page */
+.usa-accordion {
+  border-radius: 4px;
+  padding: 0px;
+}
+
+.button-container {
   display: flex;
+  justify-content: flex-start;
+  gap: 10px;
+  margin-top: 20px;
+  padding-bottom: 20px;
+}
 
-  .container {
-    display: flex;
+hr.custom-hr {
+  width: 100%;
+  height: 0px;
+  background-color: #ddd;
+  margin-top: -6px;
+  margin-bottom: 0;
+  border: none;
+  border-top: 1px solid #71767a;
+}
 
-    margin: 0 auto; // Centers the container itself if needed
-    max-width: 640px;
+.resultsViewSideNav .usa-sidenav,
+.resultsViewSideNav .usa-sidenav__item {
+  border: none !important;
+}
+
+.tableRowWithHover:hover td {
+  background-color: $background-hover-color;
+}
+
+.tableRowWithHover_clickable,
+.tableRowWithHover_clickable td {
+  cursor: pointer;
+}
+
+// Overrides
+
+.usa-step-indicator__segment-label {
+  padding-right: 0;
+}
+
+.usa-sidenav__item a:not(.usa-sidenav__sublist a) {
+  font-weight: bold;
+}
+
+ul.usa-sidenav
+  > li.usa-sidenav__item
+  > ul.usa-sidenav__sublist
+  > li.usa-sidenav__item
+  > a {
+  font-weight: bold;
+}
+
+ul.usa-sidenav
+  > li.usa-sidenav__item
+  > ul.usa-sidenav__sublist
+  > li.usa-sidenav__item
+  > a.usa-current {
+  &::after {
+    background-color: rgb(0, 94, 162);
+    content: "";
+    display: block;
+    position: absolute;
+    bottom: 0.25rem;
+    top: 0.25rem;
+    width: 0.25rem;
+    left: 0rem;
+    border-radius: 99rem;
   }
 }
 
-.test-query-filler {
-  background: #faf3d1;
-  border: 1px solid #fee685;
-  border-radius: 4px;
+.usa-label {
+  margin-top: 1.5rem;
+}
 
-  .usa-label {
-    margin-top: 0;
+.usa-table--borderless {
+  border: 1px solid black;
+
+  thead tr th {
+    background-color: #f0f0f0;
   }
+
+  width: 100%;
 }
 
-.query-page-wrapper {
-  display: flex;
-  align-items: flex-start;
-  gap: 20px;
+.usa-logo {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
 }
 
 .usa-button--outline:hover,
@@ -333,6 +346,7 @@ html {
   width: 100%;
   box-sizing: border-box;
   padding-left: 1rem;
+  height: 2.5rem;
 }
 
 .custom-alert .usa-alert__text {
@@ -355,18 +369,6 @@ html {
   display: inline-block;
 }
 
-.blue-background-container {
-  width: 100%;
-  background-color: #e7f2f5;
-  padding: 2rem 0;
-}
-
-.blue-background-container .text-holder {
-  max-width: 640px;
-  margin: 0 auto;
-  text-align: left;
-}
-
 .usa-modal--lg {
   background-color: #edeff0;
   padding-top: 0;
@@ -394,40 +396,6 @@ html {
   margin-bottom: 1rem;
 }
 
-/* Styles for the customize page */
-.usa-accordion {
-  border-radius: 4px;
-  padding: 0px;
-}
-
-.button-container {
-  display: flex;
-  justify-content: flex-start;
-  gap: 10px;
-  margin-top: 20px;
-  padding-bottom: 20px;
-}
-
-.back-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.unchanged-color-on-visit:visited {
-  color: #005ea2;
-}
-
-hr.custom-hr {
-  width: 100%;
-  height: 0px;
-  background-color: #ddd;
-  margin-top: -6px;
-  margin-bottom: 0;
-  border: none;
-  border-top: 1px solid #71767a;
-}
-
 .Toastify__toast-container {
   width: calc($query-connector-wide-max-width * 0.4) !important;
   padding-top: 0 !important;
@@ -467,48 +435,3 @@ hr.custom-hr {
 .customize-accordion .usa-accordion__content {
   padding: 0rem;
 }
-
-.resultsViewSideNav .usa-sidenav,
-.resultsViewSideNav .usa-sidenav__item {
-  border: none !important;
-}
-
-.tableRowWithHover:hover td {
-  background-color: $background-hover-color;
-}
-
-.tableRowWithHover_clickable,
-.tableRowWithHover_clickable td {
-  cursor: pointer;
-}
-
-// Overrides - numbers correspond to the USWDS spacing classes
-// https://designsystem.digital.gov/utilities/margin-and-padding/
-.margin-top-0-important {
-  margin-top: 0 !important;
-}
-
-.margin-bottom-0-important {
-  margin-bottom: 0 !important;
-}
-
-.margin-x-0-important {
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-}
-
-.margin-bottom-05-important {
-  margin-bottom: 0.25rem !important;
-}
-
-.margin-bottom-3-important {
-  margin-bottom: 1.5rem !important;
-}
-
-.margin-left-1-important {
-  margin-left: 0.5rem !important;
-}
-
-.padding-0-important {
-  padding: 0 !important;
-}
diff --git a/query-connector/src/styles/layout.scss b/query-connector/src/styles/layout.scss
index 2ed189c31..1b230cba3 100644
--- a/query-connector/src/styles/layout.scss
+++ b/query-connector/src/styles/layout.scss
@@ -5,7 +5,7 @@
   width: 100%;
   margin: auto;
   margin-bottom: 5rem;
-  margin-top: 1.5rem;
+  margin-top: 2rem;
   padding: 0 !important;
 
   &__wide {
diff --git a/query-connector/src/styles/uswds-settings.scss b/query-connector/src/styles/uswds-settings.scss
index c85dfb5da..5fbd27fb7 100644
--- a/query-connector/src/styles/uswds-settings.scss
+++ b/query-connector/src/styles/uswds-settings.scss
@@ -33,6 +33,18 @@ $ASSET_PREFIX: "";
     // Spacing
     // Typography
     $theme-font-path: "../../../../../../dist/fonts",
+    $theme-font-type-cond: false,
+    $theme-font-type-icon: false,
+    $theme-font-type-lang: false,
+    $theme-font-type-mono: "roboto-mono",
+    $theme-font-type-sans: "public-sans",
+    $theme-font-type-serif: "merriweather",
+
+    $theme-font-role-ui: "sans",
+    $theme-font-role-heading: "serif",
+    $theme-font-role-body: "sans",
+    $theme-font-role-code: "mono",
+    $theme-font-role-alt: "serif",
 
     // Utilities
   );