diff --git a/src/components/profile/SkillManagement.tsx b/src/components/profile/SkillManagement.tsx
index b44d3e6580b72a4764f6f468c7c73abfead60590..a193ce4f39458827d9d767b7c4e027630857e8ee 100644
--- a/src/components/profile/SkillManagement.tsx
+++ b/src/components/profile/SkillManagement.tsx
@@ -9,14 +9,18 @@ function UserSkillBit({
   onDelete,
   skillName,
   onClick,
+  selected,
 }: {
   skillName: string;
   onDelete: () => void;
   onClick: () => void;
+  selected: boolean;
 }) {
   return (
     <div
-      className="flex gap-2 bg-primary text-white px-4 py-2 rounded-md btn btn-neutral"
+      className={`normal-case flex gap-2 bg-primary text-white px-4 py-2 rounded-md btn btn-neutral ${
+        selected ? "brightness-110" : ""
+      }`}
       onClick={onClick}
     >
       <p>{skillName}</p>
@@ -38,20 +42,20 @@ function AllSkillBit({
   onClick,
   onAdd,
   alreadyOwned,
+  selected,
 }: {
   skillName: string;
   onAdd: () => void;
   onClick: () => void;
   alreadyOwned: boolean;
+  selected: boolean;
 }) {
   return (
     <div
-      className="flex w-full bg-primary normal-case text-white px-4 py-2 rounded-md btn btn-neutral"
-      onClick={() => {
-        if (!alreadyOwned) {
-          onClick();
-        }
-      }}
+      className={`flex w-full bg-gray-800 normal-case text-white px-4 py-2 rounded-md btn btn-neutral ${
+        selected ? "bg-gray-600" : ""
+      }`}
+      onClick={onClick}
     >
       <p>{skillName}</p>
       <div className="flex-grow"></div>
@@ -59,7 +63,9 @@ function AllSkillBit({
         className="px-2 py-0 bg-transparent"
         onClick={(e) => {
           e.stopPropagation();
-          onAdd();
+          if (!alreadyOwned) {
+            onAdd();
+          }
         }}
       >
         +
@@ -155,7 +161,12 @@ function SkillManagement() {
           if (!oldSkills) {
             return oldSkills;
           }
-          return [addedSkill, ...(previousUserSkill ?? [])];
+
+          const result = [...(previousUserSkill ?? []), addedSkill];
+          result.sort(({ skillName: skillName1 }, { skillName: skillName2 }) =>
+            skillName1.localeCompare(skillName2)
+          );
+          return result;
         }
       );
       return { previousUserSkill };
@@ -172,16 +183,21 @@ function SkillManagement() {
     <div className="flex flex-col lg:grid grid-cols-2 grid-rows-2 w-full gap-4 lg:gap-6">
       <div className="w-full flex flex-col items-center row-span-1 col-span-1 row-start-1 col-start-1">
         {userSkillsStatus === "success" && userSkills ? (
-          <div className="flex flex-row flex-wrap gap-2">
-            {userSkills.map((skill) => (
-              <UserSkillBit
-                onClick={() => setSelectedSkill(skill)}
-                skillName={skill.skillName}
-                key={skill.skillName}
-                onDelete={() => removeUserSkillMutation(skill)}
-              />
-            ))}
-          </div>
+          userSkills.length === 0 ? (
+            <p>You have no skills!</p>
+          ) : (
+            <div className="flex flex-row flex-wrap gap-2">
+              {userSkills.map((skill) => (
+                <UserSkillBit
+                  selected={selectedSkill?.skillName === skill.skillName}
+                  onClick={() => setSelectedSkill(skill)}
+                  skillName={skill.skillName}
+                  key={skill.skillName}
+                  onDelete={() => removeUserSkillMutation(skill)}
+                />
+              ))}
+            </div>
+          )
         ) : (
           "Loading"
         )}
@@ -194,10 +210,11 @@ function SkillManagement() {
         userSkills ? (
           <p>Loading</p>
         ) : (
-          <div className="w-full min-h-[18.75rem] rounded-lg overflow-y-scroll">
+          <div className="w-full h-[18.75rem] bg-slate-600 px-3 py-3 lg:px-6 lg:py-6 flex flex-col rounded-lg overflow-y-scroll gap-2">
             {allSkillsProcessor(allSkills ?? [], userSkills ?? []).map(
               ({ alreadyOwned, description, skillName }) => (
                 <AllSkillBit
+                  selected={selectedSkill?.skillName === skillName}
                   alreadyOwned={alreadyOwned}
                   onAdd={() => addUserSkillMutation({ skillName, description })}
                   onClick={() => setSelectedSkill({ description, skillName })}
diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx
index 22015ae03f0b1b0e637fb46e3db967590eb6cb1b..4dd35b6a3eaa261df9cbae9cf1c2bff0012414cd 100644
--- a/src/pages/Profile.tsx
+++ b/src/pages/Profile.tsx
@@ -26,7 +26,7 @@ function Profile() {
           <h1 className="text-3xl font-bold self-start">Profile</h1>
           {user === undefined ? <p>Loading...</p> : <ProfileForm user={user} />}
         </section>
-        <section className="w-full flex flex-col items-start lg:items-center">
+        <section className="w-full flex flex-col items-start lg:items-center gap-4">
           <h2 className="text-2xl font-bold self-start">Skills</h2>
           <div className="w-full flex flex-col items-start">
             <SkillManagement />