From f2a2d24d5112692ff24df2ab4044d3e5fbb3b600 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=86=D0=BD=D0=BD=D0=B0=20=D0=A8=D0=BF=D0=BE=D0=BD=D1=8C?=
 =?UTF-8?q?=D0=BA=D0=B0?= <inneta3@gmail.com>
Date: Thu, 4 Jun 2026 17:40:20 +0300
Subject: [PATCH 1/6] feat: admin art gallery implementation

---
 config/webpack.dev.js                         |   7 ++
 config/webpack.rules.js                       |  17 ++-
 package.json                                  |   4 +-
 .../DeleteImageModal.component.tsx            |  26 +++++
 .../DeleteImageModal.styles.scss              |  26 +++++
 .../EditImageModal.component.tsx              |  58 ++++++++++
 .../EditImageModal/EditImageModal.styles.scss |  43 +++++++
 .../TemplatesModal.component.tsx              |  51 +++++++++
 .../EditImageModal/TemplatesModal.styles.scss |  63 ++++++++++
 .../common/constants/templates.constants.ts   |  20 ++++
 src/app/layout/ModalWrapper.component.tsx     |   6 +
 src/app/stores/image-template-store.ts        |  24 ++++
 src/app/stores/modal-store.ts                 |  11 +-
 src/app/stores/root-store.ts                  |   4 +
 .../AdminPage/AdminPage.component.tsx         |   1 +
 src/features/AdminPage/AdminPage.styles.scss  |   1 +
 .../ArtGallery/ArtGallery.styles.scss         |   6 +
 .../AdminPage/ArtGallery/ArtGallery.tsx       |  33 ++++++
 .../AdminArtControls/AdminArtControls.tsx     |  10 ++
 .../GalleryPreview.component.tsx              |  22 ++++
 .../GalleryPreview/GalleryPreview.styles.scss |  44 +++++++
 .../ImageGallery/AddButtonCard.styles.scss    |  43 +++++++
 .../components/ImageGallery/AddButtonCard.tsx |  37 ++++++
 .../DeleteConfirmationOverlay.styles.scss     |  26 +++++
 .../DeleteConfirmationOverlay.tsx             |  18 +++
 .../ImageGallery/GalleryList.styles.scss      |  10 ++
 .../components/ImageGallery/GalleryList.tsx   |  57 +++++++++
 .../ImageGallery/ImageCard.styles.scss        |  68 +++++++++++
 .../components/ImageGallery/ImageCard.tsx     |  29 +++++
 .../ImageGallery/SortableImageCard.tsx        |  39 +++++++
 .../ImageModal/ImageModal.styles.scss         |   0
 .../components/ImageModal/ImageModal.tsx      |   0
 .../TemplateGrid/TemplateGrid.styles.scss     |  27 +++++
 .../components/TemplateGrid/TemplateGrid.tsx  |  27 +++++
 .../TemplateManager.styles.scss               |   0
 .../TemplateManager/TemplateManager.tsx       |  22 ++++
 .../TemplateSelector/TemplateSelector.tsx     |  31 +++++
 .../Templates/TemplatesHeader.styles.scss     |  43 +++++++
 .../components/Templates/TemplatesHeader.tsx  |  18 +++
 .../Templates/shared-grid.styles.scss         | 108 ++++++++++++++++++
 .../ArtGallery/hooks/useArtGallery.ts         |  53 +++++++++
 .../ArtGallery/hooks/useFileUpload.ts         |  44 +++++++
 .../ArtGallery/types/gallery.types.ts         |  50 ++++++++
 .../ArtGallerySlideItem.component.tsx         |  16 ++-
 .../ArtGallerySlideItem.styles.scss           |   5 +
 src/index.d.ts                                |   2 +
 46 files changed, 1242 insertions(+), 8 deletions(-)
 create mode 100644 src/app/common/components/modals/EditImageModal/DeleteImageModal.component.tsx
 create mode 100644 src/app/common/components/modals/EditImageModal/DeleteImageModal.styles.scss
 create mode 100644 src/app/common/components/modals/EditImageModal/EditImageModal.component.tsx
 create mode 100644 src/app/common/components/modals/EditImageModal/EditImageModal.styles.scss
 create mode 100644 src/app/common/components/modals/EditImageModal/TemplatesModal.component.tsx
 create mode 100644 src/app/common/components/modals/EditImageModal/TemplatesModal.styles.scss
 create mode 100644 src/app/common/constants/templates.constants.ts
 create mode 100644 src/app/stores/image-template-store.ts
 create mode 100644 src/features/AdminPage/ArtGallery/ArtGallery.styles.scss
 create mode 100644 src/features/AdminPage/ArtGallery/ArtGallery.tsx
 create mode 100644 src/features/AdminPage/ArtGallery/components/AdminArtControls/AdminArtControls.tsx
 create mode 100644 src/features/AdminPage/ArtGallery/components/GalleryPreview/GalleryPreview.component.tsx
 create mode 100644 src/features/AdminPage/ArtGallery/components/GalleryPreview/GalleryPreview.styles.scss
 create mode 100644 src/features/AdminPage/ArtGallery/components/ImageGallery/AddButtonCard.styles.scss
 create mode 100644 src/features/AdminPage/ArtGallery/components/ImageGallery/AddButtonCard.tsx
 create mode 100644 src/features/AdminPage/ArtGallery/components/ImageGallery/DeleteConfirmationOverlay.styles.scss
 create mode 100644 src/features/AdminPage/ArtGallery/components/ImageGallery/DeleteConfirmationOverlay.tsx
 create mode 100644 src/features/AdminPage/ArtGallery/components/ImageGallery/GalleryList.styles.scss
 create mode 100644 src/features/AdminPage/ArtGallery/components/ImageGallery/GalleryList.tsx
 create mode 100644 src/features/AdminPage/ArtGallery/components/ImageGallery/ImageCard.styles.scss
 create mode 100644 src/features/AdminPage/ArtGallery/components/ImageGallery/ImageCard.tsx
 create mode 100644 src/features/AdminPage/ArtGallery/components/ImageGallery/SortableImageCard.tsx
 create mode 100644 src/features/AdminPage/ArtGallery/components/ImageModal/ImageModal.styles.scss
 create mode 100644 src/features/AdminPage/ArtGallery/components/ImageModal/ImageModal.tsx
 create mode 100644 src/features/AdminPage/ArtGallery/components/TemplateGrid/TemplateGrid.styles.scss
 create mode 100644 src/features/AdminPage/ArtGallery/components/TemplateGrid/TemplateGrid.tsx
 create mode 100644 src/features/AdminPage/ArtGallery/components/TemplateManager/TemplateManager.styles.scss
 create mode 100644 src/features/AdminPage/ArtGallery/components/TemplateManager/TemplateManager.tsx
 create mode 100644 src/features/AdminPage/ArtGallery/components/TemplateSelector/TemplateSelector.tsx
 create mode 100644 src/features/AdminPage/ArtGallery/components/Templates/TemplatesHeader.styles.scss
 create mode 100644 src/features/AdminPage/ArtGallery/components/Templates/TemplatesHeader.tsx
 create mode 100644 src/features/AdminPage/ArtGallery/components/Templates/shared-grid.styles.scss
 create mode 100644 src/features/AdminPage/ArtGallery/hooks/useArtGallery.ts
 create mode 100644 src/features/AdminPage/ArtGallery/hooks/useFileUpload.ts
 create mode 100644 src/features/AdminPage/ArtGallery/types/gallery.types.ts

diff --git a/config/webpack.dev.js b/config/webpack.dev.js
index 857c6e3..7cc7e88 100644
--- a/config/webpack.dev.js
+++ b/config/webpack.dev.js
@@ -9,6 +9,13 @@ module.exports = {
         open: true,
         port: "3000",
         historyApiFallback: true,
+        client: {
+            // Показывать оверлеем только ошибки, без потока предупреждений.
+            overlay: {
+                errors: true,
+                warnings: false,
+            },
+        },
     },
     module: {
         rules: require('./webpack.rules'),
diff --git a/config/webpack.rules.js b/config/webpack.rules.js
index ff6425d..99ce71c 100644
--- a/config/webpack.rules.js
+++ b/config/webpack.rules.js
@@ -34,7 +34,22 @@ module.exports = [
         use: [
             { loader: 'style-loader' },
             { loader: 'css-loader' },
-            { loader: 'sass-loader' },
+            {
+                loader: 'sass-loader',
+                options: {
+                    // Заглушаем deprecation-предупреждения Dart Sass, которые
+                    // флудят dev-сервер (по одному на каждый .scss-файл).
+                    sassOptions: {
+                        quietDeps: true, // тихо для зависимостей (node_modules, swiper)
+                        silenceDeprecations: [
+                            'legacy-js-api',
+                            'import',
+                            'global-builtin',
+                            'color-functions',
+                        ],
+                    },
+                },
+            },
         ],
     }
 ].filter(Boolean);
\ No newline at end of file
diff --git a/package.json b/package.json
index b1c6fce..6896e9c 100644
--- a/package.json
+++ b/package.json
@@ -6,9 +6,9 @@
   "private": true,
   "dependencies": {
     "@ant-design/icons": "^4.8.0",
-    "@dnd-kit/core": "^6.0.8",
+    "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^7.0.2",
-    "@dnd-kit/utilities": "^3.2.1",
+    "@dnd-kit/utilities": "^3.2.2",
     "@fortawesome/fontawesome-free": "^6.4.0",
     "@react-google-maps/api": "^2.18.1",
     "@react-hook/resize-observer": "^1.2.6",
diff --git a/src/app/common/components/modals/EditImageModal/DeleteImageModal.component.tsx b/src/app/common/components/modals/EditImageModal/DeleteImageModal.component.tsx
new file mode 100644
index 0000000..7a6ee46
--- /dev/null
+++ b/src/app/common/components/modals/EditImageModal/DeleteImageModal.component.tsx
@@ -0,0 +1,26 @@
+import { observer } from 'mobx-react-lite';
+import { useModalContext } from '@stores/root-store';
+import { Modal } from 'antd';
+
+const DeleteImageModal = observer(() => {
+    const { modalStore: { setModal, modalsState: { deleteImage } } } = useModalContext();
+
+    const onConfirm = () => {
+        console.log("Удаляем картинку ID:", deleteImage.image?.id);
+        setModal('deleteImage');
+    };
+
+    return (
+        <Modal
+            title="Видалити зображення"
+            open={deleteImage.isOpen}
+            onOk={onConfirm}
+            onCancel={() => setModal('deleteImage')}
+            className="deleteModal" 
+        >
+            <p>Ви впевнені, що хочете видалити це зображення?</p>
+        </Modal>
+    );
+});
+
+export default DeleteImageModal;
\ No newline at end of file
diff --git a/src/app/common/components/modals/EditImageModal/DeleteImageModal.styles.scss b/src/app/common/components/modals/EditImageModal/DeleteImageModal.styles.scss
new file mode 100644
index 0000000..aa17622
--- /dev/null
+++ b/src/app/common/components/modals/EditImageModal/DeleteImageModal.styles.scss
@@ -0,0 +1,26 @@
+@use "@sass/variables/_variables.colors.scss" as c;
+@use "@sass/mixins/_utils.mixins.scss" as mut;
+
+.deleteModal {
+
+    .ant-btn-default {
+
+        color: #000000;
+
+        &:hover {
+            border-color: c.$accented-red-color;
+            color: c.$accented-red-color;
+        }
+    }
+
+    .ant-btn-primary {
+        background-color: c.$accented-red-color;
+        border-color: c.$accented-red-color;
+        color: c.$pure-white-color;
+
+        &:hover {
+            background-color: c.$dark-red-color;
+            border-color: c.$dark-red-color;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/app/common/components/modals/EditImageModal/EditImageModal.component.tsx b/src/app/common/components/modals/EditImageModal/EditImageModal.component.tsx
new file mode 100644
index 0000000..2648091
--- /dev/null
+++ b/src/app/common/components/modals/EditImageModal/EditImageModal.component.tsx
@@ -0,0 +1,58 @@
+import './EditImageModal.styles.scss';
+import CancelBtn from '@images/utils/Cancel_btn.svg'; // Убедитесь, что путь верный
+import { observer } from 'mobx-react-lite';
+import { useModalContext } from '@stores/root-store';
+import { Button, Form, Input, Modal } from 'antd';
+import FormItem from 'antd/es/form/FormItem';
+import TextArea from 'antd/es/input/TextArea';
+import { useEffect } from 'react';
+
+const EditImageModal = observer(() => {
+    const { modalStore: { setModal, modalsState: { editImage } } } = useModalContext();
+    const [form] = Form.useForm();
+
+    useEffect(() => {
+        if (editImage.isOpen && editImage.image) {
+            form.setFieldsValue({
+                title: editImage.image.title,
+                description: editImage.image.description,
+            });
+        }
+    }, [editImage.isOpen, editImage.image, form]);
+
+    const onSuccessfulSubmit = (values: { title: string; description: string }) => {
+        console.log("Сохраняем данные:", values);
+   
+        setModal('editImage');
+    };
+
+    return (
+        <Modal
+            className="addModal" 
+            open={editImage.isOpen}
+            onCancel={() => setModal('editImage')}
+            footer={[null]}
+            closeIcon={<CancelBtn />}
+        >
+            <h2>Додаткові дані</h2>
+            {editImage.image && (
+                <img src={editImage.image.url} alt="art" style={{ width: '100%', marginBottom: '20px', borderRadius: '8px' }} />
+            )}
+            <Form form={form} onFinish={onSuccessfulSubmit} layout="vertical">
+                <FormItem name="title" label="Назва" rules={[{  message: 'Введіть назву' }]}>
+                    <Input showCount maxLength={150} />
+                </FormItem>
+                <FormItem name="description" label="Опис" rules={[{  message: 'Введіть опис' }]}>
+                    <TextArea rows={4} maxLength={400} showCount />
+                </FormItem>
+                <div className="button-container">
+                    <Button className="save-button" onClick={() => form.submit()}>
+                        Зберегти
+                    </Button>
+                </div>
+            </Form>
+        </Modal>
+    );
+});
+
+export default EditImageModal;
\ No newline at end of file
diff --git a/src/app/common/components/modals/EditImageModal/EditImageModal.styles.scss b/src/app/common/components/modals/EditImageModal/EditImageModal.styles.scss
new file mode 100644
index 0000000..73f96c5
--- /dev/null
+++ b/src/app/common/components/modals/EditImageModal/EditImageModal.styles.scss
@@ -0,0 +1,43 @@
+@use "@assets/sass/variables/_variables.colors.scss" as c;
+@use "@assets/sass/mixins/_utils.mixins.scss" as mut;
+@use "@assets/sass/_utils.functions.scss" as f;
+@use "@assets/sass/variables/_variables.fonts.scss" as ft;
+
+
+.addModal {
+    .ant-modal-content {
+        padding: 20px;
+        border-radius: 8px;
+    }
+
+    .ant-modal-title {
+        color: c.$dark-red-color;
+        text-align: center;
+    }
+
+    .button-container {
+        display: flex;
+        justify-content: center;
+        width: 100%;
+    }
+
+    .save-button {
+        @include mut.flex-centered();
+        @include mut.full-rounded(11px);
+        @include mut.rem-padded(8px, 10px, 8px, 10px);
+
+        height: f.pxToRem(38px);
+        width: fit-content;
+        margin-left: f.pxToRem(8px);
+        margin-right: f.pxToRem(8px);
+
+        color: c.$dark-red-color;
+        border: 2px solid c.$dark-red-color;
+        @include mut.with-font($font-weight: bold, $font-size: 15px);
+
+        &:hover {
+            color: c.$dark-red-color;
+            border-color: c.$dark-red-color;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/app/common/components/modals/EditImageModal/TemplatesModal.component.tsx b/src/app/common/components/modals/EditImageModal/TemplatesModal.component.tsx
new file mode 100644
index 0000000..6d242e8
--- /dev/null
+++ b/src/app/common/components/modals/EditImageModal/TemplatesModal.component.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { Modal } from 'antd';
+import { useModalContext } from '@stores/root-store';
+import './TemplatesModal.styles.scss';
+
+const TemplatesModal = observer(() => {
+    const {
+        modalStore: { setModal, modalsState: { templates } },
+        templateStore
+    } = useModalContext();
+
+    const handleSelect = (template: any) => {
+        templateStore.setActiveTemplate(template);
+        setModal('templates', undefined, false); // Закрываем окно
+    };
+
+    return (
+        <Modal
+            className="templates-modal"
+            open={templates.isOpen}
+            onCancel={() => setModal('templates', undefined, false)}
+            footer={null}
+            title="Шаблони"
+        >
+            <div className="templates-grid">
+                {templateStore.templates.map((item) => (
+                    <div
+                        key={item.id}
+                        className="template-item"
+                        onClick={() => handleSelect(item)}
+                    >
+                        <div
+                            className={`preview-grid ${item.name
+                                .toLowerCase()
+                                .replace(/-/g, '-')}`}
+                        >
+                            {item.slots.map((slot) => (
+                                <div
+                                    key={slot.id}
+                                    className="preview-slot"
+                                />
+                            ))}
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </Modal>
+    );
+});
+export default TemplatesModal;
\ No newline at end of file
diff --git a/src/app/common/components/modals/EditImageModal/TemplatesModal.styles.scss b/src/app/common/components/modals/EditImageModal/TemplatesModal.styles.scss
new file mode 100644
index 0000000..57051a2
--- /dev/null
+++ b/src/app/common/components/modals/EditImageModal/TemplatesModal.styles.scss
@@ -0,0 +1,63 @@
+@import '../../../../../features/AdminPage/ArtGallery/components/Templates/shared-grid.styles.scss';
+
+.templates-modal {
+  .ant-modal-content {
+    width: 837px;
+    height: 520px;
+    border-radius: 30px;
+    overflow: hidden; 
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  
+  .ant-modal-header {
+    padding: 40px 32px 0 32px;
+  }
+
+ 
+  .ant-modal-body {
+    flex: 1; 
+    overflow-y: auto;
+    padding: 40px 32px; 
+    
+   padding-right: 20px; 
+    
+    &::-webkit-scrollbar {
+      width: 8px;
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: #d9d9d9;
+      border-radius: 4px;
+    }
+  }
+}
+
+.templates-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 30px;
+  width: 100%;
+}
+
+.template-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  padding: 12px;
+
+  background: #fff;
+  border: 1px solid #e5e5e5;
+  border-radius: 12px;
+
+  cursor: pointer;
+
+  transition: 0.2s;
+
+  &:hover {
+    border-color: #bdbdbd;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  }
+}
diff --git a/src/app/common/constants/templates.constants.ts b/src/app/common/constants/templates.constants.ts
new file mode 100644
index 0000000..7f4673d
--- /dev/null
+++ b/src/app/common/constants/templates.constants.ts
@@ -0,0 +1,20 @@
+// constants/templates.constants.ts
+
+export interface SlotConfig {
+  id: string;
+}
+
+export interface TemplateConfig {
+  id: number;
+  name: string; 
+  gap: number;
+  slots: SlotConfig[];
+}
+
+export const TEMPLATES_CONFIG: TemplateConfig[] = [
+  { id: 1, name: 'main-big', gap: 5, slots: [{id: 'big'}] },
+  { id: 2, name: 'medium', gap: 5, slots: [{id: 'mid1'}] },
+  { id: 3, name: 'two-medium', gap: 5, slots: [{id: 'mid1'}, {id: 'mid2'}] },
+  { id: 4, name: 'mid-plus-two-small', gap: 4, slots: [{id: 'mid'}, {id: 's1'}, {id: 's2'}] },
+  { id: 5, name: 'four-small', gap: 4, slots: [{id: 's1'}, {id: 's2'}, {id: 's3'}, {id: 's4'}] }
+];
\ No newline at end of file
diff --git a/src/app/layout/ModalWrapper.component.tsx b/src/app/layout/ModalWrapper.component.tsx
index bcee93e..542d1d4 100644
--- a/src/app/layout/ModalWrapper.component.tsx
+++ b/src/app/layout/ModalWrapper.component.tsx
@@ -10,6 +10,9 @@ import PartnersModal from '@components/modals/Partners/PartnersModal.component';
 import RelatedFigureItemModal from '@components/modals/RelatedFigures/RelatedFigureItemModal.component';
 import RelatedFiguresModal from '@components/modals/RelatedFigures/RelatedFiguresModal.component';
 import SourcesModal from '@components/modals/Sources/SourcesModal.component';
+import DeleteImageModal from '@components/modals/EditImageModal/DeleteImageModal.component';
+import EditImageModal from '@components/modals/EditImageModal/EditImageModal.component';
+import TemplatesModal from '@components/modals/EditImageModal/TemplatesModal.component';
 
 const ModalWrapper = () => (
     <>
@@ -25,6 +28,9 @@ const ModalWrapper = () => (
         <ConfirmationModal />
         <RelatedFigureItemModal />
         <StatisticsModal />
+        <EditImageModal />
+        <DeleteImageModal />
+        <TemplatesModal />
     </>
 );
 
diff --git a/src/app/stores/image-template-store.ts b/src/app/stores/image-template-store.ts
new file mode 100644
index 0000000..7558892
--- /dev/null
+++ b/src/app/stores/image-template-store.ts
@@ -0,0 +1,24 @@
+
+import { makeAutoObservable } from 'mobx';
+import { TEMPLATES_CONFIG } from '../common/constants/templates.constants';
+
+export interface Template {
+    id: number;
+    name: string;
+    gap: number;
+    slots: { id: string }[];
+}
+
+export default class TemplateStore {
+    public templates = TEMPLATES_CONFIG;
+    public activeTemplate = this.templates[0];
+    public constructor() { 
+        makeAutoObservable(this); 
+        if (!this.activeTemplate && this.templates.length > 0) {
+            this.activeTemplate = this.templates[0];
+        }
+    }
+    public setActiveTemplate = (template: any) => {
+        this.activeTemplate = template;
+    };
+}
\ No newline at end of file
diff --git a/src/app/stores/modal-store.ts b/src/app/stores/modal-store.ts
index 2fa4ebd..de3b079 100644
--- a/src/app/stores/modal-store.ts
+++ b/src/app/stores/modal-store.ts
@@ -4,6 +4,7 @@ type ModalState = {
     isOpen: boolean;
     fromCardId?: number;
     confirmationProps?:ConfirmationProps;
+    image?: any;
 };
 interface ConfirmationProps {
  onSubmit?:()=>void,
@@ -15,6 +16,7 @@ const DefaultModalState: ModalState = {
     isOpen: false,
     fromCardId: undefined,
     confirmationProps: undefined,
+    image: undefined,
 };
 
 interface ModalList {
@@ -36,6 +38,9 @@ interface ModalList {
     adminFacts: ModalState;
     adminChronology: ModalState;
     statistics: ModalState;
+    editImage: ModalState;
+    deleteImage: ModalState;
+    templates: ModalState;
 }
 
 export default class ModalStore {
@@ -58,6 +63,9 @@ export default class ModalStore {
         adminFacts: DefaultModalState,
         adminChronology: DefaultModalState,
         statistics: DefaultModalState,
+        editImage: DefaultModalState,
+        deleteImage: DefaultModalState,
+        templates: DefaultModalState,
     };
 
     public isPageDimmed = false;
@@ -70,10 +78,11 @@ export default class ModalStore {
         this.isPageDimmed = dimmed ?? !this.isPageDimmed;
     };
 
-    public setModal = (modalName: keyof ModalList, fromId?: number, opened?: boolean) => {
+    public setModal = (modalName: keyof ModalList, fromId?: number, opened?: boolean, data?: any) => {
         this.modalsState[modalName] = {
             isOpen: opened ?? !this.modalsState[modalName].isOpen,
             fromCardId: fromId,
+            image: data,
         };
     };
 
diff --git a/src/app/stores/root-store.ts b/src/app/stores/root-store.ts
index 09ea9f5..bb261f8 100644
--- a/src/app/stores/root-store.ts
+++ b/src/app/stores/root-store.ts
@@ -33,6 +33,8 @@ import TeamStore from './team-store';
 import ToponymStore from './toponym-store';
 import UserLoginStore from './user-login-store';
 
+import TemplateStore from './image-template-store';
+
 interface Store {
     factsStore: FactsStore,
     subtitlesStore: SubtitlesStore,
@@ -69,6 +71,7 @@ export interface StreetcodeDataStore {
 }
 export interface ModalDataStore {
     modalStore: ModalStore,
+    templateStore: TemplateStore,
 }
 
 export const store: Store = {
@@ -107,6 +110,7 @@ export const streetcodeDataStore:StreetcodeDataStore = {
 
 export const modalDataStore:ModalDataStore = {
     modalStore: new ModalStore(),
+    templateStore: new TemplateStore(),
 };
 
 export const toponymDataStore:ToponymStore = new ToponymStore();
diff --git a/src/features/AdminPage/AdminPage.component.tsx b/src/features/AdminPage/AdminPage.component.tsx
index 92c388a..98a449e 100644
--- a/src/features/AdminPage/AdminPage.component.tsx
+++ b/src/features/AdminPage/AdminPage.component.tsx
@@ -1,5 +1,6 @@
 import './AdminPage.styles.scss';
 import AdminBar from './AdminBar.component';
+import  {ArtGallery}  from './ArtGallery/ArtGallery';
 import StreetcodeCatalogComponent from '../StreetcodeCatalogPage/StreetcodeCatalog.component';
 
 const AdminPage = () => (
diff --git a/src/features/AdminPage/AdminPage.styles.scss b/src/features/AdminPage/AdminPage.styles.scss
index 70b7697..bf8d7ac 100644
--- a/src/features/AdminPage/AdminPage.styles.scss
+++ b/src/features/AdminPage/AdminPage.styles.scss
@@ -6,6 +6,7 @@
 .adminPageContainer {
     margin-top: f.pxToRem(100px);
     display: flex;
+    flex-direction: column;
     float: left;
     width: 100%;
     @include mut.with-font();
diff --git a/src/features/AdminPage/ArtGallery/ArtGallery.styles.scss b/src/features/AdminPage/ArtGallery/ArtGallery.styles.scss
new file mode 100644
index 0000000..d8322d6
--- /dev/null
+++ b/src/features/AdminPage/ArtGallery/ArtGallery.styles.scss
@@ -0,0 +1,6 @@
+.art-gallery-container{
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/ArtGallery.tsx b/src/features/AdminPage/ArtGallery/ArtGallery.tsx
new file mode 100644
index 0000000..5119698
--- /dev/null
+++ b/src/features/AdminPage/ArtGallery/ArtGallery.tsx
@@ -0,0 +1,33 @@
+import { useArtGallery } from './hooks/useArtGallery';
+import { GalleryList } from './components/ImageGallery/GalleryList';
+import './ArtGallery.styles.scss';
+import { TemplatesHeader } from './components/Templates/TemplatesHeader';
+import { TemplateGrid } from './components/TemplateGrid/TemplateGrid';
+import { useModalContext } from '@/app/stores/root-store';
+
+export const ArtGallery = () => {
+
+  const { images, addImage } = useArtGallery();
+  const { modalStore: { setModal } } = useModalContext();
+
+  const handleOpenTemplates = () => {
+      setModal('templates', undefined, true);
+  };
+
+  return (
+    <div className="art-gallery-container">
+      <h2>Арт-галерея</h2>
+
+      <div className="gallery-viewport">
+        <GalleryList
+          images={images} onUpload={addImage} onDelete={console.log} onEdit={console.log}
+        />
+      </div>
+      <section className="gallery-section">
+        <TemplatesHeader onOpenTemplates={handleOpenTemplates} />
+        <TemplateGrid /> 
+      </section>
+    </div>
+  );
+};
+
diff --git a/src/features/AdminPage/ArtGallery/components/AdminArtControls/AdminArtControls.tsx b/src/features/AdminPage/ArtGallery/components/AdminArtControls/AdminArtControls.tsx
new file mode 100644
index 0000000..f775021
--- /dev/null
+++ b/src/features/AdminPage/ArtGallery/components/AdminArtControls/AdminArtControls.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+// import './AdminArtControls.styles.scss';
+import { AdminArtControlsProps } from '../../types/gallery.types';
+
+export const AdminArtControls = ({ onDelete, onEdit }: AdminArtControlsProps) => (
+  <div className="admin-art-controls">
+    <button className="edit-btn" onClick={onEdit}>Редагувати</button>
+    <button className="delete-btn" onClick={onDelete}>Видалити</button>
+  </div>
+);
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/components/GalleryPreview/GalleryPreview.component.tsx b/src/features/AdminPage/ArtGallery/components/GalleryPreview/GalleryPreview.component.tsx
new file mode 100644
index 0000000..a6595aa
--- /dev/null
+++ b/src/features/AdminPage/ArtGallery/components/GalleryPreview/GalleryPreview.component.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import ArtGallerySlide from '@streetcode/ArtGalleryBlock/ArtGalleryListOfItem/ArtGallerySlide.component';
+import { toIndexedArts } from '../../hooks/useArtGallery';
+import { ArtImage } from '../../types/gallery.types';
+import './GalleryPreview.styles.scss';
+
+interface Props {
+  images: ArtImage[];
+}
+
+
+export const GalleryPreview = ({ images }: Props) => {
+  if (!images.length) {
+    return null;
+  }
+
+  return (
+    <div className="gallery-preview">
+      <ArtGallerySlide artGalleryList={toIndexedArts(images)} isAdminPage />
+    </div>
+  );
+};
diff --git a/src/features/AdminPage/ArtGallery/components/GalleryPreview/GalleryPreview.styles.scss b/src/features/AdminPage/ArtGallery/components/GalleryPreview/GalleryPreview.styles.scss
new file mode 100644
index 0000000..1dc5dba
--- /dev/null
+++ b/src/features/AdminPage/ArtGallery/components/GalleryPreview/GalleryPreview.styles.scss
@@ -0,0 +1,44 @@
+@use "@sass/_utils.functions.scss" as *;
+
+// Стили admin-режима витринной галереи (классы *Admin, которые в самом
+// StreetcodePage/ArtGalleryBlock объявлены, но не описаны). Держим их здесь,
+// чтобы не трогать витринный модуль. Размеры повторяют десктопную раскладку
+// сайта (ArtGallerySlideItem.styles.scss), но без перехода в модалку.
+.gallery-preview {
+  .slideArtGalleryContainerAdmin {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    margin-top: pxToRem(20px);
+  }
+
+  .slideArtAdmin {
+    flex: pxToRem(80px);
+
+    .small {
+      width: pxToRem(380px);
+      height: pxToRem(253px);
+    }
+
+    .medium {
+      width: pxToRem(380px);
+      height: pxToRem(536px);
+    }
+
+    .large {
+      width: pxToRem(806px);
+      height: pxToRem(536px);
+    }
+  }
+
+  .artImageWrapperAdmin {
+    position: relative;
+
+    .imgImg {
+      width: 100%;
+      height: 100%;
+      border-radius: pxToRem(30px);
+      object-fit: cover;
+    }
+  }
+}
diff --git a/src/features/AdminPage/ArtGallery/components/ImageGallery/AddButtonCard.styles.scss b/src/features/AdminPage/ArtGallery/components/ImageGallery/AddButtonCard.styles.scss
new file mode 100644
index 0000000..4abcf47
--- /dev/null
+++ b/src/features/AdminPage/ArtGallery/components/ImageGallery/AddButtonCard.styles.scss
@@ -0,0 +1,43 @@
+.add-button-card {
+  width: 146px;
+  height: 183px; 
+  border: 1px dashed #cccccc;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background-color: #fcfcfc;
+  transition: border-color 0.2s;
+  transition: all 0.2s ease;
+
+  &:hover {
+    border-color: #999;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding: 10px;
+    gap: 8px;
+
+    .icon {
+      font-size: 24px;
+      color: #666;
+    }
+
+    .text {
+      font-size: 12px;
+      color: #757575;
+      margin: 0;
+      line-height: 1.4;
+    }
+  }
+  &.dragging {
+    border-color: #2563eb;
+    background-color: #eff6ff; 
+    transform: scale(1.02); 
+  }
+}
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/components/ImageGallery/AddButtonCard.tsx b/src/features/AdminPage/ArtGallery/components/ImageGallery/AddButtonCard.tsx
new file mode 100644
index 0000000..e5ae660
--- /dev/null
+++ b/src/features/AdminPage/ArtGallery/components/ImageGallery/AddButtonCard.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { useFileUpload } from '../../hooks/useFileUpload'; //
+import './AddButtonCard.styles.scss';
+
+export const AddButtonCard = ({ onUpload }) => {
+  const { 
+    fileInputRef, 
+    isDragging, 
+    openFilePicker, 
+    handleFileChange, 
+    handleDragOver, 
+    handleDragLeave, 
+    handleDrop 
+  } = useFileUpload(onUpload);
+
+  return (
+    <div 
+      className={`add-button-card ${isDragging ? 'dragging' : ''}`}
+      onClick={openFilePicker}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+    >
+      <input
+        type="file"
+        ref={fileInputRef}
+        onChange={handleFileChange}
+        accept="image/*"
+        hidden
+      />
+      <div className="content">
+        <span>☁️</span>
+        <p>Перетягніть файл або натисніть</p>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/components/ImageGallery/DeleteConfirmationOverlay.styles.scss b/src/features/AdminPage/ArtGallery/components/ImageGallery/DeleteConfirmationOverlay.styles.scss
new file mode 100644
index 0000000..1b6c164
--- /dev/null
+++ b/src/features/AdminPage/ArtGallery/components/ImageGallery/DeleteConfirmationOverlay.styles.scss
@@ -0,0 +1,26 @@
+.delete-confirmation-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.5);
+  color: #ff0000;
+  gap: 10px;
+  z-index: 10;
+  
+  p { font-weight: bold; margin: 0; }
+  
+  .buttons {
+    display: flex;
+    gap: 10px;
+    width: 100%;
+    justify-content: center;
+  }
+  button {
+    width: 80%; 
+    padding: 8px;
+    cursor: pointer;
+  }
+}
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/components/ImageGallery/DeleteConfirmationOverlay.tsx b/src/features/AdminPage/ArtGallery/components/ImageGallery/DeleteConfirmationOverlay.tsx
new file mode 100644
index 0000000..902e421
--- /dev/null
+++ b/src/features/AdminPage/ArtGallery/components/ImageGallery/DeleteConfirmationOverlay.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { DeleteConfirmationOverlayProps } from '../../types/gallery.types';
+import './DeleteConfirmationOverlay.styles.scss';
+
+
+export const DeleteConfirmationOverlay: React.FC<DeleteConfirmationOverlayProps> = ({ isVisible, onConfirm, onCancel }) => {
+    if (!isVisible) return null;
+
+    return (
+        <div className="delete-confirmation-overlay">
+            <p>Видалити?</p>
+            <div className="buttons">
+                <button className="btn-confirm" onClick={onConfirm}>Так</button>
+                <button className="btn-cancel" onClick={onCancel}>Ні</button>
+            </div>
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/components/ImageGallery/GalleryList.styles.scss b/src/features/AdminPage/ArtGallery/components/ImageGallery/GalleryList.styles.scss
new file mode 100644
index 0000000..d5e0a19
--- /dev/null
+++ b/src/features/AdminPage/ArtGallery/components/ImageGallery/GalleryList.styles.scss
@@ -0,0 +1,10 @@
+.gallery-list {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
+  gap: 0 24px;
+  padding: 20px;
+  align-items: end;
+  
+}
+
diff --git a/src/features/AdminPage/ArtGallery/components/ImageGallery/GalleryList.tsx b/src/features/AdminPage/ArtGallery/components/ImageGallery/GalleryList.tsx
new file mode 100644
index 0000000..5b9b491
--- /dev/null
+++ b/src/features/AdminPage/ArtGallery/components/ImageGallery/GalleryList.tsx
@@ -0,0 +1,57 @@
+import React, { useState, useEffect } from 'react';
+import { DndContext, closestCenter } from '@dnd-kit/core';
+import { arrayMove, SortableContext, rectSortingStrategy } from '@dnd-kit/sortable';
+import { GalleryListProps, ArtImage } from '../../types/gallery.types';
+import { SortableImageCard } from './SortableImageCard';
+import { AddButtonCard } from './AddButtonCard';
+import './GalleryList.styles.scss';
+
+
+export const GalleryList: React.FC<GalleryListProps> = ({ 
+  images: propImages, 
+  onUpload, 
+  onDelete, 
+  onEdit 
+}) => {
+  const [images, setImages] = useState<ArtImage[]>(propImages);
+  const [confirmingId, setConfirmingId] = useState<string | null>(null);
+
+  useEffect(() => {
+    setImages(propImages);
+  }, [propImages]);
+
+  const handleDragEnd = (event: any) => {
+    const { active, over } = event;
+
+    if (over && active.id !== over.id) {
+      setImages((items) => {
+        const oldIndex = items.findIndex((i) => i.id === active.id);
+        const newIndex = items.findIndex((i) => i.id === over.id);
+        const newArray = arrayMove(items, oldIndex, newIndex);
+        return newArray;
+      });
+    }
+  };
+
+  return (
+    <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+      <div className="gallery-list">
+        <AddButtonCard onUpload={onUpload} />
+        
+        <SortableContext items={images} strategy={rectSortingStrategy}>
+          {images.map((img) => (
+            <SortableImageCard 
+              key={img.id} 
+              image={img} 
+              onDelete={onDelete} 
+              onEdit={onEdit} 
+              isConfirming={confirmingId === img.id}
+            onConfirmRequest={() => setConfirmingId(img.id)}
+            onCancelRequest={() => setConfirmingId(null)}
+            />
+          ))}
+        </SortableContext>
+      </div>
+    </DndContext>
+  );
+};
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/components/ImageGallery/ImageCard.styles.scss b/src/features/AdminPage/ArtGallery/components/ImageGallery/ImageCard.styles.scss
new file mode 100644
index 0000000..f556304
--- /dev/null
+++ b/src/features/AdminPage/ArtGallery/components/ImageGallery/ImageCard.styles.scss
@@ -0,0 +1,68 @@
+@use "@assets/sass/variables/_variables.colors.scss" as c;
+
+.image-card {
+  width: 146px;
+  height: 152px;
+  border: 1px solid #e0e0e0;
+  padding: 16px;
+  border-radius: 8px;
+  margin-top: 31px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background-color: transparent;
+  cursor: pointer;
+
+  &.is-deleting {
+    border: 2px solid c.$accented-red-color !important;
+  }
+
+
+  img {
+    width: 120px;
+    height: 114px;
+    border-radius: 8px;
+    position: relative;
+    object-fit: fill;
+  }
+
+ .controls-overlay__item {
+    position: absolute; 
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%); 
+    
+    width: 83px;
+    height: 39px;
+    background: rgba(29, 31, 35, 0.8);
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    
+    opacity: 0;
+    transition: opacity 0.3s;
+    z-index: 10;
+    pointer-events: none;
+  
+
+    button {
+      background: none;
+      border: none;
+      color: white;
+      cursor: pointer;
+
+      &:hover {
+      color: c.$accented-red-color; 
+    }
+    }
+  }
+
+  &:hover .controls-overlay__item {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/components/ImageGallery/ImageCard.tsx b/src/features/AdminPage/ArtGallery/components/ImageGallery/ImageCard.tsx
new file mode 100644
index 0000000..24c57e1
--- /dev/null
+++ b/src/features/AdminPage/ArtGallery/components/ImageGallery/ImageCard.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { useModalContext } from '@stores/root-store';
+import { ImageCardProps } from '../../types/gallery.types';
+import './ImageCard.styles.scss';
+
+export const ImageCard: React.FC<ImageCardProps> = ({ 
+  image, attributes, listeners 
+}) => {
+  const { modalStore: { setModal } } = useModalContext();
+
+  return (
+    <div className="image-card">
+      <img src={image.url} alt="art" {...attributes} {...listeners} />
+
+      <div className="controls-overlay__item">
+        <button onClick={(e) => { 
+            e.stopPropagation(); 
+           setModal('editImage', undefined, true, image);
+        }}>🔍</button>
+        
+       <button onClick={(e) => { 
+    e.stopPropagation(); 
+    // Теперь это будет вызывать модалку именно для картинки
+    setModal('deleteImage', undefined, true, image); 
+}}>🗑️</button>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/components/ImageGallery/SortableImageCard.tsx b/src/features/AdminPage/ArtGallery/components/ImageGallery/SortableImageCard.tsx
new file mode 100644
index 0000000..6e39210
--- /dev/null
+++ b/src/features/AdminPage/ArtGallery/components/ImageGallery/SortableImageCard.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { ImageCard } from './ImageCard';
+import { SortableImageCardProps } from '../../types/gallery.types';
+
+
+export const SortableImageCard: React.FC<SortableImageCardProps> = ({
+    image,
+    onDelete,
+    onEdit,
+    isConfirming,
+    onConfirmRequest,
+    onCancelRequest
+}) => {
+    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
+        id: image.id
+    });
+
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+    };
+
+    return (
+        <div ref={setNodeRef} style={style}>
+                <ImageCard
+                    image={image}
+                    onDelete={() => onDelete(image.id)}
+                    onEdit={() => onEdit(image)}
+                    isConfirming={isConfirming}
+                    onConfirmRequest={onConfirmRequest}
+                    onCancelRequest={onCancelRequest}
+                    attributes={attributes}
+                    listeners={listeners}
+                />
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/components/ImageModal/ImageModal.styles.scss b/src/features/AdminPage/ArtGallery/components/ImageModal/ImageModal.styles.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/features/AdminPage/ArtGallery/components/ImageModal/ImageModal.tsx b/src/features/AdminPage/ArtGallery/components/ImageModal/ImageModal.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/features/AdminPage/ArtGallery/components/TemplateGrid/TemplateGrid.styles.scss b/src/features/AdminPage/ArtGallery/components/TemplateGrid/TemplateGrid.styles.scss
new file mode 100644
index 0000000..aadc241
--- /dev/null
+++ b/src/features/AdminPage/ArtGallery/components/TemplateGrid/TemplateGrid.styles.scss
@@ -0,0 +1,27 @@
+@import '../Templates/shared-grid.styles';
+
+.template-grid-container {
+    display: flex;
+    justify-content: center; 
+    gap: var(--grid-gap, 5px); 
+    height: 203px;
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+.preview-slot{
+    width: 137px;
+    height: content;
+}
+
+.slot {
+    background-color: #000;
+    border-radius: 8px;
+    overflow: hidden;
+    cursor: pointer;
+    
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+}
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/components/TemplateGrid/TemplateGrid.tsx b/src/features/AdminPage/ArtGallery/components/TemplateGrid/TemplateGrid.tsx
new file mode 100644
index 0000000..4aa0b45
--- /dev/null
+++ b/src/features/AdminPage/ArtGallery/components/TemplateGrid/TemplateGrid.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite'; 
+import { useModalContext } from '@stores/root-store'; 
+import './TemplateGrid.styles.scss';
+
+export const TemplateGrid = observer(() => { 
+  const { templateStore } = useModalContext();
+  const { activeTemplate } = templateStore;
+if (!activeTemplate) {
+    return <div>Загрузка шаблонов...</div>; 
+  }
+  return (
+   <div className={`template-grid-container preview-grid ${activeTemplate.name}`}>
+      
+      {activeTemplate.slots.map((slot) => (
+        <div 
+          key={slot.id} 
+          className="preview-slot" 
+          onDrop={() => console.log(`Drop to ${slot.id}`)}
+          onDragOver={(e) => e.preventDefault()} 
+        >
+        </div>
+      ))}
+      
+    </div>
+  );
+});
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/components/TemplateManager/TemplateManager.styles.scss b/src/features/AdminPage/ArtGallery/components/TemplateManager/TemplateManager.styles.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/features/AdminPage/ArtGallery/components/TemplateManager/TemplateManager.tsx b/src/features/AdminPage/ArtGallery/components/TemplateManager/TemplateManager.tsx
new file mode 100644
index 0000000..e85141a
--- /dev/null
+++ b/src/features/AdminPage/ArtGallery/components/TemplateManager/TemplateManager.tsx
@@ -0,0 +1,22 @@
+import React, { useState } from 'react';
+import { TemplateGrid } from '../TemplateGrid/TemplateGrid';
+import './TemplateManager.styles.scss';
+
+import { useArtGallery } from '../../hooks/useArtGallery';
+export const TemplateManager = () => {
+  const { activeTemplate, setActiveTemplate } = useArtGallery();
+
+  return (
+    <div className="template-manager">
+      <div className="manager-header">
+        <h3>Шаблони</h3>
+        <TemplateSelector 
+          current={activeTemplate} 
+          onSelect={setActiveTemplate} 
+        />
+      </div>
+      {/* Сетка просто рендерит структуру, данные берет из массива изображений */}
+      <TemplateGrid activeType={activeTemplate} />
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/components/TemplateSelector/TemplateSelector.tsx b/src/features/AdminPage/ArtGallery/components/TemplateSelector/TemplateSelector.tsx
new file mode 100644
index 0000000..f9893dd
--- /dev/null
+++ b/src/features/AdminPage/ArtGallery/components/TemplateSelector/TemplateSelector.tsx
@@ -0,0 +1,31 @@
+// TemplateSelector.tsx
+const TEMPLATES = [
+  { id: 'layout-1', name: 'Стандарт', icon: '■■' }, // Тут будет SVG-схема
+  { id: 'layout-2', name: 'Три в ряд', icon: '■■■' },
+];
+
+export const TemplateSelector = ({ current, onSelect }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="template-selector">
+      <button onClick={() => setIsOpen(!isOpen)}>Обрати шаблон</button>
+      
+      {isOpen && (
+        <div className="templates-popup">
+          {TEMPLATES.map(tmpl => (
+            <div 
+              key={tmpl.id} 
+              className="template-preview-card"
+              onClick={() => onSelect(tmpl.id)}
+            >
+              {/* Тут будет визуальное превью разметки */}
+              <div className="preview-icon">{tmpl.icon}</div>
+              <span>{tmpl.name}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/components/Templates/TemplatesHeader.styles.scss b/src/features/AdminPage/ArtGallery/components/Templates/TemplatesHeader.styles.scss
new file mode 100644
index 0000000..2a247d5
--- /dev/null
+++ b/src/features/AdminPage/ArtGallery/components/Templates/TemplatesHeader.styles.scss
@@ -0,0 +1,43 @@
+@use "@assets/sass/variables/_variables.colors.scss" as c;
+@use "@assets/sass/variables/_variables.fonts.scss" as ft;
+@use "@assets/sass/_utils.functions.scss" as f;
+@use "@assets/sass/mixins/_utils.mixins.scss" as mut;
+
+.templates-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    margin-bottom: 20px;
+    padding: 0 32px;
+
+    .templates-title {
+        margin: 0;
+        @include mut.with-font($font-weight: 600);
+    }
+
+    .streetcode-custom-button {
+        @include mut.sized(212px, 48px);
+        border-radius: f.pxToRem(8px);
+        border: 0.025rem solid c.$dark-red-color;
+        color: c.$pure-white-color;
+        @include mut.with-font(ft.$roboto-font, $font-size: 20px, $font-weight: 500);
+
+
+        >span {
+            @include mut.with-font($font-size: 20px, $font-weight: 500);
+            color: c.$pure-white-color;
+        }
+
+        &:hover {
+            background-color: c.$dark-red-color;
+            transition: 0.5s;
+            border: none;
+        }
+
+        &:focus {
+            outline: none;
+            border: none;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/components/Templates/TemplatesHeader.tsx b/src/features/AdminPage/ArtGallery/components/Templates/TemplatesHeader.tsx
new file mode 100644
index 0000000..c5c3d58
--- /dev/null
+++ b/src/features/AdminPage/ArtGallery/components/Templates/TemplatesHeader.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Button } from 'antd';
+import './TemplatesHeader.styles.scss';
+import { TemplateHeaderProps } from '../../types/gallery.types';
+
+export const TemplatesHeader = ({ onOpenTemplates }: TemplateHeaderProps) => {
+    return (
+        <div className="templates-header">
+            <h3 className="templates-title">Шаблони</h3>
+            <Button 
+                className="streetcode-custom-button" 
+                onClick={onOpenTemplates}
+            >
+                Обрати шаблон
+            </Button>
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/components/Templates/shared-grid.styles.scss b/src/features/AdminPage/ArtGallery/components/Templates/shared-grid.styles.scss
new file mode 100644
index 0000000..fda69d3
--- /dev/null
+++ b/src/features/AdminPage/ArtGallery/components/Templates/shared-grid.styles.scss
@@ -0,0 +1,108 @@
+
+
+.preview-slot {
+  background: #000;
+  border-radius: 4px;
+}
+
+/* -------------------------------- */
+/* Main-Big-Plus-Two */
+/* -------------------------------- */
+
+.preview-grid.main-big {
+  display: grid;
+
+  .preview-slot {
+    width: 255px;
+    height: 205px;
+  }
+}
+
+.preview-grid.medium {
+  display: grid;
+
+  grid-template-columns: repeat(1, 137px);
+  gap: 5px;
+
+  .preview-slot {
+    width: 137px;
+    height: 203px;
+  }
+}
+
+/* -------------------------------- */
+/* Two-Medium */
+/* -------------------------------- */
+
+.preview-grid.two-medium {
+  display: grid;
+
+  grid-template-columns: repeat(2, 137px);
+
+  gap: 5px;
+
+  .preview-slot {
+    width: 137px;
+    height: 203px;
+  }
+}
+
+/* -------------------------------- */
+/* Mid-Plus-Two-Small */
+/* -------------------------------- */
+
+.preview-grid.mid-plus-two-small {
+  display: grid;
+
+  grid-template-columns: 137px 135px;
+  grid-template-rows: 101px 101px;
+
+  gap: 4px;
+
+  .preview-slot:nth-child(1) {
+    grid-row: 1 / span 2;
+  }
+}
+
+/* -------------------------------- */
+/* Four-Small */
+/* -------------------------------- */
+
+.preview-grid.four-small {
+  display: grid;
+
+  grid-template-columns: repeat(2, 135px);
+  grid-template-rows: repeat(2, 101px);
+
+  gap: 4px;
+}
+
+
+// .preview-grid {
+//   display: grid;
+//   gap: 5px; // Значение по умолчанию
+
+//   &.main-big { grid-template-columns: 255px; grid-template-rows: 205px; }
+//   &.medium { grid-template-columns: 137px; grid-template-rows: 203px; }
+//   &.two-medium { grid-template-columns: repeat(2, 137px); grid-template-rows: 203px; }
+  
+//   &.mid-plus-two-small {
+//     grid-template-columns: 137px 135px;
+//     grid-template-rows: 101px 101px;
+//     gap: 4px;
+//     .preview-slot:first-child { grid-row: span 2; }
+//   }
+
+//   &.four-small {
+//     grid-template-columns: repeat(2, 135px);
+//     grid-template-rows: repeat(2, 101px);
+//     gap: 4px;
+//   }
+// }
+
+// .preview-slot {
+//   background: #000;
+//   border-radius: 4px;
+//   width: 100%; // Слот сам заполнит ячейку сетки
+//   height: 100%;
+// }
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/hooks/useArtGallery.ts b/src/features/AdminPage/ArtGallery/hooks/useArtGallery.ts
new file mode 100644
index 0000000..82cbcbf
--- /dev/null
+++ b/src/features/AdminPage/ArtGallery/hooks/useArtGallery.ts
@@ -0,0 +1,53 @@
+import { useState } from 'react';
+import { getImageSize } from 'react-image-size';
+import { IndexedArt } from '@models/media/art.model';
+import { ArtImage } from '../types/gallery.types';
+
+// Та же формула, что на витрине (ArtGalleryBlock.component.tsx):
+// вертикальные -> medium (2), узкие горизонтальные -> small (1), широкие -> large (4).
+const calcOffset = (width: number, height: number): number => {
+  if (width <= height) return 2;
+  if (width > height && height <= 300) return 1;
+  return 4;
+};
+
+// Маппинг рабочей модели админки в формат витринного рендера ArtGallerySlide.
+export const toIndexedArts = (images: ArtImage[]): IndexedArt[] => images.map((image, i) => ({
+  index: i + 1,
+  sequenceNumber: i,
+  imageHref: image.url,
+  title: image.title ?? '',
+  description: image.description ?? '',
+  offset: image.offset,
+}));
+
+export const useArtGallery = () => {
+  const [images, setImages] = useState<ArtImage[]>([]);
+
+  const addImage = async (file: File) => {
+    const url = URL.createObjectURL(file); // В реальности здесь будет URL от API
+    let offset = 4;
+    try {
+      const { width, height } = await getImageSize(url);
+      offset = calcOffset(width, height);
+    } catch { /* если размеры не прочитались — оставляем large по умолчанию */ }
+
+    const newImage: ArtImage = {
+      id: Date.now().toString(),
+      url,
+      isPublished: false,
+      offset,
+    };
+    setImages((prev) => [...prev, newImage]);
+  };
+
+  const deleteImage = (id: string) => {
+    setImages((prev) => prev.filter((img) => img.id !== id || img.isPublished));
+  };
+
+  const updateImage = (updatedImage: ArtImage) => {
+    setImages((prev) => prev.map((img) => (img.id === updatedImage.id ? updatedImage : img)));
+  };
+
+  return { images, addImage, deleteImage, updateImage };
+};
diff --git a/src/features/AdminPage/ArtGallery/hooks/useFileUpload.ts b/src/features/AdminPage/ArtGallery/hooks/useFileUpload.ts
new file mode 100644
index 0000000..c1dc4bb
--- /dev/null
+++ b/src/features/AdminPage/ArtGallery/hooks/useFileUpload.ts
@@ -0,0 +1,44 @@
+import { useState, useRef, DragEvent, ChangeEvent } from 'react';
+
+export const useFileUpload = (onUpload: (file: File) => void) => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [isDragging, setIsDragging] = useState(false);
+
+ 
+  const openFilePicker = () => {
+    fileInputRef.current?.click();
+  };
+
+
+  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) onUpload(file);
+  };
+
+  // Drag-and-Drop события
+  const handleDragOver = (e: DragEvent) => {
+    e.preventDefault();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = () => {
+    setIsDragging(false);
+  };
+
+  const handleDrop = (e: DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+    const file = e.dataTransfer.files?.[0];
+    if (file) onUpload(file);
+  };
+
+  return {
+    fileInputRef,
+    isDragging,
+    openFilePicker,
+    handleFileChange,
+    handleDragOver,
+    handleDragLeave,
+    handleDrop
+  };
+};
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/types/gallery.types.ts b/src/features/AdminPage/ArtGallery/types/gallery.types.ts
new file mode 100644
index 0000000..44cff42
--- /dev/null
+++ b/src/features/AdminPage/ArtGallery/types/gallery.types.ts
@@ -0,0 +1,50 @@
+export interface ArtImage {
+  id: string;
+  url: string;
+  title?: string;
+  description?: string;
+  isPublished: boolean;
+  offset: number;
+}
+
+export interface GalleryListProps {
+  images: ArtImage[];
+  onUpload: (file: File) => void;
+  onDelete: (id: string) => void;
+  onEdit: (image: ArtImage) => void;
+}
+
+export interface ImageCardProps {
+  image: ArtImage;
+  attributes: any; 
+  listeners: any;
+}
+
+export interface SortableImageCardProps {
+  image: ArtImage;
+  onDelete: (id: string) => void;
+  onEdit: (image: ArtImage) => void;
+  isConfirming: boolean;
+  onConfirmRequest: () => void;
+  onCancelRequest: () => void;
+}
+
+export interface DeleteConfirmationOverlayProps {
+  isVisible: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+
+export interface AdminArtControlsProps {
+  onDelete: () => void;
+  onEdit: () => void;
+}
+
+export interface Template {
+  id: number;
+  previewUrl: string; 
+}
+export interface TemplateHeaderProps {
+    onOpenTemplates: () => void; 
+}
\ No newline at end of file
diff --git a/src/features/StreetcodePage/ArtGalleryBlock/ArtGalleryItem/ArtGallerySlideItem.component.tsx b/src/features/StreetcodePage/ArtGalleryBlock/ArtGalleryItem/ArtGallerySlideItem.component.tsx
index 47736ca..54aa223 100644
--- a/src/features/StreetcodePage/ArtGalleryBlock/ArtGalleryItem/ArtGallerySlideItem.component.tsx
+++ b/src/features/StreetcodePage/ArtGalleryBlock/ArtGalleryItem/ArtGallerySlideItem.component.tsx
@@ -1,9 +1,9 @@
 import './ArtGallerySlideItem.styles.scss';
-
+import { AdminArtControls } from '../../../AdminPage/ArtGallery/components/AdminArtControls/AdminArtControls'; 
 import { IndexedArt } from '@models/media/art.model';
 
 import useWindowSize from '@/app/common/hooks/stateful/useWindowSize.hook';
-import useMobx, { useAdditionalContext, useModalContext } from '@/app/stores/root-store';
+import useMobx, { useModalContext } from '@/app/stores/root-store';
 
 interface Props {
     artGalleryItem: IndexedArt,
@@ -23,6 +23,7 @@ const ArtGallerySlideItem = ({ artGalleryItem, offset, isAdminPage }: Props) =>
                 return 'medium';
             case 4:
                 return 'large';
+            default: return 'small';
         }
     }
 
@@ -31,11 +32,18 @@ const ArtGallerySlideItem = ({ artGalleryItem, offset, isAdminPage }: Props) =>
             : `slideArt ${setStyleByOffset(offset)}`}
         >
             <div className={isAdminPage ? 'artImageWrapperAdmin' : 'artImageWrapper'}>
-                <div className={`artContainer ${setStyleByOffset(offset) }`}>
+                {isAdminPage && (
+                    <AdminArtControls 
+                        onEdit={() => console.log('Редагування', artGalleryItem.id)} 
+                        onDelete={() => console.log('Видалення', artGalleryItem.id)} 
+                    />
+                )}
+                
+                <div className={`artContainer ${setStyleByOffset(offset)}`}>
                     <img
                         className={`imgImg ${setStyleByOffset(offset)}`}
                         src={imageHref}
-                        onClick={isAdminPage ? null : () => setModal('artGallery', sequenceNumber)}
+                        onClick={isAdminPage ? undefined : () => setModal('artGallery', sequenceNumber)}
                         alt=""
                     />
                     {windowsize.width > 1024 && (
diff --git a/src/features/StreetcodePage/ArtGalleryBlock/ArtGalleryItem/ArtGallerySlideItem.styles.scss b/src/features/StreetcodePage/ArtGalleryBlock/ArtGalleryItem/ArtGallerySlideItem.styles.scss
index bb7dae3..924f212 100644
--- a/src/features/StreetcodePage/ArtGalleryBlock/ArtGalleryItem/ArtGallerySlideItem.styles.scss
+++ b/src/features/StreetcodePage/ArtGalleryBlock/ArtGalleryItem/ArtGallerySlideItem.styles.scss
@@ -24,6 +24,11 @@
         height: pxToRem(536px);
     }
 }
+.artImageWrapperAdmin {
+    position: relative; 
+    width: 100%;
+    height: 100%;
+}
 
 @media screen and (max-width:1450px) {
     .slideArt {
diff --git a/src/index.d.ts b/src/index.d.ts
index 8951edd..1556ac0 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -5,6 +5,8 @@ declare module '*.svg' {
     export default content;
 }
 declare module '*.css';
+declare module '*.scss';
+declare module '*.sass';
 declare module '*.jpeg';
 declare module '*.scss' {
   const classes: { [key: string]: string };

From 398a2a8ef999d3f89f4d9b629dfecd9bccd30036 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=86=D0=BD=D0=BD=D0=B0=20=D0=A8=D0=BF=D0=BE=D0=BD=D1=8C?=
 =?UTF-8?q?=D0=BA=D0=B0?= <inneta3@gmail.com>
Date: Fri, 12 Jun 2026 13:39:17 +0300
Subject: [PATCH 2/6] update block

---
 .../ImageTemplates-grid/TemplateRenderer.tsx  |  17 ++
 .../shared-grid.styles.scss                   |  91 ++++++++
 .../TemplatesModal.component.tsx              |  26 +--
 .../EditImageModal/TemplatesModal.styles.scss |   1 -
 src/app/stores/image-template-store.ts        |  46 ++--
 src/app/stores/root-store.ts                  |   6 +-
 src/app/stores/template-store.ts              |  27 +++
 .../AdminPage/AdminPage.component.tsx         |   1 +
 .../ArtGallery/ArtGallery.styles.scss         |   6 +
 .../AdminPage/ArtGallery/ArtGallery.tsx       | 198 +++++++++++++++--
 .../SavedTemplatesCarousel.styles.scss        | 201 ++++++++++++++++++
 .../Carousel/SavedTemplatesCarousel.tsx       | 174 +++++++++++++++
 .../Carousel/SortableTemplateCard.tsx         |  41 ++++
 .../Carousel/TemplateCard.styles.scss         |  30 +++
 .../components/Carousel/TemplateCard.tsx      |  41 ++++
 .../GalleryPreview.component.tsx              |  22 --
 .../GalleryPreview/GalleryPreview.styles.scss |  44 ----
 .../ImageGallery/AddButtonCard.styles.scss    |  16 +-
 .../components/ImageGallery/AddButtonCard.tsx |   6 +-
 .../DeleteConfirmationOverlay.styles.scss     |   4 +-
 .../components/ImageGallery/GalleryList.tsx   |  59 ++---
 .../components/ImageGallery/ImageCard.tsx     |  29 +--
 .../ImageGallery/SortableImageCard.tsx        |   6 +-
 .../ImageModal/ImageModal.styles.scss         |   0
 .../components/ImageModal/ImageModal.tsx      |   0
 .../components/TemplateGrid/DroppableSlot.tsx |  29 +++
 .../TemplateGrid/TemplateGrid.styles.scss     | 108 ++++++++--
 .../components/TemplateGrid/TemplateGrid.tsx  | 103 +++++++--
 .../TemplateManager.styles.scss               |   0
 .../TemplateManager/TemplateManager.tsx       |  22 --
 .../Templates/shared-grid.styles.scss         | 108 ----------
 .../ArtGallery/hooks/useArtGallery.ts         |  51 ++---
 .../ArtGallery/hooks/useArtGalleryDnD.ts      | 121 +++++++++++
 .../ArtGallery/hooks/useFileUpload.ts         |   1 -
 .../ArtGallery/hooks/useTemplateEditor.ts     |  67 ++++++
 .../ArtGallery/hooks/useTemplateSlots.ts      |  36 ++++
 36 files changed, 1346 insertions(+), 392 deletions(-)
 create mode 100644 src/app/common/components/ImageTemplates-grid/TemplateRenderer.tsx
 create mode 100644 src/app/common/components/ImageTemplates-grid/shared-grid.styles.scss
 create mode 100644 src/app/stores/template-store.ts
 create mode 100644 src/features/AdminPage/ArtGallery/components/Carousel/SavedTemplatesCarousel.styles.scss
 create mode 100644 src/features/AdminPage/ArtGallery/components/Carousel/SavedTemplatesCarousel.tsx
 create mode 100644 src/features/AdminPage/ArtGallery/components/Carousel/SortableTemplateCard.tsx
 create mode 100644 src/features/AdminPage/ArtGallery/components/Carousel/TemplateCard.styles.scss
 create mode 100644 src/features/AdminPage/ArtGallery/components/Carousel/TemplateCard.tsx
 delete mode 100644 src/features/AdminPage/ArtGallery/components/GalleryPreview/GalleryPreview.component.tsx
 delete mode 100644 src/features/AdminPage/ArtGallery/components/GalleryPreview/GalleryPreview.styles.scss
 delete mode 100644 src/features/AdminPage/ArtGallery/components/ImageModal/ImageModal.styles.scss
 delete mode 100644 src/features/AdminPage/ArtGallery/components/ImageModal/ImageModal.tsx
 create mode 100644 src/features/AdminPage/ArtGallery/components/TemplateGrid/DroppableSlot.tsx
 delete mode 100644 src/features/AdminPage/ArtGallery/components/TemplateManager/TemplateManager.styles.scss
 delete mode 100644 src/features/AdminPage/ArtGallery/components/TemplateManager/TemplateManager.tsx
 delete mode 100644 src/features/AdminPage/ArtGallery/components/Templates/shared-grid.styles.scss
 create mode 100644 src/features/AdminPage/ArtGallery/hooks/useArtGalleryDnD.ts
 create mode 100644 src/features/AdminPage/ArtGallery/hooks/useTemplateEditor.ts
 create mode 100644 src/features/AdminPage/ArtGallery/hooks/useTemplateSlots.ts

diff --git a/src/app/common/components/ImageTemplates-grid/TemplateRenderer.tsx b/src/app/common/components/ImageTemplates-grid/TemplateRenderer.tsx
new file mode 100644
index 0000000..bbeab05
--- /dev/null
+++ b/src/app/common/components/ImageTemplates-grid/TemplateRenderer.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import './shared-grid.styles.scss';
+
+export const TemplateRenderer = observer(({ template, renderSlot, className }: any) => {
+  const templateClass = template.name.toLowerCase().replace(/-/g, '-');
+
+  return (
+    <div className={`preview-grid ${templateClass} ${className || ''}`}>
+      {template.slots.map((slot: any) => (
+        <div key={slot.id} className="preview-slot">
+          {renderSlot(slot)}
+        </div>
+      ))}
+    </div>
+  );
+});
\ No newline at end of file
diff --git a/src/app/common/components/ImageTemplates-grid/shared-grid.styles.scss b/src/app/common/components/ImageTemplates-grid/shared-grid.styles.scss
new file mode 100644
index 0000000..179b54a
--- /dev/null
+++ b/src/app/common/components/ImageTemplates-grid/shared-grid.styles.scss
@@ -0,0 +1,91 @@
+.preview-slot {
+  background: #000;
+  border-radius: 4px;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    width: 100%;
+    height: 100%;
+    min-width: 100%;
+    min-height: 100%;
+    object-fit: cover;
+    object-position: center;
+    display: block;
+  }
+}
+
+
+.preview-grid {
+  position: relative;
+  display: grid;
+  gap: 5px;
+
+  &.main-big {
+    grid-template-columns: 255px;
+    grid-template-rows: 205px;
+  }
+
+  &.medium {
+    grid-template-columns: 137px;
+    grid-template-rows: 203px;
+  }
+
+  &.two-medium {
+    grid-template-columns: repeat(2, 137px);
+    grid-template-rows: 203px;
+  }
+
+  &.mid-plus-two-small {
+    grid-template-columns: 137px 135px;
+    grid-template-rows: 101px 101px;
+    gap: 4px;
+
+    .preview-slot:first-child {
+      grid-row: span 2;
+    }
+  }
+
+  &.four-small {
+    grid-template-columns: repeat(2, 135px);
+    grid-template-rows: repeat(2, 101px);
+    gap: 4px;
+  }
+}
+
+.preview-grid.carousel-preview {
+  .preview-slot {
+    border-radius: 30px;
+  }
+
+  &.main-big {
+    grid-template-columns: 380px;
+    grid-template-rows: 305px;
+  }
+
+  &.medium {
+    grid-template-columns: 205px;
+    grid-template-rows: 305px;
+  }
+
+  &.two-medium {
+    grid-template-columns: repeat(2, 205px);
+    grid-template-rows: 305px;
+  }
+
+  &.mid-plus-two-small {
+    grid-template-columns: 205px 200px;
+    grid-template-rows: 150px 150px;
+    gap: 6px;
+  }
+
+  &.four-small {
+    grid-template-columns: repeat(2, 200px);
+    grid-template-rows: repeat(2, 150px);
+    gap: 6px;
+  }
+}
\ No newline at end of file
diff --git a/src/app/common/components/modals/EditImageModal/TemplatesModal.component.tsx b/src/app/common/components/modals/EditImageModal/TemplatesModal.component.tsx
index 6d242e8..03fa744 100644
--- a/src/app/common/components/modals/EditImageModal/TemplatesModal.component.tsx
+++ b/src/app/common/components/modals/EditImageModal/TemplatesModal.component.tsx
@@ -1,18 +1,18 @@
-import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { Modal } from 'antd';
 import { useModalContext } from '@stores/root-store';
+import { TemplateRenderer } from '@components/ImageTemplates-grid/TemplateRenderer';
 import './TemplatesModal.styles.scss';
 
 const TemplatesModal = observer(() => {
     const {
         modalStore: { setModal, modalsState: { templates } },
-        templateStore
+        imageTemplateStore
     } = useModalContext();
 
     const handleSelect = (template: any) => {
-        templateStore.setActiveTemplate(template);
-        setModal('templates', undefined, false); // Закрываем окно
+        imageTemplateStore.setActiveTemplate(template);
+        setModal('templates', undefined, false); 
     };
 
     return (
@@ -24,24 +24,16 @@ const TemplatesModal = observer(() => {
             title="Шаблони"
         >
             <div className="templates-grid">
-                {templateStore.templates.map((item) => (
+                {imageTemplateStore.templates.map((item) => (
                     <div
                         key={item.id}
                         className="template-item"
                         onClick={() => handleSelect(item)}
                     >
-                        <div
-                            className={`preview-grid ${item.name
-                                .toLowerCase()
-                                .replace(/-/g, '-')}`}
-                        >
-                            {item.slots.map((slot) => (
-                                <div
-                                    key={slot.id}
-                                    className="preview-slot"
-                                />
-                            ))}
-                        </div>
+                        <TemplateRenderer 
+                            template={item} 
+                            renderSlot={() => null}
+                        />
                     </div>
                 ))}
             </div>
diff --git a/src/app/common/components/modals/EditImageModal/TemplatesModal.styles.scss b/src/app/common/components/modals/EditImageModal/TemplatesModal.styles.scss
index 57051a2..b4186c9 100644
--- a/src/app/common/components/modals/EditImageModal/TemplatesModal.styles.scss
+++ b/src/app/common/components/modals/EditImageModal/TemplatesModal.styles.scss
@@ -1,4 +1,3 @@
-@import '../../../../../features/AdminPage/ArtGallery/components/Templates/shared-grid.styles.scss';
 
 .templates-modal {
   .ant-modal-content {
diff --git a/src/app/stores/image-template-store.ts b/src/app/stores/image-template-store.ts
index 7558892..3fe40e7 100644
--- a/src/app/stores/image-template-store.ts
+++ b/src/app/stores/image-template-store.ts
@@ -1,24 +1,40 @@
-
 import { makeAutoObservable } from 'mobx';
+import { arrayMove } from '@dnd-kit/sortable';
 import { TEMPLATES_CONFIG } from '../common/constants/templates.constants';
 
-export interface Template {
-    id: number;
-    name: string;
-    gap: number;
-    slots: { id: string }[];
-}
-
-export default class TemplateStore {
+export default class ImageTemplateStore {
     public templates = TEMPLATES_CONFIG;
-    public activeTemplate = this.templates[0];
-    public constructor() { 
-        makeAutoObservable(this); 
-        if (!this.activeTemplate && this.templates.length > 0) {
-            this.activeTemplate = this.templates[0];
-        }
+    public activeTemplate = TEMPLATES_CONFIG[0];
+
+    savedTemplates: any[] = [];
+
+    constructor() {
+        makeAutoObservable(this);
     }
+
     public setActiveTemplate = (template: any) => {
         this.activeTemplate = template;
     };
+
+    addTemplate(template: any) {
+        this.savedTemplates.push(template);
+    }
+
+    reorderTemplates(oldIndex: number, newIndex: number) {
+        this.savedTemplates = arrayMove(this.savedTemplates, oldIndex, newIndex);
+    }
+
+    updateTemplate(updatedTemplate: any) {
+        const index = this.savedTemplates.findIndex(t => t.id === updatedTemplate.id);
+        if (index !== -1) {
+            this.savedTemplates[index] = updatedTemplate;
+        }
+    }
+
+    updateTemplateStatus(id: number, status: Partial<{ isSavedToDb: boolean }>) {
+        const template = this.savedTemplates.find(t => t.id === id);
+        if (template) {
+            Object.assign(template, status);
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/app/stores/root-store.ts b/src/app/stores/root-store.ts
index bb261f8..5b3d6c7 100644
--- a/src/app/stores/root-store.ts
+++ b/src/app/stores/root-store.ts
@@ -33,7 +33,7 @@ import TeamStore from './team-store';
 import ToponymStore from './toponym-store';
 import UserLoginStore from './user-login-store';
 
-import TemplateStore from './image-template-store';
+import ImageTemplateStore from './image-template-store';
 
 interface Store {
     factsStore: FactsStore,
@@ -71,7 +71,7 @@ export interface StreetcodeDataStore {
 }
 export interface ModalDataStore {
     modalStore: ModalStore,
-    templateStore: TemplateStore,
+    imageTemplateStore: ImageTemplateStore,
 }
 
 export const store: Store = {
@@ -110,7 +110,7 @@ export const streetcodeDataStore:StreetcodeDataStore = {
 
 export const modalDataStore:ModalDataStore = {
     modalStore: new ModalStore(),
-    templateStore: new TemplateStore(),
+    imageTemplateStore: new ImageTemplateStore(),
 };
 
 export const toponymDataStore:ToponymStore = new ToponymStore();
diff --git a/src/app/stores/template-store.ts b/src/app/stores/template-store.ts
new file mode 100644
index 0000000..d76b5e5
--- /dev/null
+++ b/src/app/stores/template-store.ts
@@ -0,0 +1,27 @@
+import { makeAutoObservable } from 'mobx';
+import { arrayMove } from '@dnd-kit/sortable';
+
+export default class TemplateStore {
+    savedTemplates: any[] = [];
+
+    constructor() {
+        makeAutoObservable(this);
+    }
+
+    setSavedTemplates(templates: any[]) {
+        this.savedTemplates = templates;
+    }
+    reorderTemplates(oldIndex: number, newIndex: number) {
+        this.savedTemplates = arrayMove(this.savedTemplates, oldIndex, newIndex);
+    }
+
+    addTemplate(template: any) {
+        this.savedTemplates.push(template);
+    }
+    updateTemplateStatus(id: number, status: Partial<{ isSavedToDb: boolean }>) {
+        const template = this.savedTemplates.find(t => t.id === id);
+        if (template) {
+            Object.assign(template, status);
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/features/AdminPage/AdminPage.component.tsx b/src/features/AdminPage/AdminPage.component.tsx
index 98a449e..9b3a4be 100644
--- a/src/features/AdminPage/AdminPage.component.tsx
+++ b/src/features/AdminPage/AdminPage.component.tsx
@@ -6,6 +6,7 @@ import StreetcodeCatalogComponent from '../StreetcodeCatalogPage/StreetcodeCatal
 const AdminPage = () => (
     <div className="adminPageContainer" >
         <AdminBar />
+        <ArtGallery/>
         <StreetcodeCatalogComponent showAdminActions />
     </div>
 );
diff --git a/src/features/AdminPage/ArtGallery/ArtGallery.styles.scss b/src/features/AdminPage/ArtGallery/ArtGallery.styles.scss
index d8322d6..7e3b551 100644
--- a/src/features/AdminPage/ArtGallery/ArtGallery.styles.scss
+++ b/src/features/AdminPage/ArtGallery/ArtGallery.styles.scss
@@ -3,4 +3,10 @@
     display: flex;
     flex-direction: column;
     gap: 20px;
+}
+
+.gallery-viewport.drop-active {
+  outline: 2px dashed #4d90fe;
+  background: rgba(77, 144, 254, 0.08);
+  transition: 0.2s ease;
 }
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/ArtGallery.tsx b/src/features/AdminPage/ArtGallery/ArtGallery.tsx
index 5119698..5de08ee 100644
--- a/src/features/AdminPage/ArtGallery/ArtGallery.tsx
+++ b/src/features/AdminPage/ArtGallery/ArtGallery.tsx
@@ -1,33 +1,193 @@
+import React, { useState } from 'react';
+import { DndContext, DragEndEvent, DragOverlay, closestCenter, useSensor, useSensors, PointerSensor } from '@dnd-kit/core';
+import { arrayMove } from '@dnd-kit/sortable';
+import { ArtImage } from './types/gallery.types';
 import { useArtGallery } from './hooks/useArtGallery';
 import { GalleryList } from './components/ImageGallery/GalleryList';
-import './ArtGallery.styles.scss';
-import { TemplatesHeader } from './components/Templates/TemplatesHeader';
 import { TemplateGrid } from './components/TemplateGrid/TemplateGrid';
+import { TemplatesHeader } from './components/Templates/TemplatesHeader';
 import { useModalContext } from '@/app/stores/root-store';
+import { SavedTemplatesCarousel } from './components/Carousel/SavedTemplatesCarousel'
 
-export const ArtGallery = () => {
+export const ArtGallery: React.FC = () => {
+  const { images, setImages, addImage, removeImage } = useArtGallery();
+  const [templateSlots, setTemplateSlots] = useState<Record<string, ArtImage | null>>({});
+  const [activeImage, setActiveImage] = useState<ArtImage | null>(null);
+  const [activeId, setActiveId] = useState<string | null>(null);
+  const [editingTemplateId, setEditingTemplateId] = useState<string | null>(null);
 
-  const { images, addImage } = useArtGallery();
-  const { modalStore: { setModal } } = useModalContext();
+  const { modalStore, imageTemplateStore } = useModalContext();
+  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 1 } }));
 
-  const handleOpenTemplates = () => {
-      setModal('templates', undefined, true);
+  const clearAllSlots = () => {
+    const returnedImages = Object.values(templateSlots).filter((img): img is ArtImage => img !== null);
+    setImages(prev => [...prev, ...returnedImages]);
+    setTemplateSlots({});
   };
 
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    setActiveImage(null);
+    setActiveId(null);
+
+    if (!over) return;
+
+    const activeId = String(active.id);
+    const overId = String(over.id);
+
+    if (activeId.startsWith('tmpl_') && overId.startsWith('tmpl_')) {
+      const rawActive = activeId.replace('tmpl_', '');
+      const rawOver = overId.replace('tmpl_', '');
+
+      const oldIndex = imageTemplateStore.savedTemplates.findIndex(t => String(t.id) === rawActive);
+      const newIndex = imageTemplateStore.savedTemplates.findIndex(t => String(t.id) === rawOver);
+
+      if (oldIndex !== -1 && newIndex !== -1 && oldIndex !== newIndex) {
+
+        imageTemplateStore.reorderTemplates(oldIndex, newIndex);
+      }
+      return;
+    }
+
+
+    if (activeId.startsWith('img_') && overId.startsWith('img_')) {
+      const oldIndex = images.findIndex(i => `img_${i.id}` === activeId);
+      const newIndex = images.findIndex(i => `img_${i.id}` === overId);
+
+      if (oldIndex !== -1 && newIndex !== -1) {
+        setImages(arrayMove(images, oldIndex, newIndex));
+      }
+      return;
+    }
+
+    if (activeId.startsWith('img_')) {
+      const rawActiveId = activeId.replace('img_', '');
+      const dragged = images.find(i => String(i.id) === rawActiveId);
+
+      const isTargetSlot = imageTemplateStore.activeTemplate?.slots.some((s: any) => String(s.id) === overId);
+
+      if (isTargetSlot) {
+        if (templateSlots[overId] !== null && templateSlots[overId] !== undefined) {
+          console.log("Слот уже занят!");
+          return;
+        }
+
+        if (dragged) {
+          setTemplateSlots(prev => ({ ...prev, [overId]: dragged }));
+          removeImage(dragged.id);
+        }
+      }
+
+      if (imageTemplateStore.activeTemplate?.slots.some((s: any) => String(s.id) === overId)) {
+        if (dragged) {
+          setTemplateSlots(prev => ({ ...prev, [overId]: dragged }));
+          removeImage(dragged.id);
+        }
+      }
+
+      else if (overId === 'gallery') {
+        const imgInSlot = Object.values(templateSlots).find(i => i?.id === rawActiveId);
+        if (imgInSlot) {
+          setTemplateSlots(prev => {
+            const copy = { ...prev };
+            Object.keys(copy).forEach(k => { if (copy[k]?.id === rawActiveId) copy[k] = null; });
+            return copy;
+          });
+          setImages((prev: ArtImage[]) => [...prev, imgInSlot]);
+        }
+      }
+    }
+  };
+
+
+
+const removeImageFromSlot = (slotId: string) => {
+  const image = templateSlots[slotId];
+
+  if (!image) return;
+
+  setImages(prev => [...prev, image]);
+
+  setTemplateSlots(prev => ({
+    ...prev,
+    [slotId]: null
+  }));
+};
+
+const handleEditTemplate = (template: any) => {
+  setEditingTemplateId(template.id);
+
+  const layout = imageTemplateStore.templates.find(
+    (t: any) => t.name === template.templateName
+  );
+
+  if (layout) {
+    imageTemplateStore.setActiveTemplate(layout);
+  }
+
+  setTemplateSlots({ ...template.slots });
+};
+
+  const handleSave = () => {
+    if (editingTemplateId) {
+      imageTemplateStore.updateTemplate({
+        id: editingTemplateId,
+        slots: { ...templateSlots },
+        templateName: imageTemplateStore.activeTemplate?.name || 'Updated',
+        isSavedToDb: false
+      });
+      setEditingTemplateId(null);
+    } else {
+      imageTemplateStore.addTemplate({
+        id: String(Date.now()),
+        slots: { ...templateSlots },
+        templateName: imageTemplateStore.activeTemplate?.name || 'Unnamed',
+        isSavedToDb: false
+      });
+    }
+    setTemplateSlots({});
+  };
+
+  const saveToDb = async (templateToSave: any) => {
+    try {
+      console.log("Сохраняем конкретный шаблон:", templateToSave);
+
+      // await api.post('/templates', templateToSave);
+
+      imageTemplateStore.updateTemplateStatus(templateToSave.id, { isSavedToDb: true });
+
+    } catch (e) {
+      console.error("Помилка при збереженні", e);
+    }
+  };
   return (
-    <div className="art-gallery-container">
-      <h2>Арт-галерея</h2>
+    <DndContext
+      onDragStart={(event) => setActiveId(String(event.active.id))}
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragEnd={handleDragEnd
+
+      }>
+      <div className="art-gallery-container">
+        <GalleryList images={images} onUpload={addImage} onDelete={removeImage} onEdit={console.log} />
+        <section className="gallery-section">
+          <TemplatesHeader onOpenTemplates={() => modalStore.setModal('templates', undefined, true)} />
+          <TemplateGrid
+            slots={templateSlots}
+            setSlots={setTemplateSlots}
+            onClearAll={clearAllSlots}
+            onSave={handleSave}
+             onRemoveSlot={removeImageFromSlot}
+          />
+        </section>
+        <SavedTemplatesCarousel
+          savedTemplates={imageTemplateStore.savedTemplates}
+          reorderTemplates={(oldIdx: number, newIdx: number) => imageTemplateStore.reorderTemplates(oldIdx, newIdx)}
+          onSaveToDb={saveToDb}
+          onEdit ={handleEditTemplate}
 
-      <div className="gallery-viewport">
-        <GalleryList
-          images={images} onUpload={addImage} onDelete={console.log} onEdit={console.log}
         />
       </div>
-      <section className="gallery-section">
-        <TemplatesHeader onOpenTemplates={handleOpenTemplates} />
-        <TemplateGrid /> 
-      </section>
-    </div>
+    </DndContext>
   );
-};
-
+};
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/components/Carousel/SavedTemplatesCarousel.styles.scss b/src/features/AdminPage/ArtGallery/components/Carousel/SavedTemplatesCarousel.styles.scss
new file mode 100644
index 0000000..8c27dcf
--- /dev/null
+++ b/src/features/AdminPage/ArtGallery/components/Carousel/SavedTemplatesCarousel.styles.scss
@@ -0,0 +1,201 @@
+@use "@sass/_utils.functions.scss" as f;
+@use "@sass/mixins/_utils.mixins.scss" as mut;
+@use "@sass/variables/_variables.colors.scss" as c;
+@use "@sass/variables/_variables.fonts.scss" as ft;
+
+
+
+.templates-list-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0 32px ;
+  gap: 12px;
+
+  touch-action: none;
+}
+
+
+.templates-carousel-wrapper {
+  width: 100%;
+  position: relative;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+
+
+.templates-scroll {
+  overflow-x: auto;
+  scroll-behavior: smooth;
+
+  display: flex;
+  width: 80%;
+
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+
+.templates-list-carousel {
+  display: flex;
+  gap: 15px;
+  width: max-content;
+  align-items: flex-start;
+  padding-right: 20px;
+  padding-left: 20px;
+
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.splide__arrows {
+  position: absolute;
+
+  top: 50%;
+  transform: translateY(-50%); 
+  left: 0;
+  right: 0;
+
+  display: flex;
+  justify-content: space-between;
+
+  padding: 0 32px;
+
+  pointer-events: none; 
+  z-index: 5;
+}
+
+
+.splide__arrow--prev,
+.splide__arrow--next {
+  width: 40px;
+  height: 60px;
+
+  border-radius: 12px;
+  background: c.$white-color;
+
+  box-shadow: 0px 7px 17px 2px rgba(91, 91, 91, 0.25);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  border: none;
+  cursor: pointer;
+
+  pointer-events: all; 
+
+  transition: all 0.3s cubic-bezier(.7, 0, .3, 1);
+}
+
+
+.splide__arrow--prev:hover,
+.splide__arrow--next:hover {
+  transform: translateY(-2px);
+}
+
+.splide__arrow--prev:disabled,
+.splide__arrow--next:disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+
+
+.splide__arrow::before {
+  content: "";
+
+  width: 16px;
+  height: 24px;
+
+  background-color: c.$normal-gray-color;
+
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  -webkit-mask-size: contain;
+
+  transition: background-color 0.2s ease;
+}
+
+.splide__arrow:hover::before {
+  background-color: c.$dark-red-color;
+}
+
+.splide__arrow--prev::before {
+  mask-image: url("@images/utils/LeftDefaultSliderArrow.svg");
+  -webkit-mask-image: url("@images/utils/LeftDefaultSliderArrow.svg");
+}
+
+.splide__arrow--next::before {
+  mask-image: url("@images/utils/RightDefaultSliderArrow.svg");
+  -webkit-mask-image: url("@images/utils/RightDefaultSliderArrow.svg");
+}
+
+
+
+.splide__pagination-wrap {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin-top: 10px;
+}
+
+.splide__pagination {
+  display: flex;
+  gap: 6px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.splide__pagination__page {
+  width: 8px;
+  height: 8px;
+
+  border: none;
+  background: c.$normal-gray-color;
+
+  cursor: pointer;
+  transition: 0.2s;
+}
+
+.splide__pagination__page.is-active {
+  background: c.$dark-red-color;
+  transform: scale(1.2);
+}
+
+
+
+.streetcode-custom-button {
+  margin-top: 12px;
+
+  @include mut.sized(212px, 48px);
+  border-radius: f.pxToRem(8px);
+  border: 0.025rem solid c.$dark-red-color;
+
+  color: c.$pure-white-color;
+
+  @include mut.with-font(ft.$roboto-font, $font-size: 20px, $font-weight: 500);
+
+  &:hover {
+    background-color: c.$dark-red-color;
+    transition: 0.5s;
+    border: none;
+  }
+
+  &:focus {
+    outline: none;
+    border: none;
+  }
+}
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/components/Carousel/SavedTemplatesCarousel.tsx b/src/features/AdminPage/ArtGallery/components/Carousel/SavedTemplatesCarousel.tsx
new file mode 100644
index 0000000..9141072
--- /dev/null
+++ b/src/features/AdminPage/ArtGallery/components/Carousel/SavedTemplatesCarousel.tsx
@@ -0,0 +1,174 @@
+import { observer } from 'mobx-react-lite';
+import { useMemo, useRef, useState, useEffect } from 'react';
+import { SortableContext, horizontalListSortingStrategy } from '@dnd-kit/sortable';
+import { SortableTemplateCard } from './SortableTemplateCard';
+import BlockHeading from '@streetcode/HeadingBlock/BlockHeading.component';
+
+import './SavedTemplatesCarousel.styles.scss';
+
+export const SavedTemplatesCarousel = observer(
+    ({ savedTemplates, onEdit, onSaveToDb }: any) => {
+        const rowRef = useRef<HTMLDivElement>(null);
+        const [activeIndex, setActiveIndex] = useState(0);
+        const [isScrollable, setIsScrollable] = useState(false);
+
+        const checkScrollable = () => {
+            const el = rowRef.current;
+            if (el) {
+                setIsScrollable(el.scrollWidth > el.clientWidth);
+            }
+        };
+
+        useEffect(() => {
+            const el = rowRef.current;
+            if (!el) return;
+
+            const observer = new ResizeObserver(checkScrollable);
+            observer.observe(el);
+
+            return () => observer.disconnect();
+        }, [savedTemplates]);
+
+
+        const scrollToIndex = (index: number) => {
+            const el = rowRef.current;
+            if (!el) return;
+
+            const items = el.querySelectorAll('.template-slide') as NodeListOf<HTMLElement>;
+            const target = items[index];
+
+            if (!target) return;
+
+            target.scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest',
+                inline: 'start',
+            });
+
+            setActiveIndex(index);
+        };
+
+        const scroll = (dir: 'left' | 'right') => {
+            const container = rowRef.current;
+            const list = container?.querySelector('.templates-list-carousel') as HTMLElement;
+
+            if (!container || !list) return;
+
+            const scrollAmount = 50;
+            const totalWidth = list.scrollWidth;
+            const visibleWidth = container.clientWidth;
+
+            const currentScroll = container.scrollLeft;
+
+            let newScrollLeft = dir === 'left'
+                ? currentScroll - scrollAmount
+                : currentScroll + scrollAmount;
+
+            newScrollLeft = Math.max(0, Math.min(newScrollLeft, totalWidth - visibleWidth));
+
+            container.scrollTo({
+                left: newScrollLeft,
+                behavior: 'smooth',
+            });
+        };
+
+        const onScroll = () => {
+            const el = rowRef.current;
+            if (!el) return;
+
+            const items = el.querySelectorAll('.template-slide') as NodeListOf<HTMLElement>;
+
+            let closestIndex = 0;
+            let min = Infinity;
+            const center = el.scrollLeft + el.clientWidth / 2;
+
+            items.forEach((item, i) => {
+                const itemCenter = item.offsetLeft + item.offsetWidth / 2;
+                const diff = Math.abs(center - itemCenter);
+                if (diff < min) {
+                    min = diff;
+                    closestIndex = i;
+                }
+            });
+
+            if (activeIndex !== closestIndex) {
+                setActiveIndex(closestIndex);
+            }
+        };
+
+        const pagination = useMemo(() => {
+            return savedTemplates.map((_: any, i: number) => (
+                <button
+                    key={i}
+                    className={`splide__pagination__page ${i === activeIndex ? 'is-active' : ''
+                        }`}
+                    onClick={() => scrollToIndex(i)}
+                />
+            ));
+        }, [savedTemplates, activeIndex]);
+
+
+        console.log("savedTemplates", savedTemplates);
+        return (
+            <div className="templates-list-container">
+                {savedTemplates && savedTemplates.length > 0 && (
+                    <BlockHeading headingText="Арт-галерея" />
+                )}
+                <div className="templates-carousel-wrapper">
+                    {isScrollable && (
+                        <button
+                            className="splide__arrow splide__arrow--prev"
+                            onClick={() => scroll('left')}
+                            disabled={activeIndex === 0}
+                        />
+                    )}
+                    <div
+                        className="templates-scroll"
+                        ref={rowRef}
+                        onScroll={onScroll}
+                    >
+                        <SortableContext
+                            items={savedTemplates.map((t: any) => `tmpl_${t.id}`)}
+                            strategy={horizontalListSortingStrategy}
+                        >
+                            <div className="templates-list-carousel">
+                                {savedTemplates.map((template: any) => (
+                                    <div className="template-slide" key={template.id}>
+                                        <SortableTemplateCard
+                                            template={template}
+                                            onSaveToDb={onSaveToDb}
+                                            onEdit={onEdit}
+                                        />
+                                    </div>
+                                ))}
+                            </div>
+                        </SortableContext>
+                    </div>
+                    {isScrollable && (
+                        <button
+                            className="splide__arrow splide__arrow--next"
+                            onClick={() => scroll('right')}
+                            disabled={activeIndex === savedTemplates.length - 1}
+                        />
+                    )}
+                </div>
+                {isScrollable && (
+                    <div className="splide__pagination-wrap">
+                        <ul className="splide__pagination">
+                            {pagination}
+                        </ul>
+                    </div>
+                )}
+
+                {savedTemplates?.length > 0 && (
+                    <button
+                        className="streetcode-custom-button"
+                        onClick={() => onSaveToDb(savedTemplates)}
+                    >
+                        Зберегти
+                    </button>
+                )}
+            </div>
+        );
+    }
+);
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/components/Carousel/SortableTemplateCard.tsx b/src/features/AdminPage/ArtGallery/components/Carousel/SortableTemplateCard.tsx
new file mode 100644
index 0000000..f996ca9
--- /dev/null
+++ b/src/features/AdminPage/ArtGallery/components/Carousel/SortableTemplateCard.tsx
@@ -0,0 +1,41 @@
+
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+
+import { TemplateCard } from './TemplateCard';
+
+export const SortableTemplateCard = ({
+  template,
+  onEdit
+}: any) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({
+    id: `tmpl_${template.id}`
+  });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+    >
+      <TemplateCard
+        template={template}
+        attributes={attributes}
+        listeners={listeners}
+        onEdit={onEdit}
+      />
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/components/Carousel/TemplateCard.styles.scss b/src/features/AdminPage/ArtGallery/components/Carousel/TemplateCard.styles.scss
new file mode 100644
index 0000000..02e64ff
--- /dev/null
+++ b/src/features/AdminPage/ArtGallery/components/Carousel/TemplateCard.styles.scss
@@ -0,0 +1,30 @@
+.template-card {
+    position: relative; 
+    display: inline-block;
+    border-radius: 30px;
+    
+    .edit-btn {
+        position: absolute;
+        top: 8px;  
+        right: 8px;  
+        z-index: 10; 
+        
+        border-radius: 50%;
+        width: 30px;
+        height: 30px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: background 0.2s;
+
+        &:hover {
+            background: #fff;
+        }
+    }
+
+    .draggable-area {
+        touch-action: none;
+        cursor: grab;
+    }
+}
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/components/Carousel/TemplateCard.tsx b/src/features/AdminPage/ArtGallery/components/Carousel/TemplateCard.tsx
new file mode 100644
index 0000000..2fbdfee
--- /dev/null
+++ b/src/features/AdminPage/ArtGallery/components/Carousel/TemplateCard.tsx
@@ -0,0 +1,41 @@
+import  { useState } from 'react';
+import { TemplateRenderer } from '@components/ImageTemplates-grid/TemplateRenderer';
+import './TemplateCard.styles.scss';
+
+export const TemplateCard = ({ template, attributes, listeners, onEdit }: any) => {
+    const [isHovered, setIsHovered] = useState(false);
+console.log("template", template)
+    return (
+        <div 
+            className="template-card"
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+        >
+            {isHovered && (
+                <button 
+                    className="edit-btn" 
+                    onClick={(e) => {
+                        e.stopPropagation(); 
+                        onEdit(template);
+                    }}
+                >
+                    ✎
+                </button>
+            )}
+
+            <div {...attributes} {...listeners} className="draggable-area">
+                <TemplateRenderer
+                    className="carousel-preview"
+                    template={{ 
+                        name: template.templateName, 
+                        slots: Object.entries(template.slots).map(([id]) => ({ id })) 
+                    }}
+                    renderSlot={(slot: any) => {
+                        const image = template.slots[slot.id];
+                        return image?.url ? <img src={image.url} alt="slot" /> : null;
+                    }}
+                />
+            </div>
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/components/GalleryPreview/GalleryPreview.component.tsx b/src/features/AdminPage/ArtGallery/components/GalleryPreview/GalleryPreview.component.tsx
deleted file mode 100644
index a6595aa..0000000
--- a/src/features/AdminPage/ArtGallery/components/GalleryPreview/GalleryPreview.component.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-import ArtGallerySlide from '@streetcode/ArtGalleryBlock/ArtGalleryListOfItem/ArtGallerySlide.component';
-import { toIndexedArts } from '../../hooks/useArtGallery';
-import { ArtImage } from '../../types/gallery.types';
-import './GalleryPreview.styles.scss';
-
-interface Props {
-  images: ArtImage[];
-}
-
-
-export const GalleryPreview = ({ images }: Props) => {
-  if (!images.length) {
-    return null;
-  }
-
-  return (
-    <div className="gallery-preview">
-      <ArtGallerySlide artGalleryList={toIndexedArts(images)} isAdminPage />
-    </div>
-  );
-};
diff --git a/src/features/AdminPage/ArtGallery/components/GalleryPreview/GalleryPreview.styles.scss b/src/features/AdminPage/ArtGallery/components/GalleryPreview/GalleryPreview.styles.scss
deleted file mode 100644
index 1dc5dba..0000000
--- a/src/features/AdminPage/ArtGallery/components/GalleryPreview/GalleryPreview.styles.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-@use "@sass/_utils.functions.scss" as *;
-
-// Стили admin-режима витринной галереи (классы *Admin, которые в самом
-// StreetcodePage/ArtGalleryBlock объявлены, но не описаны). Держим их здесь,
-// чтобы не трогать витринный модуль. Размеры повторяют десктопную раскладку
-// сайта (ArtGallerySlideItem.styles.scss), но без перехода в модалку.
-.gallery-preview {
-  .slideArtGalleryContainerAdmin {
-    display: flex;
-    justify-content: center;
-    width: 100%;
-    margin-top: pxToRem(20px);
-  }
-
-  .slideArtAdmin {
-    flex: pxToRem(80px);
-
-    .small {
-      width: pxToRem(380px);
-      height: pxToRem(253px);
-    }
-
-    .medium {
-      width: pxToRem(380px);
-      height: pxToRem(536px);
-    }
-
-    .large {
-      width: pxToRem(806px);
-      height: pxToRem(536px);
-    }
-  }
-
-  .artImageWrapperAdmin {
-    position: relative;
-
-    .imgImg {
-      width: 100%;
-      height: 100%;
-      border-radius: pxToRem(30px);
-      object-fit: cover;
-    }
-  }
-}
diff --git a/src/features/AdminPage/ArtGallery/components/ImageGallery/AddButtonCard.styles.scss b/src/features/AdminPage/ArtGallery/components/ImageGallery/AddButtonCard.styles.scss
index 4abcf47..4390045 100644
--- a/src/features/AdminPage/ArtGallery/components/ImageGallery/AddButtonCard.styles.scss
+++ b/src/features/AdminPage/ArtGallery/components/ImageGallery/AddButtonCard.styles.scss
@@ -1,18 +1,20 @@
+@use "@sass/variables/_variables.colors.scss" as c;
+
 .add-button-card {
   width: 146px;
   height: 183px; 
-  border: 1px dashed #cccccc;
+  border: 1px dashed c.$accented-white-color;
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  background-color: #fcfcfc;
+  background-color: c.$white-color;
   transition: border-color 0.2s;
   transition: all 0.2s ease;
 
   &:hover {
-    border-color: #999;
+    border-color: c.$normal-gray-color;
   }
 
   .content {
@@ -25,19 +27,19 @@
 
     .icon {
       font-size: 24px;
-      color: #666;
+      color: c.$normal-gray-color;
     }
 
     .text {
       font-size: 12px;
-      color: #757575;
+      color: c.$dark-gray-color;
       margin: 0;
       line-height: 1.4;
     }
   }
   &.dragging {
-    border-color: #2563eb;
-    background-color: #eff6ff; 
+    border-color: c.$accented-red-color;
+    background-color: c.$white-color; 
     transform: scale(1.02); 
   }
 }
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/components/ImageGallery/AddButtonCard.tsx b/src/features/AdminPage/ArtGallery/components/ImageGallery/AddButtonCard.tsx
index e5ae660..3a7b198 100644
--- a/src/features/AdminPage/ArtGallery/components/ImageGallery/AddButtonCard.tsx
+++ b/src/features/AdminPage/ArtGallery/components/ImageGallery/AddButtonCard.tsx
@@ -2,7 +2,11 @@ import React from 'react';
 import { useFileUpload } from '../../hooks/useFileUpload'; //
 import './AddButtonCard.styles.scss';
 
-export const AddButtonCard = ({ onUpload }) => {
+
+interface AddButtonCardProps {
+  onUpload: (file: File) => void;
+}
+export const AddButtonCard: React.FC<AddButtonCardProps> = ({ onUpload }) => {
   const { 
     fileInputRef, 
     isDragging, 
diff --git a/src/features/AdminPage/ArtGallery/components/ImageGallery/DeleteConfirmationOverlay.styles.scss b/src/features/AdminPage/ArtGallery/components/ImageGallery/DeleteConfirmationOverlay.styles.scss
index 1b6c164..35dee8e 100644
--- a/src/features/AdminPage/ArtGallery/components/ImageGallery/DeleteConfirmationOverlay.styles.scss
+++ b/src/features/AdminPage/ArtGallery/components/ImageGallery/DeleteConfirmationOverlay.styles.scss
@@ -1,3 +1,5 @@
+@use "@sass/variables/_variables.colors.scss" as c;
+
 .delete-confirmation-overlay {
   position: absolute;
   inset: 0;
@@ -6,7 +8,7 @@
   align-items: center;
   justify-content: center;
   background: rgba(255, 255, 255, 0.5);
-  color: #ff0000;
+  color: c.$dark-red-color;
   gap: 10px;
   z-index: 10;
   
diff --git a/src/features/AdminPage/ArtGallery/components/ImageGallery/GalleryList.tsx b/src/features/AdminPage/ArtGallery/components/ImageGallery/GalleryList.tsx
index 5b9b491..9c1897b 100644
--- a/src/features/AdminPage/ArtGallery/components/ImageGallery/GalleryList.tsx
+++ b/src/features/AdminPage/ArtGallery/components/ImageGallery/GalleryList.tsx
@@ -1,57 +1,34 @@
-import React, { useState, useEffect } from 'react';
-import { DndContext, closestCenter } from '@dnd-kit/core';
-import { arrayMove, SortableContext, rectSortingStrategy } from '@dnd-kit/sortable';
-import { GalleryListProps, ArtImage } from '../../types/gallery.types';
+import React, { useState } from 'react';
+import { SortableContext, rectSortingStrategy } from '@dnd-kit/sortable';
+import { GalleryListProps } from '../../types/gallery.types';
 import { SortableImageCard } from './SortableImageCard';
 import { AddButtonCard } from './AddButtonCard';
 import './GalleryList.styles.scss';
 
-
 export const GalleryList: React.FC<GalleryListProps> = ({ 
-  images: propImages, 
+  images, 
   onUpload, 
   onDelete, 
   onEdit 
 }) => {
-  const [images, setImages] = useState<ArtImage[]>(propImages);
   const [confirmingId, setConfirmingId] = useState<string | null>(null);
 
-  useEffect(() => {
-    setImages(propImages);
-  }, [propImages]);
-
-  const handleDragEnd = (event: any) => {
-    const { active, over } = event;
-
-    if (over && active.id !== over.id) {
-      setImages((items) => {
-        const oldIndex = items.findIndex((i) => i.id === active.id);
-        const newIndex = items.findIndex((i) => i.id === over.id);
-        const newArray = arrayMove(items, oldIndex, newIndex);
-        return newArray;
-      });
-    }
-  };
-
   return (
-    <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
-      <div className="gallery-list">
-        <AddButtonCard onUpload={onUpload} />
-        
-        <SortableContext items={images} strategy={rectSortingStrategy}>
-          {images.map((img) => (
-            <SortableImageCard 
-              key={img.id} 
-              image={img} 
-              onDelete={onDelete} 
-              onEdit={onEdit} 
-              isConfirming={confirmingId === img.id}
+    <div className="gallery-list">
+      <AddButtonCard onUpload={onUpload} />
+      <SortableContext items={images.map(img => `img_${img.id}`)} strategy={rectSortingStrategy}>
+        {images.map((img) => (
+          <SortableImageCard 
+            key={img.id} 
+            image={img} 
+            onDelete={onDelete} 
+            onEdit={onEdit} 
+            isConfirming={confirmingId === img.id}
             onConfirmRequest={() => setConfirmingId(img.id)}
             onCancelRequest={() => setConfirmingId(null)}
-            />
-          ))}
-        </SortableContext>
-      </div>
-    </DndContext>
+          />
+        ))}
+      </SortableContext>
+    </div>
   );
 };
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/components/ImageGallery/ImageCard.tsx b/src/features/AdminPage/ArtGallery/components/ImageGallery/ImageCard.tsx
index 24c57e1..a2e2824 100644
--- a/src/features/AdminPage/ArtGallery/components/ImageGallery/ImageCard.tsx
+++ b/src/features/AdminPage/ArtGallery/components/ImageGallery/ImageCard.tsx
@@ -3,26 +3,29 @@ import { useModalContext } from '@stores/root-store';
 import { ImageCardProps } from '../../types/gallery.types';
 import './ImageCard.styles.scss';
 
-export const ImageCard: React.FC<ImageCardProps> = ({ 
-  image, attributes, listeners 
+export const ImageCard: React.FC<ImageCardProps> = ({
+  image, attributes, listeners
 }) => {
   const { modalStore: { setModal } } = useModalContext();
 
   return (
-    <div className="image-card">
-      <img src={image.url} alt="art" {...attributes} {...listeners} />
+    <div className="image-card"
+      onDragStart={(e) => e.preventDefault()}
+    >
+      <div className="drag-handle" {...attributes} {...listeners}>
+        <img src={image.url} alt="art" draggable="false" />
+      </div>
 
       <div className="controls-overlay__item">
-        <button onClick={(e) => { 
-            e.stopPropagation(); 
-           setModal('editImage', undefined, true, image);
+        <button onClick={(e) => {
+          e.stopPropagation();
+          setModal('editImage', undefined, true, image);
         }}>🔍</button>
-        
-       <button onClick={(e) => { 
-    e.stopPropagation(); 
-    // Теперь это будет вызывать модалку именно для картинки
-    setModal('deleteImage', undefined, true, image); 
-}}>🗑️</button>
+
+        <button onClick={(e) => {
+          e.stopPropagation();
+          setModal('deleteImage', undefined, true, image);
+        }}>🗑️</button>
       </div>
     </div>
   );
diff --git a/src/features/AdminPage/ArtGallery/components/ImageGallery/SortableImageCard.tsx b/src/features/AdminPage/ArtGallery/components/ImageGallery/SortableImageCard.tsx
index 6e39210..6cf6287 100644
--- a/src/features/AdminPage/ArtGallery/components/ImageGallery/SortableImageCard.tsx
+++ b/src/features/AdminPage/ArtGallery/components/ImageGallery/SortableImageCard.tsx
@@ -13,13 +13,15 @@ export const SortableImageCard: React.FC<SortableImageCardProps> = ({
     onConfirmRequest,
     onCancelRequest
 }) => {
-    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
-        id: image.id
+    const { attributes, listeners, setNodeRef, transform, transition,isDragging } = useSortable({
+        id: `img_${image.id}`
     });
 
     const style = {
         transform: CSS.Transform.toString(transform),
         transition,
+        opacity: isDragging ? 0.5 : 1,
+        zIndex: isDragging ? 100 : 'auto'
     };
 
     return (
diff --git a/src/features/AdminPage/ArtGallery/components/ImageModal/ImageModal.styles.scss b/src/features/AdminPage/ArtGallery/components/ImageModal/ImageModal.styles.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/features/AdminPage/ArtGallery/components/ImageModal/ImageModal.tsx b/src/features/AdminPage/ArtGallery/components/ImageModal/ImageModal.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/features/AdminPage/ArtGallery/components/TemplateGrid/DroppableSlot.tsx b/src/features/AdminPage/ArtGallery/components/TemplateGrid/DroppableSlot.tsx
new file mode 100644
index 0000000..1a0455a
--- /dev/null
+++ b/src/features/AdminPage/ArtGallery/components/TemplateGrid/DroppableSlot.tsx
@@ -0,0 +1,29 @@
+import { useDroppable } from '@dnd-kit/core';
+import './TemplateGrid.styles.scss';
+
+
+export const DroppableSlot = ({ slot, image, onRemove, isEditing }: any) => {
+  const { setNodeRef } = useDroppable({ id: slot.id });
+
+  return (
+    <div ref={setNodeRef} className="slot-content">
+      {image && (
+        <>
+          <img src={image.url} alt="art" className="slot-image" />
+
+          {isEditing && (
+            <button
+              className="remove-slot-btn"
+              onClick={(e) => {
+                e.stopPropagation();
+                onRemove(slot.id);
+              }}
+            >
+              🗑️
+            </button>
+          )}
+        </>
+      )}
+    </div>
+  );
+};
diff --git a/src/features/AdminPage/ArtGallery/components/TemplateGrid/TemplateGrid.styles.scss b/src/features/AdminPage/ArtGallery/components/TemplateGrid/TemplateGrid.styles.scss
index aadc241..1937183 100644
--- a/src/features/AdminPage/ArtGallery/components/TemplateGrid/TemplateGrid.styles.scss
+++ b/src/features/AdminPage/ArtGallery/components/TemplateGrid/TemplateGrid.styles.scss
@@ -1,27 +1,95 @@
-@import '../Templates/shared-grid.styles';
+@use "@sass/variables/_variables.colors.scss" as c;
 
-.template-grid-container {
-    display: flex;
-    justify-content: center; 
-    gap: var(--grid-gap, 5px); 
-    height: 203px;
-    margin-top: 20px;
-    margin-bottom: 20px;
-}
-.preview-slot{
-    width: 137px;
-    height: content;
+.template-grid-wrapper {
+  position: relative;
+  display: flex;
+  align-items: start;
+  justify-content: center;
+  gap: 10px;
 }
 
-.slot {
-    background-color: #000;
+.template-actions {
+  position: relative;
+  margin-top: 10px;
+  z-index: 10;
+
+  .dots-menu {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 24px;
+    padding: 5px;
+  }
+
+  .menu-overlay {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    background: c.$white-color;
+    border: 1px solid c.$darkish-gray-color;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     border-radius: 8px;
-    overflow: hidden;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 10px;
+    padding: 8px;
+    z-index: 20;
+    min-width: 150px;
+
+  }
+
+  .menu-overlay button {
+    transition: all 0.2s ease;
     cursor: pointer;
-    
-    img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
+
+    &:hover {
+      color: c.$dark-red-color;
+      transform: scale(1.02);
     }
+  }
+}
+
+.preview-slot {
+  width: 100%;
+  height: 100%;
+
+  .slot-content {
+    width: 100%;
+    height: 100%;
+  }
+
+  .slot-image {
+    width: 100%;
+    height: 100%;
+    display: block;
+    object-fit: cover;
+    object-position: center;
+  }
+}
+
+.remove-slot-btn {
+
+  position: absolute;
+  top: 6px;
+  right: 6px;
+
+  background: rgba(255, 255, 255, 0.8);
+  border: 1px solid #ddd;
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.2s;
+
+  color: c.$accented-red-color;
+  font-size: 16px;
+
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+  transition: 0.2s;
+  z-index: 100;
 }
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/components/TemplateGrid/TemplateGrid.tsx b/src/features/AdminPage/ArtGallery/components/TemplateGrid/TemplateGrid.tsx
index 4aa0b45..dca780b 100644
--- a/src/features/AdminPage/ArtGallery/components/TemplateGrid/TemplateGrid.tsx
+++ b/src/features/AdminPage/ArtGallery/components/TemplateGrid/TemplateGrid.tsx
@@ -1,27 +1,94 @@
-import React from 'react';
-import { observer } from 'mobx-react-lite'; 
-import { useModalContext } from '@stores/root-store'; 
+import  { useState , useEffect} from 'react';
+import { observer } from 'mobx-react-lite';
+import { useModalContext } from '@stores/root-store';
+import { TemplateRenderer } from '@components/ImageTemplates-grid/TemplateRenderer';
+import {DroppableSlot} from './DroppableSlot';
 import './TemplateGrid.styles.scss';
 
-export const TemplateGrid = observer(() => { 
-  const { templateStore } = useModalContext();
-  const { activeTemplate } = templateStore;
-if (!activeTemplate) {
-    return <div>Загрузка шаблонов...</div>; 
+export const TemplateGrid = observer(({
+  slots,
+  onClearAll,
+  onSave,
+  onRemoveSlot
+}: any) => {
+  const { imageTemplateStore } = useModalContext();
+
+  const [showMenu, setShowMenu] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+
+  if (!imageTemplateStore.activeTemplate) {
+    return <div>Загрузка...</div>;
+  }
+
+  const isTemplateFilled = Object.values(slots).some(
+    (image) => image !== null
+  );
+
+  useEffect(() => {
+  if (!isTemplateFilled) {
+    setIsEditing(false);
   }
+}, [isTemplateFilled]);
+
   return (
-   <div className={`template-grid-container preview-grid ${activeTemplate.name}`}>
+    <div className="template-grid-wrapper">
       
-      {activeTemplate.slots.map((slot) => (
-        <div 
-          key={slot.id} 
-          className="preview-slot" 
-          onDrop={() => console.log(`Drop to ${slot.id}`)}
-          onDragOver={(e) => e.preventDefault()} 
-        >
+      <TemplateRenderer
+        template={imageTemplateStore.activeTemplate}
+        renderSlot={(slot: any) => (
+          <DroppableSlot
+            slot={slot}
+            image={slots[slot.id]}
+            onRemove={onRemoveSlot}
+            isEditing={isEditing}
+          />
+        )}
+      />
+
+      {isTemplateFilled && (
+        <div className="template-actions">
+          <button
+            className="dots-menu"
+            onClick={() => setShowMenu(!showMenu)}
+          >
+            ⋮
+          </button>
+
+          {showMenu && (
+            <div className="menu-overlay">
+              <button
+                onClick={() => {
+                  setIsEditing(true);
+                  setShowMenu(false);
+                }}
+              >
+                Редагувати
+              </button>
+
+              <button
+                onClick={() => {
+                  onClearAll();
+                  setShowMenu(false);
+                  setIsEditing(false);
+                }}
+              >
+                Видалити все
+              </button>
+
+              <button
+                onClick={() => {
+                  onSave();
+                  setShowMenu(false);
+                  setIsEditing(false);
+                }}
+                className="save-btn"
+              >
+                Зберегти
+              </button>
+            </div>
+          )}
         </div>
-      ))}
-      
+      )}
     </div>
   );
 });
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/components/TemplateManager/TemplateManager.styles.scss b/src/features/AdminPage/ArtGallery/components/TemplateManager/TemplateManager.styles.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/features/AdminPage/ArtGallery/components/TemplateManager/TemplateManager.tsx b/src/features/AdminPage/ArtGallery/components/TemplateManager/TemplateManager.tsx
deleted file mode 100644
index e85141a..0000000
--- a/src/features/AdminPage/ArtGallery/components/TemplateManager/TemplateManager.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React, { useState } from 'react';
-import { TemplateGrid } from '../TemplateGrid/TemplateGrid';
-import './TemplateManager.styles.scss';
-
-import { useArtGallery } from '../../hooks/useArtGallery';
-export const TemplateManager = () => {
-  const { activeTemplate, setActiveTemplate } = useArtGallery();
-
-  return (
-    <div className="template-manager">
-      <div className="manager-header">
-        <h3>Шаблони</h3>
-        <TemplateSelector 
-          current={activeTemplate} 
-          onSelect={setActiveTemplate} 
-        />
-      </div>
-      {/* Сетка просто рендерит структуру, данные берет из массива изображений */}
-      <TemplateGrid activeType={activeTemplate} />
-    </div>
-  );
-};
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/components/Templates/shared-grid.styles.scss b/src/features/AdminPage/ArtGallery/components/Templates/shared-grid.styles.scss
deleted file mode 100644
index fda69d3..0000000
--- a/src/features/AdminPage/ArtGallery/components/Templates/shared-grid.styles.scss
+++ /dev/null
@@ -1,108 +0,0 @@
-
-
-.preview-slot {
-  background: #000;
-  border-radius: 4px;
-}
-
-/* -------------------------------- */
-/* Main-Big-Plus-Two */
-/* -------------------------------- */
-
-.preview-grid.main-big {
-  display: grid;
-
-  .preview-slot {
-    width: 255px;
-    height: 205px;
-  }
-}
-
-.preview-grid.medium {
-  display: grid;
-
-  grid-template-columns: repeat(1, 137px);
-  gap: 5px;
-
-  .preview-slot {
-    width: 137px;
-    height: 203px;
-  }
-}
-
-/* -------------------------------- */
-/* Two-Medium */
-/* -------------------------------- */
-
-.preview-grid.two-medium {
-  display: grid;
-
-  grid-template-columns: repeat(2, 137px);
-
-  gap: 5px;
-
-  .preview-slot {
-    width: 137px;
-    height: 203px;
-  }
-}
-
-/* -------------------------------- */
-/* Mid-Plus-Two-Small */
-/* -------------------------------- */
-
-.preview-grid.mid-plus-two-small {
-  display: grid;
-
-  grid-template-columns: 137px 135px;
-  grid-template-rows: 101px 101px;
-
-  gap: 4px;
-
-  .preview-slot:nth-child(1) {
-    grid-row: 1 / span 2;
-  }
-}
-
-/* -------------------------------- */
-/* Four-Small */
-/* -------------------------------- */
-
-.preview-grid.four-small {
-  display: grid;
-
-  grid-template-columns: repeat(2, 135px);
-  grid-template-rows: repeat(2, 101px);
-
-  gap: 4px;
-}
-
-
-// .preview-grid {
-//   display: grid;
-//   gap: 5px; // Значение по умолчанию
-
-//   &.main-big { grid-template-columns: 255px; grid-template-rows: 205px; }
-//   &.medium { grid-template-columns: 137px; grid-template-rows: 203px; }
-//   &.two-medium { grid-template-columns: repeat(2, 137px); grid-template-rows: 203px; }
-  
-//   &.mid-plus-two-small {
-//     grid-template-columns: 137px 135px;
-//     grid-template-rows: 101px 101px;
-//     gap: 4px;
-//     .preview-slot:first-child { grid-row: span 2; }
-//   }
-
-//   &.four-small {
-//     grid-template-columns: repeat(2, 135px);
-//     grid-template-rows: repeat(2, 101px);
-//     gap: 4px;
-//   }
-// }
-
-// .preview-slot {
-//   background: #000;
-//   border-radius: 4px;
-//   width: 100%; // Слот сам заполнит ячейку сетки
-//   height: 100%;
-// }
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/hooks/useArtGallery.ts b/src/features/AdminPage/ArtGallery/hooks/useArtGallery.ts
index 82cbcbf..7c3ab54 100644
--- a/src/features/AdminPage/ArtGallery/hooks/useArtGallery.ts
+++ b/src/features/AdminPage/ArtGallery/hooks/useArtGallery.ts
@@ -1,53 +1,30 @@
 import { useState } from 'react';
-import { getImageSize } from 'react-image-size';
-import { IndexedArt } from '@models/media/art.model';
 import { ArtImage } from '../types/gallery.types';
 
-// Та же формула, что на витрине (ArtGalleryBlock.component.tsx):
-// вертикальные -> medium (2), узкие горизонтальные -> small (1), широкие -> large (4).
-const calcOffset = (width: number, height: number): number => {
-  if (width <= height) return 2;
-  if (width > height && height <= 300) return 1;
-  return 4;
-};
-
-// Маппинг рабочей модели админки в формат витринного рендера ArtGallerySlide.
-export const toIndexedArts = (images: ArtImage[]): IndexedArt[] => images.map((image, i) => ({
-  index: i + 1,
-  sequenceNumber: i,
-  imageHref: image.url,
-  title: image.title ?? '',
-  description: image.description ?? '',
-  offset: image.offset,
-}));
-
 export const useArtGallery = () => {
   const [images, setImages] = useState<ArtImage[]>([]);
 
-  const addImage = async (file: File) => {
-    const url = URL.createObjectURL(file); // В реальности здесь будет URL от API
-    let offset = 4;
-    try {
-      const { width, height } = await getImageSize(url);
-      offset = calcOffset(width, height);
-    } catch { /* если размеры не прочитались — оставляем large по умолчанию */ }
+  const addImage = (file: File) => {
+    const url = URL.createObjectURL(file);
 
     const newImage: ArtImage = {
-      id: Date.now().toString(),
+      id: crypto.randomUUID(),
       url,
       isPublished: false,
-      offset,
+      offset: 4,
     };
-    setImages((prev) => [...prev, newImage]);
-  };
 
-  const deleteImage = (id: string) => {
-    setImages((prev) => prev.filter((img) => img.id !== id || img.isPublished));
+    setImages(prev => [...prev, newImage]);
   };
 
-  const updateImage = (updatedImage: ArtImage) => {
-    setImages((prev) => prev.map((img) => (img.id === updatedImage.id ? updatedImage : img)));
+  const removeImage = (id: string) => {
+    setImages(prev => prev.filter(img => img.id !== id));
   };
 
-  return { images, addImage, deleteImage, updateImage };
-};
+  return {
+    images,
+    setImages,
+    addImage,
+    removeImage,
+  };
+};
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/hooks/useArtGalleryDnD.ts b/src/features/AdminPage/ArtGallery/hooks/useArtGalleryDnD.ts
new file mode 100644
index 0000000..460ba7f
--- /dev/null
+++ b/src/features/AdminPage/ArtGallery/hooks/useArtGalleryDnD.ts
@@ -0,0 +1,121 @@
+import { DragEndEvent } from '@dnd-kit/core';
+import { arrayMove } from '@dnd-kit/sortable';
+
+export const useArtGalleryDnD = ({
+  images,
+  setImages,
+  templateSlots,
+  setTemplateSlots,
+  imageTemplateStore,
+  removeImage
+}: any) => {
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (!over) return;
+
+    const activeId = String(active.id);
+    const overId = String(over.id);
+
+    if (
+      activeId.startsWith('tmpl_') &&
+      overId.startsWith('tmpl_')
+    ) {
+      const rawActive = activeId.replace('tmpl_', '');
+      const rawOver = overId.replace('tmpl_', '');
+
+      const oldIndex =
+        imageTemplateStore.savedTemplates.findIndex(
+          (t: any) => String(t.id) === rawActive
+        );
+
+      const newIndex =
+        imageTemplateStore.savedTemplates.findIndex(
+          (t: any) => String(t.id) === rawOver
+        );
+
+      if (
+        oldIndex !== -1 &&
+        newIndex !== -1 &&
+        oldIndex !== newIndex
+      ) {
+        imageTemplateStore.reorderTemplates(
+          oldIndex,
+          newIndex
+        );
+      }
+
+      return;
+    }
+
+    if (
+      activeId.startsWith('img_') &&
+      overId.startsWith('img_')
+    ) {
+      const oldIndex = images.findIndex(
+        (i: any) => `img_${i.id}` === activeId
+      );
+
+      const newIndex = images.findIndex(
+        (i: any) => `img_${i.id}` === overId
+      );
+
+      if (oldIndex !== -1 && newIndex !== -1) {
+        setImages(arrayMove(images, oldIndex, newIndex));
+      }
+
+      return;
+    }
+
+    if (activeId.startsWith('img_')) {
+      const rawActiveId = activeId.replace('img_', '');
+
+      const dragged = images.find(
+        (i: any) => String(i.id) === rawActiveId
+      );
+
+      const isTargetSlot =
+        imageTemplateStore.activeTemplate?.slots.some(
+          (s: any) => String(s.id) === overId
+        );
+
+      if (isTargetSlot && dragged) {
+        setTemplateSlots((prev: any) => ({
+          ...prev,
+          [overId]: dragged
+        }));
+
+        removeImage(dragged.id);
+      }
+
+      if (overId === 'gallery') {
+        const imgInSlot = Object.values(templateSlots).find(
+          (i: any) => i?.id === rawActiveId
+        );
+
+        if (imgInSlot) {
+          setTemplateSlots((prev: any) => {
+            const copy = { ...prev };
+
+            Object.keys(copy).forEach(k => {
+              if (copy[k]?.id === rawActiveId) {
+                copy[k] = null;
+              }
+            });
+
+            return copy;
+          });
+
+          setImages((prev: any) => [
+            ...prev,
+            imgInSlot
+          ]);
+        }
+      }
+    }
+  };
+
+  return {
+    handleDragEnd
+  };
+};
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/hooks/useFileUpload.ts b/src/features/AdminPage/ArtGallery/hooks/useFileUpload.ts
index c1dc4bb..9d06fb6 100644
--- a/src/features/AdminPage/ArtGallery/hooks/useFileUpload.ts
+++ b/src/features/AdminPage/ArtGallery/hooks/useFileUpload.ts
@@ -15,7 +15,6 @@ export const useFileUpload = (onUpload: (file: File) => void) => {
     if (file) onUpload(file);
   };
 
-  // Drag-and-Drop события
   const handleDragOver = (e: DragEvent) => {
     e.preventDefault();
     setIsDragging(true);
diff --git a/src/features/AdminPage/ArtGallery/hooks/useTemplateEditor.ts b/src/features/AdminPage/ArtGallery/hooks/useTemplateEditor.ts
new file mode 100644
index 0000000..3dcadea
--- /dev/null
+++ b/src/features/AdminPage/ArtGallery/hooks/useTemplateEditor.ts
@@ -0,0 +1,67 @@
+import { useState } from 'react';
+
+export const useTemplateEditor = (
+  imageTemplateStore: any,
+  templateSlots: any,
+  setTemplateSlots: any
+) => {
+  const [editingTemplateId, setEditingTemplateId] =
+    useState<string | null>(null);
+
+  const handleEditTemplate = (template: any) => {
+    setEditingTemplateId(template.id);
+
+    const layout = imageTemplateStore.templates.find(
+      (t: any) => t.name === template.templateName
+    );
+
+    if (layout) {
+      imageTemplateStore.setActiveTemplate(layout);
+    }
+
+    setTemplateSlots({ ...template.slots });
+  };
+
+  const handleSave = () => {
+    if (editingTemplateId) {
+      imageTemplateStore.updateTemplate({
+        id: editingTemplateId,
+        slots: { ...templateSlots },
+        templateName:
+          imageTemplateStore.activeTemplate?.name || 'Updated',
+        isSavedToDb: false
+      });
+
+      setEditingTemplateId(null);
+    } else {
+      imageTemplateStore.addTemplate({
+        id: String(Date.now()),
+        slots: { ...templateSlots },
+        templateName:
+          imageTemplateStore.activeTemplate?.name || 'Unnamed',
+        isSavedToDb: false
+      });
+    }
+
+    setTemplateSlots({});
+  };
+
+  const saveToDb = async (templateToSave: any) => {
+    try {
+      imageTemplateStore.updateTemplateStatus(
+        templateToSave.id,
+        {
+          isSavedToDb: true
+        }
+      );
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  return {
+    handleEditTemplate,
+    handleSave,
+    saveToDb
+  };
+};
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/hooks/useTemplateSlots.ts b/src/features/AdminPage/ArtGallery/hooks/useTemplateSlots.ts
new file mode 100644
index 0000000..772e52a
--- /dev/null
+++ b/src/features/AdminPage/ArtGallery/hooks/useTemplateSlots.ts
@@ -0,0 +1,36 @@
+import { ArtImage } from '../types/gallery.types';
+
+export const useTemplateSlots = (
+  templateSlots: Record<string, ArtImage | null>,
+  setTemplateSlots: React.Dispatch<
+    React.SetStateAction<Record<string, ArtImage | null>>
+  >,
+  setImages: React.Dispatch<React.SetStateAction<ArtImage[]>>
+) => {
+  const clearAllSlots = () => {
+    const returnedImages = Object.values(templateSlots).filter(
+      (img): img is ArtImage => img !== null
+    );
+
+    setImages(prev => [...prev, ...returnedImages]);
+    setTemplateSlots({});
+  };
+
+  const removeImageFromSlot = (slotId: string) => {
+    const image = templateSlots[slotId];
+
+    if (!image) return;
+
+    setImages(prev => [...prev, image]);
+
+    setTemplateSlots(prev => ({
+      ...prev,
+      [slotId]: null
+    }));
+  };
+
+  return {
+    clearAllSlots,
+    removeImageFromSlot
+  };
+};
\ No newline at end of file

From 349035cb1d2c4b695e3daf82f57624262e7af993 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=86=D0=BD=D0=BD=D0=B0=20=D0=A8=D0=BF=D0=BE=D0=BD=D1=8C?=
 =?UTF-8?q?=D0=BA=D0=B0?= <inneta3@gmail.com>
Date: Sat, 13 Jun 2026 14:08:44 +0300
Subject: [PATCH 3/6] add: take  and convert templates from DB

---
 src/app/api/media/art-slide-templates.api.ts  |   9 +
 src/app/api/media/art-slide.api.ts            |  19 ++
 src/app/api/media/arts.api.ts                 |   5 +-
 .../ImageTemplates-grid/TemplateRenderer.tsx  |  18 +-
 .../shared-grid.styles.scss                   | 102 +++---
 .../DeleteImageModal.component.tsx            |  12 +-
 .../EditImageModal.component.tsx              |  46 ++-
 .../common/constants/api-routes.constants.ts  |   9 +
 src/app/common/constants/template.map.ts      |  38 +++
 .../common/constants/templates.constants.ts   |   1 -
 .../hooks/art-templates/useTemplates.ts       |  14 +
 src/app/stores/art-store.ts                   |  41 +++
 src/app/stores/image-store.ts                 | 134 ++++----
 src/app/stores/image-template-store.ts        |  44 ++-
 src/app/stores/root-store.ts                  |   3 +
 src/app/stores/template-store.ts              |  41 +--
 .../AdminPage/ArtGallery/ArtGallery.tsx       | 301 +++++++++++++-----
 .../components/ImageGallery/GalleryList.tsx   |  18 +-
 .../components/ImageGallery/ImageCard.tsx     |  10 +-
 .../ImageGallery/SortableImageCard.tsx        |   2 +-
 .../components/TemplateGrid/DroppableSlot.tsx |   2 +-
 .../components/TemplateGrid/TemplateGrid.tsx  |  27 +-
 .../ArtGallery/hooks/useArtGallery.ts         |  44 ++-
 .../ArtGallery/hooks/useArtGalleryDnD.ts      |   5 +-
 .../ArtGallery/hooks/useTemplateSlots.ts      |   2 +-
 .../ArtGallery/types/gallery.types.ts         |  54 ++--
 src/models/media/art-slide-template.model.ts  |  10 +
 src/models/media/art-slide.model.ts           |  33 ++
 src/models/media/image.model.ts               |  47 ++-
 29 files changed, 778 insertions(+), 313 deletions(-)
 create mode 100644 src/app/api/media/art-slide-templates.api.ts
 create mode 100644 src/app/api/media/art-slide.api.ts
 create mode 100644 src/app/common/constants/template.map.ts
 create mode 100644 src/app/common/hooks/art-templates/useTemplates.ts
 create mode 100644 src/app/stores/art-store.ts
 create mode 100644 src/models/media/art-slide-template.model.ts
 create mode 100644 src/models/media/art-slide.model.ts

diff --git a/src/app/api/media/art-slide-templates.api.ts b/src/app/api/media/art-slide-templates.api.ts
new file mode 100644
index 0000000..72046ee
--- /dev/null
+++ b/src/app/api/media/art-slide-templates.api.ts
@@ -0,0 +1,9 @@
+import Agent from '@api/agent.api';
+import { API_ROUTES } from '@constants/api-routes.constants';
+import { ArtSlideTemplate } from '@models/media/art-slide-template.model';
+
+const ArtSlideTemplatesApi = {
+    getAll: () => Agent.get<ArtSlideTemplate[]>(API_ROUTES.ART_SLIDE_TEMPLATES.GET_ALL),
+};
+
+export default ArtSlideTemplatesApi;
\ No newline at end of file
diff --git a/src/app/api/media/art-slide.api.ts b/src/app/api/media/art-slide.api.ts
new file mode 100644
index 0000000..b5dd834
--- /dev/null
+++ b/src/app/api/media/art-slide.api.ts
@@ -0,0 +1,19 @@
+import Agent from '@api/agent.api';
+import { API_ROUTES } from '@constants/api-routes.constants';
+import { ArtSlide, CreateArtSlide, UpdateArtSlide } from '@models/media/art-slide.model';
+
+const ArtSlidesApi = {
+    getAllByStreetcodeId: (streetcodeId: number) => 
+        Agent.get<ArtSlide[]>(`${API_ROUTES.ART_SLIDES.GET_BY_STREETCODE_ID}/${streetcodeId}`),
+
+    create: (artSlide: CreateArtSlide) => 
+        Agent.post<ArtSlide>(`${API_ROUTES.ART_SLIDES.CREATE}`, artSlide),
+
+    update: (artSlide: UpdateArtSlide) => 
+        Agent.put<ArtSlide>(`${API_ROUTES.ART_SLIDES.UPDATE}`, artSlide),
+
+    delete: (id: number) => 
+        Agent.delete(`${API_ROUTES.ART_SLIDES.DELETE}/${id}`),
+};
+
+export default ArtSlidesApi;
\ No newline at end of file
diff --git a/src/app/api/media/arts.api.ts b/src/app/api/media/arts.api.ts
index 46c3296..bcd913c 100644
--- a/src/app/api/media/arts.api.ts
+++ b/src/app/api/media/arts.api.ts
@@ -7,9 +7,10 @@ const ArtsApi = {
 
     getById: (id: number) => Agent.get<Art>(`${API_ROUTES.ARTS.GET}/${id}`),
 
-    create: (art: Art) => Agent.post<Art>(`${API_ROUTES.ARTS.CREATE}`, art),
+    create: (data: FormData) => Agent.post<Art>(`${API_ROUTES.ARTS.CREATE}`, data),
 
-    update: (art: Art) => Agent.post<Art>(`${API_ROUTES.ARTS.UPDATE}`, art),
+    update: (id: number, data: { title: string; description: string }) =>
+        Agent.put<Art>(`${API_ROUTES.ARTS.UPDATE}/${id}`, data),
 
     delete: (id: number) => Agent.delete(`${API_ROUTES.ARTS.DELETE}/${id}`),
 };
diff --git a/src/app/common/components/ImageTemplates-grid/TemplateRenderer.tsx b/src/app/common/components/ImageTemplates-grid/TemplateRenderer.tsx
index bbeab05..07e5f73 100644
--- a/src/app/common/components/ImageTemplates-grid/TemplateRenderer.tsx
+++ b/src/app/common/components/ImageTemplates-grid/TemplateRenderer.tsx
@@ -1,17 +1,25 @@
-import React from 'react';
 import { observer } from 'mobx-react-lite';
+import { TEMPLATE_CLASS_MAP } from '@constants/template.map';
 import './shared-grid.styles.scss';
 
 export const TemplateRenderer = observer(({ template, renderSlot, className }: any) => {
-  const templateClass = template.name.toLowerCase().replace(/-/g, '-');
+
+  const config = TEMPLATE_CLASS_MAP[template?.name];
+
+  const slots = config?.slots ?? [];
+  const gap = config?.gap ?? 5;
+  const templateClass = config?.className || 'template-default';
 
   return (
-    <div className={`preview-grid ${templateClass} ${className || ''}`}>
-      {template.slots.map((slot: any) => (
+    <div 
+      className={`preview-grid ${templateClass} ${className || ''}`}
+      style={{ gap: `${gap}px` }}
+    >
+      {slots.map((slot: any) => (
         <div key={slot.id} className="preview-slot">
           {renderSlot(slot)}
         </div>
       ))}
     </div>
   );
-});
\ No newline at end of file
+});
diff --git a/src/app/common/components/ImageTemplates-grid/shared-grid.styles.scss b/src/app/common/components/ImageTemplates-grid/shared-grid.styles.scss
index 179b54a..112071c 100644
--- a/src/app/common/components/ImageTemplates-grid/shared-grid.styles.scss
+++ b/src/app/common/components/ImageTemplates-grid/shared-grid.styles.scss
@@ -25,67 +25,73 @@
   display: grid;
   gap: 5px;
 
-  &.main-big {
-    grid-template-columns: 255px;
-    grid-template-rows: 205px;
-  }
+  // 1-2 слотф
+  &.template-single-large { grid-template-columns: 255px; grid-template-rows: 205px; grid-template-areas: "slot-0"; }
+  &.template-single-medium { grid-template-columns: 137px; grid-template-rows: 203px; grid-template-areas: "slot-0"; }
+  &.template-two-horizontal { grid-template-columns: 137px 137px; grid-template-rows: 203px; grid-template-areas: "slot-0 slot-1"; }
 
-  &.medium {
-    grid-template-columns: 137px;
-    grid-template-rows: 203px;
+  // 3 слота
+  &.template-three-mixed { 
+    grid-template-columns: 137px 137px; 
+    grid-template-rows: 203px 100px; 
+    grid-template-areas: "slot-0 slot-1" "slot-2 slot-2"; 
   }
 
-  &.two-medium {
-    grid-template-columns: repeat(2, 137px);
-    grid-template-rows: 203px;
+  // 4 слота
+  &.template-four-grid { grid-template-columns: repeat(2, 135px); grid-template-rows: repeat(2, 101px); grid-template-areas: "slot-0 slot-1" "slot-2 slot-3"; }
+  &.template-four-sidebar-left { 
+    grid-template-columns: 135px 137px; grid-template-rows: 101px 101px; 
+    grid-template-areas: "slot-0 slot-1" "slot-0 slot-2"; 
   }
-
-  &.mid-plus-two-small {
-    grid-template-columns: 137px 135px;
-    grid-template-rows: 101px 101px;
-    gap: 4px;
-
-    .preview-slot:first-child {
-      grid-row: span 2;
-    }
+  &.template-four-sidebar-right { 
+    grid-template-columns: 137px 135px; grid-template-rows: 101px 101px; 
+    grid-template-areas: "slot-1 slot-0" "slot-2 slot-0"; 
   }
 
-  &.four-small {
-    grid-template-columns: repeat(2, 135px);
-    grid-template-rows: repeat(2, 101px);
-    gap: 4px;
-  }
+  // 5 слотів
+  &.template-five-mixed { grid-template-columns: 137px 65px 65px; grid-template-rows: 101px 101px; grid-template-areas: "slot-0 slot-1 slot-2" "slot-0 slot-3 slot-4"; }
+  &.template-five-grid { grid-template-columns: repeat(3, 85px); grid-template-rows: repeat(2, 101px); grid-template-areas: "slot-0 slot-1 slot-2" "slot-3 slot-4 slot-4"; }
+  &.template-five-complex { grid-template-columns: repeat(2, 130px); grid-template-rows: repeat(3, 65px); grid-template-areas: "slot-0 slot-1" "slot-2 slot-3" "slot-4 slot-4"; }
+
+  // 6 слотів
+  &.template-six-grid { grid-template-columns: repeat(3, 85px); grid-template-rows: repeat(2, 101px); grid-template-areas: "slot-0 slot-1 slot-2" "slot-3 slot-4 slot-5"; }
+  &.template-six-compact { grid-template-columns: repeat(3, 85px); grid-template-rows: repeat(2, 101px); grid-template-areas: "slot-0 slot-1 slot-2" "slot-3 slot-4 slot-5"; }
+  &.template-six-mixed { grid-template-columns: repeat(3, 85px); grid-template-rows: repeat(2, 101px); grid-template-areas: "slot-0 slot-0 slot-1" "slot-2 slot-3 slot-4"; }
+  &.template-six-large { grid-template-columns: repeat(3, 85px); grid-template-rows: repeat(2, 101px); grid-template-areas: "slot-0 slot-1 slot-2" "slot-3 slot-4 slot-5"; }
 }
 
 .preview-grid.carousel-preview {
-  .preview-slot {
-    border-radius: 30px;
-  }
+  .preview-slot { border-radius: 30px; }
 
-  &.main-big {
-    grid-template-columns: 380px;
-    grid-template-rows: 305px;
-  }
+  /* 1 слот */
+  &.template-single-large { grid-template-columns: 380px; grid-template-rows: 305px; }
+  &.template-single-medium { grid-template-columns: 205px; grid-template-rows: 305px; }
 
-  &.medium {
-    grid-template-columns: 205px;
-    grid-template-rows: 305px;
-  }
+  /* 2 слота */
+  &.template-two-horizontal { grid-template-columns: repeat(2, 205px); grid-template-rows: 305px; }
 
-  &.two-medium {
-    grid-template-columns: repeat(2, 205px);
-    grid-template-rows: 305px;
-  }
+  /* 3 слота */
+  &.template-three-mixed { grid-template-columns: 205px 205px; grid-template-rows: 305px 150px; gap: 6px; }
 
-  &.mid-plus-two-small {
-    grid-template-columns: 205px 200px;
-    grid-template-rows: 150px 150px;
-    gap: 6px;
+  /* 4 слота */
+  &.template-four-grid { grid-template-columns: repeat(2, 200px); grid-template-rows: repeat(2, 150px); gap: 6px; }
+  &.template-four-sidebar-left { 
+    grid-template-columns: 200px 205px; grid-template-rows: 150px 150px; gap: 6px;
+    .preview-slot:first-child { grid-row: span 2; } 
   }
-
-  &.four-small {
-    grid-template-columns: repeat(2, 200px);
-    grid-template-rows: repeat(2, 150px);
-    gap: 6px;
+  &.template-four-sidebar-right { 
+    grid-template-columns: 205px 200px; grid-template-rows: 150px 150px; gap: 6px;
+    .preview-slot:first-child { grid-row: span 2; } 
   }
+
+  /* 5 слотів */
+  &.template-five-mixed { grid-template-columns: 205px 100px 100px; grid-template-rows: 150px 150px; gap: 6px; }
+  &.template-five-grid { grid-template-columns: repeat(3, 130px); grid-template-rows: repeat(2, 150px); gap: 6px; }
+  &.template-five-complex { grid-template-columns: repeat(2, 200px); grid-template-rows: repeat(3, 100px); gap: 6px; }
+
+  /* 6 слотів */
+  &.template-six-grid { grid-template-columns: repeat(3, 130px); grid-template-rows: repeat(2, 150px); gap: 6px; }
+  &.template-six-compact { grid-template-columns: repeat(3, 130px); grid-template-rows: repeat(2, 150px); gap: 6px; }
+  &.template-six-mixed { grid-template-columns: repeat(3, 130px); grid-template-rows: repeat(2, 150px); gap: 6px; }
+  &.template-six-large { grid-template-columns: repeat(3, 130px); grid-template-rows: repeat(2, 150px); gap: 6px; }
 }
\ No newline at end of file
diff --git a/src/app/common/components/modals/EditImageModal/DeleteImageModal.component.tsx b/src/app/common/components/modals/EditImageModal/DeleteImageModal.component.tsx
index 7a6ee46..7b6186a 100644
--- a/src/app/common/components/modals/EditImageModal/DeleteImageModal.component.tsx
+++ b/src/app/common/components/modals/EditImageModal/DeleteImageModal.component.tsx
@@ -5,20 +5,18 @@ import { Modal } from 'antd';
 const DeleteImageModal = observer(() => {
     const { modalStore: { setModal, modalsState: { deleteImage } } } = useModalContext();
 
-    const onConfirm = () => {
-        console.log("Удаляем картинку ID:", deleteImage.image?.id);
-        setModal('deleteImage');
+   const onConfirm = () => {
+        deleteImage.image?.onConfirm?.(); 
+        setModal('deleteImage', undefined, false); 
     };
-
     return (
         <Modal
-            title="Видалити зображення"
+            title="Видалити"
             open={deleteImage.isOpen}
             onOk={onConfirm}
             onCancel={() => setModal('deleteImage')}
-            className="deleteModal" 
         >
-            <p>Ви впевнені, що хочете видалити це зображення?</p>
+            <p>Ви впевнені?</p>
         </Modal>
     );
 });
diff --git a/src/app/common/components/modals/EditImageModal/EditImageModal.component.tsx b/src/app/common/components/modals/EditImageModal/EditImageModal.component.tsx
index 2648091..dceacf4 100644
--- a/src/app/common/components/modals/EditImageModal/EditImageModal.component.tsx
+++ b/src/app/common/components/modals/EditImageModal/EditImageModal.component.tsx
@@ -1,16 +1,23 @@
 import './EditImageModal.styles.scss';
-import CancelBtn from '@images/utils/Cancel_btn.svg'; // Убедитесь, что путь верный
+import CancelBtn from '@images/utils/Cancel_btn.svg';
 import { observer } from 'mobx-react-lite';
 import { useModalContext } from '@stores/root-store';
 import { Button, Form, Input, Modal } from 'antd';
 import FormItem from 'antd/es/form/FormItem';
 import TextArea from 'antd/es/input/TextArea';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 const EditImageModal = observer(() => {
-    const { modalStore: { setModal, modalsState: { editImage } } } = useModalContext();
     const [form] = Form.useForm();
 
+    const { 
+        artStore, 
+        imageTemplateStore,
+        modalStore: { setModal, modalsState: { editImage } }
+    } = useModalContext();
+
+    const [loading, setLoading] = useState(false); 
+
     useEffect(() => {
         if (editImage.isOpen && editImage.image) {
             form.setFieldsValue({
@@ -20,15 +27,26 @@ const EditImageModal = observer(() => {
         }
     }, [editImage.isOpen, editImage.image, form]);
 
-    const onSuccessfulSubmit = (values: { title: string; description: string }) => {
-        console.log("Сохраняем данные:", values);
-   
-        setModal('editImage');
-    };
+    const onSuccessfulSubmit = async (values: { title: string; description: string }) => {
+        if (!editImage.image) return;
 
+        setLoading(true);
+        try {
+            await artStore.updateArt(editImage.image.id, {
+                title: values.title,
+                description: values.description
+            });
+
+            setModal('editImage');
+        } catch (error) {
+            console.error("Ошибка сохранения:", error);
+        } finally {
+            setLoading(false);
+        }
+    };
     return (
         <Modal
-            className="addModal" 
+            className="addModal"
             open={editImage.isOpen}
             onCancel={() => setModal('editImage')}
             footer={[null]}
@@ -39,14 +57,18 @@ const EditImageModal = observer(() => {
                 <img src={editImage.image.url} alt="art" style={{ width: '100%', marginBottom: '20px', borderRadius: '8px' }} />
             )}
             <Form form={form} onFinish={onSuccessfulSubmit} layout="vertical">
-                <FormItem name="title" label="Назва" rules={[{  message: 'Введіть назву' }]}>
+                <FormItem name="title" label="Назва" rules={[{ message: 'Введіть назву' }]}>
                     <Input showCount maxLength={150} />
                 </FormItem>
-                <FormItem name="description" label="Опис" rules={[{  message: 'Введіть опис' }]}>
+                <FormItem name="description" label="Опис" rules={[{ message: 'Введіть опис' }]}>
                     <TextArea rows={4} maxLength={400} showCount />
                 </FormItem>
                 <div className="button-container">
-                    <Button className="save-button" onClick={() => form.submit()}>
+                    <Button 
+                        className="save-button" 
+                        loading={loading} 
+                        onClick={() => form.submit()}
+                    >
                         Зберегти
                     </Button>
                 </div>
diff --git a/src/app/common/constants/api-routes.constants.ts b/src/app/common/constants/api-routes.constants.ts
index 5af7702..51ecdd3 100644
--- a/src/app/common/constants/api-routes.constants.ts
+++ b/src/app/common/constants/api-routes.constants.ts
@@ -147,6 +147,15 @@ export const API_ROUTES = {
         GET_ALL: 'streetcodeArt/getAll',
         GET_BY_STREETCODE_ID: 'streetcodeArt/getByStreetcodeId',
     },
+    ART_SLIDES: {
+        GET_BY_STREETCODE_ID: '/art-slide',
+        CREATE: '/art-slide',
+        UPDATE: '/art-slide',
+        DELETE: '/art-slide',
+    },
+    ART_SLIDE_TEMPLATES: {
+        GET_ALL: '/ArtSlideTeamplates',
+    },
     RELATED_FIGURES: {
         GET_ALL: 'relatedFigure/getAll',
         GET: 'relatedFigure/getById',
diff --git a/src/app/common/constants/template.map.ts b/src/app/common/constants/template.map.ts
new file mode 100644
index 0000000..8992722
--- /dev/null
+++ b/src/app/common/constants/template.map.ts
@@ -0,0 +1,38 @@
+export interface SlotConfig {
+  id: string;
+}
+
+export interface TemplateConfig {
+  id: number;      
+  className: string;
+  gap: number;
+  slots: SlotConfig[];
+}
+
+export const TEMPLATE_CLASS_MAP: Record<string, TemplateConfig> = {
+  // 1 слот
+  'OneToFour': { id: 3, className: 'template-single-large', gap: 5, slots: [{id: 'big'}] },
+  'OneToTwo': { id: 4, className: 'template-single-medium', gap: 5, slots: [{id: 'mid1'}] },
+
+  // 2 слота
+  'OneToTwoAndThreeToFour': { id: 5, className: 'template-two-horizontal', gap: 5, slots: [{id: 'mid1'}, {id: 'mid2'}] },
+
+  // 3 слота
+  'OneToTwoAndThreeToFourAndFive': { id: 9, className: 'template-three-mixed', gap: 5, slots: [{id: 'mid'}, {id: 's1'}, {id: 's2'}] },
+
+  // 4 слота
+  'OneAndTwoAndThreeAndFour': { id: 8, className: 'template-four-grid', gap: 5, slots: [{id: 's1'}, {id: 's2'}, {id: 's3'}, {id: 's4'}] },
+  'OneAndTwoAndThreeToFour': { id: 7, className: 'template-four-sidebar-left', gap: 5, slots: [{id: 'mid1'}, {id: 's1'}, {id: 's2'}, {id: 's3'}] },
+  'OneToFourAndFiveAndSix': { id: 6, className: 'template-four-sidebar-right', gap: 5, slots: [{id: 'mid1'}, {id: 's1'}, {id: 's2'}, {id: 's3'}] },
+
+  // 5 слотов
+  'OneToFourAndFiveToSix': { id: 0, className: 'template-five-mixed', gap: 5, slots: [{id: 'mid1'}, {id: 's1'}, {id: 's2'}, {id: 's3'}, {id: 's4'}] },
+  'OneAndTwoAndThreeToFourAndFive': { id: 11, className: 'template-five-grid', gap: 5, slots: [{id: 's1'}, {id: 's2'}, {id: 's3'}, {id: 's4'}, {id: 's5'}] },
+  'OneAndTwoAndThreeAndFourAndFive': { id: 13, className: 'template-five-complex', gap: 5, slots: [{id: 's1'}, {id: 's2'}, {id: 's3'}, {id: 's4'}, {id: 's5'}] },
+
+  // 6 слотов
+  'OneAndTwoAndThreeAndFourAndFiveAndSix': { id: 2, className: 'template-six-grid', gap: 5, slots: [{id: 's1'}, {id: 's2'}, {id: 's3'}, {id: 's4'}, {id: 's5'}, {id: 's6'}] },
+  'OneToTwoAndThreeToFourAndFiveToSix': { id: 1, className: 'template-six-compact', gap: 5, slots: [{id: 's1'}, {id: 's2'}, {id: 's3'}, {id: 's4'}, {id: 's5'}, {id: 's6'}] },
+  'OneAndTwoAndThreeToFourAndFiveToSix': { id: 10, className: 'template-six-mixed', gap: 5, slots: [{id: 's1'}, {id: 's2'}, {id: 's3'}, {id: 's4'}, {id: 's5'}, {id: 's6'}] },
+  'OneAndTwoAndThreeToFourAndFiveAndSix': { id: 12, className: 'template-six-large', gap: 5, slots: [{id: 's1'}, {id: 's2'}, {id: 's3'}, {id: 's4'}, {id: 's5'}, {id: 's6'}] },
+};
\ No newline at end of file
diff --git a/src/app/common/constants/templates.constants.ts b/src/app/common/constants/templates.constants.ts
index 7f4673d..b87e12f 100644
--- a/src/app/common/constants/templates.constants.ts
+++ b/src/app/common/constants/templates.constants.ts
@@ -1,4 +1,3 @@
-// constants/templates.constants.ts
 
 export interface SlotConfig {
   id: string;
diff --git a/src/app/common/hooks/art-templates/useTemplates.ts b/src/app/common/hooks/art-templates/useTemplates.ts
new file mode 100644
index 0000000..564b596
--- /dev/null
+++ b/src/app/common/hooks/art-templates/useTemplates.ts
@@ -0,0 +1,14 @@
+import { useEffect, useState } from 'react';
+import ArtSlideTemplatesApi from '@api/media/art-slide-templates.api'; 
+import { ArtSlideTemplate } from '@models/media/art-slide-template.model';
+
+export const useTemplates = () => {
+    const [templates, setTemplates] = useState<ArtSlideTemplate[]>([]);
+    
+    useEffect(() => {
+
+        ArtSlideTemplatesApi.getAll().then(setTemplates);
+    }, []);
+
+    return templates;
+};
\ No newline at end of file
diff --git a/src/app/stores/art-store.ts b/src/app/stores/art-store.ts
new file mode 100644
index 0000000..1e7ef25
--- /dev/null
+++ b/src/app/stores/art-store.ts
@@ -0,0 +1,41 @@
+import { makeAutoObservable, runInAction } from 'mobx';
+import ArtsApi from '@api/media/arts.api';
+import Art from '@models/media/art.model';
+
+export default class ArtStore {
+    public arts: Art[] = [];
+
+    constructor() {
+        makeAutoObservable(this);
+    }
+
+    public createArt = async (artData: FormData | Art) => {
+        try {
+            const newArt = await ArtsApi.create(artData as any);
+
+            runInAction(() => {
+                this.arts.push(newArt);
+            });
+            return newArt;
+        } catch (error) {
+            console.error("Failed to save art:", error);
+            throw error;
+        }
+    };
+
+    public updateArt = async (id: number, data: { title: string; description: string }) => {
+        try {
+            const updatedArt = await ArtsApi.update(id, data);
+
+            runInAction(() => {
+                const index = this.arts.findIndex(a => a.id === id);
+                if (index !== -1) {
+                    this.arts[index] = { ...this.arts[index], ...updatedArt };
+                }
+            });
+        } catch (error) {
+            console.error("Ошибка обновления:", error);
+            throw error;
+        }
+    };
+}
\ No newline at end of file
diff --git a/src/app/stores/image-store.ts b/src/app/stores/image-store.ts
index 9e689eb..4f86deb 100644
--- a/src/app/stores/image-store.ts
+++ b/src/app/stores/image-store.ts
@@ -1,83 +1,107 @@
 import { makeAutoObservable, runInAction } from 'mobx';
 import imagesApi from '@api/media/images.api';
-import Image, { ImageCreate } from '@models/media/image.model';
+import Image, { ArtImage, ImageCreate } from '@models/media/image.model';
+import { arrayMove } from '@dnd-kit/sortable';
 
 export default class ImageStore {
-    public ImageMap = new Map<number, Image>();
+    public ImageMap: Map<number, ArtImage> = new Map();
 
     public constructor() {
         makeAutoObservable(this);
     }
 
-    public addImage = (image: Image) => {
-        this.setItem(image);
-    };
-
-    private setInternalMap = (images: Image[]) => {
-        images.forEach(this.setItem);
-    };
-
-    private setItem = (image: Image) => {
-        this.ImageMap.set(image.id, image);
-    };
-
-    get getImageArray() {
+    get getImageArray(): ArtImage[] {
         return Array.from(this.ImageMap.values());
     }
 
-    static async getImageById(imageId:number):Promise<Image | undefined> {
-        let image:Image | undefined;
-        await imagesApi.getById(imageId)
-            .then((im) => {
-                image = im;
-            })
-            .catch((error) => {});
-        return image;
-    }
-
-    public getImage = (id: number) => this.ImageMap.get(id);
-
-    public fetchImage = async (id: number) => {
-        try {
-            const image = await imagesApi.getById(id);
-            this.setItem(image);
-        } catch (error: unknown) {}
-    };
-
-    public fetchImageByStreetcodeId = async (streetcodeId: number) => {
+    public fetchAll = async () => {
         try {
-            const image = await imagesApi.getByStreetcodeId(streetcodeId);
-            this.setInternalMap(image);
-        } catch (error: unknown) {}
-    };
+            const rawImages = await imagesApi.getAll();
 
-    public createImage = async (image: ImageCreate) => {
-        try {
-            await imagesApi.create(image).then((resp) => {
-                this.setItem(resp);
+            runInAction(() => {
+                rawImages.forEach(img => {
+                    this.ImageMap.set(Number(img.id), this.transformToArtImage(img));
+                });
             });
-        } catch (error: unknown) {}
+        } catch (error) {
+            console.error('Error fetching all images:', error);
+        }
     };
 
-    public updateImage = async (image: Image) => {
+    public createImage = async (
+        data: ImageCreate,
+        localUrl?: string
+    ): Promise<ArtImage | undefined> => {
         try {
-            await imagesApi.update(image);
+            const rawImage = await imagesApi.create(data);
+
+            const artImage: ArtImage = {
+                ...this.transformToArtImage(rawImage),
+                url: localUrl ?? ''
+            };
+            console.log("artImage", artImage);
             runInAction(() => {
-                const updatedImage = {
-                    ...this.ImageMap.get(image.id),
-                    ...image,
-                };
-                this.setItem(updatedImage as Image);
+                this.ImageMap.set(Number(artImage.id), artImage);
             });
-        } catch (error: unknown) {}
+
+            return artImage;
+        } catch (error) {
+            console.error('Store error (createImage):', error);
+            return undefined;
+        }
+    };
+
+    public addImageBackToGallery = (image: ArtImage) => {
+        runInAction(() => {
+            this.ImageMap.set(Number(image.id), image);
+        });
     };
 
-    public deleteImage = async (imageId: number) => {
+
+
+    public deleteImage = async (imageId: number): Promise<boolean> => {
         try {
             await imagesApi.delete(imageId);
+
             runInAction(() => {
                 this.ImageMap.delete(imageId);
             });
-        } catch (error: unknown) {}
+
+            return true;
+        } catch (error) {
+            console.error('Store error:', error);
+            return false;
+        }
+    };
+
+    public moveImageToTemplate = (imageId: number) => {
+        runInAction(() => {
+            this.ImageMap.delete(imageId);
+        });
+    };
+
+    public moveImageBackToGallery = (image: ArtImage) => {
+        runInAction(() => {
+            this.ImageMap.set(Number(image.id), image);
+        });
+    };
+
+    public reorderImages = (oldIndex: number, newIndex: number) => {
+        runInAction(() => {
+            const arr = Array.from(this.ImageMap.values());
+            const moved = arrayMove(arr, oldIndex, newIndex);
+            this.ImageMap.clear();
+            moved.forEach(img => this.ImageMap.set(Number(img.id), img));
+        });
+    };
+
+    private transformToArtImage = (image: Image): ArtImage => {
+        const path = `/static-files/${image.id}.png`;
+
+        return {
+            ...image,
+            url: path,
+            isPublished: false
+        };
     };
-}
+}
\ No newline at end of file
diff --git a/src/app/stores/image-template-store.ts b/src/app/stores/image-template-store.ts
index 3fe40e7..39cbfaa 100644
--- a/src/app/stores/image-template-store.ts
+++ b/src/app/stores/image-template-store.ts
@@ -1,22 +1,48 @@
-import { makeAutoObservable } from 'mobx';
+import { makeAutoObservable, runInAction } from 'mobx';
 import { arrayMove } from '@dnd-kit/sortable';
-import { TEMPLATES_CONFIG } from '../common/constants/templates.constants';
+import ArtSlideTemplatesApi from '@api/media/art-slide-templates.api';
+import { ArtSlideTemplate } from '@models/media/art-slide-template.model';
 
 export default class ImageTemplateStore {
-    public templates = TEMPLATES_CONFIG;
-    public activeTemplate = TEMPLATES_CONFIG[0];
-
-    savedTemplates: any[] = [];
+    public TemplateMap = new Map<number, ArtSlideTemplate>();
+    public activeTemplate: ArtSlideTemplate | null = null;
+    public savedTemplates: ArtSlideTemplate[] = [];
+    
+    private isLoaded = false; 
 
     constructor() {
         makeAutoObservable(this);
     }
 
-    public setActiveTemplate = (template: any) => {
+    get templates() {
+        return Array.from(this.TemplateMap.values());
+    }
+
+    public fetchTemplates = async () => {
+        if (this.isLoaded) return; 
+
+        try {
+            const data = await ArtSlideTemplatesApi.getAll();
+            runInAction(() => {
+                data.forEach(template => {
+                    this.TemplateMap.set(template.id, template);
+                });
+                this.isLoaded = true;
+                
+                if (!this.activeTemplate && data.length > 0) {
+                    this.activeTemplate = data[0];
+                }
+            });
+        } catch (error: unknown) {
+            console.error("Failed to fetch templates", error);
+        }
+    };
+
+    public setActiveTemplate = (template: ArtSlideTemplate) => {
         this.activeTemplate = template;
     };
 
-    addTemplate(template: any) {
+    addTemplate(template: ArtSlideTemplate) {
         this.savedTemplates.push(template);
     }
 
@@ -24,7 +50,7 @@ export default class ImageTemplateStore {
         this.savedTemplates = arrayMove(this.savedTemplates, oldIndex, newIndex);
     }
 
-    updateTemplate(updatedTemplate: any) {
+    updateTemplate(updatedTemplate: ArtSlideTemplate) {
         const index = this.savedTemplates.findIndex(t => t.id === updatedTemplate.id);
         if (index !== -1) {
             this.savedTemplates[index] = updatedTemplate;
diff --git a/src/app/stores/root-store.ts b/src/app/stores/root-store.ts
index 5b3d6c7..9dfffe6 100644
--- a/src/app/stores/root-store.ts
+++ b/src/app/stores/root-store.ts
@@ -34,6 +34,7 @@ import ToponymStore from './toponym-store';
 import UserLoginStore from './user-login-store';
 
 import ImageTemplateStore from './image-template-store';
+import ArtStore from './art-store';
 
 interface Store {
     factsStore: FactsStore,
@@ -72,6 +73,7 @@ export interface StreetcodeDataStore {
 export interface ModalDataStore {
     modalStore: ModalStore,
     imageTemplateStore: ImageTemplateStore,
+    artStore: ArtStore,
 }
 
 export const store: Store = {
@@ -111,6 +113,7 @@ export const streetcodeDataStore:StreetcodeDataStore = {
 export const modalDataStore:ModalDataStore = {
     modalStore: new ModalStore(),
     imageTemplateStore: new ImageTemplateStore(),
+    artStore: new ArtStore(),
 };
 
 export const toponymDataStore:ToponymStore = new ToponymStore();
diff --git a/src/app/stores/template-store.ts b/src/app/stores/template-store.ts
index d76b5e5..e280178 100644
--- a/src/app/stores/template-store.ts
+++ b/src/app/stores/template-store.ts
@@ -1,27 +1,32 @@
-import { makeAutoObservable } from 'mobx';
-import { arrayMove } from '@dnd-kit/sortable';
+import { makeAutoObservable, runInAction } from 'mobx';
+import ArtSlideTemplatesApi from '@api/media/art-slide-templates.api';
+import { ArtSlideTemplate } from '@models/media/art-slide-template.model';
 
 export default class TemplateStore {
-    savedTemplates: any[] = [];
+    public TemplateMap = new Map<number, ArtSlideTemplate>();
 
-    constructor() {
+    public constructor() {
         makeAutoObservable(this);
     }
 
-    setSavedTemplates(templates: any[]) {
-        this.savedTemplates = templates;
-    }
-    reorderTemplates(oldIndex: number, newIndex: number) {
-        this.savedTemplates = arrayMove(this.savedTemplates, oldIndex, newIndex);
-    }
-
-    addTemplate(template: any) {
-        this.savedTemplates.push(template);
-    }
-    updateTemplateStatus(id: number, status: Partial<{ isSavedToDb: boolean }>) {
-        const template = this.savedTemplates.find(t => t.id === id);
-        if (template) {
-            Object.assign(template, status);
+    public fetchTemplates = async () => {
+        try {
+            const templates = await ArtSlideTemplatesApi.getAll();
+            runInAction(() => {
+                templates.forEach(template => {
+                    this.TemplateMap.set(template.id, template);
+                });
+            });
+        } catch (error: unknown) {
+            console.error("Failed to fetch templates", error);
         }
+    };
+
+    get getTemplateArray() {
+        return Array.from(this.TemplateMap.values());
     }
+
+   public getTemplateByName = (name: string) => {
+        return this.getTemplateArray.find(t => t.name === name);
+    };
 }
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/ArtGallery.tsx b/src/features/AdminPage/ArtGallery/ArtGallery.tsx
index 5de08ee..4eb3af7 100644
--- a/src/features/AdminPage/ArtGallery/ArtGallery.tsx
+++ b/src/features/AdminPage/ArtGallery/ArtGallery.tsx
@@ -1,99 +1,212 @@
-import React, { useState } from 'react';
-import { DndContext, DragEndEvent, DragOverlay, closestCenter, useSensor, useSensors, PointerSensor } from '@dnd-kit/core';
+import React, { useState, useEffect } from 'react';
+import { TEMPLATE_CLASS_MAP } from '@constants/template.map';
+import { observer } from 'mobx-react-lite';
+import {
+  DndContext,
+  DragEndEvent,
+  closestCenter,
+  useSensor,
+  useSensors,
+  PointerSensor
+} from '@dnd-kit/core';
+
 import { arrayMove } from '@dnd-kit/sortable';
-import { ArtImage } from './types/gallery.types';
+
+import { ArtImage } from '@models/media/image.model';
 import { useArtGallery } from './hooks/useArtGallery';
+
 import { GalleryList } from './components/ImageGallery/GalleryList';
 import { TemplateGrid } from './components/TemplateGrid/TemplateGrid';
 import { TemplatesHeader } from './components/Templates/TemplatesHeader';
-import { useModalContext } from '@/app/stores/root-store';
-import { SavedTemplatesCarousel } from './components/Carousel/SavedTemplatesCarousel'
+import { SavedTemplatesCarousel } from './components/Carousel/SavedTemplatesCarousel';
+
+import useMobx, { useModalContext } from '@/app/stores/root-store';
 
 export const ArtGallery: React.FC = () => {
-  const { images, setImages, addImage, removeImage } = useArtGallery();
-  const [templateSlots, setTemplateSlots] = useState<Record<string, ArtImage | null>>({});
-  const [activeImage, setActiveImage] = useState<ArtImage | null>(null);
+  const {
+    addImage,
+    removeImage,
+    addImageBackToGallery,
+    moveImageBackToGallery,
+    moveImageToTemplate,
+    reorderImages } = useArtGallery();
+
+  const { imagesStore } = useMobx();
+  const { modalStore, imageTemplateStore } = useModalContext();
+
+  const images = imagesStore.getImageArray;
+
+  const [templateSlots, setTemplateSlots] =
+    useState<Record<string, ArtImage | null>>({});
+
   const [activeId, setActiveId] = useState<string | null>(null);
   const [editingTemplateId, setEditingTemplateId] = useState<string | null>(null);
 
-  const { modalStore, imageTemplateStore } = useModalContext();
-  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 1 } }));
 
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: { distance: 1 }
+    })
+  );
+
+
+
+
+  // -----------------------------
+  // CLEAR ALL SLOTS
+  // -----------------------------
   const clearAllSlots = () => {
-    const returnedImages = Object.values(templateSlots).filter((img): img is ArtImage => img !== null);
-    setImages(prev => [...prev, ...returnedImages]);
+    const returnedImages = Object.values(templateSlots).filter(
+      (img): img is ArtImage => img !== null
+    );
+    returnedImages.forEach(img => {
+      addImageBackToGallery(img);
+    });
     setTemplateSlots({});
   };
 
+  // -----------------------------
+  // REMOVE FROM SLOT
+  // -----------------------------
+  const removeImageFromSlot = (imageId: number) => {
+    console.log('Current slots:', templateSlots);
+    console.log('Searching for ID:', imageId);
+
+
+    const slotId = Object.keys(templateSlots).find(key => {
+      const slotItem = templateSlots[key];
+      return slotItem !== null && Number(slotItem.id) === Number(imageId);
+    });
+
+    if (!slotId) {
+      console.warn('Слот с такой картинкой не найден');
+      return;
+    }
+
+    const image = templateSlots[slotId];
+    if (image) {
+      console.log('Возвращаем картинку:', image);
+
+      moveImageBackToGallery(image);
+
+      setTemplateSlots(prev => ({ ...prev, [slotId]: null }));
+    }
+  };
+
+
+  // -----------------------------
+  // DRAG END
+  // -----------------------------
   const handleDragEnd = (event: DragEndEvent) => {
     const { active, over } = event;
-    setActiveImage(null);
     setActiveId(null);
 
-    if (!over) return;
+    if (!over || !active) return;
 
     const activeId = String(active.id);
     const overId = String(over.id);
 
+  const templateName = imageTemplateStore.activeTemplate?.name;
+
+  const config = templateName ? TEMPLATE_CLASS_MAP[templateName] : null;
+
+  const slotsToCheck = imageTemplateStore.activeTemplate?.slots || config?.slots || [];
+
+  const isSlot = slotsToCheck.some((s: any) => String(s.id) === overId);
+
+    // -------------------------
+    // reorder templates
+    // -------------------------
     if (activeId.startsWith('tmpl_') && overId.startsWith('tmpl_')) {
       const rawActive = activeId.replace('tmpl_', '');
       const rawOver = overId.replace('tmpl_', '');
 
-      const oldIndex = imageTemplateStore.savedTemplates.findIndex(t => String(t.id) === rawActive);
-      const newIndex = imageTemplateStore.savedTemplates.findIndex(t => String(t.id) === rawOver);
+      const oldIndex = imageTemplateStore.savedTemplates.findIndex(
+        t => String(t.id) === rawActive
+      );
 
-      if (oldIndex !== -1 && newIndex !== -1 && oldIndex !== newIndex) {
+      const newIndex = imageTemplateStore.savedTemplates.findIndex(
+        t => String(t.id) === rawOver
+      );
 
+      if (oldIndex !== -1 && newIndex !== -1 && oldIndex !== newIndex) {
         imageTemplateStore.reorderTemplates(oldIndex, newIndex);
       }
       return;
     }
 
-
+    // -------------------------
+    // reorder images in gallery
+    // -------------------------
     if (activeId.startsWith('img_') && overId.startsWith('img_')) {
-      const oldIndex = images.findIndex(i => `img_${i.id}` === activeId);
-      const newIndex = images.findIndex(i => `img_${i.id}` === overId);
+      const oldIndex = images.findIndex(
+        i => `img_${i.id}` === activeId
+      );
+
+      const newIndex = images.findIndex(
+        i => `img_${i.id}` === overId
+      );
 
       if (oldIndex !== -1 && newIndex !== -1) {
-        setImages(arrayMove(images, oldIndex, newIndex));
+        reorderImages(oldIndex, newIndex);
       }
       return;
     }
 
+    // -------------------------
+    // drag image → slot
+    // -------------------------
     if (activeId.startsWith('img_')) {
       const rawActiveId = activeId.replace('img_', '');
-      const dragged = images.find(i => String(i.id) === rawActiveId);
 
-      const isTargetSlot = imageTemplateStore.activeTemplate?.slots.some((s: any) => String(s.id) === overId);
+      const dragged = images.find(
+        i => String(i.id) === rawActiveId
+      );
+
+      // const isSlot =
+      //   imageTemplateStore.activeTemplate?.slots.some(
+      //     (s: any) => String(s.id) === overId
+      //   );
 
-      if (isTargetSlot) {
-        if (templateSlots[overId] !== null && templateSlots[overId] !== undefined) {
-          console.log("Слот уже занят!");
+      if (isSlot && dragged) {
+        if (templateSlots[overId]) {
+          console.log('Слот уже занят!');
           return;
         }
 
-        if (dragged) {
-          setTemplateSlots(prev => ({ ...prev, [overId]: dragged }));
-          removeImage(dragged.id);
-        }
-      }
+        setTemplateSlots(prev => ({
+          ...prev,
+          [overId]: dragged
+        }));
 
-      if (imageTemplateStore.activeTemplate?.slots.some((s: any) => String(s.id) === overId)) {
-        if (dragged) {
-          setTemplateSlots(prev => ({ ...prev, [overId]: dragged }));
-          removeImage(dragged.id);
-        }
+        moveImageToTemplate(dragged.id);
+
+        return;
       }
 
-      else if (overId === 'gallery') {
-        const imgInSlot = Object.values(templateSlots).find(i => i?.id === rawActiveId);
+      // -------------------------
+      // return image from slot to gallery
+      // -------------------------
+      if (overId === 'gallery') {
+        const imgInSlot = Object.values(templateSlots).find(
+          i => String(i?.id) === rawActiveId
+        );
+
         if (imgInSlot) {
           setTemplateSlots(prev => {
             const copy = { ...prev };
-            Object.keys(copy).forEach(k => { if (copy[k]?.id === rawActiveId) copy[k] = null; });
+
+            Object.keys(copy).forEach(k => {
+              if (copy[k]?.id === imgInSlot.id) {
+                copy[k] = null;
+              }
+            });
+
             return copy;
           });
-          setImages((prev: ArtImage[]) => [...prev, imgInSlot]);
+
+          moveImageBackToGallery(imgInSlot);
         }
       }
     }
@@ -101,91 +214,117 @@ export const ArtGallery: React.FC = () => {
 
 
 
-const removeImageFromSlot = (slotId: string) => {
-  const image = templateSlots[slotId];
-
-  if (!image) return;
-
-  setImages(prev => [...prev, image]);
-
-  setTemplateSlots(prev => ({
-    ...prev,
-    [slotId]: null
-  }));
-};
-
-const handleEditTemplate = (template: any) => {
-  setEditingTemplateId(template.id);
+  // -----------------------------
+  // EDIT TEMPLATE
+  // -----------------------------
+  const handleEditTemplate = (template: any) => {
+    setEditingTemplateId(template.id);
 
-  const layout = imageTemplateStore.templates.find(
-    (t: any) => t.name === template.templateName
-  );
+    const layout = imageTemplateStore.templates.find(
+      (t: any) => t.name === template.templateName
+    );
 
-  if (layout) {
-    imageTemplateStore.setActiveTemplate(layout);
-  }
+    if (layout) {
+      imageTemplateStore.setActiveTemplate(layout);
+    }
 
-  setTemplateSlots({ ...template.slots });
-};
+    setTemplateSlots({ ...template.slots });
+  };
 
+  // -----------------------------
+  // SAVE TEMPLATE
+  // -----------------------------
   const handleSave = () => {
     if (editingTemplateId) {
       imageTemplateStore.updateTemplate({
         id: editingTemplateId,
         slots: { ...templateSlots },
-        templateName: imageTemplateStore.activeTemplate?.name || 'Updated',
+        templateName:
+          imageTemplateStore.activeTemplate?.name || 'Updated',
         isSavedToDb: false
       });
+
       setEditingTemplateId(null);
     } else {
       imageTemplateStore.addTemplate({
         id: String(Date.now()),
         slots: { ...templateSlots },
-        templateName: imageTemplateStore.activeTemplate?.name || 'Unnamed',
+        templateName:
+          imageTemplateStore.activeTemplate?.name || 'Unnamed',
         isSavedToDb: false
       });
     }
+
     setTemplateSlots({});
   };
 
+  // -----------------------------
+  // SAVE TO DB
+  // -----------------------------
   const saveToDb = async (templateToSave: any) => {
     try {
-      console.log("Сохраняем конкретный шаблон:", templateToSave);
-
-      // await api.post('/templates', templateToSave);
-
-      imageTemplateStore.updateTemplateStatus(templateToSave.id, { isSavedToDb: true });
+      console.log('Сохраняем шаблон:', templateToSave);
 
+      imageTemplateStore.updateTemplateStatus(
+        templateToSave.id,
+        { isSavedToDb: true }
+      );
     } catch (e) {
-      console.error("Помилка при збереженні", e);
+      console.error('Ошибка сохранения', e);
     }
   };
+console.log("Состояние стора:", imagesStore); 
+console.log("Массив картинок прямо сейчас:", images);
+
+if (images && images.length > 0) {
+  console.log("URL первой картинки:", images[0].url);
+} else {
+  console.log("Массив еще пуст, ждем ответа от сервера...");
+}
+  // -----------------------------
+  // RENDER
+  // -----------------------------
   return (
     <DndContext
-      onDragStart={(event) => setActiveId(String(event.active.id))}
+      onDragStart={event =>
+        setActiveId(String(event.active.id))
+      }
       sensors={sensors}
       collisionDetection={closestCenter}
-      onDragEnd={handleDragEnd
-
-      }>
+      onDragEnd={handleDragEnd}
+    >
       <div className="art-gallery-container">
-        <GalleryList images={images} onUpload={addImage} onDelete={removeImage} onEdit={console.log} />
+
+        <GalleryList
+          images={images}
+          onUpload={addImage}
+          onDelete={removeImage}
+          onEdit={console.log}
+        />
+
         <section className="gallery-section">
-          <TemplatesHeader onOpenTemplates={() => modalStore.setModal('templates', undefined, true)} />
+          <TemplatesHeader
+            onOpenTemplates={() =>
+              modalStore.setModal('templates', undefined, true)
+            }
+          />
+
           <TemplateGrid
             slots={templateSlots}
             setSlots={setTemplateSlots}
             onClearAll={clearAllSlots}
             onSave={handleSave}
-             onRemoveSlot={removeImageFromSlot}
+            onRemoveSlot={removeImageFromSlot}
           />
         </section>
+
         <SavedTemplatesCarousel
           savedTemplates={imageTemplateStore.savedTemplates}
-          reorderTemplates={(oldIdx: number, newIdx: number) => imageTemplateStore.reorderTemplates(oldIdx, newIdx)}
+          reorderTemplates={(oldIdx: number, newIdx: number) =>
+            imageTemplateStore.reorderTemplates(oldIdx, newIdx)
+          }
           onSaveToDb={saveToDb}
-          onEdit ={handleEditTemplate}
-
+          onEdit={handleEditTemplate}
         />
       </div>
     </DndContext>
diff --git a/src/features/AdminPage/ArtGallery/components/ImageGallery/GalleryList.tsx b/src/features/AdminPage/ArtGallery/components/ImageGallery/GalleryList.tsx
index 9c1897b..f82690a 100644
--- a/src/features/AdminPage/ArtGallery/components/ImageGallery/GalleryList.tsx
+++ b/src/features/AdminPage/ArtGallery/components/ImageGallery/GalleryList.tsx
@@ -1,17 +1,21 @@
 import React, { useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import useMobx from '@stores/root-store';
 import { SortableContext, rectSortingStrategy } from '@dnd-kit/sortable';
-import { GalleryListProps } from '../../types/gallery.types';
+import { GalleryListProps } from '@models/media/image.model';
 import { SortableImageCard } from './SortableImageCard';
 import { AddButtonCard } from './AddButtonCard';
 import './GalleryList.styles.scss';
 
-export const GalleryList: React.FC<GalleryListProps> = ({ 
-  images, 
+export const GalleryList: React.FC<GalleryListProps> = observer(({ 
   onUpload, 
   onDelete, 
   onEdit 
 }) => {
   const [confirmingId, setConfirmingId] = useState<string | null>(null);
+  const { imagesStore } = useMobx(); 
+  const images = imagesStore.getImageArray;
+console.log("GalleryList_images",images);
 
   return (
     <div className="gallery-list">
@@ -21,14 +25,14 @@ export const GalleryList: React.FC<GalleryListProps> = ({
           <SortableImageCard 
             key={img.id} 
             image={img} 
-            onDelete={onDelete} 
+            onDelete={(id) => onDelete(Number(id))}
             onEdit={onEdit} 
-            isConfirming={confirmingId === img.id}
-            onConfirmRequest={() => setConfirmingId(img.id)}
+            isConfirming={confirmingId === String(img.id)}
+           onConfirmRequest={() => setConfirmingId(String(img.id))}
             onCancelRequest={() => setConfirmingId(null)}
           />
         ))}
       </SortableContext>
     </div>
   );
-};
\ No newline at end of file
+});
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/components/ImageGallery/ImageCard.tsx b/src/features/AdminPage/ArtGallery/components/ImageGallery/ImageCard.tsx
index a2e2824..8f29066 100644
--- a/src/features/AdminPage/ArtGallery/components/ImageGallery/ImageCard.tsx
+++ b/src/features/AdminPage/ArtGallery/components/ImageGallery/ImageCard.tsx
@@ -1,12 +1,14 @@
 import React from 'react';
 import { useModalContext } from '@stores/root-store';
-import { ImageCardProps } from '../../types/gallery.types';
+import { ImageCardProps } from '@models/media/image.model';
+import { useArtGallery } from '../../hooks/useArtGallery';
 import './ImageCard.styles.scss';
 
 export const ImageCard: React.FC<ImageCardProps> = ({
   image, attributes, listeners
 }) => {
   const { modalStore: { setModal } } = useModalContext();
+  const { removeImage } = useArtGallery();
 
   return (
     <div className="image-card"
@@ -24,7 +26,11 @@ export const ImageCard: React.FC<ImageCardProps> = ({
 
         <button onClick={(e) => {
           e.stopPropagation();
-          setModal('deleteImage', undefined, true, image);
+          const imageWithAction = {
+            ...image,
+            onConfirm: () => removeImage(image.id)
+          };
+          setModal('deleteImage', undefined, true, imageWithAction);
         }}>🗑️</button>
       </div>
     </div>
diff --git a/src/features/AdminPage/ArtGallery/components/ImageGallery/SortableImageCard.tsx b/src/features/AdminPage/ArtGallery/components/ImageGallery/SortableImageCard.tsx
index 6cf6287..75e8007 100644
--- a/src/features/AdminPage/ArtGallery/components/ImageGallery/SortableImageCard.tsx
+++ b/src/features/AdminPage/ArtGallery/components/ImageGallery/SortableImageCard.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { ImageCard } from './ImageCard';
-import { SortableImageCardProps } from '../../types/gallery.types';
+import { SortableImageCardProps } from '@models/media/image.model';
 
 
 export const SortableImageCard: React.FC<SortableImageCardProps> = ({
diff --git a/src/features/AdminPage/ArtGallery/components/TemplateGrid/DroppableSlot.tsx b/src/features/AdminPage/ArtGallery/components/TemplateGrid/DroppableSlot.tsx
index 1a0455a..764eb39 100644
--- a/src/features/AdminPage/ArtGallery/components/TemplateGrid/DroppableSlot.tsx
+++ b/src/features/AdminPage/ArtGallery/components/TemplateGrid/DroppableSlot.tsx
@@ -3,7 +3,7 @@ import './TemplateGrid.styles.scss';
 
 
 export const DroppableSlot = ({ slot, image, onRemove, isEditing }: any) => {
-  const { setNodeRef } = useDroppable({ id: slot.id });
+  const { setNodeRef } = useDroppable({ id: String(slot.id) });
 
   return (
     <div ref={setNodeRef} className="slot-content">
diff --git a/src/features/AdminPage/ArtGallery/components/TemplateGrid/TemplateGrid.tsx b/src/features/AdminPage/ArtGallery/components/TemplateGrid/TemplateGrid.tsx
index dca780b..d08e9c9 100644
--- a/src/features/AdminPage/ArtGallery/components/TemplateGrid/TemplateGrid.tsx
+++ b/src/features/AdminPage/ArtGallery/components/TemplateGrid/TemplateGrid.tsx
@@ -1,8 +1,8 @@
-import  { useState , useEffect} from 'react';
+import { useState, useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
 import { useModalContext } from '@stores/root-store';
 import { TemplateRenderer } from '@components/ImageTemplates-grid/TemplateRenderer';
-import {DroppableSlot} from './DroppableSlot';
+import { DroppableSlot } from './DroppableSlot';
 import './TemplateGrid.styles.scss';
 
 export const TemplateGrid = observer(({
@@ -16,23 +16,26 @@ export const TemplateGrid = observer(({
   const [showMenu, setShowMenu] = useState(false);
   const [isEditing, setIsEditing] = useState(false);
 
-  if (!imageTemplateStore.activeTemplate) {
-    return <div>Загрузка...</div>;
-  }
+  const isTemplateFilled = slots && Object.values(slots).some((image) => image !== null);
 
-  const isTemplateFilled = Object.values(slots).some(
-    (image) => image !== null
-  );
+  useEffect(() => {
+    imageTemplateStore.fetchTemplates();
+  }, [imageTemplateStore]);
 
   useEffect(() => {
-  if (!isTemplateFilled) {
-    setIsEditing(false);
+    if (!isTemplateFilled) {
+      setIsEditing(false);
+    }
+  }, [isTemplateFilled]);
+
+  if (!imageTemplateStore.activeTemplate) {
+    return <div>Загрузка шаблонов...</div>;
   }
-}, [isTemplateFilled]);
 
+  console.log("imageTemplateStore",imageTemplateStore);
   return (
     <div className="template-grid-wrapper">
-      
+
       <TemplateRenderer
         template={imageTemplateStore.activeTemplate}
         renderSlot={(slot: any) => (
diff --git a/src/features/AdminPage/ArtGallery/hooks/useArtGallery.ts b/src/features/AdminPage/ArtGallery/hooks/useArtGallery.ts
index 7c3ab54..294cd69 100644
--- a/src/features/AdminPage/ArtGallery/hooks/useArtGallery.ts
+++ b/src/features/AdminPage/ArtGallery/hooks/useArtGallery.ts
@@ -1,30 +1,40 @@
-import { useState } from 'react';
-import { ArtImage } from '../types/gallery.types';
+import useMobx from '@stores/root-store';
 
-export const useArtGallery = () => {
-  const [images, setImages] = useState<ArtImage[]>([]);
+const toBase64 = (file: File): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = (error) => reject(error);
+  });
+};
 
-  const addImage = (file: File) => {
-    const url = URL.createObjectURL(file);
 
-    const newImage: ArtImage = {
-      id: crypto.randomUUID(),
-      url,
-      isPublished: false,
-      offset: 4,
-    };
+export const useArtGallery = () => {
+  const { imagesStore } = useMobx();
 
-    setImages(prev => [...prev, newImage]);
+  const addImage = async (file: File) => {
+    const localUrl = URL.createObjectURL(file);
+    const base64 = await toBase64(file);
+    await imagesStore.createImage({
+      baseFormat: base64.split(',')[1],
+      mimeType: file.type,
+      extension: file.name.split('.').pop() || 'jpg',
+      title: file.name
+    }, localUrl);
   };
 
-  const removeImage = (id: string) => {
-    setImages(prev => prev.filter(img => img.id !== id));
+  const removeImage = async (id: number) => {
+    await imagesStore.deleteImage(id);
   };
 
   return {
-    images,
-    setImages,
+    images: imagesStore.getImageArray,
     addImage,
     removeImage,
+    addImageBackToGallery: imagesStore.addImageBackToGallery,
+    moveImageToTemplate: imagesStore.moveImageToTemplate,
+    moveImageBackToGallery: imagesStore.moveImageBackToGallery,
+    reorderImages: imagesStore.reorderImages
   };
 };
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/hooks/useArtGalleryDnD.ts b/src/features/AdminPage/ArtGallery/hooks/useArtGalleryDnD.ts
index 460ba7f..27cd5f9 100644
--- a/src/features/AdminPage/ArtGallery/hooks/useArtGalleryDnD.ts
+++ b/src/features/AdminPage/ArtGallery/hooks/useArtGalleryDnD.ts
@@ -6,8 +6,7 @@ export const useArtGalleryDnD = ({
   setImages,
   templateSlots,
   setTemplateSlots,
-  imageTemplateStore,
-  removeImage
+  imageTemplateStore
 }: any) => {
   const handleDragEnd = (event: DragEndEvent) => {
     const { active, over } = event;
@@ -85,7 +84,7 @@ export const useArtGalleryDnD = ({
           [overId]: dragged
         }));
 
-        removeImage(dragged.id);
+        setImages((prev: any) => prev.filter((img: any) => String(img.id) !== String(dragged.id)));
       }
 
       if (overId === 'gallery') {
diff --git a/src/features/AdminPage/ArtGallery/hooks/useTemplateSlots.ts b/src/features/AdminPage/ArtGallery/hooks/useTemplateSlots.ts
index 772e52a..a1d80df 100644
--- a/src/features/AdminPage/ArtGallery/hooks/useTemplateSlots.ts
+++ b/src/features/AdminPage/ArtGallery/hooks/useTemplateSlots.ts
@@ -1,4 +1,4 @@
-import { ArtImage } from '../types/gallery.types';
+import { ArtImage } from '@models/media/image.model';
 
 export const useTemplateSlots = (
   templateSlots: Record<string, ArtImage | null>,
diff --git a/src/features/AdminPage/ArtGallery/types/gallery.types.ts b/src/features/AdminPage/ArtGallery/types/gallery.types.ts
index 44cff42..003f0ec 100644
--- a/src/features/AdminPage/ArtGallery/types/gallery.types.ts
+++ b/src/features/AdminPage/ArtGallery/types/gallery.types.ts
@@ -1,33 +1,33 @@
-export interface ArtImage {
-  id: string;
-  url: string;
-  title?: string;
-  description?: string;
-  isPublished: boolean;
-  offset: number;
-}
+// export interface ArtImage {
+//   id: string;
+//   url: string;
+//   title?: string;
+//   description?: string;
+//   isPublished: boolean;
+//   offset: number;
+// }
 
-export interface GalleryListProps {
-  images: ArtImage[];
-  onUpload: (file: File) => void;
-  onDelete: (id: string) => void;
-  onEdit: (image: ArtImage) => void;
-}
+// export interface GalleryListProps {
+//   images: ArtImage[];
+//   onUpload: (file: File) => void;
+//   onDelete: (id: string) => void;
+//   onEdit: (image: ArtImage) => void;
+// }
 
-export interface ImageCardProps {
-  image: ArtImage;
-  attributes: any; 
-  listeners: any;
-}
+// export interface ImageCardProps {
+//   image: ArtImage;
+//   attributes: any; 
+//   listeners: any;
+// }
 
-export interface SortableImageCardProps {
-  image: ArtImage;
-  onDelete: (id: string) => void;
-  onEdit: (image: ArtImage) => void;
-  isConfirming: boolean;
-  onConfirmRequest: () => void;
-  onCancelRequest: () => void;
-}
+// export interface SortableImageCardProps {
+//   image: ArtImage;
+//   onDelete: (id: string) => void;
+//   onEdit: (image: ArtImage) => void;
+//   isConfirming: boolean;
+//   onConfirmRequest: () => void;
+//   onCancelRequest: () => void;
+// }
 
 export interface DeleteConfirmationOverlayProps {
   isVisible: boolean;
diff --git a/src/models/media/art-slide-template.model.ts b/src/models/media/art-slide-template.model.ts
new file mode 100644
index 0000000..f448772
--- /dev/null
+++ b/src/models/media/art-slide-template.model.ts
@@ -0,0 +1,10 @@
+export interface SlotConfig {
+    id: string;
+}
+
+export interface ArtSlideTemplate {
+    id: number;
+    name: string;
+    gap: number;
+    slots: SlotConfig[];
+}
\ No newline at end of file
diff --git a/src/models/media/art-slide.model.ts b/src/models/media/art-slide.model.ts
new file mode 100644
index 0000000..31e6a65
--- /dev/null
+++ b/src/models/media/art-slide.model.ts
@@ -0,0 +1,33 @@
+
+export interface ArtSlide {
+    id: number;
+    index: number;
+    templateId: number;
+    artSlideItems: ArtSlideItem[];
+}
+
+
+export interface ArtSlideItem {
+    id: number;
+    artId: number;
+    index: number;
+}
+
+export interface CreateArtSlide {
+    streetcodeId: number;
+    index: number;
+    templateId: number;
+    artSlideItems: CreateArtSlideItem[];
+}
+
+export interface CreateArtSlideItem {
+    artId: number;
+    index: number;
+}
+
+export interface UpdateArtSlide {
+    id: number;
+    index: number;
+    templateId: number;
+    artSlideItems: ArtSlideItem[];
+}
\ No newline at end of file
diff --git a/src/models/media/image.model.ts b/src/models/media/image.model.ts
index fe203b5..d3bebf1 100644
--- a/src/models/media/image.model.ts
+++ b/src/models/media/image.model.ts
@@ -2,9 +2,9 @@ import IModelState from '@models/interfaces/IModelState';
 
 export default interface Image {
     id: number;
-    base64: string;
-    blobName: string;
-    mimeType: string;
+    base64?: string;
+    blobName?: string;
+    mimeType?: string;
     imageDetails?: ImageDetails;
 }
 
@@ -15,7 +15,7 @@ export enum ImageAssigment {
 }
 
 export interface ImageCreate {
-    title?: string ;
+    title?: string;
     baseFormat: string;
     mimeType: string;
     extension: string;
@@ -32,3 +32,42 @@ export interface ImageCreateUpdate extends IModelState {
     streetcodeId?: number | null;
     imageDetails?: ImageDetails;
 }
+
+
+export interface ArtImage extends Image {
+    id: number; 
+    url: string; 
+    isPublished: boolean;
+}
+
+export interface GalleryListProps {
+    images: ArtImage[];
+    onUpload: (file: File) => void;
+    onDelete: (id: number) => void;
+    onEdit: (image: ArtImage) => void;
+}
+
+export interface ImageCardProps {
+    image: ArtImage;
+    attributes: any;
+    listeners: any;
+
+    onDelete: (id: string) => void;
+    onEdit: (image: ArtImage) => void;
+    isConfirming: boolean;
+    onConfirmRequest: () => void;
+    onCancelRequest: () => void;
+}
+
+export interface SortableImageCardProps {
+    image: ArtImage;
+    onDelete: (id: number) => void;
+    onEdit: (image: ArtImage) => void;
+    isConfirming: boolean;
+    onConfirmRequest: () => void;
+    onCancelRequest: () => void;
+}
+
+
+
+

From 5fedbb598b77f88996a3bbaa7e8311506016a924 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=86=D0=BD=D0=BD=D0=B0=20=D0=A8=D0=BF=D0=BE=D0=BD=D1=8C?=
 =?UTF-8?q?=D0=BA=D0=B0?= <inneta3@gmail.com>
Date: Sun, 14 Jun 2026 16:38:09 +0300
Subject: [PATCH 4/6] update logic +interaction with db

---
 src/app/api/agent.api.ts                      |  21 +-
 src/app/api/media/art-slide.api.ts            |   3 +
 .../EditImageModal.component.tsx              |  76 ++++---
 .../common/constants/api-routes.constants.ts  |  11 +-
 src/app/common/constants/template.map.ts      |   7 +-
 .../common/constants/templates.constants.ts   |   2 +
 src/app/stores/art-slide-store.ts             |  80 +++++++
 src/app/stores/art-store.ts                   |  16 +-
 src/app/stores/image-store.ts                 |  95 ++++----
 src/app/stores/image-template-store.ts        |  38 +++-
 src/app/stores/modal-store.ts                 |   1 +
 src/app/stores/root-store.ts                  |   3 +
 .../AdminPage/ArtGallery/ArtGallery.tsx       | 213 +++++++++++++-----
 .../Carousel/SavedTemplatesCarousel.tsx       |  13 +-
 .../Carousel/SortableTemplateCard.styles.scss |   8 +
 .../Carousel/SortableTemplateCard.tsx         |  22 +-
 .../Carousel/TemplateCard.styles.scss         |  78 +++++--
 .../components/Carousel/TemplateCard.tsx      |  63 ++++--
 .../components/ImageGallery/GalleryList.tsx   |  28 +--
 .../ImageGallery/ImageCard.styles.scss        |  36 ++-
 .../components/ImageGallery/ImageCard.tsx     |  21 +-
 .../components/TemplateGrid/DroppableSlot.tsx |   2 +-
 .../TemplateGrid/TemplateGrid.styles.scss     |   1 +
 .../components/TemplateGrid/TemplateGrid.tsx  |   4 +-
 .../ArtGallery/hooks/useArtGallery.ts         |  13 +-
 .../ArtGallery/hooks/useTemplateEditor.ts     |   8 +-
 .../StreetcodeSliderItem.component.tsx        |   1 -
 src/models/media/art-slide-template.model.ts  |   9 +-
 src/models/media/image.model.ts               |  24 +-
 29 files changed, 661 insertions(+), 236 deletions(-)
 create mode 100644 src/app/stores/art-slide-store.ts
 create mode 100644 src/features/AdminPage/ArtGallery/components/Carousel/SortableTemplateCard.styles.scss

diff --git a/src/app/api/agent.api.ts b/src/app/api/agent.api.ts
index efd9b29..359bb09 100644
--- a/src/app/api/agent.api.ts
+++ b/src/app/api/agent.api.ts
@@ -72,12 +72,23 @@ const Agent = {
             .then(responseBody);
     },
 
-    post: async <T> (url: string, body: object, headers?: object) => {
-        axios.defaults.headers.common.Authorization = `Bearer ${UserLoginStore.getToken()}`;
-        return axios.post<T>(url, body, headers)
-            .then(responseBody);
-    },
+ post: async <T> (url: string, body: object, headers?: object) => {
+    // Для отладки: посмотрим, что именно мы отправляем
+    console.log("POST request to:", url);
+    console.log("Request body:", JSON.stringify(body, null, 2));
 
+    axios.defaults.headers.common.Authorization = `Bearer ${UserLoginStore.getToken()}`;
+    
+    return axios.post<T>(url, body, headers)
+        .then(responseBody)
+        .catch(error => {
+            // Удобный вывод ошибок валидации от ASP.NET
+            if (error.response && error.response.status === 400) {
+                console.error("Validation Errors:", error.response.data.errors);
+            }
+            throw error;
+        });
+},
     put: async <T> (url: string, body: object) => {
         axios.defaults.headers.common.Authorization = `Bearer ${UserLoginStore.getToken()}`;
         return axios.put<T>(url, body)
diff --git a/src/app/api/media/art-slide.api.ts b/src/app/api/media/art-slide.api.ts
index b5dd834..14ff78c 100644
--- a/src/app/api/media/art-slide.api.ts
+++ b/src/app/api/media/art-slide.api.ts
@@ -9,6 +9,9 @@ const ArtSlidesApi = {
     create: (artSlide: CreateArtSlide) => 
         Agent.post<ArtSlide>(`${API_ROUTES.ART_SLIDES.CREATE}`, artSlide),
 
+    createAll: (artSlides: CreateArtSlide[]) => 
+        Agent.post<ArtSlide[]>(`${API_ROUTES.ART_SLIDES.CREATE_ALL}`, artSlides),
+
     update: (artSlide: UpdateArtSlide) => 
         Agent.put<ArtSlide>(`${API_ROUTES.ART_SLIDES.UPDATE}`, artSlide),
 
diff --git a/src/app/common/components/modals/EditImageModal/EditImageModal.component.tsx b/src/app/common/components/modals/EditImageModal/EditImageModal.component.tsx
index dceacf4..010f5d2 100644
--- a/src/app/common/components/modals/EditImageModal/EditImageModal.component.tsx
+++ b/src/app/common/components/modals/EditImageModal/EditImageModal.component.tsx
@@ -10,63 +10,83 @@ import { useEffect, useState } from 'react';
 const EditImageModal = observer(() => {
     const [form] = Form.useForm();
 
-    const { 
-        artStore, 
-        imageTemplateStore,
-        modalStore: { setModal, modalsState: { editImage } }
-    } = useModalContext();
+    const { artStore, imageTemplateStore, modalStore: { setModal, modalsState: { editImage } } } = useModalContext();
+    const [loading, setLoading] = useState(false);
 
-    const [loading, setLoading] = useState(false); 
+    const data = editImage.image;
+
+    const existingArt = data ? imageTemplateStore.getArtByImageId(data.id) : null;
+    const isEditing = !!existingArt;
 
     useEffect(() => {
-        if (editImage.isOpen && editImage.image) {
+        if (editImage.isOpen && data) {
             form.setFieldsValue({
-                title: editImage.image.title,
-                description: editImage.image.description,
+                title: existingArt?.title || data.title,
+                description: existingArt?.description || data.description,
             });
         }
-    }, [editImage.isOpen, editImage.image, form]);
+    }, [editImage.isOpen, data, form, existingArt]);
 
-    const onSuccessfulSubmit = async (values: { title: string; description: string }) => {
-        if (!editImage.image) return;
+    const onSuccessfulSubmit = async (values: any) => {
+        if (!data) return;
+        setLoading(true);
 
         setLoading(true);
+
         try {
-            await artStore.updateArt(editImage.image.id, {
-                title: values.title,
-                description: values.description
-            });
+            if (isEditing) {
+                const updatedArt = await artStore.updateArt(existingArt.id, {
+                    ...values,
+                    imageId: data.id
+                });
+                imageTemplateStore.setArtForImage(data.id, updatedArt);
+            } else {
+                const createdArt = await artStore.createArt({
+                    ...values,
+                    imageId: data.id
+                });
+                imageTemplateStore.setArtForImage(data.id, createdArt);
+            }
 
-            setModal('editImage');
-        } catch (error) {
-            console.error("Ошибка сохранения:", error);
+            setModal('editImage', undefined, false);
+        } catch (e) {
+            console.error(e);
         } finally {
             setLoading(false);
         }
     };
+
     return (
         <Modal
             className="addModal"
             open={editImage.isOpen}
-            onCancel={() => setModal('editImage')}
-            footer={[null]}
+            onCancel={() => setModal('editImage', undefined, false)}
+            footer={null}
             closeIcon={<CancelBtn />}
         >
             <h2>Додаткові дані</h2>
-            {editImage.image && (
-                <img src={editImage.image.url} alt="art" style={{ width: '100%', marginBottom: '20px', borderRadius: '8px' }} />
+
+            {data && (
+                <img
+                    src={data.url}
+                    alt="art"
+                    style={{ width: '100%', marginBottom: '20px', borderRadius: '8px' }}
+                />
             )}
+
             <Form form={form} onFinish={onSuccessfulSubmit} layout="vertical">
-                <FormItem name="title" label="Назва" rules={[{ message: 'Введіть назву' }]}>
+                <FormItem name="title" label="Назва">
                     <Input showCount maxLength={150} />
                 </FormItem>
-                <FormItem name="description" label="Опис" rules={[{ message: 'Введіть опис' }]}>
+
+                <FormItem name="description" label="Опис">
                     <TextArea rows={4} maxLength={400} showCount />
                 </FormItem>
+
                 <div className="button-container">
-                    <Button 
-                        className="save-button" 
-                        loading={loading} 
+                    <Button
+                        className="save-button"
+                        loading={loading}
                         onClick={() => form.submit()}
                     >
                         Зберегти
diff --git a/src/app/common/constants/api-routes.constants.ts b/src/app/common/constants/api-routes.constants.ts
index 51ecdd3..f4640fc 100644
--- a/src/app/common/constants/api-routes.constants.ts
+++ b/src/app/common/constants/api-routes.constants.ts
@@ -137,11 +137,11 @@ export const API_ROUTES = {
         DELETE: 'image/delete',
     },
     ARTS: {
-        GET_ALL: 'arts/getAll',
-        GET: 'arts/getById',
-        CREATE: 'arts/create',
-        UPDATE: 'arts/update',
-        DELETE: 'arts/delete',
+        GET_ALL: 'art/getAll',
+        GET: 'art/getById',
+        CREATE: 'art/create',
+        UPDATE: 'art/update',
+        DELETE: 'art/delete',
     },
     STREETCODE_ARTS: {
         GET_ALL: 'streetcodeArt/getAll',
@@ -150,6 +150,7 @@ export const API_ROUTES = {
     ART_SLIDES: {
         GET_BY_STREETCODE_ID: '/art-slide',
         CREATE: '/art-slide',
+        CREATE_ALL: '/artSlide/createAll',
         UPDATE: '/art-slide',
         DELETE: '/art-slide',
     },
diff --git a/src/app/common/constants/template.map.ts b/src/app/common/constants/template.map.ts
index 8992722..85005fd 100644
--- a/src/app/common/constants/template.map.ts
+++ b/src/app/common/constants/template.map.ts
@@ -1,5 +1,8 @@
+import type  Image  from '@models/media/image.model';
+
 export interface SlotConfig {
   id: string;
+  image?: Image | null;
 }
 
 export interface TemplateConfig {
@@ -25,12 +28,12 @@ export const TEMPLATE_CLASS_MAP: Record<string, TemplateConfig> = {
   'OneAndTwoAndThreeToFour': { id: 7, className: 'template-four-sidebar-left', gap: 5, slots: [{id: 'mid1'}, {id: 's1'}, {id: 's2'}, {id: 's3'}] },
   'OneToFourAndFiveAndSix': { id: 6, className: 'template-four-sidebar-right', gap: 5, slots: [{id: 'mid1'}, {id: 's1'}, {id: 's2'}, {id: 's3'}] },
 
-  // 5 слотов
+  // 5 слотів
   'OneToFourAndFiveToSix': { id: 0, className: 'template-five-mixed', gap: 5, slots: [{id: 'mid1'}, {id: 's1'}, {id: 's2'}, {id: 's3'}, {id: 's4'}] },
   'OneAndTwoAndThreeToFourAndFive': { id: 11, className: 'template-five-grid', gap: 5, slots: [{id: 's1'}, {id: 's2'}, {id: 's3'}, {id: 's4'}, {id: 's5'}] },
   'OneAndTwoAndThreeAndFourAndFive': { id: 13, className: 'template-five-complex', gap: 5, slots: [{id: 's1'}, {id: 's2'}, {id: 's3'}, {id: 's4'}, {id: 's5'}] },
 
-  // 6 слотов
+  // 6 слотів
   'OneAndTwoAndThreeAndFourAndFiveAndSix': { id: 2, className: 'template-six-grid', gap: 5, slots: [{id: 's1'}, {id: 's2'}, {id: 's3'}, {id: 's4'}, {id: 's5'}, {id: 's6'}] },
   'OneToTwoAndThreeToFourAndFiveToSix': { id: 1, className: 'template-six-compact', gap: 5, slots: [{id: 's1'}, {id: 's2'}, {id: 's3'}, {id: 's4'}, {id: 's5'}, {id: 's6'}] },
   'OneAndTwoAndThreeToFourAndFiveToSix': { id: 10, className: 'template-six-mixed', gap: 5, slots: [{id: 's1'}, {id: 's2'}, {id: 's3'}, {id: 's4'}, {id: 's5'}, {id: 's6'}] },
diff --git a/src/app/common/constants/templates.constants.ts b/src/app/common/constants/templates.constants.ts
index b87e12f..126f027 100644
--- a/src/app/common/constants/templates.constants.ts
+++ b/src/app/common/constants/templates.constants.ts
@@ -1,6 +1,8 @@
+import type  Image  from '@models/media/image.model';
 
 export interface SlotConfig {
   id: string;
+    image?: Image | null;
 }
 
 export interface TemplateConfig {
diff --git a/src/app/stores/art-slide-store.ts b/src/app/stores/art-slide-store.ts
new file mode 100644
index 0000000..641282b
--- /dev/null
+++ b/src/app/stores/art-slide-store.ts
@@ -0,0 +1,80 @@
+import { makeAutoObservable, runInAction } from 'mobx';
+import ArtSlidesApi from '@api/media/art-slide.api';
+import { ArtSlide, CreateArtSlide, UpdateArtSlide } from '@models/media/art-slide.model';
+
+export default class ArtSlideStore {
+    public artSlides: ArtSlide[] = [];
+
+    constructor() {
+        makeAutoObservable(this);
+    }
+
+    public fetchArtSlidesByStreetcodeId = async (streetcodeId: number) => {
+        try {
+            const slides = await ArtSlidesApi.getAllByStreetcodeId(streetcodeId);
+            runInAction(() => {
+                this.artSlides = slides;
+            });
+        } catch (error) {
+            console.error("Error loading slides:", error);
+            throw error;
+        }
+    };
+
+    public createArtSlide = async (dto: CreateArtSlide) => {
+        try {
+            const newSlide = await ArtSlidesApi.create(dto);
+            runInAction(() => {
+                this.artSlides.push(newSlide);
+            });
+            return newSlide;
+        } catch (error) {
+            console.error("Slide creation error:", error);
+            throw error;
+        }
+    };
+
+    public createAllArtSlides = async (dtos: CreateArtSlide[]) => {
+        try {
+            const newSlides = await ArtSlidesApi.createAll(dtos);
+            runInAction(() => {
+                this.artSlides.push(...newSlides);
+            });
+            return newSlides;
+        }
+      catch (error: any) {
+    console.log('FULL ERROR:', error);
+    console.log('ERRORS:', error.errors);
+    console.log('ERRORS JSON:', JSON.stringify(error.errors, null, 2));
+
+    throw error;
+}
+        };
+
+    public updateArtSlide = async (dto: UpdateArtSlide) => {
+        try {
+            const updatedSlide = await ArtSlidesApi.update(dto);
+            runInAction(() => {
+                const index = this.artSlides.findIndex(s => s.id === updatedSlide.id);
+                if (index !== -1) {
+                    this.artSlides[index] = updatedSlide;
+                }
+            });
+        } catch (error) {
+            console.error("Error updating slide:", error);
+            throw error;
+        }
+    };
+
+    public deleteArtSlide = async (id: number) => {
+        try {
+            await ArtSlidesApi.delete(id);
+            runInAction(() => {
+                this.artSlides = this.artSlides.filter(s => s.id !== id);
+            });
+        } catch (error) {
+            console.error("Error delete slide::", error);
+            throw error;
+        }
+    };
+}
\ No newline at end of file
diff --git a/src/app/stores/art-store.ts b/src/app/stores/art-store.ts
index 1e7ef25..fc68da5 100644
--- a/src/app/stores/art-store.ts
+++ b/src/app/stores/art-store.ts
@@ -9,7 +9,7 @@ export default class ArtStore {
         makeAutoObservable(this);
     }
 
-    public createArt = async (artData: FormData | Art) => {
+    public createArt = async (artData: { imageId: number; title: string; description: string }) => {
         try {
             const newArt = await ArtsApi.create(artData as any);
 
@@ -33,9 +33,21 @@ export default class ArtStore {
                     this.arts[index] = { ...this.arts[index], ...updatedArt };
                 }
             });
+            return updatedArt;
         } catch (error) {
-            console.error("Ошибка обновления:", error);
+            console.error("Saving error:", error);
             throw error;
         }
     };
+
+    public deleteArt = async (id: number) => {
+        try {
+            await ArtsApi.delete(id);
+            runInAction(() => {
+                this.arts = this.arts.filter(a => a.id !== id);
+            });
+        } catch (error) {
+            console.error("Ошибка при удалении арта:", error);
+        }
+    };
 }
\ No newline at end of file
diff --git a/src/app/stores/image-store.ts b/src/app/stores/image-store.ts
index 4f86deb..7b78ca4 100644
--- a/src/app/stores/image-store.ts
+++ b/src/app/stores/image-store.ts
@@ -1,26 +1,33 @@
 import { makeAutoObservable, runInAction } from 'mobx';
 import imagesApi from '@api/media/images.api';
-import Image, { ArtImage, ImageCreate } from '@models/media/image.model';
+import Image, { ImageCreate } from '@models/media/image.model';
 import { arrayMove } from '@dnd-kit/sortable';
 
 export default class ImageStore {
-    public ImageMap: Map<number, ArtImage> = new Map();
+    public ImageMap = new Map<number, Image>();
 
     public constructor() {
         makeAutoObservable(this);
     }
 
-    get getImageArray(): ArtImage[] {
+
+    public getImage = (id: number) => this.ImageMap.get(id);
+
+    get getImageArray(): Image[] {
         return Array.from(this.ImageMap.values());
     }
 
+    private setItem = (image: Image) => {
+        this.ImageMap.set(image.id, image);
+    };
+
+    // --- Логика загрузки и API ---
     public fetchAll = async () => {
         try {
             const rawImages = await imagesApi.getAll();
-
             runInAction(() => {
                 rawImages.forEach(img => {
-                    this.ImageMap.set(Number(img.id), this.transformToArtImage(img));
+                    this.setItem(this.transformToImage(img));
                 });
             });
         } catch (error) {
@@ -28,45 +35,39 @@ export default class ImageStore {
         }
     };
 
-    public createImage = async (
-        data: ImageCreate,
-        localUrl?: string
-    ): Promise<ArtImage | undefined> => {
+    public fetchImage = async (id: number) => {
         try {
-            const rawImage = await imagesApi.create(data);
-
-            const artImage: ArtImage = {
-                ...this.transformToArtImage(rawImage),
-                url: localUrl ?? ''
-            };
-            console.log("artImage", artImage);
-            runInAction(() => {
-                this.ImageMap.set(Number(artImage.id), artImage);
-            });
+            const image = await imagesApi.getById(id);
+            this.setItem(this.transformToImage(image));
+        } catch (error: unknown) { }
+    };
 
-            return artImage;
+    public createImage = async (data: ImageCreate, localUrl?: string): Promise<Image | undefined> => {
+        try {
+            const rawImage = await imagesApi.create(data);
+            const image = { ...this.transformToImage(rawImage), url: localUrl ?? '' };
+            runInAction(() => this.setItem(image));
+            return image;
         } catch (error) {
             console.error('Store error (createImage):', error);
             return undefined;
         }
     };
 
-    public addImageBackToGallery = (image: ArtImage) => {
-        runInAction(() => {
-            this.ImageMap.set(Number(image.id), image);
-        });
+    public updateImage = async (image: Image) => {
+        try {
+            await imagesApi.update(image);
+            runInAction(() => {
+                const updatedImage = { ...this.ImageMap.get(image.id), ...image };
+                this.setItem(updatedImage as Image);
+            });
+        } catch (error: unknown) { }
     };
 
-
-
     public deleteImage = async (imageId: number): Promise<boolean> => {
         try {
             await imagesApi.delete(imageId);
-
-            runInAction(() => {
-                this.ImageMap.delete(imageId);
-            });
-
+            runInAction(() => this.ImageMap.delete(imageId));
             return true;
         } catch (error) {
             console.error('Store error:', error);
@@ -74,34 +75,36 @@ export default class ImageStore {
         }
     };
 
-    public moveImageToTemplate = (imageId: number) => {
+
+    public reorderImages = (oldIndex: number, newIndex: number) => {
         runInAction(() => {
-            this.ImageMap.delete(imageId);
+            const arr = Array.from(this.ImageMap.values());
+            const moved = arrayMove(arr, oldIndex, newIndex);
+            this.ImageMap.clear();
+            moved.forEach(img => this.setItem(img));
         });
     };
 
-    public moveImageBackToGallery = (image: ArtImage) => {
+    public moveImageToTemplate = (imageId: number) => {
+        runInAction(() => this.ImageMap.delete(imageId));
+    };
+
+    public moveImageBackToGallery = (image: Image) => {
         runInAction(() => {
             this.ImageMap.set(Number(image.id), image);
         });
     };
 
-    public reorderImages = (oldIndex: number, newIndex: number) => {
-        runInAction(() => {
-            const arr = Array.from(this.ImageMap.values());
-            const moved = arrayMove(arr, oldIndex, newIndex);
-            this.ImageMap.clear();
-            moved.forEach(img => this.ImageMap.set(Number(img.id), img));
-        });
+    public addImageBackToGallery = (image: Image) => {
+        runInAction(() => this.setItem(image));
     };
 
-    private transformToArtImage = (image: Image): ArtImage => {
-        const path = `/static-files/${image.id}.png`;
 
+    private transformToImage = (image: Image): Image => {
         return {
             ...image,
-            url: path,
-            isPublished: false
+            url: image.url ?? `/static-files/${image.id}.png`,
+            isPublished: image.isPublished ?? false
         };
     };
-}
\ No newline at end of file
+}
diff --git a/src/app/stores/image-template-store.ts b/src/app/stores/image-template-store.ts
index 39cbfaa..b0c7a6a 100644
--- a/src/app/stores/image-template-store.ts
+++ b/src/app/stores/image-template-store.ts
@@ -7,8 +7,9 @@ export default class ImageTemplateStore {
     public TemplateMap = new Map<number, ArtSlideTemplate>();
     public activeTemplate: ArtSlideTemplate | null = null;
     public savedTemplates: ArtSlideTemplate[] = [];
-    
-    private isLoaded = false; 
+
+    private isLoaded = false;
+    public artsMap = new Map<number, any>();
 
     constructor() {
         makeAutoObservable(this);
@@ -17,9 +18,18 @@ export default class ImageTemplateStore {
     get templates() {
         return Array.from(this.TemplateMap.values());
     }
+    public setArtForImage = (imageId: number, art: any) => {
+        runInAction(() => {
+            this.artsMap.set(imageId, art);
+        });
+    }
+
+    public getArtByImageId = (imageId: number) => {
+        return this.artsMap.get(imageId);
+    }
 
     public fetchTemplates = async () => {
-        if (this.isLoaded) return; 
+        if (this.isLoaded) return;
 
         try {
             const data = await ArtSlideTemplatesApi.getAll();
@@ -28,7 +38,7 @@ export default class ImageTemplateStore {
                     this.TemplateMap.set(template.id, template);
                 });
                 this.isLoaded = true;
-                
+
                 if (!this.activeTemplate && data.length > 0) {
                     this.activeTemplate = data[0];
                 }
@@ -42,6 +52,22 @@ export default class ImageTemplateStore {
         this.activeTemplate = template;
     };
 
+    public updateSlotWithArt = (imageId: number, art: any) => {
+        runInAction(() => {
+            const updateFunction = (template: ArtSlideTemplate) => {
+                template.slots.forEach((slot: any) => {
+                    if (slot.image && slot.image.id === imageId) {
+                        slot.artId = art.id;
+                        slot.art = art;
+                    }
+                });
+            };
+
+            this.templates.forEach(updateFunction);
+            this.savedTemplates.forEach(updateFunction);
+        });
+    };
+
     addTemplate(template: ArtSlideTemplate) {
         this.savedTemplates.push(template);
     }
@@ -63,4 +89,8 @@ export default class ImageTemplateStore {
             Object.assign(template, status);
         }
     }
+
+    removeTemplate(id: number) {
+        this.savedTemplates = this.savedTemplates.filter(t => t.id !== id);
+    }
 }
\ No newline at end of file
diff --git a/src/app/stores/modal-store.ts b/src/app/stores/modal-store.ts
index de3b079..2fb4484 100644
--- a/src/app/stores/modal-store.ts
+++ b/src/app/stores/modal-store.ts
@@ -5,6 +5,7 @@ type ModalState = {
     fromCardId?: number;
     confirmationProps?:ConfirmationProps;
     image?: any;
+    data?: any;
 };
 interface ConfirmationProps {
  onSubmit?:()=>void,
diff --git a/src/app/stores/root-store.ts b/src/app/stores/root-store.ts
index 9dfffe6..e2f325c 100644
--- a/src/app/stores/root-store.ts
+++ b/src/app/stores/root-store.ts
@@ -35,6 +35,7 @@ import UserLoginStore from './user-login-store';
 
 import ImageTemplateStore from './image-template-store';
 import ArtStore from './art-store';
+import ArtSlideStore from './art-slide-store';
 
 interface Store {
     factsStore: FactsStore,
@@ -74,6 +75,7 @@ export interface ModalDataStore {
     modalStore: ModalStore,
     imageTemplateStore: ImageTemplateStore,
     artStore: ArtStore,
+    artSlideStore: ArtSlideStore,
 }
 
 export const store: Store = {
@@ -114,6 +116,7 @@ export const modalDataStore:ModalDataStore = {
     modalStore: new ModalStore(),
     imageTemplateStore: new ImageTemplateStore(),
     artStore: new ArtStore(),
+    artSlideStore: new ArtSlideStore(),
 };
 
 export const toponymDataStore:ToponymStore = new ToponymStore();
diff --git a/src/features/AdminPage/ArtGallery/ArtGallery.tsx b/src/features/AdminPage/ArtGallery/ArtGallery.tsx
index 4eb3af7..61b24d3 100644
--- a/src/features/AdminPage/ArtGallery/ArtGallery.tsx
+++ b/src/features/AdminPage/ArtGallery/ArtGallery.tsx
@@ -1,5 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { TEMPLATE_CLASS_MAP } from '@constants/template.map';
+import { ArtSlideTemplate, SlotConfig } from '@models/media/art-slide-template.model';
+import { message } from 'antd';
 import { observer } from 'mobx-react-lite';
 import {
   DndContext,
@@ -12,7 +14,7 @@ import {
 
 import { arrayMove } from '@dnd-kit/sortable';
 
-import { ArtImage } from '@models/media/image.model';
+import Image from '@models/media/image.model';
 import { useArtGallery } from './hooks/useArtGallery';
 
 import { GalleryList } from './components/ImageGallery/GalleryList';
@@ -32,12 +34,14 @@ export const ArtGallery: React.FC = () => {
     reorderImages } = useArtGallery();
 
   const { imagesStore } = useMobx();
-  const { modalStore, imageTemplateStore } = useModalContext();
+  const { modalStore, imageTemplateStore, artSlideStore } = useModalContext();
+  const [loading, setLoading] = useState(false);
 
   const images = imagesStore.getImageArray;
+  console.log("Весь объект images:", images);
 
   const [templateSlots, setTemplateSlots] =
-    useState<Record<string, ArtImage | null>>({});
+    useState<Record<string, Image | null>>({});
 
   const [activeId, setActiveId] = useState<string | null>(null);
   const [editingTemplateId, setEditingTemplateId] = useState<string | null>(null);
@@ -58,7 +62,7 @@ export const ArtGallery: React.FC = () => {
   // -----------------------------
   const clearAllSlots = () => {
     const returnedImages = Object.values(templateSlots).filter(
-      (img): img is ArtImage => img !== null
+      (img): img is Image => img !== null
     );
     returnedImages.forEach(img => {
       addImageBackToGallery(img);
@@ -69,29 +73,26 @@ export const ArtGallery: React.FC = () => {
   // -----------------------------
   // REMOVE FROM SLOT
   // -----------------------------
-  const removeImageFromSlot = (imageId: number) => {
-    console.log('Current slots:', templateSlots);
-    console.log('Searching for ID:', imageId);
+  const removeImageFromSlot = (imageId: number | undefined) => {
+    if (!imageId) return;
 
+    imageTemplateStore.artsMap.delete(imageId);
 
-    const slotId = Object.keys(templateSlots).find(key => {
-      const slotItem = templateSlots[key];
-      return slotItem !== null && Number(slotItem.id) === Number(imageId);
-    });
+    const imageObj = Object.values(templateSlots).find(img => img?.id === imageId);
 
-    if (!slotId) {
-      console.warn('Слот с такой картинкой не найден');
-      return;
+    if (imageObj) {
+      moveImageBackToGallery(imageObj);
     }
 
-    const image = templateSlots[slotId];
-    if (image) {
-      console.log('Возвращаем картинку:', image);
-
-      moveImageBackToGallery(image);
-
-      setTemplateSlots(prev => ({ ...prev, [slotId]: null }));
-    }
+    setTemplateSlots(prev => {
+      const newSlots = { ...prev };
+      Object.keys(newSlots).forEach(key => {
+        if (newSlots[key]?.id === imageId) {
+          newSlots[key] = null;
+        }
+      });
+      return newSlots;
+    });
   };
 
 
@@ -107,13 +108,13 @@ export const ArtGallery: React.FC = () => {
     const activeId = String(active.id);
     const overId = String(over.id);
 
-  const templateName = imageTemplateStore.activeTemplate?.name;
+    const templateName = imageTemplateStore.activeTemplate?.name;
 
-  const config = templateName ? TEMPLATE_CLASS_MAP[templateName] : null;
+    const config = templateName ? TEMPLATE_CLASS_MAP[templateName] : null;
 
-  const slotsToCheck = imageTemplateStore.activeTemplate?.slots || config?.slots || [];
+    const slotsToCheck = imageTemplateStore.activeTemplate?.slots || config?.slots || [];
 
-  const isSlot = slotsToCheck.some((s: any) => String(s.id) === overId);
+    const isSlot = slotsToCheck.some((s: any) => String(s.id) === overId);
 
     // -------------------------
     // reorder templates
@@ -164,14 +165,9 @@ export const ArtGallery: React.FC = () => {
         i => String(i.id) === rawActiveId
       );
 
-      // const isSlot =
-      //   imageTemplateStore.activeTemplate?.slots.some(
-      //     (s: any) => String(s.id) === overId
-      //   );
-
       if (isSlot && dragged) {
         if (templateSlots[overId]) {
-          console.log('Слот уже занят!');
+          console.log('The slot is already occupied!');
           return;
         }
 
@@ -218,6 +214,12 @@ export const ArtGallery: React.FC = () => {
   // EDIT TEMPLATE
   // -----------------------------
   const handleEditTemplate = (template: any) => {
+    const isGridOccupied = Object.values(templateSlots).some((slot) => slot !== null);
+
+    if (isGridOccupied) {
+      message.warning("Спочатку очистіть або збережіть поточний шаблон, перш ніж редагувати інший!");
+      return;
+    }
     setEditingTemplateId(template.id);
 
     const layout = imageTemplateStore.templates.find(
@@ -228,59 +230,154 @@ export const ArtGallery: React.FC = () => {
       imageTemplateStore.setActiveTemplate(layout);
     }
 
-    setTemplateSlots({ ...template.slots });
+    const slotsMap = template.slots.reduce((acc: any, slot: any) => {
+      acc[slot.id] = slot.image || null;
+      return acc;
+    }, {});
+
+    console.log("Setting template slots for edit:", slotsMap);
+    setTemplateSlots(slotsMap);
   };
 
   // -----------------------------
   // SAVE TEMPLATE
   // -----------------------------
   const handleSave = () => {
+    console.log("editingTemplateId", editingTemplateId);
+    const slotsArray = Object.entries(templateSlots).map(
+      ([slotId, image]) => ({
+        id: slotId,
+        artId: image ? Number(image.id) : 0,
+        image
+      })
+    );
+
     if (editingTemplateId) {
       imageTemplateStore.updateTemplate({
-        id: editingTemplateId,
-        slots: { ...templateSlots },
-        templateName:
-          imageTemplateStore.activeTemplate?.name || 'Updated',
-        isSavedToDb: false
+        id: Number(editingTemplateId),
+        slots: slotsArray,
+        templateName: imageTemplateStore.activeTemplate?.name || 'Updated',
+        templateId: imageTemplateStore.activeTemplate?.id || 0,
+        isSavedToDb: false,
+        name: imageTemplateStore.activeTemplate?.name || '',
+        gap: imageTemplateStore.activeTemplate?.gap || 0
       });
 
       setEditingTemplateId(null);
     } else {
       imageTemplateStore.addTemplate({
-        id: String(Date.now()),
-        slots: { ...templateSlots },
+        id: Number(Date.now()),
+        slots: slotsArray,
         templateName:
           imageTemplateStore.activeTemplate?.name || 'Unnamed',
-        isSavedToDb: false
+        templateId: imageTemplateStore.activeTemplate?.id || 0,
+        isSavedToDb: false,
+        name: imageTemplateStore.activeTemplate?.name || '',
+        gap: imageTemplateStore.activeTemplate?.gap || 0
       });
     }
-
+    console.log(">>>Current templateSlots:", templateSlots);
     setTemplateSlots({});
   };
 
+  // -----------------------------
+  // REMOVE TEMPLATE
+  // -----------------------------
+const handleDeleteTemplate = (id: number) => {
+    // 1. Блокируем удаление, если шаблон сейчас в режиме редактирования
+    if (editingTemplateId === String(id)) {
+        message.error("Спочатку збережіть або скасуйте редагування цього шаблону");
+        return;
+    }
+
+    // 2. Находим шаблон перед удалением, чтобы "спасти" картинки
+    const template = imageTemplateStore.savedTemplates.find(t => t.id === id);
+
+    if (template) {
+        // 3. Возвращаем картинки из слотов обратно в общую галерею
+        template.slots.forEach(slot => {
+            if (slot.image) {
+                addImageBackToGallery(slot.image);
+            }
+        });
+
+        // 4. Сбрасываем ID в DND-kit, если этот элемент был "активным" (dragging)
+        if (activeId === `tmpl_${id}`) {
+            setActiveId(null);
+        }
+
+        // 5. Удаляем из стора
+        imageTemplateStore.removeTemplate(id);
+        
+        message.success("Шаблон видалено, картинки повернуто в галерею");
+    }
+};
+
   // -----------------------------
   // SAVE TO DB
   // -----------------------------
-  const saveToDb = async (templateToSave: any) => {
+  const saveToDb = async (templateToSave: ArtSlideTemplate[]) => {
     try {
-      console.log('Сохраняем шаблон:', templateToSave);
-
-      imageTemplateStore.updateTemplateStatus(
-        templateToSave.id,
-        { isSavedToDb: true }
+      console.log("DEBUG: save art:", templateToSave);
+      const isInvalid = templateToSave.some(template =>
+        template.slots.some(slot => {
+          if (slot.image) {
+            return !imageTemplateStore.getArtByImageId(slot.image.id);
+          }
+          return false;
+        })
       );
+
+      if (isInvalid) {
+        message.error("Будь ласка, заповніть дані для всіх картинок перед збереженням!");
+        return;
+      }
+      setLoading(true);
+      try {
+
+        const payload = templateToSave.map((t, index) => ({
+          index: index,
+          templateId: Number(t.templateId),
+          streetcodeId: 1,
+          artSlideItems: t.slots.map((slot: any) => {
+            const imageId = slot.image?.id;
+
+            const art = imageTemplateStore.getArtByImageId(imageId);
+            console.log("<<<<<<<<<ART", art);
+            return {
+              artId: art ? art.id : 0,
+              index: parseInt(String(slot.id).replace('mid', '')) || 0
+            };
+          })
+        }));
+
+        console.log("Sending payload:", payload);
+        await artSlideStore.createAllArtSlides(payload);
+        templateToSave.forEach((t) => {
+          imageTemplateStore.updateTemplateStatus(Number(t.id), { isSavedToDb: true });
+        });
+
+      } catch (error) {
+        console.error("Save the error :", error);
+      } finally {
+        setLoading(false);
+      }
+
+      templateToSave.forEach((t) => {
+        imageTemplateStore.updateTemplateStatus(
+          Number(t.id),
+          { isSavedToDb: true }
+        );
+      });
     } catch (e) {
-      console.error('Ошибка сохранения', e);
+      console.error('Save error details', e);
     }
   };
-console.log("Состояние стора:", imagesStore); 
-console.log("Массив картинок прямо сейчас:", images);
-
-if (images && images.length > 0) {
-  console.log("URL первой картинки:", images[0].url);
-} else {
-  console.log("Массив еще пуст, ждем ответа от сервера...");
-}
+  if (images && images.length > 0) {
+    console.log("URL by first image:", images[0].url);
+  } else {
+    console.log("The array is still empty, we are waiting for a response from the server..");
+  }
   // -----------------------------
   // RENDER
   // -----------------------------
@@ -323,8 +420,10 @@ if (images && images.length > 0) {
           reorderTemplates={(oldIdx: number, newIdx: number) =>
             imageTemplateStore.reorderTemplates(oldIdx, newIdx)
           }
+          editingTemplateId={editingTemplateId}
           onSaveToDb={saveToDb}
           onEdit={handleEditTemplate}
+          onDelete={handleDeleteTemplate}
         />
       </div>
     </DndContext>
diff --git a/src/features/AdminPage/ArtGallery/components/Carousel/SavedTemplatesCarousel.tsx b/src/features/AdminPage/ArtGallery/components/Carousel/SavedTemplatesCarousel.tsx
index 9141072..bbfcb37 100644
--- a/src/features/AdminPage/ArtGallery/components/Carousel/SavedTemplatesCarousel.tsx
+++ b/src/features/AdminPage/ArtGallery/components/Carousel/SavedTemplatesCarousel.tsx
@@ -7,7 +7,7 @@ import BlockHeading from '@streetcode/HeadingBlock/BlockHeading.component';
 import './SavedTemplatesCarousel.styles.scss';
 
 export const SavedTemplatesCarousel = observer(
-    ({ savedTemplates, onEdit, onSaveToDb }: any) => {
+    ({ savedTemplates, onEdit,onDelete, editingTemplateId, onSaveToDb }: any) => {
         const rowRef = useRef<HTMLDivElement>(null);
         const [activeIndex, setActiveIndex] = useState(0);
         const [isScrollable, setIsScrollable] = useState(false);
@@ -108,7 +108,7 @@ export const SavedTemplatesCarousel = observer(
         }, [savedTemplates, activeIndex]);
 
 
-        console.log("savedTemplates", savedTemplates);
+        console.log("++++savedTemplates", savedTemplates);
         return (
             <div className="templates-list-container">
                 {savedTemplates && savedTemplates.length > 0 && (
@@ -136,8 +136,10 @@ export const SavedTemplatesCarousel = observer(
                                     <div className="template-slide" key={template.id}>
                                         <SortableTemplateCard
                                             template={template}
+                                            editingTemplateId={editingTemplateId}
                                             onSaveToDb={onSaveToDb}
                                             onEdit={onEdit}
+                                            onDelete={onDelete}
                                         />
                                     </div>
                                 ))}
@@ -163,7 +165,9 @@ export const SavedTemplatesCarousel = observer(
                 {savedTemplates?.length > 0 && (
                     <button
                         className="streetcode-custom-button"
-                        onClick={() => onSaveToDb(savedTemplates)}
+                        onClick={() => {
+                            onSaveToDb(savedTemplates);
+                        }}
                     >
                         Зберегти
                     </button>
@@ -171,4 +175,5 @@ export const SavedTemplatesCarousel = observer(
             </div>
         );
     }
-);
\ No newline at end of file
+);
+
diff --git a/src/features/AdminPage/ArtGallery/components/Carousel/SortableTemplateCard.styles.scss b/src/features/AdminPage/ArtGallery/components/Carousel/SortableTemplateCard.styles.scss
new file mode 100644
index 0000000..a64dbfd
--- /dev/null
+++ b/src/features/AdminPage/ArtGallery/components/Carousel/SortableTemplateCard.styles.scss
@@ -0,0 +1,8 @@
+.template-card.deleting {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(255, 255, 255, 0.5);
+  height: 100%; 
+  width: 100%;
+}
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/components/Carousel/SortableTemplateCard.tsx b/src/features/AdminPage/ArtGallery/components/Carousel/SortableTemplateCard.tsx
index f996ca9..25c50c5 100644
--- a/src/features/AdminPage/ArtGallery/components/Carousel/SortableTemplateCard.tsx
+++ b/src/features/AdminPage/ArtGallery/components/Carousel/SortableTemplateCard.tsx
@@ -1,12 +1,16 @@
-
+import { useState } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
+import { Spin } from 'antd';
+import './SortableTemplateCard.styles.scss';
 
 import { TemplateCard } from './TemplateCard';
 
 export const SortableTemplateCard = ({
   template,
-  onEdit
+  editingTemplateId,
+  onEdit,
+  onDelete
 }: any) => {
   const {
     attributes,
@@ -18,6 +22,12 @@ export const SortableTemplateCard = ({
   } = useSortable({
     id: `tmpl_${template.id}`
   });
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const handleDelete = () => {
+    setIsDeleting(true); 
+    onDelete(template.id);
+  };
 
   const style = {
     transform: CSS.Transform.toString(transform),
@@ -30,12 +40,20 @@ export const SortableTemplateCard = ({
       ref={setNodeRef}
       style={style}
     >
+      {isDeleting ? (
+        <div className="template-card deleting">
+          {/* <Spin size="small" /> */}
+        </div>
+      ) : (
       <TemplateCard
         template={template}
+        isActive={template.id === editingTemplateId}
         attributes={attributes}
         listeners={listeners}
         onEdit={onEdit}
+        onDelete={handleDelete}
       />
+      )}
     </div>
   );
 };
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/components/Carousel/TemplateCard.styles.scss b/src/features/AdminPage/ArtGallery/components/Carousel/TemplateCard.styles.scss
index 02e64ff..5058394 100644
--- a/src/features/AdminPage/ArtGallery/components/Carousel/TemplateCard.styles.scss
+++ b/src/features/AdminPage/ArtGallery/components/Carousel/TemplateCard.styles.scss
@@ -1,25 +1,23 @@
+@use "@assets/sass/variables/_variables.colors.scss" as c;
+
 .template-card {
-    position: relative; 
+    position: relative;
     display: inline-block;
     border-radius: 30px;
-    
-    .edit-btn {
-        position: absolute;
-        top: 8px;  
-        right: 8px;  
-        z-index: 10; 
-        
-        border-radius: 50%;
-        width: 30px;
-        height: 30px;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition: background 0.2s;
+    transition: all 0.3s ease;
+    border: 2px solid transparent;
+    position: relative;
 
-        &:hover {
-            background: #fff;
+
+    &.template-active {
+        opacity: 0.4;
+        border: 2px solid #1890ff;
+        pointer-events: none;
+        filter: grayscale(0.5);
+        cursor: not-allowed;
+
+        .edit-btn {
+            display: none;
         }
     }
 
@@ -27,4 +25,48 @@
         touch-action: none;
         cursor: grab;
     }
+
+    .controls-overlay__item {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+
+        width: 83px;
+        height: 39px;
+        background: rgba(29, 31, 35, 0.8);
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 10px;
+
+        opacity: 1;
+        transition: opacity 0.3s;
+        z-index: 100;
+        pointer-events: none;
+
+
+        button {
+            background: none;
+            border: none;
+            color: white;
+            cursor: pointer;
+            pointer-events: auto;
+
+            &:hover {
+                color: c.$accented-red-color;
+            }
+        }
+
+            .delete-btn:hover {
+                filter: invert(30%) sepia(90%) saturate(7000%) hue-rotate(350deg) brightness(90%) contrast(100%);
+            }
+        
+
+        &:hover .controls-overlay__item {
+            opacity: 1;
+            pointer-events: auto;
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/components/Carousel/TemplateCard.tsx b/src/features/AdminPage/ArtGallery/components/Carousel/TemplateCard.tsx
index 2fbdfee..8d6301b 100644
--- a/src/features/AdminPage/ArtGallery/components/Carousel/TemplateCard.tsx
+++ b/src/features/AdminPage/ArtGallery/components/Carousel/TemplateCard.tsx
@@ -1,37 +1,64 @@
-import  { useState } from 'react';
+import { useState } from 'react';
 import { TemplateRenderer } from '@components/ImageTemplates-grid/TemplateRenderer';
 import './TemplateCard.styles.scss';
 
-export const TemplateCard = ({ template, attributes, listeners, onEdit }: any) => {
+export const TemplateCard = ({ template, attributes, isActive, listeners, onEdit,onDelete }: any) => {
     const [isHovered, setIsHovered] = useState(false);
-console.log("template", template)
+    console.log("template", template)
     return (
-        <div 
-            className="template-card"
+        <div
+            className={`template-card ${isActive ? 'template-active' : ''}`}
             onMouseEnter={() => setIsHovered(true)}
             onMouseLeave={() => setIsHovered(false)}
         >
             {isHovered && (
-                <button 
-                    className="edit-btn" 
-                    onClick={(e) => {
-                        e.stopPropagation(); 
-                        onEdit(template);
-                    }}
-                >
-                    ✎
-                </button>
+                // <button
+                //     className="edit-btn"
+                //     onClick={(e) => {
+                //         e.stopPropagation();
+                //         onEdit(template);
+                //     }}
+                // >
+                //     ✎
+                // </button>
+
+                <div className="controls-overlay__item">
+                    <button
+                        className="edit-btn"
+                        onPointerDown={(e) => e.stopPropagation()}
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            onEdit(template);
+                        }}
+                    >
+                        ✎
+                    </button>
+
+                   <button 
+                   className="delete-btn"
+                        onPointerDown={(e) => e.stopPropagation()}
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            e.nativeEvent.stopImmediatePropagation();
+                           onDelete(template.id);
+                        }}
+                    >
+                        🗑️
+                         </button>
+                </div>
             )}
 
             <div {...attributes} {...listeners} className="draggable-area">
                 <TemplateRenderer
                     className="carousel-preview"
-                    template={{ 
-                        name: template.templateName, 
-                        slots: Object.entries(template.slots).map(([id]) => ({ id })) 
+                    template={{
+                        name: template.templateName,
+                        slots: template.slots
                     }}
                     renderSlot={(slot: any) => {
-                        const image = template.slots[slot.id];
+                        const slotData = template.slots.find((s: any) => s.id === slot.id);
+                        const image = slotData?.image;
+
                         return image?.url ? <img src={image.url} alt="slot" /> : null;
                     }}
                 />
diff --git a/src/features/AdminPage/ArtGallery/components/ImageGallery/GalleryList.tsx b/src/features/AdminPage/ArtGallery/components/ImageGallery/GalleryList.tsx
index f82690a..69ac90a 100644
--- a/src/features/AdminPage/ArtGallery/components/ImageGallery/GalleryList.tsx
+++ b/src/features/AdminPage/ArtGallery/components/ImageGallery/GalleryList.tsx
@@ -1,38 +1,40 @@
 import React, { useState } from 'react';
 import { observer } from 'mobx-react-lite';
-import useMobx from '@stores/root-store';
+import useMobx from '@/app/stores/root-store';
 import { SortableContext, rectSortingStrategy } from '@dnd-kit/sortable';
 import { GalleryListProps } from '@models/media/image.model';
 import { SortableImageCard } from './SortableImageCard';
 import { AddButtonCard } from './AddButtonCard';
 import './GalleryList.styles.scss';
 
-export const GalleryList: React.FC<GalleryListProps> = observer(({ 
-  onUpload, 
-  onDelete, 
-  onEdit 
+export const GalleryList: React.FC<GalleryListProps> = observer(({
+  onUpload,
+  onDelete,
+  onEdit
 }) => {
   const [confirmingId, setConfirmingId] = useState<string | null>(null);
-  const { imagesStore } = useMobx(); 
+  const { imagesStore } = useMobx();
   const images = imagesStore.getImageArray;
-console.log("GalleryList_images",images);
+
+  console.log("GalleryList_images", images);
 
   return (
     <div className="gallery-list">
       <AddButtonCard onUpload={onUpload} />
       <SortableContext items={images.map(img => `img_${img.id}`)} strategy={rectSortingStrategy}>
         {images.map((img) => (
-          <SortableImageCard 
-            key={img.id} 
-            image={img} 
+          <SortableImageCard
+            key={img.id}
+            image={img}
             onDelete={(id) => onDelete(Number(id))}
-            onEdit={onEdit} 
+            onEdit={onEdit}
             isConfirming={confirmingId === String(img.id)}
-           onConfirmRequest={() => setConfirmingId(String(img.id))}
+            onConfirmRequest={() => setConfirmingId(String(img.id))}
             onCancelRequest={() => setConfirmingId(null)}
           />
         ))}
       </SortableContext>
     </div>
   );
-});
\ No newline at end of file
+});
+
diff --git a/src/features/AdminPage/ArtGallery/components/ImageGallery/ImageCard.styles.scss b/src/features/AdminPage/ArtGallery/components/ImageGallery/ImageCard.styles.scss
index f556304..a57b307 100644
--- a/src/features/AdminPage/ArtGallery/components/ImageGallery/ImageCard.styles.scss
+++ b/src/features/AdminPage/ArtGallery/components/ImageGallery/ImageCard.styles.scss
@@ -1,6 +1,7 @@
 @use "@assets/sass/variables/_variables.colors.scss" as c;
 
 .image-card {
+  position: relative;
   width: 146px;
   height: 152px;
   border: 1px solid #e0e0e0;
@@ -14,11 +15,30 @@
   overflow: hidden;
   background-color: transparent;
   cursor: pointer;
+  border: 2px solid transparent;
+  transition: border-color 0.3s;
 
   &.is-deleting {
     border: 2px solid c.$accented-red-color !important;
   }
 
+  &.card-incomplete {
+    border-color: c.$accented-red-color;
+  }
+
+  .warning-badge {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    background: #ff4d4f;
+    color: white;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    text-align: center;
+    font-weight: bold;
+    z-index: 10;
+  }
 
   img {
     width: 120px;
@@ -28,12 +48,12 @@
     object-fit: fill;
   }
 
- .controls-overlay__item {
-    position: absolute; 
+  .controls-overlay__item {
+    position: absolute;
     top: 50%;
     left: 50%;
-    transform: translate(-50%, -50%); 
-    
+    transform: translate(-50%, -50%);
+
     width: 83px;
     height: 39px;
     background: rgba(29, 31, 35, 0.8);
@@ -42,12 +62,12 @@
     align-items: center;
     justify-content: center;
     gap: 10px;
-    
+
     opacity: 0;
     transition: opacity 0.3s;
     z-index: 10;
     pointer-events: none;
-  
+
 
     button {
       background: none;
@@ -56,8 +76,8 @@
       cursor: pointer;
 
       &:hover {
-      color: c.$accented-red-color; 
-    }
+        color: c.$accented-red-color;
+      }
     }
   }
 
diff --git a/src/features/AdminPage/ArtGallery/components/ImageGallery/ImageCard.tsx b/src/features/AdminPage/ArtGallery/components/ImageGallery/ImageCard.tsx
index 8f29066..605ce1c 100644
--- a/src/features/AdminPage/ArtGallery/components/ImageGallery/ImageCard.tsx
+++ b/src/features/AdminPage/ArtGallery/components/ImageGallery/ImageCard.tsx
@@ -1,19 +1,25 @@
 import React from 'react';
+import { observer } from 'mobx-react-lite';
 import { useModalContext } from '@stores/root-store';
 import { ImageCardProps } from '@models/media/image.model';
 import { useArtGallery } from '../../hooks/useArtGallery';
 import './ImageCard.styles.scss';
 
-export const ImageCard: React.FC<ImageCardProps> = ({
+export const ImageCard: React.FC<ImageCardProps> = observer(({
   image, attributes, listeners
 }) => {
-  const { modalStore: { setModal } } = useModalContext();
+  const { modalStore: { setModal }, imageTemplateStore } = useModalContext();
   const { removeImage } = useArtGallery();
 
+  const art = imageTemplateStore.getArtByImageId(image.id);
+  const isMissingData = !art;
+
   return (
-    <div className="image-card"
+    <div className={`image-card ${isMissingData ? 'card-incomplete' : ''}`}
       onDragStart={(e) => e.preventDefault()}
     >
+      {isMissingData && <div className="warning-badge">!</div>}
+
       <div className="drag-handle" {...attributes} {...listeners}>
         <img src={image.url} alt="art" draggable="false" />
       </div>
@@ -21,7 +27,12 @@ export const ImageCard: React.FC<ImageCardProps> = ({
       <div className="controls-overlay__item">
         <button onClick={(e) => {
           e.stopPropagation();
-          setModal('editImage', undefined, true, image);
+          setModal('editImage', undefined, true, {
+            ...image,
+            onSave: (updatedImage: any) => {
+              console.log('saved:', updatedImage);
+            }
+          });
         }}>🔍</button>
 
         <button onClick={(e) => {
@@ -35,4 +46,4 @@ export const ImageCard: React.FC<ImageCardProps> = ({
       </div>
     </div>
   );
-};
\ No newline at end of file
+});
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/components/TemplateGrid/DroppableSlot.tsx b/src/features/AdminPage/ArtGallery/components/TemplateGrid/DroppableSlot.tsx
index 764eb39..d6957f2 100644
--- a/src/features/AdminPage/ArtGallery/components/TemplateGrid/DroppableSlot.tsx
+++ b/src/features/AdminPage/ArtGallery/components/TemplateGrid/DroppableSlot.tsx
@@ -16,7 +16,7 @@ export const DroppableSlot = ({ slot, image, onRemove, isEditing }: any) => {
               className="remove-slot-btn"
               onClick={(e) => {
                 e.stopPropagation();
-                onRemove(slot.id);
+                onRemove();
               }}
             >
               🗑️
diff --git a/src/features/AdminPage/ArtGallery/components/TemplateGrid/TemplateGrid.styles.scss b/src/features/AdminPage/ArtGallery/components/TemplateGrid/TemplateGrid.styles.scss
index 1937183..831b0ab 100644
--- a/src/features/AdminPage/ArtGallery/components/TemplateGrid/TemplateGrid.styles.scss
+++ b/src/features/AdminPage/ArtGallery/components/TemplateGrid/TemplateGrid.styles.scss
@@ -56,6 +56,7 @@
   height: 100%;
 
   .slot-content {
+    position: relative;
     width: 100%;
     height: 100%;
   }
diff --git a/src/features/AdminPage/ArtGallery/components/TemplateGrid/TemplateGrid.tsx b/src/features/AdminPage/ArtGallery/components/TemplateGrid/TemplateGrid.tsx
index d08e9c9..b4454f7 100644
--- a/src/features/AdminPage/ArtGallery/components/TemplateGrid/TemplateGrid.tsx
+++ b/src/features/AdminPage/ArtGallery/components/TemplateGrid/TemplateGrid.tsx
@@ -29,7 +29,7 @@ export const TemplateGrid = observer(({
   }, [isTemplateFilled]);
 
   if (!imageTemplateStore.activeTemplate) {
-    return <div>Загрузка шаблонов...</div>;
+    return <div>Download templates...</div>;
   }
 
   console.log("imageTemplateStore",imageTemplateStore);
@@ -42,7 +42,7 @@ export const TemplateGrid = observer(({
           <DroppableSlot
             slot={slot}
             image={slots[slot.id]}
-            onRemove={onRemoveSlot}
+            onRemove={() => onRemoveSlot(slots[slot.id]?.id)}
             isEditing={isEditing}
           />
         )}
diff --git a/src/features/AdminPage/ArtGallery/hooks/useArtGallery.ts b/src/features/AdminPage/ArtGallery/hooks/useArtGallery.ts
index 294cd69..9dcb899 100644
--- a/src/features/AdminPage/ArtGallery/hooks/useArtGallery.ts
+++ b/src/features/AdminPage/ArtGallery/hooks/useArtGallery.ts
@@ -1,4 +1,4 @@
-import useMobx from '@stores/root-store';
+import useMobx, { useModalContext } from '@/app/stores/root-store';
 
 const toBase64 = (file: File): Promise<string> => {
   return new Promise((resolve, reject) => {
@@ -12,6 +12,8 @@ const toBase64 = (file: File): Promise<string> => {
 
 export const useArtGallery = () => {
   const { imagesStore } = useMobx();
+  const { artStore, imageTemplateStore } = useModalContext();
+
 
   const addImage = async (file: File) => {
     const localUrl = URL.createObjectURL(file);
@@ -25,6 +27,12 @@ export const useArtGallery = () => {
   };
 
   const removeImage = async (id: number) => {
+    const art = imageTemplateStore.getArtByImageId(id);
+
+    if (art) {
+      await artStore.deleteArt(art.id);
+      imageTemplateStore.artsMap.delete(id);
+    }
     await imagesStore.deleteImage(id);
   };
 
@@ -37,4 +45,5 @@ export const useArtGallery = () => {
     moveImageBackToGallery: imagesStore.moveImageBackToGallery,
     reorderImages: imagesStore.reorderImages
   };
-};
\ No newline at end of file
+};
+
diff --git a/src/features/AdminPage/ArtGallery/hooks/useTemplateEditor.ts b/src/features/AdminPage/ArtGallery/hooks/useTemplateEditor.ts
index 3dcadea..a0ea269 100644
--- a/src/features/AdminPage/ArtGallery/hooks/useTemplateEditor.ts
+++ b/src/features/AdminPage/ArtGallery/hooks/useTemplateEditor.ts
@@ -29,6 +29,8 @@ export const useTemplateEditor = (
         slots: { ...templateSlots },
         templateName:
           imageTemplateStore.activeTemplate?.name || 'Updated',
+        templateId:
+          imageTemplateStore.activeTemplate?.id || 0,
         isSavedToDb: false
       });
 
@@ -39,6 +41,8 @@ export const useTemplateEditor = (
         slots: { ...templateSlots },
         templateName:
           imageTemplateStore.activeTemplate?.name || 'Unnamed',
+           templateId:
+          imageTemplateStore.activeTemplate?.id || 0,
         isSavedToDb: false
       });
     }
@@ -64,4 +68,6 @@ export const useTemplateEditor = (
     handleSave,
     saveToDb
   };
-};
\ No newline at end of file
+};
+
+
diff --git a/src/features/MainPage/StreetcodeSlider/StreetcodeSliderItem/StreetcodeSliderItem.component.tsx b/src/features/MainPage/StreetcodeSlider/StreetcodeSliderItem/StreetcodeSliderItem.component.tsx
index c112053..7a050ef 100644
--- a/src/features/MainPage/StreetcodeSlider/StreetcodeSliderItem/StreetcodeSliderItem.component.tsx
+++ b/src/features/MainPage/StreetcodeSlider/StreetcodeSliderItem/StreetcodeSliderItem.component.tsx
@@ -18,7 +18,6 @@ interface Props {
 }
 
 const StreetcodeSliderItem = ({ streetcode }: Props) => {
-    const { imagesStore } = useMobx();
     const [image, setImage] = useState<Image>();
 
     const id = streetcode?.id;
diff --git a/src/models/media/art-slide-template.model.ts b/src/models/media/art-slide-template.model.ts
index f448772..4b94524 100644
--- a/src/models/media/art-slide-template.model.ts
+++ b/src/models/media/art-slide-template.model.ts
@@ -1,10 +1,17 @@
+import type  Image  from '@models/media/image.model';
+
 export interface SlotConfig {
     id: string;
+    artId: number;
+    image?: Image | null;
 }
 
 export interface ArtSlideTemplate {
     id: number;
     name: string;
+    templateId: number;
+    templateName: string;
     gap: number;
     slots: SlotConfig[];
-}
\ No newline at end of file
+    isSavedToDb: boolean;
+}
diff --git a/src/models/media/image.model.ts b/src/models/media/image.model.ts
index d3bebf1..281b4f3 100644
--- a/src/models/media/image.model.ts
+++ b/src/models/media/image.model.ts
@@ -6,6 +6,8 @@ export default interface Image {
     blobName?: string;
     mimeType?: string;
     imageDetails?: ImageDetails;
+      url?: string; 
+    isPublished?: boolean;
 }
 
 export enum ImageAssigment {
@@ -34,35 +36,35 @@ export interface ImageCreateUpdate extends IModelState {
 }
 
 
-export interface ArtImage extends Image {
-    id: number; 
-    url: string; 
-    isPublished: boolean;
-}
+// export interface ArtImage extends Image {
+//     id: number; 
+//     url: string; 
+//     isPublished: boolean;
+// }
 
 export interface GalleryListProps {
-    images: ArtImage[];
+    images: Image[];
     onUpload: (file: File) => void;
     onDelete: (id: number) => void;
-    onEdit: (image: ArtImage) => void;
+    onEdit: (image: Image) => void;
 }
 
 export interface ImageCardProps {
-    image: ArtImage;
+    image: Image;
     attributes: any;
     listeners: any;
 
     onDelete: (id: string) => void;
-    onEdit: (image: ArtImage) => void;
+    onEdit: (image: Image) => void;
     isConfirming: boolean;
     onConfirmRequest: () => void;
     onCancelRequest: () => void;
 }
 
 export interface SortableImageCardProps {
-    image: ArtImage;
+    image: Image;
     onDelete: (id: number) => void;
-    onEdit: (image: ArtImage) => void;
+    onEdit: (image: Image) => void;
     isConfirming: boolean;
     onConfirmRequest: () => void;
     onCancelRequest: () => void;

From ef49de8716757aa97ae246115d07cac5ace22365 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=86=D0=BD=D0=BD=D0=B0=20=D0=A8=D0=BF=D0=BE=D0=BD=D1=8C?=
 =?UTF-8?q?=D0=BA=D0=B0?= <inneta3@gmail.com>
Date: Mon, 15 Jun 2026 00:02:00 +0300
Subject: [PATCH 5/6] update carousel +add modal

---
 src/app/api/agent.api.ts                      |  65 ++++------
 .../DeleteImageModal.component.tsx            |  20 ++-
 .../DeleteImageTemplatesModal.component.tsx   |  42 ++++++
 .../common/constants/templates.constants.ts   |  21 ---
 src/app/layout/ModalWrapper.component.tsx     |   2 +
 src/app/stores/image-store.ts                 | 103 +++++++++------
 src/app/stores/modal-store.ts                 |   2 +
 .../AdminPage/ArtGallery/ArtGallery.tsx       |  12 +-
 .../AdminArtControls/AdminArtControls.tsx     |   2 -
 .../Carousel/SortableTemplateCard.tsx         |   1 -
 .../Carousel/TemplateCard.styles.scss         |  57 ++++++++-
 .../components/Carousel/TemplateCard.tsx      |  43 ++++---
 .../TemplateSelector/TemplateSelector.tsx     |  31 -----
 .../components/Templates/TemplatesHeader.tsx  |   1 -
 .../ArtGallery/hooks/useArtGalleryDnD.ts      | 120 ------------------
 .../ArtGallery/hooks/useTemplateEditor.ts     |  73 -----------
 .../ArtGallery/hooks/useTemplateSlots.ts      |  36 ------
 .../ArtGallery/types/gallery.types.ts         |  31 -----
 18 files changed, 236 insertions(+), 426 deletions(-)
 create mode 100644 src/app/common/components/modals/EditImageModal/DeleteImageTemplatesModal.component.tsx
 delete mode 100644 src/app/common/constants/templates.constants.ts
 delete mode 100644 src/features/AdminPage/ArtGallery/components/TemplateSelector/TemplateSelector.tsx
 delete mode 100644 src/features/AdminPage/ArtGallery/hooks/useArtGalleryDnD.ts
 delete mode 100644 src/features/AdminPage/ArtGallery/hooks/useTemplateEditor.ts
 delete mode 100644 src/features/AdminPage/ArtGallery/hooks/useTemplateSlots.ts

diff --git a/src/app/api/agent.api.ts b/src/app/api/agent.api.ts
index 359bb09..1efed18 100644
--- a/src/app/api/agent.api.ts
+++ b/src/app/api/agent.api.ts
@@ -35,25 +35,25 @@ axios.interceptors.response.use(
             errorMessage = message;
         }
         switch (response?.status) {
-        case StatusCodes.INTERNAL_SERVER_ERROR:
-            errorMessage = ReasonPhrases.INTERNAL_SERVER_ERROR;
-            break;
-        case StatusCodes.UNAUTHORIZED:
-            errorMessage = ReasonPhrases.UNAUTHORIZED;
-            UserLoginStore.clearUserData();
-            globalThis.location.href = FRONTEND_ROUTES.ADMIN.LOGIN;
-            break;
-        case StatusCodes.NOT_FOUND:
-            errorMessage = ReasonPhrases.NOT_FOUND;
-            break;
-        case StatusCodes.BAD_REQUEST:            
-            errorMessage = getErrorMessage(response?.data) || ReasonPhrases.BAD_REQUEST;
-            break;
-        case StatusCodes.FORBIDDEN:
-            errorMessage = ReasonPhrases.FORBIDDEN;
-            break;
-        default:
-            break;
+            case StatusCodes.INTERNAL_SERVER_ERROR:
+                errorMessage = ReasonPhrases.INTERNAL_SERVER_ERROR;
+                break;
+            case StatusCodes.UNAUTHORIZED:
+                errorMessage = ReasonPhrases.UNAUTHORIZED;
+                UserLoginStore.clearUserData();
+                globalThis.location.href = FRONTEND_ROUTES.ADMIN.LOGIN;
+                break;
+            case StatusCodes.NOT_FOUND:
+                errorMessage = ReasonPhrases.NOT_FOUND;
+                break;
+            case StatusCodes.BAD_REQUEST:
+                errorMessage = getErrorMessage(response?.data) || ReasonPhrases.BAD_REQUEST;
+                break;
+            case StatusCodes.FORBIDDEN:
+                errorMessage = ReasonPhrases.FORBIDDEN;
+                break;
+            default:
+                break;
         }
         if (errorMessage !== '' && process.env.NODE_ENV === 'development') {
             toast.error(errorMessage);
@@ -63,33 +63,22 @@ axios.interceptors.response.use(
     },
 );
 
-const responseBody = <T> (response: AxiosResponse<T>) => response.data;
+const responseBody = <T>(response: AxiosResponse<T>) => response.data;
 
 const Agent = {
-    get: async <T> (url: string, params?: URLSearchParams) => {
+    get: async <T>(url: string, params?: URLSearchParams) => {
         axios.defaults.headers.common.Authorization = `Bearer ${UserLoginStore.getToken()}`;
         return axios.get<T>(url, { params })
             .then(responseBody);
     },
 
- post: async <T> (url: string, body: object, headers?: object) => {
-    // Для отладки: посмотрим, что именно мы отправляем
-    console.log("POST request to:", url);
-    console.log("Request body:", JSON.stringify(body, null, 2));
+    post: async <T>(url: string, body: object, headers?: object) => {
+        axios.defaults.headers.common.Authorization = `Bearer ${UserLoginStore.getToken()}`;
+        return axios.post<T>(url, body, headers)
+            .then(responseBody);
+    },
 
-    axios.defaults.headers.common.Authorization = `Bearer ${UserLoginStore.getToken()}`;
-    
-    return axios.post<T>(url, body, headers)
-        .then(responseBody)
-        .catch(error => {
-            // Удобный вывод ошибок валидации от ASP.NET
-            if (error.response && error.response.status === 400) {
-                console.error("Validation Errors:", error.response.data.errors);
-            }
-            throw error;
-        });
-},
-    put: async <T> (url: string, body: object) => {
+    put: async <T>(url: string, body: object) => {
         axios.defaults.headers.common.Authorization = `Bearer ${UserLoginStore.getToken()}`;
         return axios.put<T>(url, body)
             .then(responseBody);
diff --git a/src/app/common/components/modals/EditImageModal/DeleteImageModal.component.tsx b/src/app/common/components/modals/EditImageModal/DeleteImageModal.component.tsx
index 7b6186a..29d115f 100644
--- a/src/app/common/components/modals/EditImageModal/DeleteImageModal.component.tsx
+++ b/src/app/common/components/modals/EditImageModal/DeleteImageModal.component.tsx
@@ -1,6 +1,6 @@
 import { observer } from 'mobx-react-lite';
 import { useModalContext } from '@stores/root-store';
-import { Modal } from 'antd';
+import { Modal, Button  } from 'antd';
 
 const DeleteImageModal = observer(() => {
     const { modalStore: { setModal, modalsState: { deleteImage } } } = useModalContext();
@@ -15,6 +15,24 @@ const DeleteImageModal = observer(() => {
             open={deleteImage.isOpen}
             onOk={onConfirm}
             onCancel={() => setModal('deleteImage')}
+             footer={[
+                <Button
+                    key="back"
+                    onClick={() => setModal('deleteImage', undefined, false)}
+                    className="ant-btn-default"
+                >
+                    Скасувати
+                </Button>,
+                <Button
+                    key="submit"
+                    type="primary"
+                    danger
+                    onClick={onConfirm}
+                    className="ant-btn-primary"
+                >
+                    Видалити
+                </Button>,
+            ]}
         >
             <p>Ви впевнені?</p>
         </Modal>
diff --git a/src/app/common/components/modals/EditImageModal/DeleteImageTemplatesModal.component.tsx b/src/app/common/components/modals/EditImageModal/DeleteImageTemplatesModal.component.tsx
new file mode 100644
index 0000000..ee2f4ff
--- /dev/null
+++ b/src/app/common/components/modals/EditImageModal/DeleteImageTemplatesModal.component.tsx
@@ -0,0 +1,42 @@
+import { observer } from 'mobx-react-lite';
+import { useModalContext } from '@stores/root-store';
+import { Modal, Button } from 'antd';
+
+const DeleteImageTemplatesModal = observer(() => {
+    const { modalStore: { setModal, modalsState: { deleteImageTemplates } } } = useModalContext();
+
+    const onConfirm = () => {
+        deleteImageTemplates.image?.onConfirm?.();
+        setModal('deleteImageTemplates', undefined, false);
+    };
+
+    return (
+        <Modal
+            title="Видалити"
+            open={deleteImageTemplates.isOpen}
+            onOk={onConfirm}
+            onCancel={() => setModal('deleteImageTemplates', undefined, false)}
+            footer={[
+                <Button
+                    key="back"
+                    onClick={() => setModal('deleteImageTemplates', undefined, false)}
+                    className="ant-btn-default"
+                >
+                    Скасувати
+                </Button>,
+                <Button
+                    key="submit"
+                    type="primary"
+                    danger
+                    onClick={onConfirm}
+                    className="ant-btn-primary"
+                >
+                    Видалити
+                </Button>,
+            ]}
+        >
+            <p>Ви впевнені, що хочете видалити цей елемент?</p>
+        </Modal>
+    );
+});
+export default DeleteImageTemplatesModal;
\ No newline at end of file
diff --git a/src/app/common/constants/templates.constants.ts b/src/app/common/constants/templates.constants.ts
deleted file mode 100644
index 126f027..0000000
--- a/src/app/common/constants/templates.constants.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import type  Image  from '@models/media/image.model';
-
-export interface SlotConfig {
-  id: string;
-    image?: Image | null;
-}
-
-export interface TemplateConfig {
-  id: number;
-  name: string; 
-  gap: number;
-  slots: SlotConfig[];
-}
-
-export const TEMPLATES_CONFIG: TemplateConfig[] = [
-  { id: 1, name: 'main-big', gap: 5, slots: [{id: 'big'}] },
-  { id: 2, name: 'medium', gap: 5, slots: [{id: 'mid1'}] },
-  { id: 3, name: 'two-medium', gap: 5, slots: [{id: 'mid1'}, {id: 'mid2'}] },
-  { id: 4, name: 'mid-plus-two-small', gap: 4, slots: [{id: 'mid'}, {id: 's1'}, {id: 's2'}] },
-  { id: 5, name: 'four-small', gap: 4, slots: [{id: 's1'}, {id: 's2'}, {id: 's3'}, {id: 's4'}] }
-];
\ No newline at end of file
diff --git a/src/app/layout/ModalWrapper.component.tsx b/src/app/layout/ModalWrapper.component.tsx
index 542d1d4..57b87b3 100644
--- a/src/app/layout/ModalWrapper.component.tsx
+++ b/src/app/layout/ModalWrapper.component.tsx
@@ -11,6 +11,7 @@ import RelatedFigureItemModal from '@components/modals/RelatedFigures/RelatedFig
 import RelatedFiguresModal from '@components/modals/RelatedFigures/RelatedFiguresModal.component';
 import SourcesModal from '@components/modals/Sources/SourcesModal.component';
 import DeleteImageModal from '@components/modals/EditImageModal/DeleteImageModal.component';
+import DeleteImageTemplatesModal from '@components/modals/EditImageModal/DeleteImageTemplatesModal.component';
 import EditImageModal from '@components/modals/EditImageModal/EditImageModal.component';
 import TemplatesModal from '@components/modals/EditImageModal/TemplatesModal.component';
 
@@ -30,6 +31,7 @@ const ModalWrapper = () => (
         <StatisticsModal />
         <EditImageModal />
         <DeleteImageModal />
+        <DeleteImageTemplatesModal/>
         <TemplatesModal />
     </>
 );
diff --git a/src/app/stores/image-store.ts b/src/app/stores/image-store.ts
index 7b78ca4..930a59d 100644
--- a/src/app/stores/image-store.ts
+++ b/src/app/stores/image-store.ts
@@ -10,71 +10,95 @@ export default class ImageStore {
         makeAutoObservable(this);
     }
 
+    public addImage = (image: Image) => {
+        this.setItem(image);
+    };
 
-    public getImage = (id: number) => this.ImageMap.get(id);
-
-    get getImageArray(): Image[] {
-        return Array.from(this.ImageMap.values());
-    }
+    private setInternalMap = (images: Image[]) => {
+        images.forEach(this.setItem);
+    };
 
     private setItem = (image: Image) => {
         this.ImageMap.set(image.id, image);
     };
 
-    // --- Логика загрузки и API ---
-    public fetchAll = async () => {
+    get getImageArray() {
+        return Array.from(this.ImageMap.values());
+    }
+
+    static async getImageById(imageId: number): Promise<Image | undefined> {
+        let image: Image | undefined;
+        await imagesApi.getById(imageId)
+            .then((im) => {
+                image = im;
+            })
+            .catch((error) => {});
+        return image;
+    }
+
+    public getImage = (id: number) => this.ImageMap.get(id);
+
+
+    public fetchImage = async (id: number) => {
+        if (!id || id <= 0) return;
+        
         try {
-            const rawImages = await imagesApi.getAll();
+            const image = await imagesApi.getById(id);
             runInAction(() => {
-                rawImages.forEach(img => {
-                    this.setItem(this.transformToImage(img));
-                });
+                this.setItem(this.transformToImage(image));
             });
-        } catch (error) {
-            console.error('Error fetching all images:', error);
-        }
+        } catch (error: unknown) {}
     };
 
-    public fetchImage = async (id: number) => {
+    public fetchImageByStreetcodeId = async (streetcodeId: number) => {
         try {
-            const image = await imagesApi.getById(id);
-            this.setItem(this.transformToImage(image));
-        } catch (error: unknown) { }
+            const image = await imagesApi.getByStreetcodeId(streetcodeId);
+            runInAction(() => {
+                this.setInternalMap(image.map(this.transformToImage));
+            });
+        } catch (error: unknown) {}
     };
 
-    public createImage = async (data: ImageCreate, localUrl?: string): Promise<Image | undefined> => {
+    public createImage = async (image: ImageCreate, localUrl?: string) => {
         try {
-            const rawImage = await imagesApi.create(data);
-            const image = { ...this.transformToImage(rawImage), url: localUrl ?? '' };
-            runInAction(() => this.setItem(image));
-            return image;
-        } catch (error) {
-            console.error('Store error (createImage):', error);
-            return undefined;
-        }
+            const resp = await imagesApi.create(image);
+            runInAction(() => {
+                const newImage = { ...this.transformToImage(resp), url: localUrl ?? '' };
+                this.setItem(newImage);
+            });
+        } catch (error: unknown) {}
     };
 
     public updateImage = async (image: Image) => {
         try {
             await imagesApi.update(image);
             runInAction(() => {
-                const updatedImage = { ...this.ImageMap.get(image.id), ...image };
+                const updatedImage = {
+                    ...this.ImageMap.get(image.id),
+                    ...image,
+                };
                 this.setItem(updatedImage as Image);
             });
-        } catch (error: unknown) { }
+        } catch (error: unknown) {}
     };
 
-    public deleteImage = async (imageId: number): Promise<boolean> => {
+    public deleteImage = async (imageId: number) => {
         try {
             await imagesApi.delete(imageId);
-            runInAction(() => this.ImageMap.delete(imageId));
-            return true;
-        } catch (error) {
-            console.error('Store error:', error);
-            return false;
-        }
+            runInAction(() => {
+                this.ImageMap.delete(imageId);
+            });
+        } catch (error: unknown) {}
     };
 
+    public fetchAll = async () => {
+        try {
+            const rawImages = await imagesApi.getAll();
+            runInAction(() => {
+                rawImages.forEach(img => this.setItem(this.transformToImage(img)));
+            });
+        } catch (error) {}
+    };
 
     public reorderImages = (oldIndex: number, newIndex: number) => {
         runInAction(() => {
@@ -90,16 +114,13 @@ export default class ImageStore {
     };
 
     public moveImageBackToGallery = (image: Image) => {
-        runInAction(() => {
-            this.ImageMap.set(Number(image.id), image);
-        });
+        runInAction(() => this.setItem(image));
     };
 
     public addImageBackToGallery = (image: Image) => {
         runInAction(() => this.setItem(image));
     };
 
-
     private transformToImage = (image: Image): Image => {
         return {
             ...image,
@@ -107,4 +128,4 @@ export default class ImageStore {
             isPublished: image.isPublished ?? false
         };
     };
-}
+}
\ No newline at end of file
diff --git a/src/app/stores/modal-store.ts b/src/app/stores/modal-store.ts
index 2fb4484..9f6dba4 100644
--- a/src/app/stores/modal-store.ts
+++ b/src/app/stores/modal-store.ts
@@ -41,6 +41,7 @@ interface ModalList {
     statistics: ModalState;
     editImage: ModalState;
     deleteImage: ModalState;
+    deleteImageTemplates: ModalState;
     templates: ModalState;
 }
 
@@ -66,6 +67,7 @@ export default class ModalStore {
         statistics: DefaultModalState,
         editImage: DefaultModalState,
         deleteImage: DefaultModalState,
+        deleteImageTemplates: DefaultModalState,
         templates: DefaultModalState,
     };
 
diff --git a/src/features/AdminPage/ArtGallery/ArtGallery.tsx b/src/features/AdminPage/ArtGallery/ArtGallery.tsx
index 61b24d3..c827cab 100644
--- a/src/features/AdminPage/ArtGallery/ArtGallery.tsx
+++ b/src/features/AdminPage/ArtGallery/ArtGallery.tsx
@@ -1,8 +1,7 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { TEMPLATE_CLASS_MAP } from '@constants/template.map';
-import { ArtSlideTemplate, SlotConfig } from '@models/media/art-slide-template.model';
+import { ArtSlideTemplate } from '@models/media/art-slide-template.model';
 import { message } from 'antd';
-import { observer } from 'mobx-react-lite';
 import {
   DndContext,
   DragEndEvent,
@@ -12,8 +11,6 @@ import {
   PointerSensor
 } from '@dnd-kit/core';
 
-import { arrayMove } from '@dnd-kit/sortable';
-
 import Image from '@models/media/image.model';
 import { useArtGallery } from './hooks/useArtGallery';
 
@@ -284,29 +281,24 @@ export const ArtGallery: React.FC = () => {
   // REMOVE TEMPLATE
   // -----------------------------
 const handleDeleteTemplate = (id: number) => {
-    // 1. Блокируем удаление, если шаблон сейчас в режиме редактирования
     if (editingTemplateId === String(id)) {
         message.error("Спочатку збережіть або скасуйте редагування цього шаблону");
         return;
     }
 
-    // 2. Находим шаблон перед удалением, чтобы "спасти" картинки
     const template = imageTemplateStore.savedTemplates.find(t => t.id === id);
 
     if (template) {
-        // 3. Возвращаем картинки из слотов обратно в общую галерею
         template.slots.forEach(slot => {
             if (slot.image) {
                 addImageBackToGallery(slot.image);
             }
         });
 
-        // 4. Сбрасываем ID в DND-kit, если этот элемент был "активным" (dragging)
         if (activeId === `tmpl_${id}`) {
             setActiveId(null);
         }
 
-        // 5. Удаляем из стора
         imageTemplateStore.removeTemplate(id);
         
         message.success("Шаблон видалено, картинки повернуто в галерею");
diff --git a/src/features/AdminPage/ArtGallery/components/AdminArtControls/AdminArtControls.tsx b/src/features/AdminPage/ArtGallery/components/AdminArtControls/AdminArtControls.tsx
index f775021..eeb426f 100644
--- a/src/features/AdminPage/ArtGallery/components/AdminArtControls/AdminArtControls.tsx
+++ b/src/features/AdminPage/ArtGallery/components/AdminArtControls/AdminArtControls.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-// import './AdminArtControls.styles.scss';
 import { AdminArtControlsProps } from '../../types/gallery.types';
 
 export const AdminArtControls = ({ onDelete, onEdit }: AdminArtControlsProps) => (
diff --git a/src/features/AdminPage/ArtGallery/components/Carousel/SortableTemplateCard.tsx b/src/features/AdminPage/ArtGallery/components/Carousel/SortableTemplateCard.tsx
index 25c50c5..a277d67 100644
--- a/src/features/AdminPage/ArtGallery/components/Carousel/SortableTemplateCard.tsx
+++ b/src/features/AdminPage/ArtGallery/components/Carousel/SortableTemplateCard.tsx
@@ -1,7 +1,6 @@
 import { useState } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { Spin } from 'antd';
 import './SortableTemplateCard.styles.scss';
 
 import { TemplateCard } from './TemplateCard';
diff --git a/src/features/AdminPage/ArtGallery/components/Carousel/TemplateCard.styles.scss b/src/features/AdminPage/ArtGallery/components/Carousel/TemplateCard.styles.scss
index 5058394..d55a789 100644
--- a/src/features/AdminPage/ArtGallery/components/Carousel/TemplateCard.styles.scss
+++ b/src/features/AdminPage/ArtGallery/components/Carousel/TemplateCard.styles.scss
@@ -59,14 +59,63 @@
             }
         }
 
-            .delete-btn:hover {
-                filter: invert(30%) sepia(90%) saturate(7000%) hue-rotate(350deg) brightness(90%) contrast(100%);
-            }
-        
+        .delete-btn:hover {
+            filter: invert(30%) sepia(90%) saturate(7000%) hue-rotate(350deg) brightness(90%) contrast(100%);
+        }
+
 
         &:hover .controls-overlay__item {
             opacity: 1;
             pointer-events: auto;
         }
     }
+
+    .slot-wrapper {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        display: inline-block;
+        line-height: 0;
+        max-width: 100%;
+        border-radius: 0 0 30px 30px;
+        overflow: hidden;
+
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        .art-info-tooltip {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: auto;
+            min-height: 70px;
+            background: rgba(0, 0, 0, 0.75);
+            color: #fff;
+            padding: 15px;
+            font-size: 14px;
+            gap: 8px;
+            pointer-events: none;
+            border-radius: 0 0 30px 30px;
+            word-wrap: break-word;
+            word-break: break-word;
+            white-space: normal;
+
+            opacity: 0;
+            transition: opacity 0.2s;
+        }
+
+        .art-title {
+            font-size: 16px;
+            font-weight: 600;
+            margin-bottom: 18px;
+        }
+
+        &:hover .art-info-tooltip {
+            opacity: 1;
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/components/Carousel/TemplateCard.tsx b/src/features/AdminPage/ArtGallery/components/Carousel/TemplateCard.tsx
index 8d6301b..e78a795 100644
--- a/src/features/AdminPage/ArtGallery/components/Carousel/TemplateCard.tsx
+++ b/src/features/AdminPage/ArtGallery/components/Carousel/TemplateCard.tsx
@@ -1,9 +1,14 @@
 import { useState } from 'react';
 import { TemplateRenderer } from '@components/ImageTemplates-grid/TemplateRenderer';
+
+import { useModalContext } from '@/app/stores/root-store';
 import './TemplateCard.styles.scss';
 
-export const TemplateCard = ({ template, attributes, isActive, listeners, onEdit,onDelete }: any) => {
+export const TemplateCard = ({ template, attributes, isActive, listeners, onEdit, onDelete }: any) => {
     const [isHovered, setIsHovered] = useState(false);
+    const { modalStore: { setModal }, imageTemplateStore } = useModalContext();
+
+
     console.log("template", template)
     return (
         <div
@@ -12,16 +17,6 @@ export const TemplateCard = ({ template, attributes, isActive, listeners, onEdit
             onMouseLeave={() => setIsHovered(false)}
         >
             {isHovered && (
-                // <button
-                //     className="edit-btn"
-                //     onClick={(e) => {
-                //         e.stopPropagation();
-                //         onEdit(template);
-                //     }}
-                // >
-                //     ✎
-                // </button>
-
                 <div className="controls-overlay__item">
                     <button
                         className="edit-btn"
@@ -34,17 +29,19 @@ export const TemplateCard = ({ template, attributes, isActive, listeners, onEdit
                         ✎
                     </button>
 
-                   <button 
-                   className="delete-btn"
+                    <button
+                        className="delete-btn"
                         onPointerDown={(e) => e.stopPropagation()}
                         onClick={(e) => {
                             e.stopPropagation();
                             e.nativeEvent.stopImmediatePropagation();
-                           onDelete(template.id);
+                            setModal('deleteImageTemplates', undefined, true, {
+                                onConfirm: () => onDelete(template.id)
+                            });
                         }}
                     >
                         🗑️
-                         </button>
+                    </button>
                 </div>
             )}
 
@@ -59,7 +56,21 @@ export const TemplateCard = ({ template, attributes, isActive, listeners, onEdit
                         const slotData = template.slots.find((s: any) => s.id === slot.id);
                         const image = slotData?.image;
 
-                        return image?.url ? <img src={image.url} alt="slot" /> : null;
+                        const art = image ? imageTemplateStore.getArtByImageId(image.id) : null;
+
+                        if (!image?.url) return null;
+                        return (
+                            <div className="slot-wrapper">
+                                <img src={image.url} alt="slot" />
+
+                                {art && (
+                                    <div className="art-info-tooltip">
+                                        <div className="art-title">{art.title}</div>
+                                        <div className="art-desc">{art.description}</div>
+                                    </div>
+                                )}
+                            </div>
+                        );
                     }}
                 />
             </div>
diff --git a/src/features/AdminPage/ArtGallery/components/TemplateSelector/TemplateSelector.tsx b/src/features/AdminPage/ArtGallery/components/TemplateSelector/TemplateSelector.tsx
deleted file mode 100644
index f9893dd..0000000
--- a/src/features/AdminPage/ArtGallery/components/TemplateSelector/TemplateSelector.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-// TemplateSelector.tsx
-const TEMPLATES = [
-  { id: 'layout-1', name: 'Стандарт', icon: '■■' }, // Тут будет SVG-схема
-  { id: 'layout-2', name: 'Три в ряд', icon: '■■■' },
-];
-
-export const TemplateSelector = ({ current, onSelect }) => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <div className="template-selector">
-      <button onClick={() => setIsOpen(!isOpen)}>Обрати шаблон</button>
-      
-      {isOpen && (
-        <div className="templates-popup">
-          {TEMPLATES.map(tmpl => (
-            <div 
-              key={tmpl.id} 
-              className="template-preview-card"
-              onClick={() => onSelect(tmpl.id)}
-            >
-              {/* Тут будет визуальное превью разметки */}
-              <div className="preview-icon">{tmpl.icon}</div>
-              <span>{tmpl.name}</span>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-};
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/components/Templates/TemplatesHeader.tsx b/src/features/AdminPage/ArtGallery/components/Templates/TemplatesHeader.tsx
index c5c3d58..9d21b4e 100644
--- a/src/features/AdminPage/ArtGallery/components/Templates/TemplatesHeader.tsx
+++ b/src/features/AdminPage/ArtGallery/components/Templates/TemplatesHeader.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Button } from 'antd';
 import './TemplatesHeader.styles.scss';
 import { TemplateHeaderProps } from '../../types/gallery.types';
diff --git a/src/features/AdminPage/ArtGallery/hooks/useArtGalleryDnD.ts b/src/features/AdminPage/ArtGallery/hooks/useArtGalleryDnD.ts
deleted file mode 100644
index 27cd5f9..0000000
--- a/src/features/AdminPage/ArtGallery/hooks/useArtGalleryDnD.ts
+++ /dev/null
@@ -1,120 +0,0 @@
-import { DragEndEvent } from '@dnd-kit/core';
-import { arrayMove } from '@dnd-kit/sortable';
-
-export const useArtGalleryDnD = ({
-  images,
-  setImages,
-  templateSlots,
-  setTemplateSlots,
-  imageTemplateStore
-}: any) => {
-  const handleDragEnd = (event: DragEndEvent) => {
-    const { active, over } = event;
-
-    if (!over) return;
-
-    const activeId = String(active.id);
-    const overId = String(over.id);
-
-    if (
-      activeId.startsWith('tmpl_') &&
-      overId.startsWith('tmpl_')
-    ) {
-      const rawActive = activeId.replace('tmpl_', '');
-      const rawOver = overId.replace('tmpl_', '');
-
-      const oldIndex =
-        imageTemplateStore.savedTemplates.findIndex(
-          (t: any) => String(t.id) === rawActive
-        );
-
-      const newIndex =
-        imageTemplateStore.savedTemplates.findIndex(
-          (t: any) => String(t.id) === rawOver
-        );
-
-      if (
-        oldIndex !== -1 &&
-        newIndex !== -1 &&
-        oldIndex !== newIndex
-      ) {
-        imageTemplateStore.reorderTemplates(
-          oldIndex,
-          newIndex
-        );
-      }
-
-      return;
-    }
-
-    if (
-      activeId.startsWith('img_') &&
-      overId.startsWith('img_')
-    ) {
-      const oldIndex = images.findIndex(
-        (i: any) => `img_${i.id}` === activeId
-      );
-
-      const newIndex = images.findIndex(
-        (i: any) => `img_${i.id}` === overId
-      );
-
-      if (oldIndex !== -1 && newIndex !== -1) {
-        setImages(arrayMove(images, oldIndex, newIndex));
-      }
-
-      return;
-    }
-
-    if (activeId.startsWith('img_')) {
-      const rawActiveId = activeId.replace('img_', '');
-
-      const dragged = images.find(
-        (i: any) => String(i.id) === rawActiveId
-      );
-
-      const isTargetSlot =
-        imageTemplateStore.activeTemplate?.slots.some(
-          (s: any) => String(s.id) === overId
-        );
-
-      if (isTargetSlot && dragged) {
-        setTemplateSlots((prev: any) => ({
-          ...prev,
-          [overId]: dragged
-        }));
-
-        setImages((prev: any) => prev.filter((img: any) => String(img.id) !== String(dragged.id)));
-      }
-
-      if (overId === 'gallery') {
-        const imgInSlot = Object.values(templateSlots).find(
-          (i: any) => i?.id === rawActiveId
-        );
-
-        if (imgInSlot) {
-          setTemplateSlots((prev: any) => {
-            const copy = { ...prev };
-
-            Object.keys(copy).forEach(k => {
-              if (copy[k]?.id === rawActiveId) {
-                copy[k] = null;
-              }
-            });
-
-            return copy;
-          });
-
-          setImages((prev: any) => [
-            ...prev,
-            imgInSlot
-          ]);
-        }
-      }
-    }
-  };
-
-  return {
-    handleDragEnd
-  };
-};
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/hooks/useTemplateEditor.ts b/src/features/AdminPage/ArtGallery/hooks/useTemplateEditor.ts
deleted file mode 100644
index a0ea269..0000000
--- a/src/features/AdminPage/ArtGallery/hooks/useTemplateEditor.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { useState } from 'react';
-
-export const useTemplateEditor = (
-  imageTemplateStore: any,
-  templateSlots: any,
-  setTemplateSlots: any
-) => {
-  const [editingTemplateId, setEditingTemplateId] =
-    useState<string | null>(null);
-
-  const handleEditTemplate = (template: any) => {
-    setEditingTemplateId(template.id);
-
-    const layout = imageTemplateStore.templates.find(
-      (t: any) => t.name === template.templateName
-    );
-
-    if (layout) {
-      imageTemplateStore.setActiveTemplate(layout);
-    }
-
-    setTemplateSlots({ ...template.slots });
-  };
-
-  const handleSave = () => {
-    if (editingTemplateId) {
-      imageTemplateStore.updateTemplate({
-        id: editingTemplateId,
-        slots: { ...templateSlots },
-        templateName:
-          imageTemplateStore.activeTemplate?.name || 'Updated',
-        templateId:
-          imageTemplateStore.activeTemplate?.id || 0,
-        isSavedToDb: false
-      });
-
-      setEditingTemplateId(null);
-    } else {
-      imageTemplateStore.addTemplate({
-        id: String(Date.now()),
-        slots: { ...templateSlots },
-        templateName:
-          imageTemplateStore.activeTemplate?.name || 'Unnamed',
-           templateId:
-          imageTemplateStore.activeTemplate?.id || 0,
-        isSavedToDb: false
-      });
-    }
-
-    setTemplateSlots({});
-  };
-
-  const saveToDb = async (templateToSave: any) => {
-    try {
-      imageTemplateStore.updateTemplateStatus(
-        templateToSave.id,
-        {
-          isSavedToDb: true
-        }
-      );
-    } catch (e) {
-      console.error(e);
-    }
-  };
-
-  return {
-    handleEditTemplate,
-    handleSave,
-    saveToDb
-  };
-};
-
-
diff --git a/src/features/AdminPage/ArtGallery/hooks/useTemplateSlots.ts b/src/features/AdminPage/ArtGallery/hooks/useTemplateSlots.ts
deleted file mode 100644
index a1d80df..0000000
--- a/src/features/AdminPage/ArtGallery/hooks/useTemplateSlots.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { ArtImage } from '@models/media/image.model';
-
-export const useTemplateSlots = (
-  templateSlots: Record<string, ArtImage | null>,
-  setTemplateSlots: React.Dispatch<
-    React.SetStateAction<Record<string, ArtImage | null>>
-  >,
-  setImages: React.Dispatch<React.SetStateAction<ArtImage[]>>
-) => {
-  const clearAllSlots = () => {
-    const returnedImages = Object.values(templateSlots).filter(
-      (img): img is ArtImage => img !== null
-    );
-
-    setImages(prev => [...prev, ...returnedImages]);
-    setTemplateSlots({});
-  };
-
-  const removeImageFromSlot = (slotId: string) => {
-    const image = templateSlots[slotId];
-
-    if (!image) return;
-
-    setImages(prev => [...prev, image]);
-
-    setTemplateSlots(prev => ({
-      ...prev,
-      [slotId]: null
-    }));
-  };
-
-  return {
-    clearAllSlots,
-    removeImageFromSlot
-  };
-};
\ No newline at end of file
diff --git a/src/features/AdminPage/ArtGallery/types/gallery.types.ts b/src/features/AdminPage/ArtGallery/types/gallery.types.ts
index 003f0ec..53f526b 100644
--- a/src/features/AdminPage/ArtGallery/types/gallery.types.ts
+++ b/src/features/AdminPage/ArtGallery/types/gallery.types.ts
@@ -1,34 +1,3 @@
-// export interface ArtImage {
-//   id: string;
-//   url: string;
-//   title?: string;
-//   description?: string;
-//   isPublished: boolean;
-//   offset: number;
-// }
-
-// export interface GalleryListProps {
-//   images: ArtImage[];
-//   onUpload: (file: File) => void;
-//   onDelete: (id: string) => void;
-//   onEdit: (image: ArtImage) => void;
-// }
-
-// export interface ImageCardProps {
-//   image: ArtImage;
-//   attributes: any; 
-//   listeners: any;
-// }
-
-// export interface SortableImageCardProps {
-//   image: ArtImage;
-//   onDelete: (id: string) => void;
-//   onEdit: (image: ArtImage) => void;
-//   isConfirming: boolean;
-//   onConfirmRequest: () => void;
-//   onCancelRequest: () => void;
-// }
-
 export interface DeleteConfirmationOverlayProps {
   isVisible: boolean;
   onConfirm: () => void;

From 80f3e813f745c7d10731212f2a47a7e762e2e620 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=86=D0=BD=D0=BD=D0=B0=20=D0=A8=D0=BF=D0=BE=D0=BD=D1=8C?=
 =?UTF-8?q?=D0=BA=D0=B0?= <inneta3@gmail.com>
Date: Tue, 16 Jun 2026 23:23:37 +0300
Subject: [PATCH 6/6] add google login

---
 .env                                          |  4 +-
 README.md                                     |  6 ++
 package.json                                  |  1 +
 src/app/api/user/user.api.ts                  | 58 ++++++++++---------
 .../common/constants/api-routes.constants.ts  |  1 +
 .../LoginPage/LoginPage.component.tsx         | 23 +++++++-
 src/global.d.ts                               |  2 +
 src/index.tsx                                 |  5 +-
 8 files changed, 69 insertions(+), 31 deletions(-)

diff --git a/.env b/.env
index 331448f..e57bb46 100644
--- a/.env
+++ b/.env
@@ -1,3 +1,5 @@
 REACT_APP_BACKEND_URL=https://localhost:5001/api
 REACT_APP_TEMPVAL=tempval
-REACT_APP_API_URL=https://localhost:5001/api
\ No newline at end of file
+REACT_APP_API_URL=https://localhost:5001/api
+
+REACT_APP_GOOGLE_CLIENT_ID=
\ No newline at end of file
diff --git a/README.md b/README.md
index 8faddbe..d53c906 100644
--- a/README.md
+++ b/README.md
@@ -209,3 +209,9 @@ Visit our <a href="https://streetcode.com.ua" target="_blank">*site*</a>, we wil
 
 - **[MIT license](http://opensource.org/licenses/mit-license.php)**
 - Copyright 2022 © <a href="https://softserve.academy/" target="_blank"> SoftServe IT Academy</a>.
+
+---
+## Create .env file in repository root example
+---
+
+GoogleAuth__ClientId=123721973387-7i3rs06c8iui5lrb805f22o0k2s6gk1o.apps.googleusercontent.com
\ No newline at end of file
diff --git a/package.json b/package.json
index 3fb0c8c..0e944be 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "@fortawesome/fontawesome-free": "^6.4.0",
     "@react-google-maps/api": "^2.18.1",
     "@react-hook/resize-observer": "^1.2.6",
+    "@react-oauth/google": "^0.13.5",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
diff --git a/src/app/api/user/user.api.ts b/src/app/api/user/user.api.ts
index aba34d5..b869c15 100644
--- a/src/app/api/user/user.api.ts
+++ b/src/app/api/user/user.api.ts
@@ -6,33 +6,39 @@ import {
     UserLoginRequest, UserLoginResponce,
 } from '@/models/user/user.model';
 
-    const UserApi = {
-        login: (loginParams: UserLoginRequest) =>
-            Agent.post<UserLoginResponce>(
-                API_ROUTES.USERS.LOGIN,
-                loginParams,
-            ),
+const UserApi = {
+    login: (loginParams: UserLoginRequest) =>
+        Agent.post<UserLoginResponce>(
+            API_ROUTES.USERS.LOGIN,
+            loginParams,
+        ),
 
-        refreshToken: (token: RefreshTokenRequest) =>
-            Agent.post<RefreshTokenResponce>(
-                API_ROUTES.USERS.REFRESH_TOKEN,
-                token,
-            ),
+    refreshToken: (token: RefreshTokenRequest) =>
+        Agent.post<RefreshTokenResponce>(
+            API_ROUTES.USERS.REFRESH_TOKEN,
+            token,
+        ),
 
-        adminLogin: (loginParams: UserLoginRequest) =>
-            Agent.post<UserLoginResponce>(
-                API_ROUTES.ADMIN_AUTHORIZATION.LOGIN,
-                loginParams,
-            ),
+    adminLogin: (loginParams: UserLoginRequest) =>
+        Agent.post<UserLoginResponce>(
+            API_ROUTES.ADMIN_AUTHORIZATION.LOGIN,
+            loginParams,
+        ),
 
-        adminRefreshToken: (token: RefreshTokenRequest) =>
-            Agent.post<RefreshTokenResponce>(
-                API_ROUTES.ADMIN_AUTHORIZATION.REFRESH_TOKEN,
-                token,
-            ),
-        adminLogout: () =>
-            Agent.post<void>(
-                API_ROUTES.ADMIN_AUTHORIZATION.LOGOUT, {},
-            ),
-    };
+    googleLogin: (body: { idToken: string }) =>
+        Agent.post<UserLoginResponce>(
+            API_ROUTES.ADMIN_AUTHORIZATION.GOOGLE_LOGIN,
+            body,
+        ),
+
+    adminRefreshToken: (token: RefreshTokenRequest) =>
+        Agent.post<RefreshTokenResponce>(
+            API_ROUTES.ADMIN_AUTHORIZATION.REFRESH_TOKEN,
+            token,
+        ),
+    adminLogout: () =>
+        Agent.post<void>(
+            API_ROUTES.ADMIN_AUTHORIZATION.LOGOUT, {},
+        ),
+};
 export default UserApi;
diff --git a/src/app/common/constants/api-routes.constants.ts b/src/app/common/constants/api-routes.constants.ts
index 1bef08f..41967dd 100644
--- a/src/app/common/constants/api-routes.constants.ts
+++ b/src/app/common/constants/api-routes.constants.ts
@@ -237,6 +237,7 @@ export const API_ROUTES = {
     },
     ADMIN_AUTHORIZATION: {
         LOGIN: 'auth/login',
+        GOOGLE_LOGIN: 'auth/google-login',
         REFRESH_TOKEN: 'auth/refresh-token',
         LOGOUT: 'auth/logout'
     },
diff --git a/src/features/AdminPage/LoginPage/LoginPage.component.tsx b/src/features/AdminPage/LoginPage/LoginPage.component.tsx
index 5958d78..2bb339a 100644
--- a/src/features/AdminPage/LoginPage/LoginPage.component.tsx
+++ b/src/features/AdminPage/LoginPage/LoginPage.component.tsx
@@ -1,4 +1,5 @@
 import './LoginPage.styles.scss';
+import { GoogleLogin } from '@react-oauth/google';
 
 import { useState } from 'react';
 import { Button, Checkbox, Form, Input, message } from 'antd';
@@ -100,9 +101,25 @@ const LoginPage = () => {
                         <span className="dividerLine" />
                     </div>
 
-                    <Button className="googleLoginBtn" disabled>
-                        Google
-                    </Button>
+                    <GoogleLogin
+                        onSuccess={async (credentialResponse) => {
+                            try {
+                                setIsLoading(true);
+                                const response = await UserApi.googleLogin({
+                                    idToken: credentialResponse.credential as string
+                                });
+                                userLoginStore.setUserLoginResponce(response, userLoginStore.refreshToken);
+                                navigate(FRONTEND_ROUTES.ADMIN.BASE);
+                            } catch (e) {
+                                message.error('Помилка авторизації через Google');
+                            } finally {
+                                setIsLoading(false);
+                            }
+                        }}
+                        onError={() => {
+                            message.error('Не вдалося увійти через Google');
+                        }}
+                    />
                 </Form>
             </div>
         </div>
diff --git a/src/global.d.ts b/src/global.d.ts
index 4cb2480..6d22799 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -7,5 +7,7 @@ declare const process: {
         readonly REACT_APP_ENVIRONMENT?: string;
         readonly REACT_APP_BUILD_SHA?: string;
         readonly REACT_APP_BUILD_NUMBER?: string;
+
+        readonly REACT_APP_GOOGLE_CLIENT_ID?: string;
     };
 };
diff --git a/src/index.tsx b/src/index.tsx
index 5aec473..2d58b93 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -6,6 +6,7 @@ import ReactDOM from 'react-dom/client';
 import ReactGA from 'react-ga4';
 import { RouterProvider } from 'react-router-dom';
 import router from '@app/router/Routes';
+import { GoogleOAuthProvider } from '@react-oauth/google';
 
 ReactGA.initialize('G-2RHY04JKG0');
 
@@ -14,6 +15,8 @@ const root = ReactDOM.createRoot(
 );
 root.render(
     <React.StrictMode>
-        <RouterProvider router={router} />
+       <GoogleOAuthProvider clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID!}>
+            <RouterProvider router={router} />
+        </GoogleOAuthProvider>
     </React.StrictMode>,
 );