diff --git a/src/components/ProjectComponent.svelte b/src/components/ProjectComponent.svelte
new file mode 100644
index 0000000..7dd2d67
--- /dev/null
+++ b/src/components/ProjectComponent.svelte
@@ -0,0 +1,125 @@
+<script>
+    export let project;
+    import ProjectsLinks from "./ProjectsLinks.svelte";
+    import ProjectLanguageIndicator from "./ProjectLanguageIndicator.svelte";
+
+    import "../routes/+page.css";
+</script>
+
+<div class="top">
+    <img class="image" src="/project-banners{project.backgroud}" alt=" " />
+</div>
+<div class="project-languages">
+    <ProjectLanguageIndicator {project} />
+</div>
+<div class="project-links">
+    <ProjectsLinks {project} />
+</div>
+<div class="bottom">
+    <div class="content">
+        <div />
+        <div class="project-topline">
+            <div class="project-title">{project.title}</div>
+            <div class="project-titleinfo">
+                <a
+                    class="project-status"
+                    style="color: {project.statuscolor};border-color:{project.statuscolor}"
+                    >{project.status}</a
+                ><a class="project-version">{project.version}</a>
+            </div>
+        </div>
+        <div class="project-description">{project.description}</div>
+    </div>
+</div>
+
+<style>
+    .project-title {
+        font-size: 24px;
+        font-weight: bold;
+        margin-bottom: 10px;
+        text-align: left;
+    }
+
+    .project-status {
+        font-size: 20px;
+        font-weight: bold;
+        margin-bottom: 10px;
+        margin-left: 10px;
+        margin-right: 10px;
+        padding: 2px;
+        padding-left: 5px;
+        padding-right: 5px;
+        border: 3px solid #dcdcdc;
+        border-radius: 3px;
+    }
+
+    .project-version {
+        font-size: 20px;
+        font-weight: bold;
+        color: var(--project-version-color);
+        margin-bottom: 10px;
+        margin-left: 10px;
+        margin-right: 10px;
+        margin-top: -4px;
+        padding: 2px;
+        border: 3px solid var(--project-version-color);
+        border-radius: 100px;
+        float: right;
+    }
+
+    .project-description {
+        margin-top: 20px;
+        margin-bottom: 10px;
+        margin-right: 12px;
+        text-align: left;
+    }
+
+    .project-links {
+        display: flex;
+        align-items: right;
+        text-align: right;
+        align-content: right;
+        width: 100%;
+        border-bottom: 1px solid var(--project-border-color);
+    }
+
+    .top {
+        flex: 2;
+        display: flex;
+        align-items: center;
+    }
+
+    .bottom {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .image {
+        width: 100%;
+        height: 150px;
+        object-fit: cover;
+    }
+
+    .content {
+        margin: 20px;
+    }
+
+    .project-topline {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .project-languages {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+    }
+
+    .project-titleinfo {
+        display: flex;
+        align-items: center;
+    }
+</style>
diff --git a/src/components/ProjectLanguageIndicator.svelte b/src/components/ProjectLanguageIndicator.svelte
new file mode 100644
index 0000000..d17d6ea
--- /dev/null
+++ b/src/components/ProjectLanguageIndicator.svelte
@@ -0,0 +1,46 @@
+<script>
+    export let project;
+
+    import { onMount } from "svelte";
+
+    import { language_colors } from "../scripts/langs";
+
+    let languageLength = Object.values(project.languages).reduce(
+        (acc, curr) => acc + curr,
+        0
+    );
+</script>
+
+<div class="indicator">
+    {#each Object.keys(project.languages) as language}
+        <div
+            class="language-color"
+            style="background-color: {language_colors[
+                language
+            ]}; width: {(project.languages[language] / languageLength) * 100}%"
+        >
+            <p>{language}</p>
+        </div>
+    {/each}
+</div>
+
+<style>
+    .indicator {
+        display: flex;
+        height: 20px;
+        width: 100%;
+    }
+
+    .language-color {
+        flex: 1;
+        height: 100%;
+        width: 100%;
+    }
+
+    .language-color p {
+        color: white;
+        font-size: 0.9rem;
+        margin: 0;
+        padding: 0;
+    }
+</style>
diff --git a/src/components/ProjectsLinks.svelte b/src/components/ProjectsLinks.svelte
new file mode 100644
index 0000000..bbc3c9a
--- /dev/null
+++ b/src/components/ProjectsLinks.svelte
@@ -0,0 +1,59 @@
+<script>
+  export let project;
+
+  import "../routes/+page.css";
+</script>
+
+<div class="project-links">
+  {#each Object.entries(project.links) as [platform, link]}
+    <a
+      class="project-link"
+      href={link}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {#if platform === "GH"}
+        <i class="fa fa-github" aria-hidden="true" />
+      {:else if platform === "WB"}
+        <i class="fa fa-globe" aria-hidden="true" />
+      {:else if platform === "YT"}
+        <i class="fa fa-youtube" aria-hidden="true" />
+      {:else if platform === "TW"}
+        <i class="fa fa-twitter" aria-hidden="true" />
+      {:else if platform === "DC"}
+        <i class="fa fa-discord" aria-hidden="true" />
+      {:else if platform === "PT"}
+        <i class="fa fa-patreon" aria-hidden="true" />
+      {:else if platform === "SP"}
+        <i class="fa fa-spotify" aria-hidden="true" />
+      {:else if platform === "IG"}
+        <i class="fa fa-instagram" aria-hidden="true" />
+      {:else}
+        {platform}
+      {/if}
+    </a>
+  {/each}
+</div>
+
+<style>
+  .project-links {
+    display: flex;
+    width: 100%;
+  }
+  .project-link {
+    color: var(--project-link-color);
+    background-color: var(--project-link-background-color);
+    text-decoration: none;
+    transition: color 0.3s;
+    margin-top: 3px;
+    font-size: 25px;
+    width: 100%;
+    align-items: center;
+    text-align: center;
+  }
+
+  .project-link:hover {
+    color: var(--project-link-color-hover);
+    background-color: var(--project-link-background-color-hover);
+  }
+</style>
diff --git a/src/routes/+page.css b/src/routes/+page.css
index 739ec9b..e6c9d7e 100644
--- a/src/routes/+page.css
+++ b/src/routes/+page.css
@@ -11,7 +11,7 @@
 }
 
 :root {
-	--background-color: #202324;
+  --background-color: #202324;
   --font-color: rgb(0, 255, 0);
   --font-hover-color: green;
   --header-background-color: rgba(0, 0, 0, 0.4);
@@ -22,17 +22,19 @@
   --footer-background-color: #000;
   --footer-font-color: #fff;
   --projects-background-color: rgba(0, 0, 0, 0.8);
+  --project-link-background-color: var(--projects-background-color);
   --project-border-color: white;
   --project-link-color: white;
   --project-link-color-hover: #666;
+  --project-version-color: white;
   --project-search-background-color: rgba(0, 0, 0, 0.678);
   --project-search-input-font-color: white;
   --nav-menu-background-color: rgba(0, 0, 0, 0.8)
 }
 
 @media (prefers-color-scheme: light) {
-	:root {
-		--background-color: #dfdcdb;
+  :root {
+    --background-color: #dfdcdb;
     --font-color: green;
     --font-hover-color: rgb(0, 255, 0);
     --header-background-color: rgba(255, 255, 255, 0.5);
@@ -44,12 +46,13 @@
     --footer-font-color: #000;
     --projects-background-color: rgba(255, 255, 255, 0.4);
     --project-border-color: black;
-    --project-link-color: white;
+    --project-link-color: black;
     --project-link-color-hover: #666;
+    --project-version-color: black;
     --project-search-background-color: rgba(255, 255, 255, 0.5);
     --project-search-input-font-color: black;
     --nav-menu-background-color: rgba(255, 255, 255, 0.8)
-	}
+  }
 }
 
 
@@ -93,7 +96,7 @@ a:hover {
 
 @media screen and (max-width: 768px) {
   .parallax-background {
-    transform:none;
+    transform: none;
   }
 
 }
diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
index bcb7d82..3a14eef 100644
--- a/src/routes/projects/+page.svelte
+++ b/src/routes/projects/+page.svelte
@@ -4,9 +4,10 @@
   import NavBar from "../../components/NavBar.svelte";
   import ParallaxBg from "../../components/ParallaxBg.svelte";
   import Padding from "../../components/padding.svelte";
+  import ProjectComponent from "../../components/ProjectComponent.svelte";
 
   import projects from "./projects.json";
-  
+
   import "../../routes/+page.css";
 
   var searchResults = projects.filter((project) => {
@@ -94,14 +95,14 @@
         <option value="">All</option>
         <option value="clang">C</option>
         <option value="c++">C++</option>
-        <option value="py">Python</option>
-        <option value="java">Java</option>
-        <option value="rslang">Rust</option>
+        <option value="Python">Python</option>
+        <option value="Java">Java</option>
+        <option value="Rust">Rust</option>
         <option value="html">HTML</option>
         <option value="css">CSS</option>
         <option value="jslang">Javascript</option>
         <option value="svelte">Svelte</option>
-        <option value="sh">Shell</option>
+        <option value="Shell">Shell</option>
         <option value="lualang">Lua</option>
         <option value="ps2">PowerShell 2</option>
         <option value="godot">Godot Lang</option>
@@ -124,62 +125,7 @@
     <div class="project-container">
       {#each searchResults as project}
         <div class="project">
-          <!-- svelte-ignore a11y-missing-attribute -->
-          <h2 class="project-title">
-            {project.title}<br class="smaller-screen" /><br
-              class="smaller-screen"
-            /><a
-              class="project-status"
-              style="color: {project.statuscolor};border-color:{project.statuscolor}"
-              >{project.status}</a
-            ><a class="project-version">{project.version}</a>
-          </h2>
-          <p class="project-description">{project.description}</p>
-          <div class="project-bg">
-            <img
-              src="/project-banners{project.backgroud}"
-              alt=" "
-            />
-          </div>
-          <Padding />
-          <Padding />
-          <div class="project-links">
-            <div>
-              {#each Object.entries(project.links) as [platform, link]}
-                <a
-                  class="project-link"
-                  href={link}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  {#if platform === "GH"}
-                    <i class="fa fa-github" aria-hidden="true" />
-                  {:else if platform === "WB"}
-                    <i class="fa fa-globe" aria-hidden="true" />
-                  {:else if platform === "YT"}
-                    <i class="fa fa-youtube" aria-hidden="true" />
-                  {:else if platform === "TW"}
-                    <i class="fa fa-twitter" aria-hidden="true" />
-                  {:else if platform === "DC"}
-                    <i class="fa fa-discord" aria-hidden="true" />
-                  {:else if platform === "PT"}
-                    <i class="fa fa-patreon" aria-hidden="true" />
-                  {:else if platform === "SP"}
-                    <i class="fa fa-spotify" aria-hidden="true" />
-                  {:else if platform === "IG"}
-                    <i class="fa fa-instagram" aria-hidden="true" />
-                  {:else}
-                    {platform}
-                  {/if}
-                </a>
-              {/each}
-            </div>
-          </div>
-          <div>
-            <a class="download-button" href="{project.links.GH}"
-              >More Info</a
-            >
-          </div>
+          <ProjectComponent {project} />
         </div>
       {/each}
     </div>
@@ -203,120 +149,13 @@
   }
 
   .project {
-    transition: background-color 0.3s;
-    transition: filter 0.3s;
     position: relative;
-    padding: 20px;
     border-radius: 8px;
     overflow: hidden;
     cursor: pointer;
-    padding-bottom: 50px;
     border: 2px solid var(--project-border-color);
-  }
-
-  .project-bg {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: -1;
-    background-color: var(--project-background-color);
-  }
-
-  .project-bg img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    mask-image: linear-gradient(
-      to right,
-      rgba(0, 0, 0, 0.918),
-      rgba(0, 0, 0, 0)
-    );
-    transition: 0.3s;
-  }
-
-  .project:hover img {
-    -webkit-filter: blur(5px);
-    filter: blur(5px);
-  }
-
-  .project-title {
-    font-size: 20px;
-    font-weight: bold;
-    margin-bottom: 10px;
-    text-align: left;
-  }
-
-  .project-status {
-    font-size: 20px;
-    font-weight: bold;
-    margin-bottom: 10px;
-    margin-left: 10px;
-    margin-right: 10px;
-    padding: 2px;
-    padding-left: 5px;
-    padding-right: 5px;
-    border: 3px solid #dcdcdc;
-    border-radius: 3px;
-  }
-
-  .project-version {
-    font-size: 20px;
-    font-weight: bold;
-    color: white;
-    margin-bottom: 10px;
-    margin-left: 10px;
-    margin-right: 10px;
-    margin-top: -4px;
-    padding: 2px;
-    border: 3px solid #dcdcdc;
-    border-radius: 100px;
-    float: right;
-  }
-
-  .project-description {
-    margin-top: 20px;
-    margin-bottom: 10px;
-    margin-right: 12px;
-    text-align: right;
-  }
-
-  .project-links {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    position: absolute;
-    bottom: 20px;
-  }
-
-  .project-link {
-    display: inline-block;
-    margin-left: 10px;
-    color: var(--project-link-color);
-    text-decoration: none;
-    transition: color 0.3s;
-  }
-
-  .project-link:hover {
-    color: var(--project-link-color-hover);
-  }
-
-  .download-button {
-    margin-left: 10px;
-    color: white;
-    transition: color 0.3s;
-    background-color: rgb(25, 25, 100);
-    border-radius: 5px;
-    padding: 5px;
-    padding-left: 10px;
-    padding-right: 10px;
-    text-decoration: none;
-    border: 3px solid rgb(0, 0, 100);
-    position: absolute;
-    bottom: 20px;
-    right: 20px;
+    min-width: 200px;
+    background-color: var(--background-color);
   }
 
   .search-bar {
@@ -348,21 +187,9 @@
     padding-right: 10px;
   }
 
-  .smaller-screen {
-    display: none;
-  }
-
   @media only screen and (max-width: 620px) {
     .project-container {
       grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     }
-    .container {
-      width: 100%;
-      margin: 0;
-      padding: 0;
-    }
-    .smaller-screen {
-      display: block;
-    }
   }
 </style>
diff --git a/src/routes/projects/projects.json b/src/routes/projects/projects.json
index 0caf27c..a7a27eb 100644
--- a/src/routes/projects/projects.json
+++ b/src/routes/projects/projects.json
@@ -7,9 +7,9 @@
     "categories": [
       ""
     ],
-    "languages": [
-      ""
-    ],
+    "languages": {
+      "": 0
+    },
     "gh_api": "",
     "version": "",
     "backgroud": "",
@@ -29,9 +29,9 @@
     "categories": [
       "tools"
     ],
-    "languages": [
-      "py"
-    ],
+    "languages": {
+      "Python": 2558
+    },
     "gh_api": "J-onasJones/BashCommandAliasEditor",
     "version": "2.0.1",
     "backgroud": "/bashcmdaliaseditor.png",
@@ -52,15 +52,16 @@
       "fabric",
       "quilt"
     ],
-    "languages": [
-      "java"
-    ],
+    "languages": {
+      "Java": 26624
+    },
     "gh_api": "J-onasJones/BetterConsoleMC",
     "version": "1.0.0",
     "backgroud": "/betterconsolemc.png",
     "links": {
       "GH": "https://github.com/J-onasJones/BetterConsoleMC",
-      "MR": "https://modrinth.com/mod/betterconsolemc"
+      "MR": "https://modrinth.com/mod/betterconsolemc",
+      "CF": "https://www.curseforge.com/minecraft/mc-mods/betterconsolemc"
     },
     "visible": true,
     "last_update": 1695758182
@@ -78,9 +79,9 @@
       "quilt",
       "lib"
     ],
-    "languages": [
-      "java"
-    ],
+    "languages": {
+      "Java": 9776
+    },
     "gh_api": "J-onasJones/BetterSimpleConfig",
     "version": "1.0",
     "backgroud": "/bettersimpleconfig.png",
@@ -101,15 +102,16 @@
       "fabric",
       "quilt"
     ],
-    "languages": [
-      "java"
-    ],
+    "languages": {
+      "Java": 14706
+    },
     "gh_api": "J-onasJones/ConsoleMC",
     "version": "0.1.1",
     "backgroud": "/consolemc.png",
     "links": {
       "GH": "https://github.com/J-onasJones/ConsoleMC",
-      "MR": "https://modrinth.com/mod/consolemc"
+      "MR": "https://modrinth.com/mod/consolemc",
+      "CF": "https://www.curseforge.com/minecraft/mc-mods/consolemc"
     },
     "visible": true,
     "last_update": 1695316595
@@ -123,10 +125,10 @@
       "tools",
       "game"
     ],
-    "languages": [
-      "rslang",
-      "sh"
-    ],
+    "languages": {
+      "Rust": 25928,
+      "Shell": 8803
+    },
     "gh_api": "J-onasJones/dayz-linux-gui-launcher",
     "version": "0.1.0",
     "backgroud": "/dayzlauncher.png",
@@ -145,9 +147,9 @@
       "tools",
       "bazinga"
     ],
-    "languages": [
-      "py"
-    ],
+    "languages": {
+      "Python": 8729
+    },
     "gh_api": "J-onasJones/ImageConverter",
     "version": "ImageConerter-1.2",
     "backgroud": "/imageconverter.png",
@@ -166,9 +168,9 @@
       "tools",
       "bazinga"
     ],
-    "languages": [
-      "lua"
-    ],
+    "languages": {
+      "Lua": 100
+    },
     "gh_api": "J-onasJones/j2-technologies",
     "version": "0.2.1ALPHA",
     "backgroud": "/j2tech.png",
@@ -187,9 +189,9 @@
       "api",
       "tools"
     ],
-    "languages": [
-      "js"
-    ],
+    "languages": {
+      "JavaScript": 0
+    },
     "gh_api": "J-onasJones/jonas_jones-api",
     "version": "---",
     "backgroud": "/jjapi.png",
@@ -210,14 +212,16 @@
       "fabric",
       "quilt"
     ],
-    "languages": [
-      "java"
-    ],
+    "languages": {
+      "Java": 51381
+    },
     "gh_api": "J-onasJones/McWebserver",
     "version": "0.3.1",
     "backgroud": "/mcwebserver.png",
     "links": {
-      "GH": "https://github.com/J-onasJones/McWebserver"
+      "GH": "https://github.com/J-onasJones/McWebserver",
+      "MR": "https://modrinth.com/mod/mcwebserver",
+      "CF": "https://www.curseforge.com/minecraft/mc-mods/mcwebserver"
     },
     "visible": true,
     "last_update": 1695459555
@@ -232,9 +236,9 @@
       "mcmodding",
       "forge"
     ],
-    "languages": [
-      "java"
-    ],
+    "languages": {
+      "Java": 24337
+    },
     "gh_api": "J-onasJones/McWebserver-forge",
     "version": "0.2",
     "backgroud": "/mcwebserver.png",
@@ -255,9 +259,9 @@
       "tools",
       "bazinga"
     ],
-    "languages": [
-      "py"
-    ],
+    "languages": {
+      "Python": 100
+    },
     "gh_api": "J-onasJones/Make-ZIP-less-compact",
     "version": "1.1",
     "backgroud": "/mkzplsscmpct.png",
@@ -275,9 +279,10 @@
     "categories": [
       "tools"
     ],
-    "languages": [
-      "python"
-    ],
+    "languages": {
+      "Python": 3798,
+      "Shell": 189
+    },
     "gh_api": "J-onasJones/Markdown-Compiler",
     "version": "0.1",
     "backgroud": "/j2tech.png",
@@ -298,9 +303,9 @@
       "fabric",
       "quilt"
     ],
-    "languages": [
-      "java"
-    ],
+    "languages": {
+      "Java": 55421
+    },
     "gh_api": "J-onasJones/Microcraft",
     "version": "0.1+alpha1",
     "backgroud": "/microcraft.png",
@@ -319,9 +324,9 @@
       "minecraft",
       "tools"
     ],
-    "languages": [
-      "py"
-    ],
+    "languages": {
+      "Python": 5350
+    },
     "gh_api": "J-onasJones/Minecraft-server-Status",
     "version": "1.3",
     "backgroud": "/mcserverstatus.png",
@@ -340,9 +345,10 @@
       "minecraft",
       "tools"
     ],
-    "languages": [
-      "rslang"
-    ],
+    "languages": {
+      "Rust": 4062,
+      "Shell": 580
+    },
     "gh_api": "J-onasJones/moddah",
     "version": "0.1+alpha1",
     "backgroud": "/moddah.png",
@@ -363,9 +369,9 @@
       "fabric",
       "quilt"
     ],
-    "languages": [
-      "java"
-    ],
+    "languages": {
+      "Java": 100
+    },
     "gh_api": "J-onasJones/Mystery-core-mod",
     "version": "---",
     "backgroud": "/mysterymod.png",
@@ -386,9 +392,9 @@
       "fabric",
       "quilt"
     ],
-    "languages": [
-      "java"
-    ],
+    "languages": {
+      "Java": 100
+    },
     "gh_api": "J-onasJones/MysteryDimensions",
     "version": "0.1+alpha1",
     "backgroud": "/mysterymod.png",
@@ -409,9 +415,9 @@
       "fabric",
       "quilt"
     ],
-    "languages": [
-      "java"
-    ],
+    "languages": {
+      "Java": 100
+    },
     "gh_api": "J-onasJones/MysteryDungeons",
     "version": "0.1+alpha1",
     "backgroud": "/mysterymod.png",
@@ -432,9 +438,9 @@
       "fabric",
       "quilt"
     ],
-    "languages": [
-      "java"
-    ],
+    "languages": {
+      "Java": 1243
+    },
     "gh_api": "J-onasJones/MysteryMod",
     "version": "0.1+alpha1",
     "backgroud": "/mysterymod.png",
@@ -455,9 +461,9 @@
       "fabric",
       "quilt"
     ],
-    "languages": [
-      "java"
-    ],
+    "languages": {
+      "Java": 100
+    },
     "gh_api": "J-onasJones/MysteryRPG",
     "version": "0.1+alpha1",
     "backgroud": "/mysterymod.png",
@@ -478,15 +484,16 @@
       "fabric",
       "quilt"
     ],
-    "languages": [
-      "java"
-    ],
+    "languages": {
+      "Java": 15096
+    },
     "gh_api": "J-onasJones/NotEnoughCursedness",
     "version": "0.2",
     "backgroud": "/notenoughcursedness.png",
     "links": {
       "GH": "https://github.com/J-onasJones/NotEnoughCursedness",
-      "MR": "https://modrinth.com/mod/not-enough-cursedness"
+      "MR": "https://modrinth.com/mod/not-enough-cursedness",
+      "CF": "https://www.curseforge.com/minecraft/mc-mods/not-enough-cursedness"
     },
     "visible": true,
     "last_update": 1695317123
@@ -499,11 +506,11 @@
     "categories": [
       "tools"
     ],
-    "languages": [
-      "c++",
-      "rslang",
-      "c"
-    ],
+    "languages": {
+      "C++": 40828,
+      "Rust": 3278,
+      "C": 130
+    },
     "gh_api": "J-onasJones/PI-server-rack",
     "version": "0.1+alpha1",
     "backgroud": "/pi-server-rack.png",
@@ -522,9 +529,9 @@
       "bot",
       "dcbot"
     ],
-    "languages": [
-      "js"
-    ],
+    "languages": {
+      "JavaScript": 4282
+    },
     "gh_api": "J-onasJones/PinBoardBot",
     "version": "0.1",
     "backgroud": "/pinboardbot.png",
@@ -542,9 +549,9 @@
     "categories": [
       "lib"
     ],
-    "languages": [
-      "py"
-    ],
+    "languages": {
+      "Python": 100
+    },
     "gh_api": "J-onasJones/pyterm2d",
     "version": "---",
     "backgroud": "/pyterm2d.png",
@@ -563,9 +570,9 @@
       "lib",
       "tools"
     ],
-    "languages": [
-      "rslang"
-    ],
+    "languages": {
+      "Rust": 100
+    },
     "gh_api": "J-onasJones/Qr-generator",
     "version": "---",
     "backgroud": "/qrgen.png",
@@ -585,16 +592,16 @@
       "tools",
       "bazinga"
     ],
-    "languages": [
-      "py"
-    ],
+    "languages": {
+      "Python": 100
+    },
     "gh_api": "J-onasJones/Resourcepack-Editor",
     "version": "0.1+alpha1",
     "backgroud": "/rp-editor.png",
     "links": {
       "GH": "https://github.com/J-onasJones/Resourcepack-Editor"
     },
-    "visible": true,
+    "visible": false,
     "last_update": 1642114800
   },
   {
@@ -605,9 +612,7 @@
     "categories": [
       "minecraft"
     ],
-    "languages": [
-      ""
-    ],
+    "languages": {},
     "gh_api": "J-onasJones/simp-resourcepack",
     "version": "1.0",
     "backgroud": "/simp-rp.png",
@@ -628,9 +633,9 @@
       "fabric",
       "quilt"
     ],
-    "languages": [
-      "java"
-    ],
+    "languages": {
+      "Java": 1291
+    },
     "gh_api": "J-onasJones/SpotifyMC",
     "version": "0.1+alpha1",
     "backgroud": "/spotifymc.png",
@@ -649,10 +654,12 @@
       "webdev",
       "template"
     ],
-    "languages": [
-      "svelte",
-      "markdown"
-    ],
+    "languages": {
+      "Svelte": 2675,
+      "JavaScript": 1505,
+      "CSS": 395,
+      "HTML": 329
+    },
     "gh_api": "J-onasJones/SvelteMarkdownWiki",
     "version": "1.0",
     "backgroud": "/homepage.png",
@@ -673,9 +680,9 @@
       "fabric",
       "quilt"
     ],
-    "languages": [
-      "java"
-    ],
+    "languages": {
+      "Java": 21878
+    },
     "gh_api": "J-onasJones/SyncMod",
     "version": "0.1+alpha1",
     "backgroud": "/syncmod.png",
@@ -693,9 +700,9 @@
     "categories": [
       "game"
     ],
-    "languages": [
-      "godot"
-    ],
+    "languages": {
+      "Godot": 100
+    },
     "gh_api": "J-onasJones/TheBobbycarGame",
     "version": "---",
     "backgroud": "/bobbycargame.png",
@@ -714,12 +721,12 @@
       "webdev",
       "website"
     ],
-    "languages": [
-      "css",
-      "svelte",
-      "js",
-      "html"
-    ],
+    "languages": {
+      "Svelte": 36691,
+      "CSS": 5152,
+      "JavaScript": 618,
+      "HTML": 406
+    },
     "gh_api": "J-onasJones/jonasjones.dev",
     "version": "1.1.1",
     "backgroud": "/homepage.png",
@@ -727,7 +734,7 @@
       "GH": "https://github.com/J-onasJones/jonasjones.dev"
     },
     "visible": true,
-    "last_update": 1695835918
+    "last_update": 1695836051
   },
   {
     "title": "Website V1",
@@ -738,16 +745,16 @@
       "webdev",
       "website"
     ],
-    "languages": [
-      "html",
-      "css",
-      "js"
-    ],
+    "languages": {
+      "HTML": 234599,
+      "CSS": 39007
+    },
     "gh_api": "J-onasJones/Website-v1",
     "version": "1.0",
     "backgroud": "/oldwebsite.png",
     "links": {
-      "GH": "https://github.com/J-onasJones/Website-v1"
+      "GH": "https://github.com/J-onasJones/Website-v1",
+      "WB": "https://old.jonasjones.me"
     },
     "visible": true,
     "last_update": 1694470228
@@ -760,11 +767,11 @@
     "categories": [
       "game"
     ],
-    "languages": [
-      "js",
-      "css",
-      "html"
-    ],
+    "languages": {
+      "HTML": 100,
+      "JavaScript": 100,
+      "CSS": 100
+    },
     "gh_api": "J-onasJones/Winception",
     "version": "0.1+alpha1",
     "backgroud": "/winception.png",
@@ -782,10 +789,9 @@
     "categories": [
       "tools"
     ],
-    "languages": [
-      "py",
-      "rslang"
-    ],
+    "languages": {
+      "Python": 26637
+    },
     "gh_api": "J-onasJones/WindowsBloatwareRemover",
     "version": "0.1.2",
     "backgroud": "/bloatremover.png",
@@ -803,9 +809,9 @@
     "categories": [
       "tools"
     ],
-    "languages": [
-      "rslang"
-    ],
+    "languages": {
+      "Rust": 100
+    },
     "gh_api": "J-onasJones/windows-info-overlay",
     "version": "---",
     "backgroud": "/winoverlay.png",
diff --git a/src/scripts/langs.js b/src/scripts/langs.js
new file mode 100644
index 0000000..1ade614
--- /dev/null
+++ b/src/scripts/langs.js
@@ -0,0 +1,41 @@
+let language_colors = {
+    "JavaScript": "#f1e05a",
+    "HTML": "#e34c26",
+    "CSS": "#563d7c",
+    "Python": "#3572A5",
+    "Java": "#b07219",
+    "C++": "#f34b7d",
+    "C": "#555555",
+    "Rust": "#dea584",
+    "Svelte": "#ff3e00",
+    "TypeScript": "#2b7489",
+    "Shell": "#89e051",
+    "PHP": "#4F5D95",
+    "Ruby": "#701516",
+    "Go": "#00ADD8",
+    "Dart": "#00B4AB",
+    "Kotlin": "#F18E33",
+    "Swift": "#ffac45",
+    "Scala": "#c22d40",
+    "Objective-C": "#438eff",
+    "Lua": "#000080",
+    "Perl": "#0298c3",
+    "CoffeeScript": "#244776",
+    "PowerShell": "#012456",
+    "Haskell": "#5e5086",
+    "Clojure": "#db5855",
+    "TeX": "#3D6117",
+    "Elixir": "#6e4a7e",
+    "R": "#198CE7",
+    "Vim script": "#199f4b",
+    "Assembly": "#6E4C13",
+    "D": "#ba595e",
+    "OCaml": "#3be133",
+    "Emacs Lisp": "#c065db",
+    "Crystal": "#000100",
+    "Vue": "#2c3e50",
+    "Julia": "#a270ba",
+    "Nim": "#ffc200"
+};
+
+export { language_colors };