diff --git a/README.md b/README.md
index 3c2c3966..31332ca1 100644
--- a/README.md
+++ b/README.md
@@ -40,19 +40,6 @@ use the [Map UI Component](/docs/utopia-ui/map-components/map)
 ```
 You can find some Sample Data (places, events, tags) for test purpose below
 
-### Options
-
-
- Option         | Type              | Default      | Required   | Description 
- ---            | ---               | ---          | ---        | ---    
- `height`       | `string`          |`'400px'`     |    No      | height of the map           
- `width`        | `string`          |`'100vw'`     |    No      | width of the map
- `center`       | `LatLng`          |`[50.6, 9.5]` |    No      | initial map position           
- `zoom`         | `number`          |`10`          |    No      | initial zoom level
- `places`       | [`Item[]`](https://utopia-os.org/docs/utopia-ui/map-components/item)|         |  No         | Array with Items           
- `events`       | [`Item[]`](https://utopia-os.org/docs/utopia-ui/map-components/item)|         |  No         | Array with Items             
- `tags`       | [`Tag[]`](https://utopia-os.org/docs/utopia-ui/map-components/tag)    |         |  No         | Array with Tags  
-
 ### Sample Data
 ```jsx
 const places = [{
@@ -91,6 +78,19 @@ const tags = [
 
 ```
 
+### Options
+
+
+ Option         | Type              | Default      | Required   | Description 
+ ---            | ---               | ---          | ---        | ---    
+ `height`       | `string`          |`'400px'`     |    No      | height of the map           
+ `width`        | `string`          |`'100vw'`     |    No      | width of the map
+ `center`       | `LatLng`          |`[50.6, 9.5]` |    No      | initial map position           
+ `zoom`         | `number`          |`10`          |    No      | initial zoom level
+ `places`       | [`Item[]`](https://utopia-os.org/docs/utopia-ui/map-components/item)|    `{}`      |  No         | Array with Items           
+ `events`       | [`Item[]`](https://utopia-os.org/docs/utopia-ui/map-components/item)|  `{}`        |  No         | Array with Items             
+ `tags`       | [`Tag[]`](https://utopia-os.org/docs/utopia-ui/map-components/tag)    |  `{}`       |  No         | Array with Tags  
+ 
  ## Coming Soon
 
  * Profile UI Component
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 00000000..28d577f0
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {},
+    }
+  }
+  
\ No newline at end of file
diff --git a/src/Components/Map/MarkerPopup.tsx b/src/Components/Map/MarkerPopup.tsx
index 92cbbf9c..22d3b200 100644
--- a/src/Components/Map/MarkerPopup.tsx
+++ b/src/Components/Map/MarkerPopup.tsx
@@ -12,11 +12,26 @@ const MarkerPopup = (props: MarkerPopupProps) => {
   const tags: Tag[] = props.tags;
 
   return (
-    <Popup maxHeight={377} minWidth={275} maxWidth={275} autoPanPadding={[30,30]}>
+    <Popup maxHeight={320} minWidth={275} maxWidth={275} autoPanPadding={[30, 30]}>
       <b className="text-xl font-bold">{item.name}</b>
-
       {item.start && item.end &&
-        <p>{new Date(item.start).toISOString().substring(0, 10) || ""} - {new Date(item.end).toISOString().substring(0, 10) || ""}</p>
+        <div className="flex flex-row">
+          <div className="basis-2/5">
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+            </svg>
+            <span className='align-middle'>{new Date(item.start).toISOString().substring(0, 10) || ""}</span>
+          </div>
+          <div className="basis-1/5 place-content-center">
+            <span>-</span>
+          </div>
+          <div className="basis-2/5">
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+            </svg>
+            <span className='align-middle leading-6'>{new Date(item.end).toISOString().substring(0, 10) || ""}</span>
+          </div>
+        </div>
       }
 
       <p style={{ whiteSpace: "pre-wrap" }} dangerouslySetInnerHTML={{ __html: replaceURLs(item.text) }} />
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 00000000..e4c1748e
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.leaflet-data-marker {
+
+    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAQCAYAAACcN8ZaAAAB3klEQVR42s3U4UdDURzG8czMXJnJ1Vwzc6VJZjaZJdlMlpQsKdmUFNOUspRSSqUolfQfr+fF98Vx5mwv9qbDx7LdznnO7/7Omej3+/+Ga0QMUYkhbvBgmhzCQxwxibIGrGEF8CQhU+LLtKQkQNqScUgjxRxTBIxbgfgD/BgnhM8kM5KTeclLQYqGkkMRBckzR8ic/mAgd5BAZplsUaqyIg2sDtHg2brUZJk5SmwopErJUWE8SpmTMhNvya60Zd/SNrR4bkeaskG4uiwRZk6yrJEYFibGAxn+scECHTmTnuVCzvmty3PHciB7bGKN6lQkzysPqIrHmpFhYbKUtckC1/Ioz4ZHuZdbuSLYiRxRpSZVWXZVxAzC0R4Ik5SQsu6w8yd5l2/5kg95I9SdXMoZQfYIUjeqEUrgOkXGPeN4TYRhxy8E+ZUf+eS7B7miIoeybVSjKDnm8u3+gH3pDTYwu1igATvs/pXqvBKiR4i2bNJfi1ZfUAnjgrOG8wY2quNzBKuU/ZS+uSFEl5O0xRGuUIlZCcw7xG5QPkeHYUSNV5WXGou2sC3rBC0LjenqCXGO0WEiTJa0Lr4KixdHBrDGuGGiRqCUpFk8pGIpQtCU7p4YPwxYxEMCk1aAMQZh8Ac8PfbIzYPJOwAAAABJRU5ErkJggg==') no-repeat;
+    background-position: 6px 32px;
+  }
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 00000000..071fe9fe
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,17 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+  
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+  
+  corePlugins: {
+    preflight: false
+  },
+  darkMode: 'class',
+}