diff --git a/src-web/components/core/PairEditor.tsx b/src-web/components/core/PairEditor.tsx
index e8e28fb4..8bf7f8b6 100644
--- a/src-web/components/core/PairEditor.tsx
+++ b/src-web/components/core/PairEditor.tsx
@@ -389,7 +389,7 @@ function PairEditorRow({
             <Button
               size="xs"
               color="secondary"
-              className="font-mono text-xs"
+              className="font-mono text-2xs rtl"
               onClick={async (e) => {
                 e.preventDefault();
                 const selected = await open({
@@ -403,7 +403,9 @@ function PairEditorRow({
                 handleChangeValueFile(selected.path);
               }}
             >
-              {getFileName(pairContainer.pair.value) || 'Select File'}
+              {/* Special character to insert ltr text in rtl element without making things wonky */}
+              &#x200E;
+              {pairContainer.pair.value || 'Select File'}
             </Button>
           ) : (
             <Input
@@ -494,9 +496,3 @@ const newPairContainer = (initialPair?: Pair): PairContainer => {
   const pair = initialPair ?? { name: '', value: '', enabled: true, isFile: false };
   return { id, pair };
 };
-
-const getFileName = (path: string | null | undefined): string => {
-  if (typeof path !== 'string') return '';
-  const parts = path.split(/[\\/]/);
-  return parts[parts.length - 1] ?? '';
-};
diff --git a/src-web/lib/theme/themes/moonlight.ts b/src-web/lib/theme/themes/moonlight.ts
index eaa44f5e..a24a0cae 100644
--- a/src-web/lib/theme/themes/moonlight.ts
+++ b/src-web/lib/theme/themes/moonlight.ts
@@ -40,12 +40,10 @@ export const colors = {
 const moonlightDefault: YaakTheme = {
   id: 'moonlight',
   name: 'Moonlight',
-  background: new Color(colors.gray4, 'dark'),
-  backgroundHighlight: new Color(colors.gray5, 'dark'),
-  backgroundHighlightSecondary: new Color(colors.gray5, 'dark'),
-  foreground: new Color(colors.gray11, 'dark'),
-  foregroundSubtle: new Color(colors.gray7, 'dark'),
-  foregroundSubtler: new Color(colors.gray6, 'dark'),
+  background: new Color('#222436', 'dark'),
+  foreground: new Color('#d5def8', 'dark'),
+  foregroundSubtle: new Color('#828bb8', 'dark'),
+  foregroundSubtler: new Color('hsl(232,26%,43%)', 'dark'),
   colors: {
     primary: new Color(colors.purple, 'dark'),
     secondary: new Color(colors.desaturatedGray, 'dark'),
@@ -58,13 +56,9 @@ const moonlightDefault: YaakTheme = {
   components: {
     appHeader: {
       background: new Color(colors.gray3, 'dark'),
-      backgroundHighlight: new Color(colors.gray5, 'dark'),
-      backgroundHighlightSecondary: new Color(colors.gray4, 'dark'),
     },
     sidebar: {
       background: new Color(colors.gray3, 'dark'),
-      backgroundHighlight: new Color(colors.gray5, 'dark'),
-      backgroundHighlightSecondary: new Color(colors.gray4, 'dark'),
     },
   },
 };