diff --git a/src/game/PGNHelpers.ts b/src/game/PGNHelpers.ts
index 77115b5..80dd04a 100644
--- a/src/game/PGNHelpers.ts
+++ b/src/game/PGNHelpers.ts
@@ -42,7 +42,10 @@ const compressPGN = (pgn: string) => {
 
   const header = Object.entries(game.header())
     .filter(([key]) => PGN_KEYS.includes(key))
-    .map(([key, val]) => `${key[0].toUpperCase()} ${val}`)
+    .map(
+      ([key, val]) =>
+        `${PGN_KEYS_TO_SHORT[key as keyof typeof PGN_KEYS_TO_SHORT]} ${val}`
+    )
     .sort()
     .join("\n");
 
diff --git a/src/ui/App.css b/src/ui/App.css
index 1f8d8ce..c3a2e57 100644
--- a/src/ui/App.css
+++ b/src/ui/App.css
@@ -22,6 +22,43 @@ body {
   font-family: Ubuntu, sans-serif;
 }
 
+.dark {
+  background-color: #232831;
+  background-image: url(src/ui/img/pattern.png);
+  color: #ddd;
+
+  --color-btn: rgb(0, 173, 136);
+  --color-btn-light: rgb(0, 207, 162);
+  --color-tab: #899399;
+  --color-tab-light: #a9b4bd;
+  --color-bg-block: #0e0e13;
+  --color-bg-input: #20242a;
+  --color-border-input: #2d323a;
+  --color-highlight: #ffffff22;
+  --color-text: #aaa;
+  --color-text-contrast: #0e0e13;
+  --color-text-input: #acbddb;
+  --color-text-dimmed: #677794;
+}
+
+.light {
+  background-color: #a7b3b9;
+  /* background-image: url(src/ui/img/pattern-light.png); */
+  color: #222;
+  --color-btn: rgb(0, 148, 116);
+  --color-btn-light: rgb(0, 114, 89);
+  --color-tab: #5d6468;
+  --color-tab-light: #3e4346;
+  --color-bg-block: #f1f1f1;
+  --color-bg-input: #fcfcfc;
+  --color-border-input: #7f8999;
+  --color-highlight: #00000022;
+  --color-text: rgb(46, 54, 58);
+  --color-text-contrast: #fff;
+  --color-text-input: #46494e;
+  --color-text-dimmed: #767980;
+}
+
 .upload {
   visibility: hidden;
   padding: 0;
@@ -40,15 +77,15 @@ button,
   padding: 10px;
   font-family: "Ubuntu";
   font-size: 1.5rem;
-  background: rgb(0, 173, 136);
-  color: #0e0e13;
+  background: var(--color-btn);
+  color: var(--color-text-contrast);
   border-radius: 5px;
   width: 100%;
 }
 
 button:hover,
 .upload:hover::before {
-  background: rgb(0, 207, 162);
+  background: var(--color-btn-light);
   cursor: pointer;
 }
 
@@ -59,9 +96,9 @@ textarea {
   font-family: "Fira Mono";
   font-size: 1.4rem;
   margin-bottom: 10px;
-  background: #20242a;
-  border: solid 1px #2d323a;
-  color: #acbddb;
+  background: var(--color-bg-input);
+  border: solid 1px var(--color-border-input);
+  color: var(--color-text-input);
   outline: none;
 }
 
@@ -71,14 +108,14 @@ textarea:focus {
 }
 
 h2 {
-  color: #aaa;
+  color: var(--color-text);
   text-align: left;
   font-size: 1.8rem;
   margin: 25px 0 10px 0;
 }
 
 h3 {
-  color: #aaa;
+  color: var(--color-text);
   text-align: left;
   font-size: 1.6rem;
   margin: 15px 0 10px 0;
@@ -86,26 +123,14 @@ h3 {
 
 hr {
   margin-top: 20px;
-  border-top: solid 1px #ffffff22;
-}
-
-.dark {
-  background-color: #191d24;
-  /* background-image: url(src/ui/img/pattern.png); */
-  color: #ddd;
-}
-
-.light {
-  background-color: #cfcfcf;
-  /* background-image: url(src/ui/img/pattern-light.png); */
-  color: #222;
+  border-top: solid 1px var(--color-highlight);
 }
 
 .board {
   box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
   border-radius: 5px;
   max-width: 100%;
-  max-height: 95vh;
+  max-height: 100%;
 }
 
 .double {
@@ -130,7 +155,7 @@ hr {
   /* background: rgba(255, 166, 0, 0.1); */
   height: 100vh;
   grid-area: board;
-  padding: 20px;
+  padding: 20px 0;
 }
 
 @media screen and (max-width: 1024px) {
@@ -156,5 +181,5 @@ hr {
 }
 
 ::placeholder {
-  color: #677794;
+  color: var(--color-text-dimmed);
 }
diff --git a/src/ui/components/Boards.css b/src/ui/components/Boards.css
index 2329192..66858f6 100644
--- a/src/ui/components/Boards.css
+++ b/src/ui/components/Boards.css
@@ -1,5 +1,7 @@
 .boards {
   text-align: center;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
 }
 
 .boards__ico {
diff --git a/src/ui/components/Controls.css b/src/ui/components/Controls.css
index c013c7d..eba7ac1 100644
--- a/src/ui/components/Controls.css
+++ b/src/ui/components/Controls.css
@@ -4,7 +4,7 @@
 }
 
 .controls {
-  background: #0e0e13;
+  background: var(--color-bg-block);
   height: 100%;
   padding: 20px;
   border-bottom-left-radius: 5px;
@@ -15,7 +15,6 @@
   margin: 3px;
   padding: 5px;
   font-size: 3rem;
-  background: rgb(0, 173, 136);
   text-align: center;
   border-radius: 5px;
   width: 44px;
@@ -23,7 +22,7 @@
 }
 
 .controls__button:hover {
-  background: rgb(0, 207, 162);
+  background: var(--color-btn-light);
   cursor: pointer;
 }
 
diff --git a/src/ui/components/GameTabs.css b/src/ui/components/GameTabs.css
index c1e78ab..eef7ef5 100644
--- a/src/ui/components/GameTabs.css
+++ b/src/ui/components/GameTabs.css
@@ -16,17 +16,22 @@
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
   height: 38px;
+  background: var(--color-tab);
+}
+
+.game-tabs__btn:hover {
+  background: var(--color-tab-light);
 }
 
 .game-tabs__btn--active {
   width: 50%;
-  background: #0e0e13;
-  color: #aaa;
+  background: var(--color-bg-block);
+  color: var(--color-text);
   cursor: default;
 }
 
 .game-tabs__btn--active:hover {
-  background: #0e0e13;
+  background: var(--color-bg-block);
 }
 
 .game-tabs__btn:nth-child(1) {
diff --git a/src/ui/components/Load.css b/src/ui/components/Load.css
index a2e8c48..82f20cf 100644
--- a/src/ui/components/Load.css
+++ b/src/ui/components/Load.css
@@ -1,5 +1,5 @@
 .load {
-  background: #0e0e13;
+  background: var(--color-bg-block);
   padding: 20px;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
@@ -39,7 +39,7 @@
 
 .load__pgn-file-info p {
   margin-top: 10px;
-  color: #677794;
+  color: var(--color-text-dimmed);
 }
 
 .load__link-input {
diff --git a/src/ui/components/Moves.css b/src/ui/components/Moves.css
index a979413..7fb2f0d 100644
--- a/src/ui/components/Moves.css
+++ b/src/ui/components/Moves.css
@@ -5,7 +5,6 @@
 }
 
 .move {
-  /* display: inline-block; */
   padding: 3px;
 }
 
@@ -14,18 +13,18 @@
   width: 40px;
   text-align: right;
   margin-right: 20px;
-  color: #aaa;
+  color: var(--color-text);
 }
 
 .move__ply {
   display: inline-block;
   width: 70px;
-  color: rgb(0, 173, 136);
+  color: var(--color-btn);
 }
 
 .move__ply--current {
-  color: #aaa;
-  background-color: #ffffff22;
+  color: var(--color-text);
+  background-color: var(--color-highlight);
 }
 
 .move__ply:hover {
diff --git a/src/ui/components/Pieces.css b/src/ui/components/Pieces.css
index 14dacab..ba14671 100644
--- a/src/ui/components/Pieces.css
+++ b/src/ui/components/Pieces.css
@@ -1,5 +1,7 @@
 .pieces {
   text-align: center;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
 }
 
 .pieces__ico {
@@ -7,7 +9,7 @@
   margin: 5px;
   cursor: pointer;
   width: 82px;
-  background-color: #ffffff22;
+  background-color: var(--color-highlight);
 }
 
 .pieces__ico--active {
diff --git a/src/ui/components/SetupTabs.css b/src/ui/components/SetupTabs.css
index e2bd9d4..6a2bd61 100644
--- a/src/ui/components/SetupTabs.css
+++ b/src/ui/components/SetupTabs.css
@@ -18,16 +18,21 @@
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
   height: 38px;
+  background: var(--color-tab);
+}
+
+.setup-tabs__btn:hover {
+  background: var(--color-tab-light);
 }
 
 .setup-tabs__btn--active {
-  background: #0e0e13;
-  color: #aaa;
+  background: var(--color-bg-block);
+  color: var(--color-text);
   cursor: default;
 }
 
 .setup-tabs__btn--active:hover {
-  background: #0e0e13;
+  background: var(--color-bg-block);
 }
 
 .setup-tabs__btn:nth-child(1),
diff --git a/src/ui/components/Share.css b/src/ui/components/Share.css
index 8e85dd8..55ed70b 100644
--- a/src/ui/components/Share.css
+++ b/src/ui/components/Share.css
@@ -1,3 +1,8 @@
+.share {
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+
 .share__format,
 .share__size {
   padding: 10px;
@@ -33,7 +38,6 @@
 
 .share__format--active:hover,
 .share__size--active:hover {
-  background: rgb(0, 173, 136);
   cursor: default;
 }
 
@@ -50,7 +54,6 @@
   margin: 3px;
   padding: 5px;
   font-size: 3rem;
-  background: rgb(0, 173, 136);
   text-align: center;
   border-radius: 5px;
   width: 44px;
@@ -63,7 +66,7 @@
 }
 
 .options__button:hover {
-  background: rgb(0, 207, 162);
+  background: var(--color-btn-light);
   cursor: pointer;
 }
 
diff --git a/src/ui/components/Share.tsx b/src/ui/components/Share.tsx
index 23e4958..0559598 100644
--- a/src/ui/components/Share.tsx
+++ b/src/ui/components/Share.tsx
@@ -86,6 +86,10 @@ const Share: Component<{ handlers: Handlers }> = (props) => {
           readOnly
           placeholder="Current FEN..."
           value={state.fen}
+          onClick={(e) => {
+            const target = e.target as HTMLInputElement;
+            target.select();
+          }}
         />
 
         <div class="double">
diff --git a/src/ui/components/reusable/Scrollable.css b/src/ui/components/reusable/Scrollable.css
index c23d2a3..0fb551a 100644
--- a/src/ui/components/reusable/Scrollable.css
+++ b/src/ui/components/reusable/Scrollable.css
@@ -1,5 +1,5 @@
 .scrollable {
-  background: #0e0e13;
+  background: var(--color-bg-block);
   height: auto;
   padding: 40px 20px;
   height: 100%;
diff --git a/tsconfig.json b/tsconfig.json
index 7c4b9c5..0df4c5b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -17,5 +17,5 @@
     "jsxImportSource": "solid-js",
     "types": ["vite/client"]
   },
-  "include": ["./src", "gif.worker.js", "gif.worker.js"]
+  "include": ["./src", "public/gif.worker.js", "public/gif.worker.js"]
 }