diff --git a/package.json b/package.json
index 8e7d22a..d31565e 100644
--- a/package.json
+++ b/package.json
@@ -16,15 +16,22 @@
     "@radix-ui/react-scroll-area": "^1.2.0",
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-slot": "^1.1.0",
+    "@tanstack/react-query": "^5.61.0",
+    "@types/leaflet": "^1.9.14",
+    "@types/react-leaflet": "^3.0.0",
     "axios": "^1.7.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "leaflet": "^1.9.4",
     "lucide-react": "^0.446.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-hot-toast": "^2.4.1",
+    "react-leaflet": "^4.2.1",
     "react-router-dom": "^6.28.0",
     "tailwind-merge": "^2.5.2",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "zustand": "^5.0.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",
diff --git a/src/App.tsx b/src/App.tsx
index 35caae8..7be3705 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,21 +1,53 @@
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import './App.css';
+import 'leaflet/dist/leaflet.css';
 import { Sidebar } from './components/sidebar';
-import Dashboard from './pages/dashboard.page';
 import { TagsPage } from './pages/tags.page';
+import { MapPage } from './pages/map.page';
+import { Toaster } from 'react-hot-toast';
+import { SettingsPage } from './pages/settings.page';
+import DashboardSidebar from './modules/dashboard-sidebar.module';
+import { DashboardPage } from './pages/dashboard.page';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { AddPlacePage } from './pages/add-place.page';
+
+
+const queryClient = new QueryClient();
 
 function App() {
 
     return (
-        <BrowserRouter>
-            <Routes>
-                <Route path={"/"} element={<Sidebar />} >
-                    <Route path="dashboard" element={<Dashboard />} />
-                    <Route path="tags" element={<TagsPage />} />
-                    <Route path="settings" element={<></>} />
-                </Route>
-            </Routes>
-        </BrowserRouter>
+        <QueryClientProvider client={queryClient}>
+            <BrowserRouter>
+                <Routes>
+                    <Route path={"/"} element={<Sidebar />} >
+                        <Route path="dashboard" element={<DashboardSidebar />} >
+                            <Route path=":id" element={<DashboardPage />} />
+                        </Route>
+                        <Route path="tags" element={<TagsPage />} />
+                        <Route path="map" element={<MapPage />} />
+                        <Route path="add-place" element={<AddPlacePage />} />
+                        <Route path="settings" element={<SettingsPage />} />
+                    </Route>
+                </Routes>
+                <Toaster toastOptions={{
+                    position: 'top-right',
+                    className: '',
+                    style: {
+                        color: 'black',
+                        padding: '5px',
+                        boxShadow: 'none',
+                        border: '1px solid #f3f4f6',
+                        fontSize: '15px'
+                    },
+                    icon: null,
+                    iconTheme: {
+                        primary: 'black',
+                        secondary: 'white'
+                    }
+                }} />
+            </BrowserRouter>
+        </QueryClientProvider>
     );
 }
 
diff --git a/src/api/places.api.ts b/src/api/places.api.ts
deleted file mode 100644
index dc43f79..0000000
--- a/src/api/places.api.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import axios from 'axios';
-import { Place } from '@/interfaces/place.interface';
-
-const API_URL = 'https://dishdash.ru';
-
-export const fetchPlaces = async (): Promise<Place[] | undefined> => {
-  try {
-    const response = await axios.get<Place[]>(`${API_URL}/api/v1/places`);
-    return response.data;
-  } catch (err) {
-    console.error('Error fetching tags:', err);
-    return undefined;
-  }
-};
-
-export const updatePlace = async (place: Place): Promise<Place | undefined> => {
-  try {
-    const response = await axios.put<Place>(`${API_URL}/api/v1/places`, {
-      ...place,
-      tags: place.tags.flatMap((x) => x.id),
-    });
-    return response.data;
-  } catch (err) {
-    console.error('Error fetching tags:', err);
-    return undefined;
-  }
-};
diff --git a/src/components/sidebar.tsx b/src/components/sidebar.tsx
index 92181aa..b6b0bde 100644
--- a/src/components/sidebar.tsx
+++ b/src/components/sidebar.tsx
@@ -1,9 +1,20 @@
-import { Command, Inbox, Settings2, Tag } from "lucide-react"
+import { useDashboardStore } from "@/shared/stores/places.store";
+import { Command, Inbox, Map, MapPinPlus, Settings2, Tag } from "lucide-react"
+import { useEffect } from "react";
 import { Outlet, useNavigate } from "react-router-dom"
+import { fetchTags } from "@/shared/api/tags.api";
 
 export const Sidebar = () => {
     const navigate = useNavigate();
 
+    const { setTags } = useDashboardStore();
+
+    useEffect(() => {
+        fetchTags().then((x) => {
+            if (x) setTags(x);
+        });
+    }, [setTags]);
+
     return (
 
         <div className="flex h-svh overflow-hidden text-left">
@@ -17,6 +28,12 @@ export const Sidebar = () => {
                 <div onClick={() => navigate('/tags')} className="h-8 w-8 hover:bg-gray-100 cursor-pointer p-2 rounded-md flex items-center justify-center">
                     <Tag />
                 </div>
+                <div onClick={() => navigate('/add-place')} className="h-8 w-8 hover:bg-gray-100 cursor-pointer p-2 rounded-md flex items-center justify-center">
+                    <MapPinPlus />
+                </div>
+                <div onClick={() => navigate('/map')} className="h-8 w-8 hover:bg-gray-100 cursor-pointer p-2 rounded-md flex items-center justify-center">
+                    <Map />
+                </div>
                 <div onClick={() => navigate('/settings')} className="h-8 w-8 hover:bg-gray-100 cursor-pointer p-2 rounded-md flex items-center justify-center">
                     <Settings2 />
                 </div>
diff --git a/src/components/tag.tsx b/src/components/tag.tsx
index c135e64..de8d758 100644
--- a/src/components/tag.tsx
+++ b/src/components/tag.tsx
@@ -1,9 +1,9 @@
 import { Tag } from "@/interfaces/place.interface"
 
 export const TagComponent = ({ tag, onClick }: { tag: Tag, onClick?: () => void }) => {
-    return <div onClick={onClick} className="flex text-sm rounded-full cursor-pointer border w-fit px-2 py-1">
-        <img className="w-auto h-[20px] mr-2" src={tag.icon} />
-        <p className="pr-2">
+    return <div onClick={onClick} className="inline-flex w-fit h-fit text-sm rounded-full cursor-pointer border">
+        <img className="w-[20px] shrink-0 min-w-[20px] my-1 h-[20px] ml-2 mr-1" src={tag.icon} />
+        <p className="my-1 mr-3 text-nowrap">
             {tag.name}
         </p>
     </div>
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index b2ea616..7b2593f 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -11,7 +11,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          "flex min-h-[120px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}
diff --git a/src/index.css b/src/index.css
index 7fab1ca..f263c0f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,6 +2,11 @@
 @tailwind components;
 @tailwind utilities;
 
+.leaflet-container {
+    height: 100%;
+    width: 100%;
+}
+
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
diff --git a/src/interfaces/place.interface.ts b/src/interfaces/place.interface.ts
index 43acbee..aa93cc0 100644
--- a/src/interfaces/place.interface.ts
+++ b/src/interfaces/place.interface.ts
@@ -13,7 +13,7 @@ export interface Place {
   address: string;
   description: string;
   id: number;
-  image: string[];
+  images: string[];
   location: Location;
   priceAvg: number;
   reviewCount: number;
diff --git a/src/modules/dashboard-sidebar.module.tsx b/src/modules/dashboard-sidebar.module.tsx
new file mode 100644
index 0000000..3a77b18
--- /dev/null
+++ b/src/modules/dashboard-sidebar.module.tsx
@@ -0,0 +1,47 @@
+import { useState } from 'react';
+import { Input } from '@/components/ui/input';
+import { Outlet, useNavigate } from 'react-router-dom';
+import { usePlaces } from '@/shared/hooks/usePlaces';
+
+export default function DashboardSidebar() {
+    const { data: places } = usePlaces();
+    const [filter, setFilter] = useState('');
+
+    const navigate = useNavigate();
+
+    const filteredPlaces = places?.filter((place) =>
+        place.title.toLowerCase().includes(filter.toLowerCase())
+    );
+
+    return (
+        <div className="w-full h-full flex">
+            <div className="flex flex-col w-[350px] border-gray-100 border-r">
+                <div className="p-5 pt-4 space-y-5 border-gray-100 border-b">
+                    <h1 className="text-xl">All Places</h1>
+                    <Input
+                        placeholder="Filter places..."
+                        value={filter}
+                        onChange={(e) => setFilter(e.target.value)}
+                    />
+                </div>
+                <div className='h-full divide-gray-100 w-full overflow-y-scroll'>
+                    {filteredPlaces?.map((x, index) => (
+                        <div key={`${x.id}_${index}`} onClick={() => {
+                            navigate(`${x.id}`);
+                        }} className="cursor-pointer px-3 py-2 h-24 hover:bg-gray-100 w-full">
+                            <p>
+                                {x.title}
+                            </p>
+                            <p className="text-muted-foreground line-clamp-2 text-sm">
+                                {x.address}
+                            </p>
+                        </div>
+                    ))}
+                </div>
+            </div>
+            <div className="w-full m-5">
+                <Outlet />
+            </div>
+        </div>
+    );
+}
diff --git a/src/modules/place.module.tsx b/src/modules/place.module.tsx
new file mode 100644
index 0000000..f19d281
--- /dev/null
+++ b/src/modules/place.module.tsx
@@ -0,0 +1,210 @@
+import { useCallback, useEffect, useState } from "react";
+
+import { Place, Tag } from "@/interfaces/place.interface";
+import { Plus, X } from "lucide-react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { TagComponent } from "@/components/tag";
+import { Button } from "@/components/ui/button";
+import { useDashboardStore } from "@/shared/stores/places.store";
+
+export const PlaceModule = ({ inputPlace, onSave }: { inputPlace: Place, onSave: (place: Place) => void; }) => {
+    const [place, setPlace] = useState<Place>(inputPlace);
+
+    useEffect(() => {
+        setPlace(inputPlace);
+    }, [inputPlace]);
+
+    const { tags } = useDashboardStore();
+
+    const handleInputChange = useCallback(
+        (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+            const { name, value } = e.target;
+            if (!place) return;
+
+            if (name === "lat" || name === "lon") {
+                const newLocation = {
+                    ...place.location,
+                    [name]: value,
+                };
+                setPlace({ ...place, location: newLocation });
+            } else {
+                setPlace({ ...place, [name]: value });
+            }
+        },
+        [place]
+    );
+
+    const handleAddPhoto = () => {
+        if (!place) return;
+        const newPhotoUrl = prompt("Enter the URL of the new photo:");
+        if (newPhotoUrl) {
+            setPlace({
+                ...place,
+                images: [...place.images, newPhotoUrl],
+            });
+        }
+    };
+
+    const handleRemovePhoto = (index: number) => {
+        if (!place) return;
+        const newImages = place.images.filter((_, i) => i !== index);
+        setPlace({ ...place, images: newImages });
+    };
+
+    const toggleTag = (tag: Tag) => {
+        const isTagSelected = place.tags.some(t => t.id === tag.id);
+        const updatedTags = isTagSelected
+            ? place.tags.filter(t => t.id !== tag.id)
+            : [...place.tags, tag];
+        handleTagChange(updatedTags);
+    };
+
+    const handleTagChange = (updatedTags: Tag[]) => {
+        setPlace(prev => ({
+            ...prev,
+            tags: updatedTags,
+        }));
+    };
+
+    const handleSave = useCallback(() => {
+        onSave(place);
+    }, [place, onSave]);
+
+    return place !== null ? (
+        <form className="flex gap-5 flex-col h-full">
+            <div className="w-full h-[600px] overflow-x-scroll overflow-y-hidden">
+                <div className="whitespace-nowrap h-fit space-x-5 text-gray-300">
+                    {place.images.map((img, index) => (
+                        <div
+                            key={`${index}_picture`}
+                            className="inline-block group aspect-[21/30] bg-gray-100 relative rounded-xl overflow-hidden h-[300px]"
+                        >
+                            <img className="h-full w-full object-cover" src={img} alt="Place" />
+                            <div
+                                className="cursor-pointer h-6 w-6 p-1 group-hover:flex hidden justify-center items-center absolute bottom-2 right-2 bg-gray-100 rounded-full"
+                                onClick={() => handleRemovePhoto(index)}
+                            >
+                                <X />
+                            </div>
+                        </div>
+                    ))}
+                    <div
+                        className="inline-block bg-gray-100 rounded-xl overflow-hidden h-[300px] cursor-pointer"
+                        onClick={handleAddPhoto}
+                    >
+                        <div className="flex items-center justify-center h-full w-full aspect-[21/30]">
+                            <Plus />
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div className="h-full pl-1 w-full space-y-4 overflow-scroll">
+                <div className="flex gap-5">
+                    <div className="w-full space-y-4">
+                        <div>
+                            <Label htmlFor="title">Title</Label>
+                            <Input
+                                id="title"
+                                name="title"
+                                value={place.title}
+                                onChange={handleInputChange}
+                            />
+                        </div>
+                        <div>
+                            <Label htmlFor="address">Address</Label>
+                            <Input
+                                id="address"
+                                name="address"
+                                value={place.address}
+                                onChange={handleInputChange}
+                            />
+                        </div>
+                        <div>
+                            <Label htmlFor="description">Description</Label>
+                            <Textarea
+                                maxLength={300}
+                                id="description"
+                                name="description"
+                                value={place.description}
+                                onChange={handleInputChange}
+                            />
+                        </div>
+                    </div>
+                    <div className="space-y-4">
+                        <div>
+                            <Label>Location (lat / lon)</Label>
+                            <div className="flex gap-5 w-full items-end">
+                                <div>
+                                    <Input
+                                        id="lat"
+                                        name="lat"
+                                        value={place.location.lat}
+                                        onChange={handleInputChange}
+                                    />
+                                </div>
+                                <div>
+                                    <Input
+                                        id="lon"
+                                        name="lon"
+                                        value={place.location.lon}
+                                        onChange={handleInputChange}
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                        <div>
+                            <Label htmlFor="priceAvg">Avg Price</Label>
+                            <Input
+                                id="priceAvg"
+                                name="priceAvg"
+                                className="w-[100px]"
+                                value={place.priceAvg}
+                                onChange={handleInputChange}
+                            />
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <Label htmlFor="tags">Tags</Label>
+                    <div className="flex pt-2 divide-black">
+                        <div className="flex flex-wrap gap-5 border-r pr-5 border-r-gray-300">
+                            {place.tags.map((tag, index) => (
+                                <TagComponent
+                                    key={`${tag.id}_${index}_tag`}
+                                    onClick={() => {
+                                        toggleTag(tag)
+                                    }}
+                                    tag={tag}
+                                />
+                            ))}
+                        </div>
+                        <div className="flex flex-wrap gap-5 pl-5">
+                            {tags
+                                .filter(
+                                    x =>
+                                        !place.tags.flatMap(y => y.id).includes(x.id)
+                                )
+                                .map((tag, index) => (
+                                    <TagComponent
+                                        key={`${tag.id}_${index}_tag`}
+                                        onClick={() => {
+                                            toggleTag(tag)
+                                        }}
+                                        tag={tag}
+                                    />
+                                ))}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div className="flex justify-end">
+                <Button type="button" onClick={handleSave}>Save</Button>
+            </div>
+        </form>
+    ) : (
+        <></>
+    );
+};
+
diff --git a/src/pages/add-place.page.tsx b/src/pages/add-place.page.tsx
new file mode 100644
index 0000000..6909d7d
--- /dev/null
+++ b/src/pages/add-place.page.tsx
@@ -0,0 +1,75 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Place } from "@/interfaces/place.interface";
+import { PlaceModule } from "@/modules/place.module";
+import { parsePlace } from "@/shared/api/parse.api";
+import { usePlaces } from "@/shared/hooks/usePlaces";
+import React, { useState } from 'react';
+import toast from "react-hot-toast";
+import { useNavigate } from "react-router-dom";
+
+export const AddPlacePage = () => {
+    const [url, setUrl] = useState('');
+    const [parsedPlace, setParsedPlace] = useState<Omit<Place, "id"> | null>(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState('');
+
+    const navigate = useNavigate();
+
+    const { savePlace } = usePlaces();
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setUrl(e.target.value);
+    };
+
+    const handleParse = async () => {
+        setError('');
+        if (!url) {
+            setError('URL cannot be empty.');
+            return;
+        }
+
+        try {
+            setLoading(true);
+            const place = await parsePlace(url);
+            setParsedPlace(place);
+        } catch {
+            setError('Failed to parse the place. Please check the URL or API key.');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleSave = async (place: Place) => {
+        const newPlace = await savePlace.mutateAsync(place);
+        navigate(`/dashboard/${newPlace.id}`);
+        toast.success("Place updated");
+    }
+
+    return (
+        <div className="w-full h-full overflow-y-scroll m-5 flex flex-col pb-10">
+            <div className="w-full p-5 justify-center flex">
+                <div className="flex gap-4">
+                    <Input
+                        value={url}
+                        onChange={handleInputChange}
+                        placeholder="Enter the URL..."
+                    />
+                    <Button variant="outline" onClick={handleParse} disabled={loading}>
+                        {loading ? 'Parsing...' : 'Parse URL'}
+                    </Button>
+                </div>
+            </div>
+
+            {error && <p className="text-red-500 text-center mt-2">{error}</p>}
+
+            {parsedPlace && (
+                <PlaceModule
+                    inputPlace={{ ...parsedPlace, id: 0 }}
+                    onSave={handleSave}
+                />
+            )}
+        </div>
+    );
+};
+
diff --git a/src/pages/dashboard.page.tsx b/src/pages/dashboard.page.tsx
index a25fca1..391313f 100644
--- a/src/pages/dashboard.page.tsx
+++ b/src/pages/dashboard.page.tsx
@@ -1,157 +1,28 @@
-import React, { useState, useCallback, useEffect } from 'react';
-import { Place, Tag } from '@/interfaces/place.interface';
-import { fetchPlaces, updatePlace } from '@/api/places.api';
-import { fetchTags } from '@/api/tags.api';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Textarea } from '@/components/ui/textarea';
-import { Button } from '@/components/ui/button';
-import { TagComponent } from '@/components/tag';
 
-export default function DashboardPage() {
-    const [places, setPlaces] = useState<Place[]>([]);
-    const [tags, setTags] = useState<Tag[]>([]);
+import { useParams } from "react-router-dom";
+import { PlaceModule } from "@/modules/place.module";
+import { useEffect, useState } from "react";
+import { Place } from "@/interfaces/place.interface";
+import { usePlaces } from "@/shared/hooks/usePlaces";
+import { updatePlace } from "@/shared/api/places.api";
+import toast from "react-hot-toast";
 
-    const [filter, setFilter] = useState('');
+export const DashboardPage = () => {
+    const { id } = useParams<{ id: string }>(); //placeId
+    const { data } = usePlaces();
 
-    useEffect(() => {
-        fetchPlaces().then((x) => {
-            if (x) setPlaces(x);
-        });
-
-        fetchTags().then((x) => {
-            if (x) setTags(x);
-        });
-    }, []);
-
-    const [selectedPlace, setSelectedPlace] = useState<Place | null>(null);
+    const [place, setPlace] = useState<Place | null>(null);
 
     useEffect(() => {
-        console.log(selectedPlace);
-    }, [selectedPlace])
-
-    const handleInputChange = useCallback(
-        (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-            if (selectedPlace) {
-                setSelectedPlace({ ...selectedPlace, [e.target.name]: e.target.value });
-            }
-        },
-        [selectedPlace]
-    );
+        setPlace(data?.find(x => x.id.toString() == id) ?? null);
+    }, [id, data])
 
-    const handleTagChange =
-        (selectedTags: Tag[]) => {
-            console.log(selectedTags);
-            if (selectedPlace) {
-                const newTags = tags.filter((tag) => selectedTags.includes(tag));
-                setSelectedPlace({ ...selectedPlace, tags: newTags });
-            }
-        }
-
-    const handleSave = useCallback(() => {
-        if (selectedPlace) {
-            setPlaces(
-                places.map((place) =>
-                    place.id === selectedPlace.id ? selectedPlace : place
-                )
-            );
-            updatePlace(selectedPlace);
-            setSelectedPlace(null);
-        }
-    }, [selectedPlace, places]);
-
-    const filteredPlaces = places.filter((place) =>
-        place.title.toLowerCase().includes(filter.toLowerCase())
-    );
+    const handleSave = (place: Place) => {
+        updatePlace(place);
+        toast.success("Place updated");
+    }
 
     return (
-        <div className="w-full h-full flex">
-            <div className="flex flex-col w-[400px] border-gray-100 border-r">
-                <div className="p-5 pt-4 space-y-5 border-gray-100 border-b">
-                    <h1 className="text-xl">All Places</h1>
-                    <Input
-                        placeholder="Filter places..."
-                        value={filter}
-                        onChange={(e) => setFilter(e.target.value)}
-                    />
-                </div>
-                <div className='h-full divide-gray-100 w-fit overflow-y-scroll'>
-                    {filteredPlaces.map((x, index) => (
-                        <div key={`${x.id}_${index}`} onClick={() => setSelectedPlace(x)} className="cursor-pointer px-3 py-2 h-24 hover:bg-gray-100 w-full">
-                            <p>
-                                {x.title}
-                            </p>
-                            <p className="text-muted-foreground line-clamp-2 text-sm">
-                                {x.address}
-                            </p>
-                        </div>
-                    ))}
-                </div>
-            </div>
-            <div className="w-full p-5">
-                {selectedPlace ? (
-                    <form className="space-y-4">
-                        <div className="aspect-square h-[300px]">
-                            <img className="h-full w-full object-cover" src={selectedPlace.image[0]} />
-                        </div>
-                        <div>
-                            <Label htmlFor="title">Title</Label>
-                            <Input
-                                id="title"
-                                name="title"
-                                value={selectedPlace.title}
-                                onChange={handleInputChange}
-                            />
-                        </div>
-                        <div>
-                            <Label htmlFor="address">Address</Label>
-                            <Input
-                                id="address"
-                                name="address"
-                                value={selectedPlace.address}
-                                onChange={handleInputChange}
-                            />
-                        </div>
-                        <div>
-                            <Label htmlFor="description">Description</Label>
-                            <Textarea
-                                id="description"
-                                name="description"
-                                value={selectedPlace.description}
-                                onChange={handleInputChange}
-                            />
-                        </div>
-                        <div>
-                            <Label htmlFor="tags">Tags</Label>
-                            <div className="flex pt-2 divide-black">
-                                <div className="flex gap-5 border-r pr-5 border-r-gray-300">
-                                    {selectedPlace.tags.map((tag, index) => (
-                                        <TagComponent key={`${tag.id}_${index}_tag`} onClick={() => {
-                                            handleTagChange(selectedPlace.tags.filter(x => x.id != tag.id))
-                                        }} tag={tag} />
-                                    ))}
-                                </div>
-                                <div className="flex gap-5 pl-5">
-                                    {tags
-                                        .filter(x =>
-                                            !selectedPlace.tags
-                                                .flatMap(y => y.id)
-                                                .includes(x.id))
-                                        .map((tag, index) => (
-                                            <TagComponent key={`${tag.id}_${index}_tag`} onClick={() => {
-                                                handleTagChange([tag, ...selectedPlace.tags])
-                                            }} tag={tag} />
-                                        ))}
-                                </div>
-                            </div>
-                        </div>
-
-                        <Button onClick={handleSave}>Save</Button>
-                    </form>
-                ) : (
-                    <p>Select a place to edit</p>
-                )}
-            </div>
-        </div>
-    );
+        place !== null ? <PlaceModule onSave={handleSave} inputPlace={place} /> : <></>
+    )
 }
diff --git a/src/pages/map.page.tsx b/src/pages/map.page.tsx
new file mode 100644
index 0000000..ad272a1
--- /dev/null
+++ b/src/pages/map.page.tsx
@@ -0,0 +1,35 @@
+import { usePlaces } from '@/shared/hooks/usePlaces';
+import { MapContainer, Marker, Popup, TileLayer, ZoomControl } from 'react-leaflet';
+import { useNavigate } from 'react-router-dom';
+
+export const MapPage = () => {
+    const { data: places } = usePlaces();
+
+    const naviagte = useNavigate();
+
+    return (
+        <div className="w-full h-full flex">
+            <MapContainer
+                attributionControl={false}
+                zoomControl={false}
+                center={[59.95725, 30.30826]}
+                zoom={13}
+            >
+                <TileLayer
+                    url="https://api.mapbox.com/styles/v1/mapbox/light-v11/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWlrZWRlZ2VvZnJveSIsImEiOiJja3ZiOGQwc3I0N29uMnVxd2xlbGVyZGQzIn0.11XK5mqIzfLBTfNTYOGDgw"
+                />
+                {places?.map((place) => (
+                    <Marker position={[place.location.lat, place.location.lon]}>
+                        <Popup>
+                            {place.title}
+                            <div className="cursor-pointer" onClick={() => naviagte(`/dashboard/${place.id}`)}>
+                                Открыть место
+                            </div>
+                        </Popup>
+                    </Marker>
+                ))}
+                <ZoomControl position='bottomright' />
+            </MapContainer>
+        </div>
+    )
+}
diff --git a/src/pages/settings.page.tsx b/src/pages/settings.page.tsx
new file mode 100644
index 0000000..ab3c388
--- /dev/null
+++ b/src/pages/settings.page.tsx
@@ -0,0 +1,36 @@
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { useSettingsStore } from "@/shared/stores/settings.store";
+import { useState } from "react";
+import toast from "react-hot-toast";
+
+export const SettingsPage = () => {
+    const { api_key, setApiKey } = useSettingsStore();
+    const [localKey, setLocalKey] = useState(api_key);
+
+    // Handle input change
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setLocalKey(e.target.value);
+    };
+
+    // Handle button click
+    const handleSetKey = () => {
+        setApiKey(localKey);
+        toast.success('key updated')
+    };
+
+    return (
+        <div className="w-full p-5 justify-center h-full flex">
+            <div className="flex gap-4">
+                <Input
+                    value={localKey}
+                    onChange={handleInputChange}
+                    placeholder={localKey !== '' ? localKey : 'API Key...'}
+                />
+                <Button variant="outline" onClick={handleSetKey}>
+                    Update Key
+                </Button>
+            </div>
+        </div>
+    );
+}
diff --git a/src/pages/tags.page.tsx b/src/pages/tags.page.tsx
index 7f2cd6b..7aa5cdc 100644
--- a/src/pages/tags.page.tsx
+++ b/src/pages/tags.page.tsx
@@ -1,16 +1,8 @@
-import { Tag } from "@/interfaces/place.interface";
-import { useEffect, useState } from "react";
-import { fetchTags } from "@/api/tags.api";
+import { useDashboardStore } from "@/shared/stores/places.store";
 import { Plus, X } from "lucide-react";
 
 export const TagsPage = () => {
-    const [tags, setTags] = useState<Tag[]>([]);
-
-    useEffect(() => {
-        fetchTags().then((x) => {
-            if (x) setTags(x);
-        });
-    }, []);
+    const { tags } = useDashboardStore();
 
     return (
         <div className="w-full h-full flex">
diff --git a/src/shared/api/parse.api.ts b/src/shared/api/parse.api.ts
new file mode 100644
index 0000000..2b13a57
--- /dev/null
+++ b/src/shared/api/parse.api.ts
@@ -0,0 +1,20 @@
+import { Place } from "@/interfaces/place.interface";
+import axios from "axios";
+import { useSettingsStore } from "../stores/settings.store";
+
+const API_URL = "https://parser.dishdash.ru";
+
+export const parsePlace = async (url: string) => {
+    const api_key = useSettingsStore.getState().api_key;
+
+    const response = await axios.get<Omit<Place, 'id'>>(`${API_URL}/api/parse/`, {
+        params: {
+            url,
+        },
+        headers: {
+            'api-key': api_key,
+        },
+    });
+
+    return response.data;
+}
diff --git a/src/shared/api/places.api.ts b/src/shared/api/places.api.ts
new file mode 100644
index 0000000..5de25d8
--- /dev/null
+++ b/src/shared/api/places.api.ts
@@ -0,0 +1,76 @@
+import axios from 'axios';
+import { Place } from '@/interfaces/place.interface';
+import { useSettingsStore } from '../stores/settings.store';
+
+const API_URL = 'https://dishdash.ru';
+
+export const fetchPlaces = async (): Promise<Place[]> => {
+    const response = await axios.get<Place[]>(`${API_URL}/api/v1/places`);
+    return response.data;
+};
+
+export const updatePlace = async (place: Place): Promise<Place> => {
+    const api_key = useSettingsStore.getState().api_key;
+
+    try {
+        const response = await axios.put<Place>(
+            `${API_URL}/api/v1/places`,
+            {
+                ...place,
+                // @ts-expect-error shitty conversion to int
+                priceMin: parseInt(place.priceAvg),
+                tags: place.tags.flatMap((x) => x.id),
+            },
+            {
+                headers: {
+                    'X-API-Token': api_key,
+                },
+            }
+        );
+        return response.data;
+    } catch (err) {
+        if (axios.isAxiosError(err)) {
+            console.error(`Error updating place: ${err.message}`, {
+                status: err.response?.status,
+                data: err.response?.data,
+            });
+        } else {
+            console.error('Unexpected error updating place:', err);
+        }
+
+        throw err;
+    }
+};
+
+export const savePlace = async (place: Place): Promise<Place> => {
+    const api_key = useSettingsStore.getState().api_key;
+
+    try {
+        const response = await axios.post<Place>(
+            `${API_URL}/api/v1/places`,
+            {
+                ...place,
+                priceMin: place.priceAvg,
+                tags: place.tags.flatMap((x) => x.id),
+            },
+            {
+                headers: {
+                    'X-API-Token': api_key,
+                },
+            }
+        );
+        return response.data;
+    } catch (err) {
+        if (axios.isAxiosError(err)) {
+            console.error(`Error updating place: ${err.message}`, {
+                status: err.response?.status,
+                data: err.response?.data,
+            });
+        } else {
+            console.error('Unexpected error updating place:', err);
+        }
+
+        throw err;
+    }
+};
+
diff --git a/src/api/tags.api.ts b/src/shared/api/tags.api.ts
similarity index 96%
rename from src/api/tags.api.ts
rename to src/shared/api/tags.api.ts
index 5744a17..28e44d5 100644
--- a/src/api/tags.api.ts
+++ b/src/shared/api/tags.api.ts
@@ -5,7 +5,7 @@ const API_URL = 'https://dishdash.ru';
 
 export const fetchTags = async (): Promise<Tag[] | undefined> => {
   try {
-    const response = await axios.get<Tag[]>(`${API_URL}/api/v1/places/tags`);
+    const response = await axios.get<Tag[]>(`${API_URL}/api/v1/places/tag`);
     return response.data;
   } catch (err) {
     console.error('Error fetching tags:', err);
diff --git a/src/shared/hooks/usePlaces.ts b/src/shared/hooks/usePlaces.ts
new file mode 100644
index 0000000..460021d
--- /dev/null
+++ b/src/shared/hooks/usePlaces.ts
@@ -0,0 +1,34 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { Place } from '@/interfaces/place.interface';
+import { fetchPlaces, savePlace, updatePlace } from '../api/places.api';
+
+export const usePlaces = () => {
+    const queryClient = useQueryClient();
+
+    const fetchPlacesQuery = useQuery<Place[], Error>({
+        queryKey: ['places'],
+        queryFn: fetchPlaces,
+    });
+
+    const updatePlaceMutation = useMutation<Place, Error, Place>({
+        mutationFn: updatePlace,
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ['places'] });
+        },
+    });
+
+    const savePlaceMutation = useMutation<Place, Error, Place>({
+        mutationFn: savePlace,
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ['places'] });
+        },
+    });
+
+    return {
+        ...fetchPlacesQuery,
+        savePlace: savePlaceMutation,
+        updatePlace: updatePlaceMutation.mutate,
+        isUpdating: updatePlaceMutation.isPending || savePlaceMutation.isPending,
+    };
+};
+
diff --git a/src/shared/stores/places.store.ts b/src/shared/stores/places.store.ts
new file mode 100644
index 0000000..e9255e9
--- /dev/null
+++ b/src/shared/stores/places.store.ts
@@ -0,0 +1,14 @@
+import { Tag } from "@/interfaces/place.interface";
+import { create } from "zustand";
+
+interface DashboardState {
+    tags: Tag[];
+    setTags: (tags: Tag[]) => void;
+}
+
+export const useDashboardStore = create<DashboardState>()(
+    (set) => ({
+        tags: [],
+        setTags: (tags: Tag[]) => set({ tags })
+    }),
+)
diff --git a/src/shared/stores/settings.store.ts b/src/shared/stores/settings.store.ts
new file mode 100644
index 0000000..a8fc3a8
--- /dev/null
+++ b/src/shared/stores/settings.store.ts
@@ -0,0 +1,17 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+interface SettingsState {
+    api_key: string;
+    setApiKey: (api_key: string) => void;
+}
+
+export const useSettingsStore = create<SettingsState>()(persist(
+    (set) => ({
+        api_key: '',
+        setApiKey: (api_key: string) => set({ api_key })
+    }),
+    {
+        name: 'key-storage',
+    })
+)
diff --git a/tsconfig.app.tsbuildinfo b/tsconfig.app.tsbuildinfo
index 5377fb3..91e2530 100644
--- a/tsconfig.app.tsbuildinfo
+++ b/tsconfig.app.tsbuildinfo
@@ -1 +1,3 @@
-{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/places.api.ts","./src/api/tags.api.ts","./src/components/sidebar.tsx","./src/components/tag.tsx","./src/components/ui/button.tsx","./src/components/ui/card.tsx","./src/components/ui/input.tsx","./src/components/ui/label.tsx","./src/components/ui/scroll-area.tsx","./src/components/ui/select.tsx","./src/components/ui/textarea.tsx","./src/interfaces/place.interface.ts","./src/lib/utils.ts","./src/pages/dashboard.page.tsx","./src/pages/tags.page.tsx"],"version":"5.6.2"}
\ No newline at end of file
+
+{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/components/sidebar.tsx","./src/components/tag.tsx","./src/components/ui/button.tsx","./src/components/ui/card.tsx","./src/components/ui/input.tsx","./src/components/ui/label.tsx","./src/components/ui/scroll-area.tsx","./src/components/ui/select.tsx","./src/components/ui/textarea.tsx","./src/interfaces/place.interface.ts","./src/lib/utils.ts","./src/modules/dashboard-sidebar.module.tsx","./src/modules/place.module.tsx","./src/pages/add-place.page.tsx","./src/pages/dashboard.page.tsx","./src/pages/map.page.tsx","./src/pages/settings.page.tsx","./src/pages/tags.page.tsx","./src/shared/api/parse.api.ts","./src/shared/api/places.api.ts","./src/shared/api/tags.api.ts","./src/shared/hooks/useplaces.ts","./src/shared/stores/places.store.ts","./src/shared/stores/settings.store.ts"],"errors":true,"version":"5.6.2"}
+
diff --git a/vite.config.ts b/vite.config.ts
index 79c2c4a..2a735c5 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,10 +3,13 @@ import react from '@vitejs/plugin-react-swc';
 import path from 'path';
 
 export default defineConfig({
-  plugins: [react()],
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, './src'),
+    plugins: [react()],
+    resolve: {
+        alias: {
+            '@': path.resolve(__dirname, './src'),
+        },
     },
-  },
+    server: {
+        host: '127.0.0.1'
+    }
 });
diff --git a/yarn.lock b/yarn.lock
index d9cf865..2aaf091 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -521,6 +521,11 @@
   resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-1.1.0.tgz#f817d1d3265ac5415dadc67edab30ae196696438"
   integrity sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==
 
+"@react-leaflet/core@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@react-leaflet/core/-/core-2.1.0.tgz#383acd31259d7c9ae8fb1b02d5e18fe613c2a13d"
+  integrity sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==
+
 "@remix-run/router@1.21.0":
   version "1.21.0"
   resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.21.0.tgz#c65ae4262bdcfe415dbd4f64ec87676e4a56e2b5"
@@ -687,6 +692,18 @@
   dependencies:
     "@swc/counter" "^0.1.3"
 
+"@tanstack/query-core@5.60.6":
+  version "5.60.6"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.60.6.tgz#0dd33fe231b0d18bf66d0c615b29899738300658"
+  integrity sha512-tI+k0KyCo1EBJ54vxK1kY24LWj673ujTydCZmzEZKAew4NqZzTaVQJEuaG1qKj2M03kUHN46rchLRd+TxVq/zQ==
+
+"@tanstack/react-query@^5.61.0":
+  version "5.61.0"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.61.0.tgz#73473feb37aa28ceb410e297ee060e18f06f88e0"
+  integrity sha512-SBzV27XAeCRBOQ8QcC94w2H1Md0+LI0gTWwc3qRJoaGuewKn5FNW4LSqwPFJZVEItfhMfGT7RpZuSFXjTi12pQ==
+  dependencies:
+    "@tanstack/query-core" "5.60.6"
+
 "@types/estree@1.0.5":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
@@ -697,11 +714,23 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.6.tgz#628effeeae2064a1b4e79f78e81d87b7e5fc7b50"
   integrity sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==
 
+"@types/geojson@*":
+  version "7946.0.14"
+  resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.14.tgz#319b63ad6df705ee2a65a73ef042c8271e696613"
+  integrity sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==
+
 "@types/json-schema@^7.0.15":
   version "7.0.15"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
   integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
 
+"@types/leaflet@^1.9.14":
+  version "1.9.14"
+  resolved "https://registry.yarnpkg.com/@types/leaflet/-/leaflet-1.9.14.tgz#f008fef281a05e457bbae9f00a82c836af1b9b03"
+  integrity sha512-sx2q6MDJaajwhKeVgPSvqXd8rhNJSTA3tMidQGduZn9S6WBYxDkCpSpV5xXEmSg7Cgdk/5vJGhVF1kMYLzauBg==
+  dependencies:
+    "@types/geojson" "*"
+
 "@types/node@^22.7.0":
   version "22.7.0"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-22.7.0.tgz#670aa1874bc836863e5c116f9f2c32416ff27e1f"
@@ -721,6 +750,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-leaflet@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/react-leaflet/-/react-leaflet-3.0.0.tgz#b27a50abb6e3ae734d3c15399a26c77c161cab1c"
+  integrity sha512-p8R9mVKbCDDqOdW+M6GyJJuFn6q+IgDFYavFiOIvaWHuOe5kIHZEtCy1pfM43JIA6JiB3D/aDoby7C51eO+XSg==
+  dependencies:
+    react-leaflet "*"
+
 "@types/react@*", "@types/react@^18.3.9":
   version "18.3.9"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.9.tgz#2cdf5f425ec8a133d67e9e3673909738b783db20"
@@ -1401,6 +1437,11 @@ globals@^15.9.0:
   resolved "https://registry.yarnpkg.com/globals/-/globals-15.9.0.tgz#e9de01771091ffbc37db5714dab484f9f69ff399"
   integrity sha512-SmSKyLLKFbSr6rptvP8izbyxJL4ILwqO9Jg23UA0sDlGlu58V59D1//I3vlc0KJphVdUR7vMjHIplYnzBxorQA==
 
+goober@^2.1.10:
+  version "2.1.16"
+  resolved "https://registry.yarnpkg.com/goober/-/goober-2.1.16.tgz#7d548eb9b83ff0988d102be71f271ca8f9c82a95"
+  integrity sha512-erjk19y1U33+XAMe1VTvIONHYoSqE4iS7BYUZfHaqeohLmnC0FdxEh7rQU+6MZ4OajItzjZFSRtVANrQwNq6/g==
+
 graphemer@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
@@ -1537,6 +1578,11 @@ keyv@^4.5.4:
   dependencies:
     json-buffer "3.0.1"
 
+leaflet@^1.9.4:
+  version "1.9.4"
+  resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.9.4.tgz#23fae724e282fa25745aff82ca4d394748db7d8d"
+  integrity sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==
+
 levn@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
@@ -1844,6 +1890,20 @@ react-dom@^18.3.1:
     loose-envify "^1.1.0"
     scheduler "^0.23.2"
 
+react-hot-toast@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.4.1.tgz#df04295eda8a7b12c4f968e54a61c8d36f4c0994"
+  integrity sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==
+  dependencies:
+    goober "^2.1.10"
+
+react-leaflet@*, react-leaflet@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/react-leaflet/-/react-leaflet-4.2.1.tgz#c300e9eccaf15cb40757552e181200aa10b94780"
+  integrity sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q==
+  dependencies:
+    "@react-leaflet/core" "^2.1.0"
+
 react-remove-scroll-bar@^2.3.6:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz#3e585e9d163be84a010180b18721e851ac81a29c"
@@ -2261,3 +2321,8 @@ yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+zustand@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-5.0.1.tgz#2bdca5e4be172539558ce3974fe783174a48fdcf"
+  integrity sha512-pRET7Lao2z+n5R/HduXMio35TncTlSW68WsYBq2Lg1ASspsNGjpwLAsij3RpouyV6+kHMwwwzP0bZPD70/Jx/w==