diff --git a/backend/src/main.rs b/backend/src/main.rs
index 55e5d35..96229cb 100644
--- a/backend/src/main.rs
+++ b/backend/src/main.rs
@@ -79,7 +79,7 @@ async fn skills(State(pool): State<PgPool>, Path(id): Path<i32>) -> Result<Json<
     
     let programming_languages = sqlx::query_as!(
         ProgrammingLanguages,
-        "SELECT lang, icon, type_icon, color FROM public.programming_languages WHERE programming_languages.info_id = $1",
+        "SELECT lang, icon, type_icon, color FROM public.programming_languages WHERE programming_languages.info_id = $1 ORDER BY programming_languages.id",
         id
     )
     .fetch_all(&pool)
@@ -87,7 +87,7 @@ async fn skills(State(pool): State<PgPool>, Path(id): Path<i32>) -> Result<Json<
 
     let softwares = sqlx::query_as!(
         Softwares,
-        "SELECT software, icon, type_icon, color FROM public.softwares WHERE softwares.info_id = $1",
+        "SELECT software, icon, type_icon, color FROM public.softwares WHERE softwares.info_id = $1 ORDER BY softwares.id",
         id
     )
     .fetch_all(&pool)
@@ -95,7 +95,7 @@ async fn skills(State(pool): State<PgPool>, Path(id): Path<i32>) -> Result<Json<
 
     let languages = sqlx::query_as!(
         Languages,
-        "SELECT lang, icon_alpha, level FROM public.languages WHERE languages.info_id = $1",
+        "SELECT lang, icon_alpha, level FROM public.languages WHERE languages.info_id = $1 ORDER BY languages.id",
         id
     )
     .fetch_all(&pool)
diff --git a/frontend/src/lib/components/pill.svelte b/frontend/src/lib/components/pill.svelte
index 7de8ed6..84d4f0b 100644
--- a/frontend/src/lib/components/pill.svelte
+++ b/frontend/src/lib/components/pill.svelte
@@ -2,20 +2,21 @@
     import SvgIcon from "@jamescoyle/svelte-icon";
     import "$lib/css/pill.css";
     import { mdiHelp } from "@mdi/js";
+    import { shouldColorBeWhite } from "$lib/js/color.js";
 
     export let name = "Unknown";
     export let icon = mdiHelp;
     export let color = "#000000";
     export let type_icon = "mdi";
 
+    const white = shouldColorBeWhite(color.slice(1));
     const style = `background-color: ${color};
-    box-shadow: 0px 8px 18px -1px ${color}40;`;
+    box-shadow: 0px 8px 18px -1px ${color}60;`;
 </script>
 
-<div class="pill-container" {style}>
+<div class={white ? "pill-container pill-white" : "pill-container pill-black"} {style}>
     {#if type_icon === "simpleicons"}
         <img
-            class="pill-white"
             height="20"
             width="20"
             src="https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/{icon}.svg"
diff --git a/frontend/src/lib/css/pill.css b/frontend/src/lib/css/pill.css
index 5579115..bec068e 100644
--- a/frontend/src/lib/css/pill.css
+++ b/frontend/src/lib/css/pill.css
@@ -4,7 +4,6 @@
     padding-left: 1rem;
     border-radius: 3rem;
     background-color: #000000;
-    color: var(--color-background);
     display: flex;
     flex-direction: row;
     width: fit-content;
@@ -15,9 +14,21 @@
 }
 
 .pill-white {
+    color: var(--color-background);
+}
+
+.pill-black {
+    color: var(--color-text);
+}
+
+.pill-white img {
     filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(19deg) brightness(116%) contrast(113%);
 }
 
+.pill-black img {
+    filter: invert(8%) sepia(21%) saturate(1187%) hue-rotate(234deg) brightness(101%) contrast(91%);
+}
+
 .pill-container img, svg {
-    margin: 0.5rem;
+    margin-right: 0.5rem;
 }
\ No newline at end of file
diff --git a/frontend/src/lib/js/color.js b/frontend/src/lib/js/color.js
new file mode 100644
index 0000000..5900f46
--- /dev/null
+++ b/frontend/src/lib/js/color.js
@@ -0,0 +1,10 @@
+export function shouldColorBeWhite(color) {
+    const colorHex = {
+        red: parseInt(color.slice(0,2),16),
+        green: parseInt(color.slice(2,4),16),
+        blue: parseInt(color.slice(4,6),16)
+    }
+    const total = colorHex.red*0.299 + colorHex.green*0.587 + colorHex.blue*0.114;
+    console.log(total <= 186);
+    return total <= 186;
+}
\ No newline at end of file