diff --git a/src/lib/components/Navigation.svelte b/src/lib/components/Navigation.svelte
index ba978190..fdfba269 100644
--- a/src/lib/components/Navigation.svelte
+++ b/src/lib/components/Navigation.svelte
@@ -522,7 +522,7 @@
 
 				.database-back-button {
 					border-radius: layout.$full-corner;
-					color: colors.$grey-50;
+					color: var(--text-secondary);
 					font-size: typography.$font-small;
 					font-weight: typography.$medium;
 					text-decoration: none;
diff --git a/src/lib/components/artifact/ArtifactGradeDisplay.svelte b/src/lib/components/artifact/ArtifactGradeDisplay.svelte
index 2251a6ef..7df2c490 100644
--- a/src/lib/components/artifact/ArtifactGradeDisplay.svelte
+++ b/src/lib/components/artifact/ArtifactGradeDisplay.svelte
@@ -132,7 +132,7 @@
 		}
 		&.grade-none {
 			background: colors.$grey-85;
-			color: colors.$grey-50;
+			color: var(--text-secondary);
 		}
 	}
 
@@ -159,7 +159,7 @@
 
 	.breakdown-label {
 		font-size: typography.$font-small;
-		color: colors.$grey-50;
+		color: var(--text-secondary);
 	}
 
 	.breakdown-value {
@@ -211,7 +211,7 @@
 
 	.no-grade-text {
 		font-size: typography.$font-small;
-		color: colors.$grey-50;
+		color: var(--text-secondary);
 		font-style: italic;
 	}
 
diff --git a/src/lib/components/artifact/ArtifactModifierList.svelte b/src/lib/components/artifact/ArtifactModifierList.svelte
index 9ec7543d..2f2ad65c 100644
--- a/src/lib/components/artifact/ArtifactModifierList.svelte
+++ b/src/lib/components/artifact/ArtifactModifierList.svelte
@@ -75,7 +75,7 @@
 	.empty-state {
 		padding: spacing.$unit-4x;
 		text-align: center;
-		color: colors.$grey-50;
+		color: var(--text-secondary);
 	}
 
 	.skill-options {
diff --git a/src/lib/components/artifact/ArtifactSkillRow.svelte b/src/lib/components/artifact/ArtifactSkillRow.svelte
index 59c226a9..1c45655e 100644
--- a/src/lib/components/artifact/ArtifactSkillRow.svelte
+++ b/src/lib/components/artifact/ArtifactSkillRow.svelte
@@ -191,6 +191,6 @@
 
 	.control-label {
 		font-size: typography.$font-small;
-		color: colors.$grey-50;
+		color: var(--text-secondary);
 	}
 </style>
diff --git a/src/lib/components/job/JobSection.svelte b/src/lib/components/job/JobSection.svelte
index 65b6300d..dd9afd5c 100644
--- a/src/lib/components/job/JobSection.svelte
+++ b/src/lib/components/job/JobSection.svelte
@@ -62,16 +62,12 @@
 		{#if job}
 			<img class="job-portrait" src={jobImageUrl} alt={job.name.en} />
 			<div class="overlay"></div>
-		{:else}
+		{:else if canEdit}
 			<div class="empty-portrait">
-				{#if canEdit}
-					<button class="select-job-button" on:click={onSelectJob}>
-						<Icon name="plus" size={24} />
-						<span>Select Job</span>
-					</button>
-				{:else}
-					<span>No Job Selected</span>
-				{/if}
+				<button class="select-job-button" on:click={onSelectJob}>
+					<Icon name="plus" size={24} />
+					<span>Select Job</span>
+				</button>
 			</div>
 		{/if}
 
@@ -170,8 +166,8 @@
 				</div>
 			{/if}
 		{:else}
-			<div class="no-job-message">
-				<p>Select a job to view skills and details</p>
+			<div class="no-job-message" class:readonly={!canEdit}>
+				<p>{canEdit ? 'Select a job to view skills and details' : 'No job selected'}</p>
 			</div>
 		{/if}
 	</div>
@@ -434,6 +430,10 @@
 			height: 100%;
 			color: var(--text-tertiary);
 			font-size: typography.$font-regular;
+
+			&.readonly {
+				color: var(--text-secondary);
+			}
 		}
 	}
 </style>
diff --git a/src/lib/components/sidebar/AddArtifactSidebar.svelte b/src/lib/components/sidebar/AddArtifactSidebar.svelte
index dc784546..d6847301 100644
--- a/src/lib/components/sidebar/AddArtifactSidebar.svelte
+++ b/src/lib/components/sidebar/AddArtifactSidebar.svelte
@@ -444,7 +444,7 @@
 	.empty {
 		padding: spacing.$unit-2x;
 		text-align: center;
-		color: colors.$grey-50;
+		color: var(--text-secondary);
 	}
 
 	.error {
diff --git a/src/lib/features/database/characters/sections/CharacterUncapSection.svelte b/src/lib/features/database/characters/sections/CharacterUncapSection.svelte
index 90f19c98..f4ba0c07 100644
--- a/src/lib/features/database/characters/sections/CharacterUncapSection.svelte
+++ b/src/lib/features/database/characters/sections/CharacterUncapSection.svelte
@@ -175,7 +175,7 @@
 
 	.special-note {
 		font-size: typography.$font-small;
-		color: colors.$grey-50;
+		color: var(--text-secondary);
 		margin: 0;
 		padding-bottom: spacing.$unit;
 	}
diff --git a/src/lib/features/database/detail/tabs/EntityRawDataTab.svelte b/src/lib/features/database/detail/tabs/EntityRawDataTab.svelte
index c5dc49da..4ac3399b 100644
--- a/src/lib/features/database/detail/tabs/EntityRawDataTab.svelte
+++ b/src/lib/features/database/detail/tabs/EntityRawDataTab.svelte
@@ -137,12 +137,12 @@
 	}
 
 	.no-data {
-		color: colors.$grey-50;
+		color: var(--text-secondary);
 		font-style: italic;
 	}
 
 	.loading {
-		color: colors.$grey-50;
+		color: var(--text-secondary);
 		font-style: italic;
 	}
 
diff --git a/src/lib/features/database/jobs/sections/JobFeaturesSection.svelte b/src/lib/features/database/jobs/sections/JobFeaturesSection.svelte
index 4e1fc8f9..637c29e1 100644
--- a/src/lib/features/database/jobs/sections/JobFeaturesSection.svelte
+++ b/src/lib/features/database/jobs/sections/JobFeaturesSection.svelte
@@ -89,7 +89,7 @@
 
 	.boolean-indicator {
 		font-size: typography.$font-regular;
-		color: colors.$grey-50;
+		color: var(--text-secondary);
 
 		&.yes {
 			color: colors.$wind-bg-00;
diff --git a/src/lib/features/database/jobs/tabs/JobImagesTab.svelte b/src/lib/features/database/jobs/tabs/JobImagesTab.svelte
index 552a17b7..7b708183 100644
--- a/src/lib/features/database/jobs/tabs/JobImagesTab.svelte
+++ b/src/lib/features/database/jobs/tabs/JobImagesTab.svelte
@@ -157,7 +157,7 @@
 
 	.image-sublabel {
 		font-size: typography.$font-tiny;
-		color: colors.$grey-60;
+		color: var(--text-tertiary);
 		text-align: center;
 	}
 </style>
diff --git a/src/lib/features/database/jobs/tabs/JobSkillsTab.svelte b/src/lib/features/database/jobs/tabs/JobSkillsTab.svelte
index cd78f150..dab153a1 100644
--- a/src/lib/features/database/jobs/tabs/JobSkillsTab.svelte
+++ b/src/lib/features/database/jobs/tabs/JobSkillsTab.svelte
@@ -356,7 +356,7 @@
 	.empty {
 		text-align: center;
 		padding: spacing.$unit * 4;
-		color: colors.$grey-50;
+		color: var(--text-secondary);
 
 		p {
 			margin: 0 0 spacing.$unit-2x 0;
@@ -374,7 +374,7 @@
 	.group-title {
 		font-size: typography.$font-small;
 		font-weight: typography.$medium;
-		color: colors.$grey-50;
+		color: var(--text-secondary);
 		margin: 0 0 spacing.$unit 0;
 	}
 
@@ -420,7 +420,7 @@
 
 	.skill-name-jp {
 		font-size: typography.$font-small;
-		color: colors.$grey-50;
+		color: var(--text-secondary);
 	}
 
 	.skill-category {