diff --git a/src/components/App.jsx b/src/components/App.jsx
index e984360..2a2abe9 100644
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import Searchbar from './Searchbar/Searchbar'
-// import Modal from './Modal/Modal'
+ import Modal from './Modal/Modal'
 // import  Button  from './Button/Button';
  import ImageGallery from './ImageGallery/ImageGallery';
 //  import styled from 'styled-components'
@@ -18,10 +18,19 @@ import Searchbar from './Searchbar/Searchbar'
       currentPage: 1,
       error: null,
       isLoading: false,
+      // isShowModal: false,
     };
 
     componentDidMount;
 
+    state = {  }
+
+	// toggleModal = () => {
+	// 	this.setState((prev) => ({ isShowModal: !prev.isShowModal }))
+	// }
+
+
+
   componentDidUpdate(prevProps, prevState) {
     if (
       this.state.currentPage !== prevState.currentPage ||
@@ -79,11 +88,11 @@ render() {
      {/* <Button /> */}
        {/* <Loader /> */}
        
-{/*           
-       {showModal &&  <Modal onClose={this.toggleModal} > <h2>Modal Hallo</h2>
+       <Modal> </Modal>    
+       {/* {showModal &&  <Modal onClose={this.toggleModal} > <h2>Modal Hallo</h2>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, molestias assumenda aliquid incidunt corrupti a pariatur ratione rerum numquam alias omnis in non totam voluptatum quas voluptatem! Non, aspernatur? Suscipit!</p>
        <button type='button' onClick={this.toggleModal}>Close modal</button> 
-        </Modal> }    */}
+        </Modal> }     */}
      
      </Container>
    )
diff --git a/src/components/Modal/Modal.jsx b/src/components/Modal/Modal.jsx
index 53d1b52..6d732b6 100644
--- a/src/components/Modal/Modal.jsx
+++ b/src/components/Modal/Modal.jsx
@@ -1,78 +1,101 @@
+// import * as React from 'react';
 import React, { Component } from 'react'
-import css from './Modal.module.css'
-import {createPortal} from 'react-dom';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import Modal from '@mui/material/Modal';
 
+const style = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 400,
+  bgcolor: 'background.paper',
+  border: '2px solid #000',
+  boxShadow: 24,
+  p: 4,
+};
 
+export default function BasicModal() {
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
 
-const modalRoot= document.querySelector('#modal-root');
-export default class Modal extends Component {
+  return (
+    <div>
+      <Button onClick={handleOpen}>Open modal</Button>
+      <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+      >
+        <Box sx={style}>
+          <Typography id="modal-modal-title" variant="h6" component="h2">
+          <img src="https://cdn.pixabay.com/user/2018/06/27/01-23-02-27_250x250.jpg" alt="Image" style={{ width: '100%' }} />
+            Text in a modal
+          </Typography>
+          <Typography id="modal-modal-description" sx={{ mt: 2 }}>
+            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+          </Typography>
+        </Box>
+      </Modal>
+    </div>
+  );
+}
+
+
+
+
+// import React, { Component } from 'react'
+// import css from './Modal.module.css'
+// import {createPortal} from 'react-dom';
+
+
+
+// const modalRoot= document.querySelector('#modal-root');
+// export default class Modal extends Component {
 
  
-	componentDidMount() {
-        console.log(' modal DidMount');
+// 	componentDidMount() {
+//         console.log(' modal DidMount');
 		
-        document.addEventListener('keydown', this.handleKeyEsc);  
-        };
+//         document.addEventListener('keydown', this.handleKeyEsc);  
+//         };
     
 	
-componentWillUnmount() {
-        console.log('modal WillUnmount ');
-		document.removeEventListener('keydown', this.handleKeyEsc)
-	}
+// componentWillUnmount() {
+//         console.log('modal WillUnmount ');
+// 		document.removeEventListener('keydown', this.handleKeyEsc)
+// 	}
 	
- handleKeyEsc = (e) => {
-		if (e.code === 'Escape') this.props.onClose()
-		// console.log('Esc');
-	}
-	handlBackdropClick= event =>{
-        console.log('BackdropClick');
-        if(event.target===event.currentTarget) {
-            this.props.onClose();
-        }
-    }
+//  handleKeyEsc = (e) => {
+// 		if (e.code === 'Escape') this.props.onClose()
+// 		// console.log('Esc');
+// 	}
+// 	handlBackdropClick= event =>{
+//         console.log('BackdropClick');
+//         if(event.target===event.currentTarget) {
+//             this.props.onClose();
+//         }
+//     }
  	
-// 		const { children, toggleModal } = this.props
-render() {
-    return createPortal(
-        <div className={css.modalBackdrop} onClick={this.handlBackdropClick}>
-<div className={css.modalContent}>{this.props.children} </div> 
-</div>,
-modalRoot,
-    );
-}
-
-}
-
+// // 		const { children, toggleModal } = this.props
+// render() {
+//     return createPortal(
+//         <div className={css.modalBackdrop} onClick={this.handlBackdropClick}>
+// <div className={css.modalContent}>{this.props.children} </div> 
+// </div>,
+// modalRoot,
+//     );
+// }
 
+// }
 
 
 
 
 
 
-// const Modal = ({ children}) => {
-// 	return (
-// 		<div
-// 			className='modal fade show'
-// 			style={{ display: 'block', backdropFilter: 'blur(5px)' }}
-// 			// onClick={toggleModal}
-// 		>
-// 			<div className='modal-dialog'>
-// 				<div className='modal-content'>
-// 					<div className='modal-header'>
-// 						<h5 className='modal-title'> Modal</h5>
-// 						<button
-// 							type='button'
-// 							className='btn-close'
-// 							aria-label='Close'
-// 							// onClick={toggleModal}
-// 						></button>
-// 					</div>
-// 					<div className='modal-body'>{children}</div>
-// 				</div>
-// 			</div>
-// 		</div>
-// 	)
-// }
 
-// export default Modal
\ No newline at end of file
diff --git a/src/components/ModalOld/Modal.jsx b/src/components/ModalOld/Modal.jsx
new file mode 100644
index 0000000..53d1b52
--- /dev/null
+++ b/src/components/ModalOld/Modal.jsx
@@ -0,0 +1,78 @@
+import React, { Component } from 'react'
+import css from './Modal.module.css'
+import {createPortal} from 'react-dom';
+
+
+
+const modalRoot= document.querySelector('#modal-root');
+export default class Modal extends Component {
+
+ 
+	componentDidMount() {
+        console.log(' modal DidMount');
+		
+        document.addEventListener('keydown', this.handleKeyEsc);  
+        };
+    
+	
+componentWillUnmount() {
+        console.log('modal WillUnmount ');
+		document.removeEventListener('keydown', this.handleKeyEsc)
+	}
+	
+ handleKeyEsc = (e) => {
+		if (e.code === 'Escape') this.props.onClose()
+		// console.log('Esc');
+	}
+	handlBackdropClick= event =>{
+        console.log('BackdropClick');
+        if(event.target===event.currentTarget) {
+            this.props.onClose();
+        }
+    }
+ 	
+// 		const { children, toggleModal } = this.props
+render() {
+    return createPortal(
+        <div className={css.modalBackdrop} onClick={this.handlBackdropClick}>
+<div className={css.modalContent}>{this.props.children} </div> 
+</div>,
+modalRoot,
+    );
+}
+
+}
+
+
+
+
+
+
+
+
+// const Modal = ({ children}) => {
+// 	return (
+// 		<div
+// 			className='modal fade show'
+// 			style={{ display: 'block', backdropFilter: 'blur(5px)' }}
+// 			// onClick={toggleModal}
+// 		>
+// 			<div className='modal-dialog'>
+// 				<div className='modal-content'>
+// 					<div className='modal-header'>
+// 						<h5 className='modal-title'> Modal</h5>
+// 						<button
+// 							type='button'
+// 							className='btn-close'
+// 							aria-label='Close'
+// 							// onClick={toggleModal}
+// 						></button>
+// 					</div>
+// 					<div className='modal-body'>{children}</div>
+// 				</div>
+// 			</div>
+// 		</div>
+// 	)
+// }
+
+// export default Modal
\ No newline at end of file
diff --git a/src/components/ModalOld/Modal.module.css b/src/components/ModalOld/Modal.module.css
new file mode 100644
index 0000000..9da0a2a
--- /dev/null
+++ b/src/components/ModalOld/Modal.module.css
@@ -0,0 +1,23 @@
+.modalBackdrop{
+   position: fixed; 
+   top: 25%;
+   left: 25%;
+   width:50% ;
+   height: 50%;
+   background-color: rgb(195, 195, 222);
+   border-radius: 5px;
+   border: 0.5px solid ;
+   border-color: brown;
+   /* z-index: 999; */
+}
+
+.modalContent {
+    position: absolute;
+    top:50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: white;
+    /* max-width: 600px;
+  min-height: 300px;
+  border-radius: 5px; */
+}
\ No newline at end of file
diff --git a/src/components/Modal/Modal.styled.jsx b/src/components/ModalOld/Modal.styled.jsx
similarity index 100%
rename from src/components/Modal/Modal.styled.jsx
rename to src/components/ModalOld/Modal.styled.jsx