diff --git a/app.py b/app.py
index f207df0..1679628 100644
--- a/app.py
+++ b/app.py
@@ -12,7 +12,6 @@ import colorthief
 
 LASTFM_API_KEY = dotenv.get_key('./.env', 'LASTFM')
 
-
 app = Flask(__name__)
 Compress(app)
 
@@ -22,18 +21,15 @@ Compress(app)
 #
 @app.route('/')
 def index():
-    msg = ['Don\'t cry because it\'s over, smile because it happened',
-           'This could go one of two ways...',
-           'Gwa Gwa',
-           'It\'s a UNIX system! I know this!',
-           '*internal screaming*',
-           'Don\'t forget to drink water!',
-           'I wish we were better strangers.',
-           'If I were you, I\'d run now',
-           'SILICA GEL "DO NOT EAT".',
-           'Gods die too.',
-           'Eat hotchip and lie']
-    
+    msg = [
+        'Don\'t cry because it\'s over, smile because it happened',
+        'This could go one of two ways...', 'Gwa Gwa',
+        'It\'s a UNIX system! I know this!', '*internal screaming*',
+        'Don\'t forget to drink water!', 'I wish we were better strangers.',
+        'If I were you, I\'d run now', 'SILICA GEL "DO NOT EAT".',
+        'Gods die too.', 'Eat hotchip and lie'
+    ]
+
     return render_template('index.html', msg=choice(msg))
 
 
@@ -44,29 +40,115 @@ def cretura():
 
 @app.route('/about')
 def about():
-    return render_template('about.html')
+    """
+    Returns a dict with all the languages I know and their level of knowledge
+    0 = Absolute beginner
+    1 = Basics
+    2 = Intermediate
+    3 = Advanced
+    4 = Expert
+    5 = Undefeated
+    """
+    languages = {
+        'Python': {
+            'level': 3,
+            'since': '2020',
+            'color': '#3776AB',
+        },
+        'HTML': {
+            'level': 4,
+            'since': '2021',
+            'color': '#E34F26',
+        },
+        'CSS': {
+            'level': 3,
+            'since': '2021',
+            'color': '#1572B6',
+        },
+        'JavaScript': {
+            'level': 2,
+            'since': '2022',
+            'color': '#F7DF1E',
+        },
+        'Sass/SCSS': {
+            'level': 4,
+            'since': '2022',
+            'color': '#CC6699',
+        },
+        'PHP': {
+            'level': 2,
+            'since': '2022',
+            'color': '#777BB4',
+        },
+        'SQL': {
+            'level': 1,
+            'since': '2022',
+            'color': '#4479A1',
+        },
+        'Scratch': {
+            'level': 5,
+            'since': '2015',
+            'color': '#FFD500',
+        },
+        'Shell': {
+            'level': 2,
+            'since': '2021',
+            'color': '#89E051',
+        },
+        'Rust': {
+            'level': 0,
+            'since': '2023',
+            'color': '#CE422B',
+        },
+    }
+    
+    systems = {
+        'Ubuntu': {
+            'level': 2,
+            'since': '2022',
+            'color': '#E95420',
+        },
+        'Arch': {
+            'level': 3,
+            'since': '2021',
+            'color': '#1793D1',
+        },
+        'Proxmox': {
+            'level': 2,
+            'since': '2021',
+            'color': '#E57000',
+        },
+        'Windows': {
+            'level': 1,
+            'since': '2011',
+            'color': '#0078D6',
+        },
+    }
+    return render_template('about.html', languages=languages, systems=systems)
 
 
 @app.route('/music', methods=['GET', 'POST'])
 def music():
     if request.method == 'POST':
         current_tracks = requests.get(
-        f'http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=Fluffy_Bean_&api_key={LASTFM_API_KEY}&limit=5&format=json')
+            f'http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=Fluffy_Bean_&api_key={LASTFM_API_KEY}&limit=5&format=json'
+        )
         current_tracks = json.loads(current_tracks.text)
-        
+
         tracks = []
-        
+
         for track in current_tracks['recenttracks']['track']:
             # As django is weird with @attr in json data
             # I make a new dict with a bool for nowPlaying
             nowPlaying = False
             if '@attr' in track:
                 nowPlaying = True
-                
+
             # Yoink color palette from album art
-            color_thief = colorthief.ColorThief(requests.get(track['image'][2]['#text'], stream=True).raw)
+            color_thief = colorthief.ColorThief(
+                requests.get(track['image'][2]['#text'], stream=True).raw)
             palette = color_thief.get_palette()
-                
+
             tmp_track = {
                 'name': track['name'],
                 'artist': track['artist']['#text'],
@@ -76,14 +158,15 @@ def music():
                 'nowPlaying': nowPlaying,
                 'palette': palette[0]
             }
-            
+
             tracks.append(tmp_track)
-            
+
         return jsonify(tracks)
-    
+
     # GET request
     return render_template('music.html')
 
+
 #
 #   ERROR HANDLERS
 #
diff --git a/static/css/style.sass b/static/css/style.sass
index 25f243d..a6c1aa4 100644
--- a/static/css/style.sass
+++ b/static/css/style.sass
@@ -130,7 +130,7 @@ nav
 
     z-index: 2
     box-sizing: border-box
-    overflow: hidden
+    //overflow: hidden
 
     h1
         margin: 0 // 0 1rem 0
@@ -220,64 +220,75 @@ p.subtitle
     justify-content: space-between
     gap: 0.5rem
 
-    overflow: hidden
+    //overflow: hidden
+
+.bar-chart
+    margin: 0
+    padding: 0
 
-$languages: ("python": #3776AB, "js": #F7DF1E, "html": #E34F26, "css": #1572B6, "sass": #CC6699, "php": #777BB4, "sql": #4479A1, "shell": #89E051, "rust": #CE422B)
-$os: ("ubuntu": #E95420, "arch": #1793D1, "proxmox": #E57000, "manjaro": #35BF5C, "windows": #0078D6)
-.sub_experiance
-    padding-left: 0.25rem !important
     position: relative
-    color: $white !important
+    
+    display: flex
+    flex-direction: column
+    gap: 0.5rem
 
-    &::before
-        content: ''
+.marker
+    width: 2px
+    height: 100%
 
-        width: 2px
+    position: absolute
+    top: 0
+    left: 0
+
+    background-color: rgba($white, 0.1)
+
+    z-index: -2
+
+.sub_experiance
+    width: 0%
+    height: 1.69rem
+
+    position: relative
+
+    background-color: $primary
+    border-radius: 2px
+
+    transition: width 2s cubic-bezier(.86,0,.07,1)
+
+    .fg
+        width: 100%
         height: 100%
 
         position: absolute
-        top: 0
-        left: 0
 
-        background-color: $primary
-        border-radius: 2px
+        overflow: hidden
+
+        span
+            position: absolute
+            top: 50%
+            left: 1.5rem
+            transform: translateY(-50%)
+
+            font-size: 0.9rem
+            font-weight: 600
+            white-space: nowrap
+
+            color: $black
+
+    .bg
+        position: absolute
+        top: 50%
+        left: 1.5rem
+        transform: translateY(-50%)
+
+        font-size: 0.9rem
+        font-weight: 600
+        white-space: nowrap
+
+        color: $white
 
-        opacity: 0.5
         z-index: -1
 
-    @each $lang, $color in $languages
-        &.#{$lang}
-            &::before
-                background-color: $color
-
-    @each $os, $color in $os
-        &.#{$os}
-            &::before
-                background-color: $color
-
-    &.vbad
-        &::before
-            width: 2px
-    &.bad
-        &::before
-            width: 10%
-    &.ok
-        &::before
-            width: 20%
-    &.good
-        &::before
-            width: 40%
-    &.vgood
-        &::before
-            width: 80%
-    &.excellent
-        &::before
-            width: 100%
-
-    span
-        font-size: 0.8rem
-
-
 @keyframes loader
     0%
         width: 0
@@ -338,8 +349,13 @@ $os: ("ubuntu": #E95420, "arch": #1793D1, "proxmox": #E57000, "manjaro": #35BF5C
 .track-image
     padding: 0px
 
+    // Its too late for me to be bothered to fix a bug I have
+    min-width: 5rem
     width: 5rem
+    max-width: 5rem
+    min-height: 5rem
     height: 5rem
+    max-height: 5rem
 
     border-radius: 2px
     background-color: $black
diff --git a/templates/about.html b/templates/about.html
index e831734..0711613 100644
--- a/templates/about.html
+++ b/templates/about.html
@@ -26,24 +26,79 @@
     </div>
 
     <div class="content">
-        <h2 data-value="Languages">Languages</h2>
-        <p class="sub_experiance python good">Python <span>Good</span></p>
-        <p class="sub_experiance html vgood">HTML <span>Very Good</span></p>
-        <p class="sub_experiance css vgood">CSS <span>Very Good</span></p>
-        <p class="sub_experiance sass vgood">Sass/SCSS <span>Very Good</span></p>
-        <p class="sub_experiance js bad">JavaScript <span>Meh</span></p>
-        <p class="sub_experiance php good">PHP <span>Good</span></p>
-        <p class="sub_experiance sql ok">SQL <span>Ok</span></p>
-        <p class="sub_experiance shell ok">Shell Scripting <span>Ok</span></p>
-        <p class="sub_experiance rust vbad">Rust <span>Learning</span></p>
+        <h2 data-value="Level of knowlage">Level of knowlage</h2>
+        <p>My levels of knowlage are based on a scale of 0-5, with 0 being very little experiance and 5 being best in the world, obviously ;3</p>
+
+        <span class="bar-chart">
+            <h3 data-value="Languages">Languages</h3>
+            {% for lang in languages %}
+                <span class="sub_experiance"
+                    data-value="{{ languages[lang].level }}"
+                    style="background-color: {{ languages[lang].color }};">
+                    <span class="fg"><span>{{ lang }} - Since {{ languages[lang].since }}</span></span>
+                    <span class="bg">{{ lang }} - Since {{ languages[lang].since }}</span>
+                </span>
+            {% endfor %}
+
+            <h3 data-value="OS'">OS'</h3>
+            {% for os in systems %}
+                <span class="sub_experiance"
+                    data-value="{{ systems[os].level }}"
+                    style="background-color: {{ systems[os].color }};">
+                    <span class="fg"><span>{{ os }} - Since {{ systems[os].since }}</span></span>
+                    <span class="bg">{{ os }} - Since {{ systems[os].since }}</span>
+                </span>
+            {% endfor %}
+
+            <span class="marker" data-value="0"></span>
+            <span class="marker" data-value="1"></span>
+            <span class="marker" data-value="2"></span>
+            <span class="marker" data-value="3"></span>
+            <span class="marker" data-value="4"></span>
+        </span>
     </div>
 
-    <div class="content">
-        <h2 data-value="OS'">OS'</h2>
-        <p class="sub_experiance ubuntu good">Ubuntu <span>Good</span></p>
-        <p class="sub_experiance arch vgood">Arch <span>Very Good</span></p>
-        <p class="sub_experiance proxmox ok">Proxmox <span>Decent</span></p>
-        <p class="sub_experiance manjaro bad">Manjaro <span>Breaking bad</span></p>
-        <p class="sub_experiance windows ok">Windows <span>Ok</span></p>
-    </div>
+    <script>
+        var bars = document.querySelectorAll(".sub_experiance");
+    
+        bars.forEach(bar => {
+            var value = bar.getAttribute("data-value");
+            
+            // 0 - 5
+            if (value == 0) {
+                bar.style.width = "20%";
+            } else if (value == 1) {
+                bar.style.width = "40%";
+            } else if (value == 2) {
+                bar.style.width = "60%";
+            } else if (value == 3) {
+                bar.style.width = "80%";
+            } else if (value == 4) {
+                bar.style.width = "100%";
+            } else if (value == 5) {
+                bar.style.width = "621%";
+            }
+        });
+
+        var markers = document.querySelectorAll(".marker");
+    
+        markers.forEach(bar => {
+            var value = bar.getAttribute("data-value");
+            
+            // 0 - 5
+            if (value == 0) {
+                bar.style.left = "20%";
+            } else if (value == 1) {
+                bar.style.left = "40%";
+            } else if (value == 2) {
+                bar.style.left = "60%";
+            } else if (value == 3) {
+                bar.style.left = "80%";
+            } else if (value == 4) {
+                bar.style.left = "100%";
+            } else if (value == 5) {
+                bar.style.left = "621%";
+            }
+        });
+    </script>
 {% endblock %}
\ No newline at end of file