diff --git a/app/app.vue b/app/app.vue
index e519d2da..42e8e3ba 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -5,12 +5,24 @@ import Footer from "~/components/Footer.vue";
 
 <template>
   <Toast position="top-right" />
-  <NuxtLoadingIndicator />
+  <NuxtLoadingIndicator color="var(--p-primary-color)" />
   <MenuHeader />
   <NuxtLayout>
-    <NuxtPage />
+    <main class="page-content">
+      <NuxtPage />
+    </main>
   </NuxtLayout>
   <Footer />
 </template>
 
-<style lang="scss"></style>
+<style>
+.page-content {
+  padding: var(--page-padding-y) var(--page-padding-x);
+}
+
+@media (max-width: 768px) {
+  .page-content {
+    padding: 1rem;
+  }
+}
+</style>
diff --git a/app/assets/css/elements.css b/app/assets/css/elements.css
index d55db757..8082c4dd 100644
--- a/app/assets/css/elements.css
+++ b/app/assets/css/elements.css
@@ -1,12 +1,10 @@
+/* Restore heading/paragraph defaults that Tailwind preflight removes */
 h1 {
     display: block;
     font-size: 2em;
     margin-block-start: 0.67em;
     margin-block-end: 0.67em;
-    margin-inline-start: 0;
-    margin-inline-end: 0;
     font-weight: bold;
-    unicode-bidi: isolate;
 }
 
 h2 {
@@ -14,10 +12,7 @@ h2 {
     font-size: 1.5em;
     margin-block-start: 0.83em;
     margin-block-end: 0.83em;
-    margin-inline-start: 0;
-    margin-inline-end: 0;
     font-weight: bold;
-    unicode-bidi: isolate;
 }
 
 p {
@@ -27,42 +22,31 @@ p {
     margin-block-end: 1em;
 }
 
+/* PrimeVue component overrides */
 .p-card .p-card-title {
-    font-size: 1.5rem;
+    font-size: 1.25rem;
     font-weight: 700;
-    margin-bottom: .5rem;
+    margin-bottom: 0.5rem;
+    letter-spacing: -0.01em;
 }
 
 .p-menubar {
-    margin-bottom: 1rem;
+    margin-bottom: 0;
 }
 
-a {
-    color: -webkit-link;
+/* Non-PrimeVue links */
+a:not(.p-button):not([class*="p-"]) {
+    color: var(--p-primary-color);
     cursor: pointer;
     text-decoration: underline;
 }
 
-button {
-    appearance: auto;
-    text-rendering: auto;
-    color: buttontext;
-    letter-spacing: normal;
-    word-spacing: normal;
-    line-height: normal;
-    text-transform: none;
-    text-indent: 0;
-    text-shadow: none;
+/* Global tooltip constraints prevent overflow on short tooltips */
+.p-tooltip {
+    max-width: none !important;
+}
+
+.p-tooltip-text {
+    width: auto !important;
     display: inline-block;
-    text-align: center;
-    cursor: default;
-    box-sizing: border-box;
-    background-color: buttonface;
-    margin: 0;
-    padding-block: 1px;
-    padding-inline: 6px;
-    border-width: 2px;
-    border-style: outset;
-    border-color: buttonborder;
-    border-image: initial;
 }
diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index a461c505..4ded65d4 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -1 +1,17 @@
-@import "tailwindcss";
\ No newline at end of file
+@import "tailwindcss";
+
+html {
+    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+:root {
+    --page-padding-x: 0.75rem;
+    --page-padding-y: 1.5rem;
+
+    /* PrimeVue runtime tokens — overridden by PrimeVue at hydration; declared here for IDE resolution */
+    --p-primary-color: #ea580c;
+    --p-text-muted-color: #64748b;
+}
diff --git a/app/assets/css/preferences.css b/app/assets/css/preferences.css
index db14e217..5e1eb249 100644
--- a/app/assets/css/preferences.css
+++ b/app/assets/css/preferences.css
@@ -1,16 +1,18 @@
 .settings-field {
     display: flex;
     justify-content: space-between;
+    align-items: flex-start;
+    gap: 1rem;
 }
 
 .settings-description-title {
-    font-weight: bold;
-    padding-bottom: 1em;
+    font-weight: 600;
+    margin-bottom: 0.75rem;
 }
 
 .setting-description-text {
-    font-size: 0.85em;
-    color: gray;
+    font-size: 0.875rem;
+    color: var(--p-text-muted-color);
 }
 
 .settings-control {
@@ -22,15 +24,15 @@
 .preferences-update-btn {
     display: flex;
     justify-content: flex-end;
-    margin-top: 1em;
+    margin-top: 1rem;
 }
 
 .preferences-dialog-header .p-dialog-header {
-    padding-bottom: 0
+    padding-bottom: 0;
 }
 
 .autostart-interval-input {
     min-width: unset;
-    height: 2.5em;
-    width: 8em;
+    height: 2.5rem;
+    width: 8rem;
 }
diff --git a/app/assets/css/table.css b/app/assets/css/table.css
index d736ee8d..f331b7dd 100644
--- a/app/assets/css/table.css
+++ b/app/assets/css/table.css
@@ -1,15 +1,16 @@
 .table-header-row {
     display: flex;
     justify-content: space-between;
+    align-items: center;
     width: 100%;
-    margin-bottom: 1em;
-    margin-top: 2em;
+    margin-bottom: 1rem;
+    gap: 1rem;
 }
 
 .search-bar {
     display: flex;
     width: 50%;
-    justify-content: left;
+    gap: 0.5rem;
 }
 
 .refresh-switch {
@@ -23,6 +24,6 @@
 }
 
 .rounded-table {
-    border-radius: 12px;
+    border-radius: 0.75rem;
     overflow: hidden;
-}
\ No newline at end of file
+}
diff --git a/app/assets/img/hospital_network.jpg b/app/assets/img/hospital_network.jpg
deleted file mode 100644
index f8bcf0c5..00000000
Binary files a/app/assets/img/hospital_network.jpg and /dev/null differ
diff --git a/app/assets/img/hospital_network.webp b/app/assets/img/hospital_network.webp
new file mode 100644
index 00000000..0a36f538
Binary files /dev/null and b/app/assets/img/hospital_network.webp differ
diff --git a/app/assets/img/node_network.png b/app/assets/img/node_network.png
deleted file mode 100644
index 68c0dafe..00000000
Binary files a/app/assets/img/node_network.png and /dev/null differ
diff --git a/app/assets/primevue/flame-preset.ts b/app/assets/primevue/flame-preset.ts
index 9e56281f..6e9d7bed 100644
--- a/app/assets/primevue/flame-preset.ts
+++ b/app/assets/primevue/flame-preset.ts
@@ -37,7 +37,7 @@ export const Flame = definePreset(Lara, {
       light: {
         surface: {
           0: "#ffffff",
-          50: "#fff3ea", // Warm ash background
+          50: "#fff8f2", // Warm parchment background
           100: "{slate.100}",
           200: "{slate.200}", // Borders
           300: "{slate.300}",
@@ -59,19 +59,27 @@ export const Flame = definePreset(Lara, {
         },
       },
       dark: {
+        // Stone palette: warm charcoal undertones vs slate's cold blue-grey
         surface: {
           0: "#ffffff",
-          50: "{slate.50}",
-          100: "{slate.100}",
-          200: "{slate.200}",
-          300: "{slate.300}",
-          400: "{slate.400}",
-          500: "{slate.500}",
-          600: "{slate.600}",
-          700: "{slate.700}",
-          800: "{slate.800}",
-          900: "{slate.900}",
-          950: "{slate.950}",
+          50: "{stone.50}",
+          100: "{stone.100}",
+          200: "{stone.200}",
+          300: "{stone.300}",
+          400: "{stone.400}",
+          500: "{stone.500}",
+          600: "{stone.600}",
+          700: "{stone.700}",
+          800: "{stone.800}",
+          900: "{stone.900}",
+          950: "{stone.950}",
+        },
+        primary: {
+          color: "{orange.400}",
+          contrastColor: "{stone.950}",
+          hoverColor: "{orange.300}",
+          activeColor: "{orange.200}",
+          accentColor: "{orange.600}",
         },
       },
     },
diff --git a/app/components/Footer.vue b/app/components/Footer.vue
index f68c4bfd..52746d0c 100644
--- a/app/components/Footer.vue
+++ b/app/components/Footer.vue
@@ -32,17 +32,16 @@ const pkgVersion = config.public.version;
 
 <style lang="scss" scoped>
 .page-footer {
-  padding: 5px 0 5px 0;
-  margin: 20px auto;
-  color: #aeb2b7;
+  padding: 0.625rem 0;
+  color: var(--p-text-muted-color);
   background: var(--p-menubar-background);
-  border: 1px solid var(--p-menubar-border-color);
+  border-top: 1px solid var(--p-menubar-border-color);
 }
 
 .footer-row {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
-  padding: 2px 10px 2px 10px;
+  padding: 0 var(--page-padding-x);
 }
 
 .copyright {
diff --git a/app/components/TableRowMetadata.vue b/app/components/TableRowMetadata.vue
index 8b5a4e74..7cf1983c 100644
--- a/app/components/TableRowMetadata.vue
+++ b/app/components/TableRowMetadata.vue
@@ -7,7 +7,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <Card style="border: solid">
+  <Card class="metadata-card">
     <template #title>Additional Metadata</template>
     <template #content>
       <p v-for="(value, key) in props.rowMetadata" :key="key">
@@ -19,4 +19,8 @@ const props = defineProps({
   </Card>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.metadata-card {
+  border: 1px solid var(--p-surface-200);
+}
+</style>
diff --git a/app/components/analysis/AnalysesTable.vue b/app/components/analysis/AnalysesTable.vue
index 6ddf2396..c7cc02f7 100644
--- a/app/components/analysis/AnalysesTable.vue
+++ b/app/components/analysis/AnalysesTable.vue
@@ -7,7 +7,7 @@ import { getAnalysisNodes } from "~/composables/useAPIFetch";
 import { formatDataRow } from "~/utils/format-data-row";
 import {
   showCacheWarningToast,
-  showConnectionErrorToast
+  showConnectionErrorToast,
 } from "~/composables/connectionErrorToast";
 import { FilterMatchMode } from "@primevue/core/api";
 import SearchBar from "~/components/table/SearchBar.vue";
@@ -15,7 +15,7 @@ import AnalysisControlButtons from "./AnalysisControlButtons.vue";
 import {
   getApprovalStatusSeverity,
   getBuildStatusSeverity,
-  getExecutionStatusSeverity
+  getExecutionStatusSeverity,
 } from "~/utils/status-tag-severity";
 import {
   type AnalysisNode,
@@ -24,7 +24,7 @@ import {
   type PodProgressResponse,
   PodStatus,
   type Project,
-  type Route
+  type Route,
 } from "~/services/Api";
 import { ApprovalStatus } from "~/types/node";
 import ContainerCounter from "~/components/analysis/ContainerCounter.vue";
@@ -40,12 +40,12 @@ const { nodeType, requireDataStore: datastoreRequired } =
   useDatastoreRequirement();
 
 const datastoreBadgeSeverity = computed(() =>
-  datastoreRequired.value ? "danger" : "secondary"
+  datastoreRequired.value ? "danger" : "secondary",
 );
 const datastoreBadgeTooltip = computed(() =>
   datastoreRequired.value
     ? "Data store missing!"
-    : "Data store missing, but not required"
+    : "Data store missing, but not required",
 );
 
 const analysesMap = ref<Map<string, ModifiedAnalysisNode>>(new Map());
@@ -61,11 +61,11 @@ const filters = ref();
 // Cache
 const analysisCache = useState<AnalysisNode[] | undefined>(
   "analysisCache",
-  () => undefined
+  () => undefined,
 );
 const projectCache = useState<Project[] | undefined>(
   "projectCache",
-  () => undefined
+  () => undefined,
 );
 const podOrcUnreacheable = ref(false);
 
@@ -93,8 +93,8 @@ async function getProjects() {
       method: "GET",
       query: {
         sort: "-updated_at",
-        fields: "id,name"
-      }
+        fields: "id,name",
+      },
     })
     .catch(() => undefined)) as Project[];
 }
@@ -102,7 +102,7 @@ async function getProjects() {
 async function getKongRoutes() {
   const kongRoutesResp = (await useNuxtApp()
     .$hubApi("/kong/project", {
-      method: "GET"
+      method: "GET",
     })
     .catch(() => undefined)) as ListRoutes;
   if (kongRoutesResp && kongRoutesResp.data) {
@@ -144,7 +144,7 @@ async function getExecutionStatusesFromPodOrc(): Promise<
 > {
   const podOrcResponse = (await useNuxtApp()
     .$hubApi("/po/status", {
-      method: "GET"
+      method: "GET",
     })
     .catch(() => {
       if (!podOrcUnreacheable.value) {
@@ -154,7 +154,7 @@ async function getExecutionStatusesFromPodOrc(): Promise<
           summary: "Missing PO Status Update",
           detail:
             "Unable to retrieve pod statuses from the PO, relying on information from the Hub",
-          life: 3000
+          life: 3000,
         });
       }
       return undefined;
@@ -194,13 +194,13 @@ function determineProgressBarColor(progress: number) {
   }
 
   return {
-    "--p-progressbar-value-background": color
+    "--p-progressbar-value-background": color,
   };
 }
 
 function parseAnalysis(
   analysisEntry: ModifiedAnalysisNode,
-  executionStatuses: PodProgressResponse | undefined
+  executionStatuses: PodProgressResponse | undefined,
 ): ModifiedAnalysisNode {
   const projId = analysisEntry.analysis?.project_id;
   const analysisId = analysisEntry.analysis_id;
@@ -210,7 +210,7 @@ function parseAnalysis(
   }
   const acceptableHubStatuses: Array<PodStatus | null | undefined> = [
     PodStatus.Failed,
-    PodStatus.Executed
+    PodStatus.Executed,
   ];
   if (executionStatuses && analysisId in executionStatuses) {
     const podStatus = executionStatuses[analysisId]!;
@@ -229,7 +229,7 @@ async function compileAnalysisTable(
   respStatus: string,
   respData: AnalysisNode[] | undefined,
   silent = false,
-  merge = false
+  merge = false,
 ) {
   if (!silent) tableLoading.value = true;
   await parseProjects();
@@ -252,13 +252,13 @@ async function compileAnalysisTable(
   const formattedAnalyses = formatDataRow(
     analysisData,
     ["created_at", "updated_at"],
-    expandRowEntries
+    expandRowEntries,
   ) as ModifiedAnalysisNode[];
   if (formattedAnalyses && projMap.size > 0) {
     formattedAnalyses.forEach((analysisEntry: ModifiedAnalysisNode) => {
       parsedAnalyses.set(
         analysisEntry.analysis_id,
-        parseAnalysis(analysisEntry, currentExecutionStatuses)
+        parseAnalysis(analysisEntry, currentExecutionStatuses),
       );
     });
     if (merge) {
@@ -319,11 +319,11 @@ async function getNextPage() {
       query: {
         page: {
           offset: currentOffset,
-          limit: queryLimit
+          limit: queryLimit,
         },
         include: "analysis,node",
-        sort: "-updated_at"
-      }
+        sort: "-updated_at",
+      },
     })
     .catch(() => undefined)) as AnalysisNode[];
   if (nextSetResults.length > 0) {
@@ -344,7 +344,7 @@ const defaultFilters = {
   global: { value: undefined, matchMode: FilterMatchMode.CONTAINS },
   approval_status: { value: undefined, matchMode: FilterMatchMode.EQUALS },
   "analysis.build_status": { value: undefined, matchMode: FilterMatchMode.IN },
-  execution_status: { value: undefined, matchMode: FilterMatchMode.IN }
+  execution_status: { value: undefined, matchMode: FilterMatchMode.IN },
 };
 filters.value = defaultFilters;
 
@@ -352,7 +352,7 @@ function resetFilters() {
   const clearedFilters = {};
   for (const filterKey in defaultFilters) {
     clearedFilters[filterKey] = {
-      ...defaultFilters[filterKey]
+      ...defaultFilters[filterKey],
     };
     clearedFilters[filterKey].value = undefined;
   }
@@ -365,7 +365,7 @@ const updateFilters = (filterText: string) => {
 
 function updateAnalysisRun(
   analysisId: string,
-  newStatusData: AnalysisStatus | undefined
+  newStatusData: AnalysisStatus | undefined,
 ) {
   if (analysesMap.value.has(analysisId)) {
     const analysisToUpdate = analysesMap.value.get(analysisId)!; // Tell typescript we are sure there is a value
@@ -387,7 +387,7 @@ function updateExecutionStatusFilter(filterText: string) {
     if (currentExecutionStatusFilters.includes(filterText)) {
       // If filter already there, then remove it
       const filteredStatuses = currentExecutionStatusFilters.filter(
-        (item) => item !== filterText
+        (item) => item !== filterText,
       );
       if (filteredStatuses.length == 0) {
         // If empty array after filtering then set to null
@@ -410,7 +410,7 @@ const showDataStoreNavToast = () => {
       "Unable to find an associated data store, click the button below " +
       "to create a data store for the project of this analysis",
     group: "datastoreToastLink",
-    life: 10000
+    life: 10000,
   });
 };
 
@@ -457,23 +457,35 @@ const onCloseNavToast = () => {
       <template #content>
         <div class="analysis-description-box">
           <div class="analysis-description">
-            <Message
-              class="control-warning-message"
-              icon="pi pi-exclamation-triangle"
-              severity="warn"
-            >
-              Controls may be disabled!
-            </Message>
-            <p>
-              If the image for the analysis is not yet
-              <Tag
-                :severity="'success'"
-                :value="PodStatus.Running"
-                style="margin-left: 0.5em; margin-right: 0.5em"
-              />
-              (see Build Status) or if a data store does not exist for the
-              associated project, then the analysis cannot be started
-            </p>
+            <span style="margin-bottom: 1rem"
+              >This table provides an overview of the analyses that are
+              registered to run on this node. Approved users can <b>start</b>,
+              <b>stop</b>, or <b>delete</b> analyses, as well as view the logs
+              for both the analysis and associated nginx containers.
+            </span>
+            <span> An analysis can start only if: </span>
+            <div class="analysis-start-criteria">
+              <div class="start-criteria">
+                <b>Approval Status</b>
+                <Tag :severity="'success'" :value="'approved'" />
+              </div>
+              <div class="start-criteria">
+                <b>Build Status</b>
+                <Tag :severity="'success'" :value="PodStatus.Executed" />
+              </div>
+              <div class="start-criteria">
+                <b>Distribution Status</b>
+                <Badge class="w-8 h-8 rounded-full" severity="success">
+                  <i class="pi pi-check"></i>
+                </Badge>
+              </div>
+              <div class="start-criteria">
+                <b>Data Store</b>
+                <Badge class="w-8 h-8 rounded-full" severity="success">
+                  <i class="pi pi-check"></i>
+                </Badge>
+              </div>
+            </div>
           </div>
           <div class="analysis-container-counter">
             <ContainerCounter
@@ -644,15 +656,15 @@ const onCloseNavToast = () => {
                 class="distribution-badge"
               >
                 <Badge class="w-8 h-8 rounded-full" severity="success"
-                ><i v-tooltip.top="'Image available'" class="pi pi-check"></i
+                  ><i v-tooltip.top="'Image available'" class="pi pi-check"></i
                 ></Badge>
               </div>
               <div v-else class="distribution-badge">
                 <Badge class="w-8 h-8 rounded-full" :severity="'danger'"
-                ><i
-                  v-tooltip.top="'Image unavailable'"
-                  class="pi pi-times"
-                ></i
+                  ><i
+                    v-tooltip.top="'Image unavailable'"
+                    class="pi pi-times"
+                  ></i
                 ></Badge>
               </div>
             </template>
@@ -734,17 +746,17 @@ const onCloseNavToast = () => {
             <template #body="{ data }">
               <div v-if="data.datastore" class="datastore-badge">
                 <Badge class="w-8 h-8 rounded-full" severity="success"
-                ><i v-tooltip.top="'Data store found'" class="pi pi-check"></i
+                  ><i v-tooltip.top="'Data store found'" class="pi pi-check"></i
                 ></Badge>
               </div>
               <div v-else class="datastore-badge">
                 <Badge
                   class="w-8 h-8 rounded-full"
                   :severity="datastoreBadgeSeverity"
-                ><i
-                  v-tooltip.top="datastoreBadgeTooltip"
-                  class="pi pi-times"
-                ></i
+                  ><i
+                    v-tooltip.top="datastoreBadgeTooltip"
+                    class="pi pi-times"
+                  ></i
                 ></Badge>
               </div>
             </template>
@@ -847,48 +859,65 @@ const onCloseNavToast = () => {
 </template>
 
 <style>
-.control-warning-message {
-  align-items: center;
-  display: inline-flex;
-  justify-content: center;
-  border: 1px solid #eab308;
-}
-
-.p-tooltip {
-  max-width: none !important;
-  white-space: nowrap !important;
-}
-
-.p-tooltip-text {
-  width: auto !important;
-  display: inline-block;
-}
-
 .nav-btn {
-  margin-top: 10px;
+  margin-top: 0.625rem;
 }
 
 .datastore-badge {
-  margin-left: 2em;
+  display: flex;
+  justify-content: center;
 }
 
 .distribution-badge {
-  margin-left: 4rem;
+  display: flex;
+  justify-content: center;
 }
 
 .analysis-description-box {
   display: flex;
+  flex-wrap: wrap;
   width: 100%;
+  gap: 1rem;
+  margin-bottom: 2rem;
 }
 
 .analysis-description {
-  flex: 2;
+  flex: 2 1 300px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+}
+
+.analysis-description ul {
+  list-style: disc;
+  padding-left: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
 }
 
 .analysis-container-counter {
   flex: 1;
   display: flex;
-  justify-content: right;
+  justify-content: flex-end;
   align-items: flex-end;
 }
+
+.analysisTable thead th {
+  padding-inline: 0.5rem;
+}
+
+.analysis-start-criteria {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin-top: 1rem;
+}
+
+.start-criteria {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem;
+}
 </style>
diff --git a/app/components/analysis/ContainerCounter.vue b/app/components/analysis/ContainerCounter.vue
index 428e58dc..20c00ad5 100644
--- a/app/components/analysis/ContainerCounter.vue
+++ b/app/components/analysis/ContainerCounter.vue
@@ -39,7 +39,7 @@ function onApplyExecutionStatusFilter(executionStatus: PodStatus) {
   <div class="counter-div">
     <Card class="counter-card">
       <template #title>
-        <span style="font-size: 1.2rem"> Analysis Overview </span>
+        <span class="counter-card-title">Analysis Overview</span>
       </template>
       <template #content>
         <div class="counter-badge-all">
@@ -145,11 +145,14 @@ function onApplyExecutionStatusFilter(executionStatus: PodStatus) {
 }
 
 .counter-card {
-  width: 30em;
+  background: var(--p-menubar-background);
+  min-width: 24rem;
 }
 
-.counter-card {
-  background: var(--p-menubar-background);
+.counter-card-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
 }
 
 .counter-badge-all {
@@ -176,7 +179,7 @@ function onApplyExecutionStatusFilter(executionStatus: PodStatus) {
 }
 
 .counter-id-txt {
-  font-size: 0.9em;
-  padding-top: 0.3em;
+  font-size: 0.8125rem;
+  padding-top: 0.375rem;
 }
 </style>
diff --git a/app/components/analysis/logs/AnalysisLogCardContent.vue b/app/components/analysis/logs/AnalysisLogCardContent.vue
index 3c0d30e1..c411edbb 100644
--- a/app/components/analysis/logs/AnalysisLogCardContent.vue
+++ b/app/components/analysis/logs/AnalysisLogCardContent.vue
@@ -297,37 +297,31 @@ async function copyToClipboard(isAnalysis: boolean) {
 <style lang="scss">
 .analysis-logs {
   display: flex;
-  justify-content: space-between;
+  gap: 1rem;
 }
 
+/* Always-dark terminal card — intentional regardless of app theme */
 .log-card {
-  border: 1px solid grey;
-  height: 50%;
-  background: var(--p-slate-800);
+  flex: 1;
+  min-width: 0;
+  border: 1px solid var(--p-surface-300);
+  background: #1e293b; /* slate-800 */
   color: #f1f5f9;
-}
-
-.nginx-log-card {
-  margin-right: 1em;
-  width: 50%;
-}
-
-.analysis-log-card {
-  width: 50%;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
 }
 
 .log-scroll-panel {
-  font-family:
-    Roboto Mono Regular,
-    monospace;
-  font-size: 0.8em;
+  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Monaco,
+    "Courier New", monospace;
+  font-size: 0.8125rem;
   height: 30em;
 }
 
 .flame-dark .log-scroll-panel {
-  background: #000;
+  background: #0f172a; /* slate-900 */
   color: #e2e8f0;
-  border-top: white solid 1px;
+  border-top: 1px solid #334155;
 }
 
 .log-header-row {
@@ -335,8 +329,8 @@ async function copyToClipboard(isAnalysis: boolean) {
   align-items: center;
   background: var(--p-highlight-background);
   color: var(--p-highlight-color);
-  padding: 0.5em;
-  border-radius: 6px;
+  padding: 0.5rem;
+  border-radius: 0.375rem;
 }
 
 .log-btns {
@@ -345,14 +339,15 @@ async function copyToClipboard(isAnalysis: boolean) {
 }
 
 .log-btn {
-  padding-left: 0.2em;
+  padding-left: 0.25rem;
 }
 
 .analysis-logs .p-card-body {
   padding: 0;
 }
 
-.p-card-title {
+/* Scoped to log cards only — prevents bleeding to other card titles */
+.analysis-logs .p-card-title {
   margin-bottom: 0 !important;
 }
 
@@ -360,11 +355,6 @@ async function copyToClipboard(isAnalysis: boolean) {
   gap: 0;
 }
 
-.log-card {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
 .copy-toast {
   padding: 0;
   width: auto;
@@ -418,6 +408,6 @@ async function copyToClipboard(isAnalysis: boolean) {
   text-overflow: ellipsis;
   color: #fca5a5;
   border-left: 2px solid #f87171;
-  padding-left: 0.5em;
+  padding-left: 0.5rem;
 }
 </style>
diff --git a/app/components/data-stores/DataStoreList.vue b/app/components/data-stores/DataStoreList.vue
index b4b78e83..0175699d 100644
--- a/app/components/data-stores/DataStoreList.vue
+++ b/app/components/data-stores/DataStoreList.vue
@@ -41,4 +41,3 @@ function onDeleteDataStore(dsName: string) {
   </div>
 </template>
 
-<style lang="scss"></style>
diff --git a/app/components/data-stores/DetailedDataStoreTable.vue b/app/components/data-stores/DetailedDataStoreTable.vue
index 31177e18..c8d5189a 100644
--- a/app/components/data-stores/DetailedDataStoreTable.vue
+++ b/app/components/data-stores/DetailedDataStoreTable.vue
@@ -195,6 +195,7 @@ const updateFilters = (filterText: string) => {
       filterDisplay="menu"
       paginator
       tableStyle="min-width: 50rem"
+      class="rounded-table"
     >
       <template #empty> No data stores found.</template>
       <Column
@@ -294,16 +295,14 @@ const updateFilters = (filterText: string) => {
           </span>
         </template>
         <template #body="slotProps">
-          <ConfirmPopup group="dataStoreDelete" style="width: 20em">
+          <ConfirmPopup group="dataStoreDelete" class="ds-confirm-popup">
             <template #message="slotProps">
-              <div
-                class="flex flex-col items-center w-full gap-4 border-b border-surface-200 dark:border-surface-700 p-4 mb-4 pb-0"
-              >
+              <div class="ds-confirm-message">
                 <i
                   :class="slotProps.message.icon"
                   class="text-6xl text-primary-500"
                 ></i>
-                <p style="padding: 10px">
+                <p class="ds-confirm-text">
                   {{ slotProps.message.message }}
                 </p>
               </div>
@@ -325,10 +324,24 @@ const updateFilters = (filterText: string) => {
 </template>
 
 <style lang="scss" scoped>
-.expand-btns {
+:deep(.ds-confirm-popup) {
+  width: 20rem;
+}
+
+.ds-confirm-message {
   display: flex;
-  justify-content: flex-end;
-  margin-left: auto;
-  margin-right: 0;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  gap: 1rem;
+  border-bottom: 1px solid var(--p-surface-200);
+  padding: 1rem 1rem 0;
+  margin-bottom: 1rem;
+}
+
+.ds-confirm-text {
+  padding: 0 0.625rem;
+  margin: 0;
+  text-align: center;
 }
 </style>
diff --git a/app/components/events/TagFilterSidePanel.vue b/app/components/events/TagFilterSidePanel.vue
index 3440d78e..bb08dd43 100644
--- a/app/components/events/TagFilterSidePanel.vue
+++ b/app/components/events/TagFilterSidePanel.vue
@@ -122,7 +122,7 @@ function clearFilters() {
 }
 
 .event-viewer-filter-container-filter-item-label {
-  margin-left: 0.5em;
+  margin-left: 0.5rem;
 }
 
 .event-viewer-filter-container-filter-category {
diff --git a/app/components/header/MenuHeader.vue b/app/components/header/MenuHeader.vue
index 507ccef3..7dae7992 100644
--- a/app/components/header/MenuHeader.vue
+++ b/app/components/header/MenuHeader.vue
@@ -49,7 +49,6 @@ const items = ref([
 <template>
   <div class="menuBar">
     <Menubar :model="items" class="menu-bar-header">
-      <template #start></template>
       <template #item="{ item, props, hasSubmenu }">
         <div v-ripple class="p-ripple border-round menu-bar-item">
           <router-link
@@ -102,6 +101,28 @@ const items = ref([
 </template>
 
 <style lang="scss" scoped>
+.brand-mark {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding-right: 1rem;
+  margin-right: 0.25rem;
+  border-right: 1px solid var(--p-menubar-border-color);
+  text-decoration: none;
+}
+
+.brand-icon {
+  color: var(--p-primary-color);
+  font-size: 1.25rem;
+}
+
+.brand-name {
+  font-weight: 800;
+  font-size: 1rem;
+  letter-spacing: 0.08em;
+  color: var(--p-primary-color);
+}
+
 .menu-item-label {
   margin-left: 0.1rem;
 }
@@ -121,6 +142,6 @@ const items = ref([
 }
 
 .avatar-button {
-  margin-left: 1.5em;
+  margin-left: 1.5rem;
 }
 </style>
diff --git a/app/components/landing/LandingButtons.vue b/app/components/landing/LandingButtons.vue
index d07f3221..51e8426c 100644
--- a/app/components/landing/LandingButtons.vue
+++ b/app/components/landing/LandingButtons.vue
@@ -23,7 +23,7 @@ const { data } = useAuth();
       </div>
     </div>
     <div v-else class="get-started-container">
-      <h2 style="text-align: center">What would you like to do today?</h2>
+      <h2 class="get-started-heading">What would you like to do today?</h2>
       <div class="get-started-btns">
         <a class="get-started-btn" href="/projects">
           <i class="pi pi-objects-column get-started-btn-icon" />
@@ -54,46 +54,69 @@ const { data } = useAuth();
 }
 
 .get-started-container {
-  margin-top: 5em;
+  margin-top: 3rem;
+}
+
+.get-started-heading {
+  text-align: center;
+  margin-block-start: 0;
+  margin-bottom: 1rem;
 }
 
 .get-started-btns {
-  display: flex;
-  flex-direction: row;
-  justify-content: safe center;
-  margin: auto;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
 }
 
-.get-started-btn {
-  width: 40%;
-  border: solid 2px rgba(gray, 0.2);
-  background: none;
+a.get-started-btn {
+  border: 1px solid var(--p-surface-200);
+  border-radius: 0.5rem;
+  background: var(--p-surface-50);
   text-decoration: none;
   text-align: center;
-  color: deepskyblue;
-  padding: 0.4em;
+  color: var(--p-text-color);
+  padding: 1.25rem 1rem;
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    color 0.15s ease;
+  cursor: pointer;
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+}
+
+a.get-started-btn:hover {
+  border-color: var(--p-primary-color);
+  background-color: color-mix(in srgb, var(--p-primary-color) 6%, transparent);
+  color: var(--p-primary-color);
 }
 
-.get-started-btn:hover {
-  border-bottom: solid 2px var(--p-button-contrast-border-color);
-  margin-bottom: -2px;
-  background-color: var(--p-button-secondary-hover-background);
+// Dark mode: surface-50 resolves to stone-50 (near-white) — swap to a dark surface
+:global(.flame-dark a.get-started-btn) {
+  background: var(--p-surface-800);
+  border-color: var(--p-surface-600);
 }
 
-.get-started-btn:not(:last-child) {
-  border-right: solid 1px rgba(gray, 0.2);
+.get-started-btn p {
+  margin: 0;
+  font-size: 0.875rem;
 }
 
-.get-started-btn:not(:first-child) {
-  border-left: solid 1px rgba(gray, 0.2);
+@media (max-width: 768px) {
+  .get-started-btns {
+    grid-template-columns: 1fr;
+  }
 }
 
 .get-started-btn-icon {
-  margin: 0.3em;
-  font-size: 3em;
+  font-size: 2.5rem;
+  color: var(--p-primary-color);
+  margin-bottom: 0.5rem;
 }
 
 .landing-btn {
-  padding: 0.5em;
+  padding: 0.5rem;
 }
 </style>
diff --git a/app/components/projects/ProjectProposalTable.vue b/app/components/projects/ProjectProposalTable.vue
index 00b3f435..0172c477 100644
--- a/app/components/projects/ProjectProposalTable.vue
+++ b/app/components/projects/ProjectProposalTable.vue
@@ -226,14 +226,4 @@ const updateFilters = (filterText: string) => {
   </div>
 </template>
 
-<style lang="scss">
-.p-tooltip {
-  max-width: none !important;
-  white-space: nowrap !important;
-}
-
-.p-tooltip-text {
-  width: auto !important;
-  display: inline-block;
-}
-</style>
+<style lang="scss"></style>
diff --git a/app/components/table/ApproveRejectButtons.vue b/app/components/table/ApproveRejectButtons.vue
index db1fd22f..2578b1dd 100644
--- a/app/components/table/ApproveRejectButtons.vue
+++ b/app/components/table/ApproveRejectButtons.vue
@@ -73,7 +73,6 @@ const showFailedSubmission = () => {
       class="project-approve-btn"
       icon="pi pi-check"
       severity="success"
-      style="margin-right: 10px"
       @click="onSubmitApproval(true)"
     />
     <Button
@@ -87,4 +86,9 @@ const showFailedSubmission = () => {
   </div>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.approvalButtons {
+  display: flex;
+  gap: 0.5rem;
+}
+</style>
diff --git a/app/components/table/SearchBar.vue b/app/components/table/SearchBar.vue
index f008e6e8..a925496d 100644
--- a/app/components/table/SearchBar.vue
+++ b/app/components/table/SearchBar.vue
@@ -50,8 +50,8 @@ const clearFilters = () => {
   </div>
 </template>
 
-<style>
+<style scoped>
 .search-text-bar {
-  margin-right: 10px;
+  margin-right: 0.625rem;
 }
 </style>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 883e9b86..95ed149d 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -7,14 +7,14 @@ definePageMeta({
 </script>
 
 <template>
-  <div id="home" class="row">
-    <div class="col-6 welcome">
+  <div id="home">
+    <div class="welcome">
       <div class="welcome-text">
-        <h1><span style="color: orangered">FLAME</span> Node UI</h1>
-        <h2 style="margin-block-start: 0">
+        <h1><span class="brand-primary">FLAME</span> Node UI</h1>
+        <h2 class="welcome-subtitle">
           A federated learning platform dedicated to preserving
-          <span style="color: blueviolet">privacy</span> and
-          <span style="color: blueviolet">security</span>
+          <span class="privacy-highlight">privacy</span> and
+          <span class="privacy-highlight">security</span>
         </h2>
         <p>
           Contribute to the Medical Informatics Initiative (MII) by becoming
@@ -26,11 +26,11 @@ definePageMeta({
         <LandingButtons />
       </div>
     </div>
-    <div class="col-6 landing-img">
+    <div class="landing-img">
       <img
-        src="~/assets/img/node_network.png"
+        src="~/assets/img/hospital_network.webp"
         alt="Hospital Network"
-        class="pimg network-img"
+        class="network-img"
       />
     </div>
   </div>
@@ -41,34 +41,68 @@ definePageMeta({
   display: flex;
   justify-content: space-evenly;
   align-items: center;
+  gap: 3rem;
+  min-height: 60vh;
 }
 
 .welcome {
-  margin: 20px;
+  flex: 1;
+  max-width: 520px;
   display: flex;
   flex-direction: column;
-  width: 40%;
 }
 
-.pimg {
-  width: 70%;
+.welcome-subtitle {
+  margin-block-start: 0;
+}
+
+.brand-primary {
+  color: var(--p-primary-color);
+}
+
+.privacy-highlight {
+  color: var(--p-indigo-500);
+  font-weight: 600;
 }
 
 .landing-img {
-  justify-content: center;
+  flex: 1;
   display: flex;
-  float: right;
+  justify-content: center;
+  max-width: 680px;
 }
 
-.p-tabview-header {
-  margin-right: 5px;
+.network-img {
+  width: 100%;
+  height: auto;
 }
 
+/* Preserve card margin used by other pages */
 .content-card {
-  margin-top: 1em;
+  margin-top: 1rem;
 }
 
 .tab-card {
-  margin-top: 1em;
+  margin-top: 1rem;
+}
+
+@media (max-width: 768px) {
+  #home {
+    flex-direction: column;
+    min-height: auto;
+    gap: 2rem;
+  }
+
+  .welcome {
+    max-width: 100%;
+  }
+
+  .landing-img {
+    max-width: 100%;
+  }
+
+  .network-img {
+    max-width: 280px;
+  }
 }
 </style>