diff --git a/snowpack.config.js b/snowpack.config.js
index 677863be972134320aa6a3e7e0fe69df8641cf37..d00f2eceb10c1baad9e7ebef38ba91c679ef6d26 100644
--- a/snowpack.config.js
+++ b/snowpack.config.js
@@ -5,11 +5,10 @@ module.exports = {
     src: { url: '/dist' },
   },
   plugins: [
-    '@snowpack/plugin-react-refresh',
     '@snowpack/plugin-dotenv',
+    '@snowpack/plugin-react-refresh',
     '@snowpack/plugin-typescript',
     '@snowpack/plugin-postcss',
-    '@snowpack/plugin-dotenv',
   ],
   routes: [
     /* Enable an SPA Fallback in development: */
diff --git a/src/components/Form/TagInput.tsx b/src/components/Form/TagInput.tsx
index c6f87b5a3fa8c6c36308d7fa75778d7f01123aee..87b96be82695bf4256e75aeb1e568b4d6bb238f8 100644
--- a/src/components/Form/TagInput.tsx
+++ b/src/components/Form/TagInput.tsx
@@ -80,7 +80,7 @@ const TagInput: React.FC<Props> = ({ label, tags, options, onTagsChange, require
         <div className="flex flex-wrap items-center flex-1 p-2">
           {tags.map((selectedTag) => (
             <Tag
-              key={`selected${selectedTag.id}`}
+              key={`selected${selectedTag.color}`}
               onClickDelete={() => handleClickDeleteTag(selectedTag)}
               color={selectedTag.color}
             >
diff --git a/src/components/Map/MapLayerControl.tsx b/src/components/Map/MapLayerControl.tsx
index 285fc56de6180da0afb56312ae5116480c476b14..3313c16dae03a2fee5cc532d9e6fb1b73948aac2 100644
--- a/src/components/Map/MapLayerControl.tsx
+++ b/src/components/Map/MapLayerControl.tsx
@@ -18,7 +18,7 @@ const MapLayerControl: React.FC = () => {
   };
 
   return (
-    <div className="border-2 border-black w-48 border-opacity-20 rounded-lg absolute right-0 bottom-0 mb-4 mr-4 bg-white p-4 z-10">
+    <div className="border-2 border-black w-52 border-opacity-20 rounded-lg absolute right-0 bottom-0 mb-4 mr-4 bg-white p-4 z-10">
       <div className={`flex justify-between cursor-pointer ${isOpen ? 'mb-2' : ''}`} onClick={() => setIsOpen(!isOpen)}>
         <h3 className="text-base font-semibold text-gray-900">Kategorien:</h3>
         <DownIcon
@@ -28,7 +28,7 @@ const MapLayerControl: React.FC = () => {
       {isOpen &&
         layers.map((layer) => {
           return (
-            <div key={layer}>
+            <div key={layer} className="my-2">
               <label className="inline-flex items-center">
                 <input
                   type="checkbox"
diff --git a/src/components/Sidebar/ListElement.tsx b/src/components/Sidebar/ListElement.tsx
index a088eceabc064bd7d732480c87ff393c150bd684..18919b85fa9884c78d62e31829e99f737fcdad20 100644
--- a/src/components/Sidebar/ListElement.tsx
+++ b/src/components/Sidebar/ListElement.tsx
@@ -16,7 +16,7 @@ const ListElement: React.FC<Props> = ({ value, hovered, ...restProps }) => {
         {...restProps}
         className={`border-2 border-black border-opacity-20 ${
           hovered ? 'border-opacity-40' : 'hover:border-opacity-40'
-        } cursor-pointer rounded-lg md:overflow-hidden mx-4 my-2`}
+        } cursor-pointer rounded-lg mx-4 my-2`}
       >
         <div className="p-3">
           <h2 className="tracking-widest text-xs uppercase title-font font-medium text-gray-400 mb-1">
diff --git a/src/util/color.ts b/src/util/color.ts
index 0b6b03f52a36e013b976cccdac3efd91456dccc8..0052acceddcce7771f25f638c256de9c1d259522 100644
--- a/src/util/color.ts
+++ b/src/util/color.ts
@@ -1,6 +1,6 @@
-export function generateRandomHslColor(saturation = 100, lightness = 50): string {
-  const randomHue = getRandomIntInclusive(0, 360);
-  const color = `hsl(${randomHue},${saturation}%,${lightness}%)`;
+export function generateRandomHslColor(saturation = 100, lightness = 50, distinctValues = 20): string {
+  const randomColorIndex = getRandomIntInclusive(0, distinctValues);
+  const color = `hsl(${Math.floor(randomColorIndex * (360 / distinctValues))},${saturation}%,${lightness}%)`;
   return color;
 }