From 1a046f8212e5a92d8c5aab6c870b1aa7517b3a27 Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Mon, 15 Sep 2025 11:52:20 +0200
Subject: [PATCH] style: Icon as components and littwin-blue

---
 .env.development                              |  2 +-
 .env.production                               |  2 +-
 .../icons/material-symbols/AlarmIcon.js       | 18 +++++++++
 components/icons/material-symbols/EditIcon.js | 18 +++++++++
 .../icons/material-symbols/EditOffIcon.js     | 18 +++++++++
 .../icons/material-symbols/ExpandIcon.js      | 18 +++++++++
 components/icons/material-symbols/InfoIcon.js | 18 +++++++++
 .../icons/material-symbols/MapMarkerIcon.js   | 19 ++++++++++
 components/icons/material-symbols/MenuIcon.js | 18 +++++++++
 .../icons/material-symbols/SearchIcon.js      | 18 +++++++++
 components/mainComponent/MapComponent.js      | 37 ++++++++++---------
 components/uiWidgets/CoordinateInput.js       | 20 ++++++++--
 components/uiWidgets/VersionInfoModal.js      |  2 +-
 package-lock.json                             |  4 +-
 package.json                                  |  2 +-
 public/img/expand-icon.svg                    |  3 --
 public/img/icons/material-symbols/alarm.svg   |  3 ++
 .../img/icons/material-symbols/edit-off.svg   |  3 ++
 public/img/icons/material-symbols/edit.svg    |  3 ++
 public/img/icons/material-symbols/info.svg    |  3 ++
 .../img/icons/material-symbols/map-marker.svg |  4 ++
 public/img/icons/material-symbols/menu.svg    |  3 ++
 public/img/icons/material-symbols/search.svg  |  3 ++
 tailwind.config.js                            |  9 ++++-
 24 files changed, 216 insertions(+), 32 deletions(-)
 create mode 100644 components/icons/material-symbols/AlarmIcon.js
 create mode 100644 components/icons/material-symbols/EditIcon.js
 create mode 100644 components/icons/material-symbols/EditOffIcon.js
 create mode 100644 components/icons/material-symbols/ExpandIcon.js
 create mode 100644 components/icons/material-symbols/InfoIcon.js
 create mode 100644 components/icons/material-symbols/MapMarkerIcon.js
 create mode 100644 components/icons/material-symbols/MenuIcon.js
 create mode 100644 components/icons/material-symbols/SearchIcon.js
 delete mode 100644 public/img/expand-icon.svg
 create mode 100644 public/img/icons/material-symbols/alarm.svg
 create mode 100644 public/img/icons/material-symbols/edit-off.svg
 create mode 100644 public/img/icons/material-symbols/edit.svg
 create mode 100644 public/img/icons/material-symbols/info.svg
 create mode 100644 public/img/icons/material-symbols/map-marker.svg
 create mode 100644 public/img/icons/material-symbols/menu.svg
 create mode 100644 public/img/icons/material-symbols/search.svg

diff --git a/.env.development b/.env.development
index 1ffbbf5b9..4319b2923 100644
--- a/.env.development
+++ b/.env.development
@@ -23,4 +23,4 @@ NEXT_PUBLIC_USE_MOCKS=true
 # z.B. http://10.10.0.13/xyz/index.aspx -> basePath in config.json auf /xyz setzen
 # basePath wird jetzt in public/config.json gepflegt
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.1.363
+NEXT_PUBLIC_APP_VERSION=1.1.364
diff --git a/.env.production b/.env.production
index ad8f3a4b5..39641d118 100644
--- a/.env.production
+++ b/.env.production
@@ -24,4 +24,4 @@ NEXT_PUBLIC_USE_MOCKS=false
 # basePath wird jetzt in public/config.json gepflegt
 
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.1.363
+NEXT_PUBLIC_APP_VERSION=1.1.364
diff --git a/components/icons/material-symbols/AlarmIcon.js b/components/icons/material-symbols/AlarmIcon.js
new file mode 100644
index 000000000..9f7c5f9fb
--- /dev/null
+++ b/components/icons/material-symbols/AlarmIcon.js
@@ -0,0 +1,18 @@
+const AlarmIcon = ({ className = "h-8 w-8" }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth="1.5"
+    stroke="rgb(0, 174, 239)"
+    className={className}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0"
+    />
+  </svg>
+);
+
+export default AlarmIcon;
diff --git a/components/icons/material-symbols/EditIcon.js b/components/icons/material-symbols/EditIcon.js
new file mode 100644
index 000000000..315bee6a3
--- /dev/null
+++ b/components/icons/material-symbols/EditIcon.js
@@ -0,0 +1,18 @@
+const EditIcon = ({ className = "h-8 w-8" }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth="1.5"
+    stroke="rgb(0, 174, 239)"
+    className={className}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
+    />
+  </svg>
+);
+
+export default EditIcon;
diff --git a/components/icons/material-symbols/EditOffIcon.js b/components/icons/material-symbols/EditOffIcon.js
new file mode 100644
index 000000000..db54a2817
--- /dev/null
+++ b/components/icons/material-symbols/EditOffIcon.js
@@ -0,0 +1,18 @@
+const EditOffIcon = ({ className = "h-8 w-8" }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth="1.5"
+    stroke="rgb(0, 174, 239)"
+    className={className}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728L5.636 5.636m12.728 12.728L18 21l-3-3m-12.728-.364A9 9 0 015.636 5.636m0 0L3 3l3 3m9.364 9.364L18 21M5.636 5.636L3 3"
+    />
+  </svg>
+);
+
+export default EditOffIcon;
diff --git a/components/icons/material-symbols/ExpandIcon.js b/components/icons/material-symbols/ExpandIcon.js
new file mode 100644
index 000000000..323069d1d
--- /dev/null
+++ b/components/icons/material-symbols/ExpandIcon.js
@@ -0,0 +1,18 @@
+const ExpandIcon = ({ className = "h-8 w-8" }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth="1.5"
+    stroke="rgb(0, 174, 239)"
+    className={className}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"
+    />
+  </svg>
+);
+
+export default ExpandIcon;
diff --git a/components/icons/material-symbols/InfoIcon.js b/components/icons/material-symbols/InfoIcon.js
new file mode 100644
index 000000000..ea7e5a996
--- /dev/null
+++ b/components/icons/material-symbols/InfoIcon.js
@@ -0,0 +1,18 @@
+const InfoIcon = ({ className = "h-8 w-8" }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth="1.5"
+    stroke="rgb(0, 174, 239)"
+    className={className}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
+    />
+  </svg>
+);
+
+export default InfoIcon;
diff --git a/components/icons/material-symbols/MapMarkerIcon.js b/components/icons/material-symbols/MapMarkerIcon.js
new file mode 100644
index 000000000..f011f7410
--- /dev/null
+++ b/components/icons/material-symbols/MapMarkerIcon.js
@@ -0,0 +1,19 @@
+const MapMarkerIcon = ({ className = "h-8 w-8" }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="rgb(0, 174, 239)"
+    viewBox="0 0 24 24"
+    strokeWidth="1.5"
+    stroke="rgb(0, 174, 239)"
+    className={className}
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25s-7.5-4.108-7.5-11.25a7.5 7.5 0 1115 0z"
+    />
+  </svg>
+);
+
+export default MapMarkerIcon;
diff --git a/components/icons/material-symbols/MenuIcon.js b/components/icons/material-symbols/MenuIcon.js
new file mode 100644
index 000000000..a780099a5
--- /dev/null
+++ b/components/icons/material-symbols/MenuIcon.js
@@ -0,0 +1,18 @@
+const MenuIcon = ({ className = "h-8 w-8" }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth="1.5"
+    stroke="rgb(0, 174, 239)"
+    className={className}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+    />
+  </svg>
+);
+
+export default MenuIcon;
diff --git a/components/icons/material-symbols/SearchIcon.js b/components/icons/material-symbols/SearchIcon.js
new file mode 100644
index 000000000..b0d4c7f00
--- /dev/null
+++ b/components/icons/material-symbols/SearchIcon.js
@@ -0,0 +1,18 @@
+const SearchIcon = ({ className = "h-8 w-8" }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth="1.5"
+    stroke="rgb(0, 174, 239)"
+    className={className}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+    />
+  </svg>
+);
+
+export default SearchIcon;
diff --git a/components/mainComponent/MapComponent.js b/components/mainComponent/MapComponent.js
index e248e0642..81ec36c00 100644
--- a/components/mainComponent/MapComponent.js
+++ b/components/mainComponent/MapComponent.js
@@ -7,6 +7,14 @@ import "leaflet-contextmenu";
 import "leaflet.smooth_marker_bouncing";
 import "react-toastify/dist/ReactToastify.css";
 import { Icon } from "@iconify/react";
+import EditIcon from "@/components/icons/material-symbols/EditIcon";
+import EditOffIcon from "@/components/icons/material-symbols/EditOffIcon";
+import SearchIcon from "@/components/icons/material-symbols/SearchIcon";
+import MenuIcon from "@/components/icons/material-symbols/MenuIcon";
+import InfoIcon from "@/components/icons/material-symbols/InfoIcon";
+import AlarmIcon from "@/components/icons/material-symbols/AlarmIcon";
+import MapMarkerIcon from "@/components/icons/material-symbols/MapMarkerIcon";
+import ExpandIcon from "@/components/icons/material-symbols/ExpandIcon";
 import PoiUpdateModal from "@/components/pois/poiUpdateModal/PoiUpdateModal.js";
 import { ToastContainer, toast } from "react-toastify";
 import plusRoundIcon from "../icons/devices/overlapping/PlusRoundIcon.js";
@@ -1136,7 +1144,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
           className="rounded-full bg-white/90 hover:bg-white shadow p-1"
           title="Alarm"
         >
-          <Icon icon="mdi:alarm-light-outline" className="h-8 w-8 text-blue-900" />
+          <AlarmIcon className="h-8 w-8" />
         </button>
         {/* Marker-Icon (line-md) */}
         <button
@@ -1145,7 +1153,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
           className="rounded-full bg-white/90 hover:bg-white shadow p-1"
           title="Marker"
         >
-          <Icon icon="line-md:map-marker-filled" className="h-8 w-8 text-blue-900" />
+          <MapMarkerIcon className="h-8 w-8" />
         </button>
         {/*Lupe: Koordinatensuche ein-/ausblenden */}
         <button
@@ -1158,7 +1166,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
             showCoordinateInput ? "Koordinatensuche ausblenden" : "Koordinatensuche einblenden"
           }
         >
-          <Icon icon="material-symbols:search-rounded" className="h-8 w-8 text-blue-900" />
+          <SearchIcon className="h-8 w-8" />
         </button>
         <button
           onClick={toggleEditMode}
@@ -1177,18 +1185,16 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
           }
           disabled={!hasEditRight}
         >
-          <Icon
-            icon={editMode ? "material-symbols:edit-off-rounded" : "material-symbols:edit-rounded"}
-            className="h-8 w-8 text-blue-900"
-          />
+          {editMode ? <EditOffIcon className="h-8 w-8" /> : <EditIcon className="h-8 w-8" />}
         </button>
+        {/* Expand: Karte auf Standardansicht */}
         <button
           onClick={handleExpandClick}
           aria-label="Karte auf Standardansicht"
-          className="rounded-full bg-white/90 hover:bg-white shadow p-1"
+          className="rounded-full bg-white/90 hover:bg-white shadow p-1 "
           title="Karte auf Standardansicht"
         >
-          <img src="/img/expand-icon.svg" alt="Expand" className="h-8 w-8" />
+          <ExpandIcon className="h-8 w-8" />
         </button>
         {/* Lupe: Koordinaten-Suche ein-/ausblenden */}
         <button
@@ -1197,7 +1203,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
           className="rounded-full bg-white/90 hover:bg-white shadow p-1"
           title={showLayersPanel ? "Layer-Panel ausblenden" : "Layer-Panel einblenden"}
         >
-          <Icon icon="material-symbols:menu-rounded" className="h-8 w-8 text-blue-900" />
+          <MenuIcon className="h-8 w-8" />
         </button>
 
         <button
@@ -1206,9 +1212,8 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
           className="rounded-full bg-white/90 hover:bg-white shadow p-1"
           title={showAppInfoCard ? "Info ausblenden" : "Info einblenden"}
         >
-          <Icon
-            icon="material-symbols:info-rounded"
-            className="text-blue-900 h-8 w-8 pr-1"
+          <InfoIcon
+            className="h-8 w-8 pr-1"
             title={showAppInfoCard ? "Info ausblenden" : "Info einblenden"}
           />
         </button>
@@ -1226,11 +1231,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
             </div>
             <div>
               <button onClick={openVersionInfoModal}>
-                <Icon
-                  icon="material-symbols:info-rounded"
-                  className="text-blue-900 h-8 w-8 pr-1"
-                  title="Weitere Infos"
-                />
+                <InfoIcon className="h-8 w-8 pr-1" title="Weitere Infos" />
               </button>
             </div>
           </div>
diff --git a/components/uiWidgets/CoordinateInput.js b/components/uiWidgets/CoordinateInput.js
index 5c2bac1bb..967311ee0 100644
--- a/components/uiWidgets/CoordinateInput.js
+++ b/components/uiWidgets/CoordinateInput.js
@@ -4,7 +4,7 @@ import React, { useState } from "react";
 const CoordinateInput = ({ onCoordinatesSubmit }) => {
   const [coordinates, setCoordinates] = useState("");
 
-  const handleSubmit = (e) => {
+  const handleSubmit = e => {
     e.preventDefault();
     if (onCoordinatesSubmit) {
       onCoordinatesSubmit(coordinates);
@@ -12,9 +12,21 @@ const CoordinateInput = ({ onCoordinatesSubmit }) => {
   };
 
   return (
-    <form onSubmit={handleSubmit} className="fixed top-5 left-5 z-50 bg-white shadow-lg rounded-lg p-4 w-72">
-      <input type="text" placeholder="Koordinaten eingeben (lat,lng)" value={coordinates} onChange={(e) => setCoordinates(e.target.value)} className="border p-2 rounded w-full mb-2" />
-      <button type="submit" className="bg-blue-500 text-white p-2 rounded w-full hover:bg-blue-600">
+    <form
+      onSubmit={handleSubmit}
+      className="fixed top-5 left-5 z-50 bg-white shadow-lg rounded-lg p-4 w-72"
+    >
+      <input
+        type="text"
+        placeholder="Koordinaten eingeben (lat,lng)"
+        value={coordinates}
+        onChange={e => setCoordinates(e.target.value)}
+        className="border p-2 rounded w-full mb-2"
+      />
+      <button
+        type="submit"
+        className="bg-littwin-blue text-white p-2 rounded w-full hover:bg-blue-600"
+      >
         Zu Marker zoomen
       </button>
     </form>
diff --git a/components/uiWidgets/VersionInfoModal.js b/components/uiWidgets/VersionInfoModal.js
index 825518f9b..baa76b46c 100644
--- a/components/uiWidgets/VersionInfoModal.js
+++ b/components/uiWidgets/VersionInfoModal.js
@@ -31,7 +31,7 @@ const VersionInfoModal = ({ showVersionInfoModal, closeVersionInfoModal, APP_VER
             </p>
             <button
               onClick={closeVersionInfoModal}
-              className="mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700 mx-auto block"
+              className="mt-4 bg-littwin-blue text-white px-4 py-2 rounded mx-auto block"
             >
               Schließen
             </button>
diff --git a/package-lock.json b/package-lock.json
index 46f23dab1..4656516b5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "nodemap",
-  "version": "1.1.363",
+  "version": "1.1.364",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "nodemap",
-      "version": "1.1.363",
+      "version": "1.1.364",
       "dependencies": {
         "@emotion/react": "^11.13.3",
         "@emotion/styled": "^11.13.0",
diff --git a/package.json b/package.json
index 5c697eef0..df16eec9a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nodemap",
-  "version": "1.1.363",
+  "version": "1.1.364",
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
diff --git a/public/img/expand-icon.svg b/public/img/expand-icon.svg
deleted file mode 100644
index 42f6e3731..000000000
--- a/public/img/expand-icon.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
-</svg>
diff --git a/public/img/icons/material-symbols/alarm.svg b/public/img/icons/material-symbols/alarm.svg
new file mode 100644
index 000000000..a8590d4f9
--- /dev/null
+++ b/public/img/icons/material-symbols/alarm.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="rgb(0, 174, 239)">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
+</svg>
\ No newline at end of file
diff --git a/public/img/icons/material-symbols/edit-off.svg b/public/img/icons/material-symbols/edit-off.svg
new file mode 100644
index 000000000..e2c081d43
--- /dev/null
+++ b/public/img/icons/material-symbols/edit-off.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="rgb(0, 174, 239)">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728L5.636 5.636m12.728 12.728L18 21l-3-3m-12.728-.364A9 9 0 015.636 5.636m0 0L3 3l3 3m9.364 9.364L18 21M5.636 5.636L3 3" />
+</svg>
\ No newline at end of file
diff --git a/public/img/icons/material-symbols/edit.svg b/public/img/icons/material-symbols/edit.svg
new file mode 100644
index 000000000..f237cc066
--- /dev/null
+++ b/public/img/icons/material-symbols/edit.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="rgb(0, 174, 239)">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
+</svg>
\ No newline at end of file
diff --git a/public/img/icons/material-symbols/info.svg b/public/img/icons/material-symbols/info.svg
new file mode 100644
index 000000000..dc75679cf
--- /dev/null
+++ b/public/img/icons/material-symbols/info.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="rgb(0, 174, 239)">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
+</svg>
\ No newline at end of file
diff --git a/public/img/icons/material-symbols/map-marker.svg b/public/img/icons/material-symbols/map-marker.svg
new file mode 100644
index 000000000..0f89f1ff9
--- /dev/null
+++ b/public/img/icons/material-symbols/map-marker.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="rgb(0, 174, 239)" viewBox="0 0 24 24" stroke-width="1.5" stroke="rgb(0, 174, 239)">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
+  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25s-7.5-4.108-7.5-11.25a7.5 7.5 0 1115 0z" />
+</svg>
\ No newline at end of file
diff --git a/public/img/icons/material-symbols/menu.svg b/public/img/icons/material-symbols/menu.svg
new file mode 100644
index 000000000..1269f9960
--- /dev/null
+++ b/public/img/icons/material-symbols/menu.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="rgb(0, 174, 239)">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+</svg>
\ No newline at end of file
diff --git a/public/img/icons/material-symbols/search.svg b/public/img/icons/material-symbols/search.svg
new file mode 100644
index 000000000..733f3796c
--- /dev/null
+++ b/public/img/icons/material-symbols/search.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="rgb(0, 174, 239)">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
+</svg>
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index f0ab949f8..c128f97b6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,10 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", "./hooks/**/*.{js,ts,jsx,tsx}"],
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+    "./hooks/**/*.{js,ts,jsx,tsx}",
+  ],
   theme: {
     extend: {
       zIndex: {
@@ -10,6 +14,9 @@ module.exports = {
         90: "90",
         100: "100",
       },
+      colors: {
+        "littwin-blue": "#00aeef",
+      },
     },
   },
   plugins: [],