diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 111cbd6..7442100 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -77,7 +77,7 @@
         Developers
     </h2>
     <div class="">
-        <div class="grid grid-cols-2 gap-4 p-4 max-lg:px-0 w-full">
+        <div class="grid max-lg:grid-cols-1 sm:grid-cols-2 gap-4 p-4 max-lg:px-0 w-full">
 
             <Profile name="Zhen / Alex" tags={["Programmer", "3D artist", "UX Designer"]} isMobile={mobile}>
                 <span>
@@ -95,7 +95,7 @@
             
             <Profile isSnorre={true} tags={["Programmer"]} isMobile={mobile}/>
 
-            <Profile name="Oliver" tags={["Sound designer", "Story designer","2D Artist", "Programmer"]} isMobile={mobile}>
+            <Profile name="Oliver" tags={["Sound/Story","2D Artist", "Programmer"]} isMobile={mobile}>
                 <span>
                     <p>Snorre does not get paid.</p>
                     <p><a href="https://www.linkedin.com/in/oliver-schwenger-291944278/" target="_blank" style="color:lightblue;">Linked-in</a></p>
@@ -109,7 +109,7 @@
                 </span>
             </Profile>
             
-            <Profile name="Zylvester" tags={["2D/3D Artist", "Sound designer", "Story designer"]} isMobile={mobile}>
+            <Profile name="Zylvester" tags={["Sound/Story", "Story designer"]} isMobile={mobile}>
                 <span>
                     <p>Hi, I am [insert text here]</p>
                     <p>Here's a joke about recursion: <a href="/" target="_blank" style="color:lightblue;">recursion</a></p>
diff --git a/src/routes/comps/Tags.svelte b/src/routes/comps/Tags.svelte
index b2b53e6..f836a2c 100644
--- a/src/routes/comps/Tags.svelte
+++ b/src/routes/comps/Tags.svelte
@@ -29,6 +29,7 @@
                 "3dartist": "#F4881C",
                 "2dartist": "#F1EAC0",
                 "2d/3dartist": { color1: "#F1EAC0", color2: "#F4881C", rotation: "-65deg", offset: "71.5%" },
+                "sound/story": { color1: "#F3EC2A", color2: "#EEC12A", rotation: "-65deg", offset: "50%" },
                 "sounddesigner": "#F3EC2A",
                 "storydesigner": "#EEC12A",
                 "back-endadmin": "#3236a8",
@@ -51,20 +52,26 @@
         {@const color = colorManager.getColor(key)}
         {#if key.indexOf("/") < 0}
             <!-- Single Color Badge -->
-            <div class="badge2 text-primary-content cozette" style="background-color: {typeof color === 'string' ? color : '#ccc'};">
-                {tag}
+            <div class="badge2" style="background-color: {typeof color === 'string' ? color : '#ccc'};">
+                <span class="invert">
+                    {tag}
+                </span>
             </div>
         {:else}
             <!-- Gradient Badge -->
             {#if typeof color === 'object' && color !== null}
                 <div 
-                    class="badge2 text-primary-content cozette" 
+                    class="badge2 cozette" 
                     style="background: linear-gradient({color.rotation}, {color.color2} {color.offset}, {color.color1} {color.offset});">
-                    {tag}
+                    <span class="invert">
+                        {tag}
+                    </span>
                 </div>
             {:else}
-                <div class="badge2 text-primary-content cozette" style="background-color: #ccc;">
-                    {tag}
+                <div class="badge2 cozette" style="background-color: #ccc;">
+                    <span class="invert">
+                        {tag}
+                    </span>
                 </div>
             {/if}
         {/if}