diff --git a/web/src/components/UserPart/UserPart.js b/web/src/components/UserPart/UserPart.js
index 5596649..83256b2 100644
--- a/web/src/components/UserPart/UserPart.js
+++ b/web/src/components/UserPart/UserPart.js
@@ -1,12 +1,11 @@
 function UserPart({ userName, partName }) {
   return (
     <h3 className="text-xl font-roboto">
-    <span className="border-2 border-indigo-800 mr-1"></span>
+      <div className="w-1 inline-block text-indigo-800 bg-indigo-800 mr-2">.</div>
       <span className="text-gray-500">
         {userName}
       </span>
-      <span className="border-2 border-gray-400 mx-1 transform -skew-x-12">
-      </span>
+      <div className="w-1 inline-block bg-gray-400 text-gray-400 mx-3 transform -skew-x-20" >.</div>
       <span className="text-indigo-800">
         {partName}
       </span>
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 35fa635..c15b6f2 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -20,6 +20,9 @@ module.exports = {
         'ropa-sans': ['Ropa Sans', 'Arial', 'sans-serif'],
         'roboto': ['Roboto', 'Arial', 'sans-serif'],
       },
+      skew: {
+        '-20': "-20deg"
+      }
     }
   },
   variants: {},