diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 91c3e18..a5cf513 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -43,6 +43,7 @@ jobs:
           cp .pwa/favicon-$build_prefix.ico public/img/favicon.ico
           rm public/manifest.webmanifest
           cp .pwa/manifest-$build_prefix.webmanifest public/manifest.webmanifest
+          cp .pwa/styles-$build_prefix.css src/styles.css
 
       - name: Build the application
         env:
@@ -86,7 +87,7 @@ jobs:
           cp -r dist/cheems-angular/browser/* "$target_dir"
           cp README.md .gitignore "$target_dir"
           if [ "$build_env" = "production" ]; then
-            cp .pwa/inde.html "deploy-folder/"
+            cp .pwa/index.html "deploy-folder/"
             cp README.md .gitignore "deploy-folder/"
           fi
 
@@ -94,8 +95,12 @@ jobs:
         working-directory: deploy-folder
         run: |
           git add .
-          git commit -m "Deploy #${{ github.run_number }} from ${{ github.ref }} branch - ${{ steps.set-env.outputs.build_env }}"
-          GIT_SSH_COMMAND="ssh -i ~/.ssh/deploy_key -o UserKnownHostsFile=~/.ssh/known_hosts" git push git@github.com:${{ github.repository }} gh-pages --force
+          if git diff --cached --quiet; then
+            echo "No changes to commit. Skipping deployment."
+          else
+            git commit -m "Deploy #${{ github.run_number }} from ${{ github.ref }} branch - ${{ steps.set-env.outputs.build_env }}"
+            GIT_SSH_COMMAND="ssh -i ~/.ssh/deploy_key -o UserKnownHostsFile=~/.ssh/known_hosts" git push git@github.com:${{ github.repository }} gh-pages --force
+          fi
 
       - name: Clean Up Worktree
         run: git worktree remove deploy-folder --force
diff --git a/.pwa/styles-dev.css b/.pwa/styles-dev.css
new file mode 100644
index 0000000..e12e583
--- /dev/null
+++ b/.pwa/styles-dev.css
@@ -0,0 +1,42 @@
+/*Fonts*/
+@font-face {
+    font-family: 'Kalam';
+    src: url('/CheemsBonkGame/development/fonts/Kalam-Regular.ttf') format('truetype');
+}
+
+/*App*/
+html {
+    user-select: none;
+    font-family: Kalam, Arial, Helvetica, sans-serif;
+}
+.icon {
+    height: 100%;
+    width: auto;
+}
+
+/*Accesibility*/
+.text-normal {
+    font-size: 14pt;
+}
+.text-big {
+    font-size: 18pt;
+}
+.text-bigger {
+    font-size: 24pt;
+}
+.text-small {
+    font-size: 12pt;
+}
+.text-smaller {
+    font-size: 8pt;
+}
+
+.color-text.theme-contrast {
+    color: rgb(255, 255, 0);
+}
+.color-text.theme-dark {
+    color: rgb(145, 145, 72);
+}
+.color-text.theme-light {
+    color: rgb(194, 194, 72);
+}
diff --git a/.pwa/styles-prod.css b/.pwa/styles-prod.css
new file mode 100644
index 0000000..233421c
--- /dev/null
+++ b/.pwa/styles-prod.css
@@ -0,0 +1,42 @@
+/*Fonts*/
+@font-face {
+    font-family: 'Kalam';
+    src: url('/CheemsBonkGame/app/fonts/Kalam-Regular.ttf') format('truetype');
+}
+
+/*App*/
+html {
+    user-select: none;
+    font-family: Kalam, Arial, Helvetica, sans-serif;
+}
+.icon {
+    height: 100%;
+    width: auto;
+}
+
+/*Accesibility*/
+.text-normal {
+    font-size: 14pt;
+}
+.text-big {
+    font-size: 18pt;
+}
+.text-bigger {
+    font-size: 24pt;
+}
+.text-small {
+    font-size: 12pt;
+}
+.text-smaller {
+    font-size: 8pt;
+}
+
+.color-text.theme-contrast {
+    color: rgb(255, 255, 0);
+}
+.color-text.theme-dark {
+    color: rgb(145, 145, 72);
+}
+.color-text.theme-light {
+    color: rgb(194, 194, 72);
+}
diff --git a/.pwa/styles-test.css b/.pwa/styles-test.css
new file mode 100644
index 0000000..6df9346
--- /dev/null
+++ b/.pwa/styles-test.css
@@ -0,0 +1,42 @@
+/*Fonts*/
+@font-face {
+    font-family: 'Kalam';
+    src: url('/CheemsBonkGame/test/fonts/Kalam-Regular.ttf') format('truetype');
+}
+
+/*App*/
+html {
+    user-select: none;
+    font-family: Kalam, Arial, Helvetica, sans-serif;
+}
+.icon {
+    height: 100%;
+    width: auto;
+}
+
+/*Accesibility*/
+.text-normal {
+    font-size: 14pt;
+}
+.text-big {
+    font-size: 18pt;
+}
+.text-bigger {
+    font-size: 24pt;
+}
+.text-small {
+    font-size: 12pt;
+}
+.text-smaller {
+    font-size: 8pt;
+}
+
+.color-text.theme-contrast {
+    color: rgb(255, 255, 0);
+}
+.color-text.theme-dark {
+    color: rgb(145, 145, 72);
+}
+.color-text.theme-light {
+    color: rgb(194, 194, 72);
+}
diff --git a/src/app/components/text-container/text-container.component.css b/src/app/components/text-container/text-container.component.css
index 1b0bce8..e69de29 100644
--- a/src/app/components/text-container/text-container.component.css
+++ b/src/app/components/text-container/text-container.component.css
@@ -1,3 +0,0 @@
-.container {
-    background-color: ;
-}
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index ac88998..e15e4fa 100644
--- a/src/index.html
+++ b/src/index.html
@@ -8,7 +8,7 @@
   <link rel="icon" type="image/x-icon" href="img/favicon.ico">
   <link rel="manifest" href="manifest.webmanifest">
 </head>
-<body> 
+<body>
   <app-root></app-root>
   <noscript>Please enable JavaScript to continue using this application.</noscript>
 </body>