diff --git a/src/components/AddAnotherCardBtn/AddAnotherCardBtn.jsx b/src/components/AddAnotherCardBtn/AddAnotherCardBtn.jsx
index f5a26e2..e44c4fe 100644
--- a/src/components/AddAnotherCardBtn/AddAnotherCardBtn.jsx
+++ b/src/components/AddAnotherCardBtn/AddAnotherCardBtn.jsx
@@ -1,10 +1,22 @@
 import css from "./AddAnotherCardBtn.module.css";
 import svg from "../../img/icons.svg";
+import { useState } from "react";
+import { CreateCard } from "../CreateCardModal/CreateCardModal.jsx"
 
 export const AddAnotherCardBtn = () => {
+    const [isOpen, setIsOpen] = useState(false)
+    
+    const openModal = () => {
+        setIsOpen(true)
+    }
+        
+    const closeModal = () => {
+        setIsOpen(false)
+    }
+    
   return (
     <div className={css.container}>
-      <button className={css.btn}>
+      <button className={css.btn} onClick={openModal}>
         <div className={css.iconBox}>
           <svg className={css.icon} width="14px" height="14px">
             <use href={svg + "#icon-plus"}></use>
@@ -12,6 +24,8 @@ export const AddAnotherCardBtn = () => {
         </div>
         Add another card
       </button>
+    {isOpen &&
+        <CreateCard isOpen={isOpen} isClose={closeModal} />}
     </div>
   );
 };
diff --git a/src/components/AddColumnBtn/AddColumnBtn.jsx b/src/components/AddColumnBtn/AddColumnBtn.jsx
index 60c7154..f3789ff 100644
--- a/src/components/AddColumnBtn/AddColumnBtn.jsx
+++ b/src/components/AddColumnBtn/AddColumnBtn.jsx
@@ -1,9 +1,24 @@
+import { CreateColumn } from "../CreateColumnModal/CreateColumnModal";
 import css from "./AddColumnBtn.module.css";
+import { useState } from "react";
 
 export const AddColumnBtn = () => {
+  const [isOpen, setIsOpen] = useState(true);
+
+  function openColumnCreateModal() {
+    setIsOpen(true)
+  }
+
+  function closeColumnCreateModal() {
+    setIsOpen(false)
+  }
+
   return (
     <div>
-      <button className={css.btn}>Add another column</button>
+      <button className={css.btn} onClick={openColumnCreateModal}>Add another column</button>
+      {isOpen && (
+        <CreateColumn isOpen={isOpen} isClose={closeColumnCreateModal} />
+      )}
     </div>
   );
 };
\ No newline at end of file
diff --git a/src/components/CreateCardModal/CreateCardModal.jsx b/src/components/CreateCardModal/CreateCardModal.jsx
new file mode 100644
index 0000000..2def5bf
--- /dev/null
+++ b/src/components/CreateCardModal/CreateCardModal.jsx
@@ -0,0 +1,67 @@
+import Modal from "react-modal";
+import css from "./CreateCard.module.css";
+import * as Yup from 'yup';
+import { Form, Formik, Field } from "formik";
+import svg from "../../img/icons.svg";
+
+Modal.setAppElement('#root');
+
+export const CreateCard = ({ isOpen, isClose }) => {
+    const columnModalValidation = Yup.object().shape({
+        columnname: Yup.string().min(3, 'Too short!').max(20, 'Too long!').required('Required!')
+    });
+
+    return (
+    <>
+    <Modal isOpen={isOpen} onRequestClose={isClose} className={css.createCardModal} overlayClassName={css.createCardModalOverlay}>
+    <button className={css.createCardModalCloseBtn} type="button" onClick={isClose}>
+        <svg className={css.createCardModalIcon} width="18px" height="18px">
+          <use href={svg + "#x-close"}></use>
+        </svg>
+      </button>
+        <div className={css.createCardModalContainer}>
+            <h1 className={css.createCardModalText}>Add card</h1>
+            <Formik
+                initialValues={{ cardtitle: '', carddescription: ''}}
+                validationSchema={columnModalValidation}
+                // onSubmit={(values, actions) => {}}
+                    >
+                    <Form autoComplete="off" className={css.createCardModalForm}>
+                        <Field type='text' name='cardtitle' className={css.createCardModalInput1} placeholder="Title" />
+                        <Field as='textarea' name='carddescription' className={css.createCardModalInput2} placeholder="Description" />
+                        <label>Label color
+                            <div className={css.createCardModalRadioContainer}>
+                                <div>
+                                    <Field type="radio" className={css.createCardModalRadio1} id="createCardModalRadio1" name="color" />
+                                    <label htmlFor="createCardModalRadio1" className="radio-label"></label>
+                                </div>
+                                <div>
+                                    <Field type="radio" className={css.createCardModalRadio2} id="createCardModalRadio2" name="color" />
+                                    <label htmlFor="createCardModalRadio2" className="radio-label"></label>
+                                </div>
+                                <div>
+                                    <Field type="radio" className={css.createCardModalRadio3} id="createCardModalRadio3" name="color" />
+                                    <label htmlFor="createCardModalRadio3" className="radio-label"></label>
+                                </div>
+                                <div>
+                                    <Field type="radio" className={css.createCardModalRadio4} id="createCardModalRadio4" name="color" />
+                                    <label htmlFor="createCardModalRadio4" className="radio-label"></label>
+                                </div>
+                            </div>
+                        </label>
+                        
+                        <button type="submit" className={css.createCardModalSubmit} onClick={() => isClose()}>
+                            <span className={css.createCardModalSpan}>
+                                <svg className={css.createCardModalAddIcon} width="14px" height="14px">
+                                    <use href={svg + "#icon-plus"}></use>
+                                </svg>
+                            </span>
+                        Add</button>
+                    </Form>
+            </Formik>
+        </div>
+
+    </Modal>
+    </>
+)
+}
\ No newline at end of file
diff --git a/src/components/CreateCardModal/CreateCardModal.module.css b/src/components/CreateCardModal/CreateCardModal.module.css
new file mode 100644
index 0000000..f6075b1
--- /dev/null
+++ b/src/components/CreateCardModal/CreateCardModal.module.css
@@ -0,0 +1,185 @@
+.createCardModalRadioContainer {
+    display: flex;
+    gap: 10px;
+    width: 80px;
+}
+
+.createCardModalRadio1,
+.createCardModalRadio2,
+.createCardModalRadio3,
+.createCardModalRadio4 {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+}
+
+.createCardModalRadio1 + label::before,
+.createCardModalRadio2 + label::before,
+.createCardModalRadio3 + label::before,
+.createCardModalRadio4 + label::before {
+    content: '';
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background-color: #000000; 
+    transition: border-color 0.3s, background-color 0.3s;
+    cursor: pointer;
+}
+
+.createCardModalRadio1 + label::before {
+    background-color: #8FA1D0;
+}
+
+.createCardModalRadio2 + label::before {
+    background-color: #E09CB5;
+}
+
+.createCardModalRadio3 + label::before {
+    background-color: #BEDBB0;
+}
+
+.createCardModalRadio4 + label::before {
+    background-color: #FFFFFF4D;
+}
+
+.createCardModalRadio1:focus + label::before {
+    border: 1px solid #8FA1D0;
+}
+.createCardModalRadio2:focus + label::before {
+    border: 1px solid #E09CB5;
+}
+.createCardModalRadio3:focus + label::before {
+    border: 1px solid #BEDBB0;
+}
+.createCardModalRadio4:focus + label::before {
+    border: 1px solid #FFFFFF4D;
+}  
+ 
+.createCardModalCloseBtn {
+    position: fixed;
+    top: 14px;
+    right: 14px;
+    background-color: #000000;
+    border: none;
+    padding: 0;
+}
+
+.createCardModalIcon {
+    fill: none;
+    cursor: pointer;
+    stroke: rgba(255, 255, 255, 1);
+}
+
+.createCardModal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 335px;
+    height: 522px;
+    background: #000000;
+    border: 1px solid #bedbb080;
+    border-radius: 20px;
+}
+
+.createCardModalOverlay {
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.419);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.createCardModalContainer {
+    margin: 24px;
+}
+
+.createCardModalText {
+    font-size: 18px;
+    font-weight: 500;
+    line-height: 27px;
+    letter-spacing: -0.02em;
+    text-align: left;
+    margin-bottom: 24px;
+}
+
+.createCardModalForm {
+    display: flex;
+    flex-direction: column;
+}
+
+.createCardModalInput1 {
+    background: #1F1F1F;
+    border: 1px solid #BEDBB0;
+    width: 287px;
+    height: 49px;
+    padding: 14px;
+    border-radius: 8px;
+    margin-bottom: 24px;
+    outline: none;
+    opacity: 40%;
+    color: #fff;
+}
+
+.createCardModalInput2 {
+    background: #1F1F1F;
+    border: 1px solid #BEDBB0;
+    width: 287px;
+    height: 154px;
+    padding: 14px;
+    border-radius: 8px;
+    margin-bottom: 24px;
+    outline: none;
+    opacity: 40%;
+    color: #fff;
+    resize: none;
+    box-sizing: border-box;
+    vertical-align: top;
+    word-wrap: break-word;
+}
+
+.createCardModalInput1:hover,
+.createCardModalInput1:focus,
+.createCardModalInput2:hover,
+.createCardModalInput2:focus {
+    opacity: 100%;
+}
+
+.createCardModalRadio1 {
+    margin-right: 5px;
+    color: #8FA1D0;
+}
+
+.createCardModalSubmit {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px 16px;
+    font-size: 14px;
+    font-weight: 500;
+    background-color: #bedbb0;
+    color: rgba(22, 22, 22, 1);
+    border: none;
+    width: 287px;
+    height: 49px;
+    border-radius: 8px;
+    cursor: pointer;
+}
+
+.createCardModalSpan {
+    width: 28px;
+    height: 28px;
+    background-color: #121212;
+    position: relative;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 8px;
+}
+
+.createCardModalAddIcon {
+    stroke: white;
+}
\ No newline at end of file
diff --git a/src/components/CreateColumnModal/CreateColumnModal.jsx b/src/components/CreateColumnModal/CreateColumnModal.jsx
new file mode 100644
index 0000000..fa432c2
--- /dev/null
+++ b/src/components/CreateColumnModal/CreateColumnModal.jsx
@@ -0,0 +1,46 @@
+import Modal from "react-modal";
+import css from "./CreateColumnModal.module.css";
+import * as Yup from 'yup';
+import { Form, Formik, Field } from "formik";
+import svg from "../../img/icons.svg";
+
+Modal.setAppElement('#root');
+
+export const CreateColumn = ({ isOpen, isClose }) => {
+    const columnModalValidation = Yup.object().shape({
+        columnname: Yup.string().min(3, 'Too short!').max(20, 'Too long!').required('Required!')
+    });
+
+
+    return (
+    <>
+    <Modal isOpen={isOpen} onRequestClose={() => isClose()} className={css.createColumnModal} overlayClassName={css.createColumnModalOverlay}>
+    <button className={css.createColumnModalCloseBtn} type="button" onClick={isClose}>
+        <svg className={css.createColumnModalIcon} width="18px" height="18px">
+          <use href={svg + "#x-close"}></use>
+        </svg>
+      </button>
+        <div className={css.createColumnModalContainer}>
+            <h1 className={css.createColumnModalText}>Add column</h1>
+            <Formik
+                initialValues={{ columnname: ''}}
+                validationSchema={columnModalValidation}
+                portalClassName="createColumnModalContainer"
+                // onSubmit={(values, actions) => {}}
+                >
+                    <Form autoComplete="off" className={css.createColumnModalForm}>
+                        <Field type='text' name='columnname' className={css.createColumnModalInput} placeholder="Title" />
+                        <button type="submit" className={css.createColumnModalSubmit} onClick={() => isClose()}>
+                            <span className={css.createColumnModalSpan}>
+                                <svg className={css.createColumnModalAddIcon} width="14px" height="14px">
+                                    <use href={svg + "#icon-plus"}></use>
+                                </svg>
+                            </span>
+                        Add</button>
+                    </Form>
+            </Formik>
+        </div>
+    </Modal>
+    </>
+)
+}
\ No newline at end of file
diff --git a/src/components/CreateColumnModal/CreateColumnModal.module.css b/src/components/CreateColumnModal/CreateColumnModal.module.css
new file mode 100644
index 0000000..0378e8c
--- /dev/null
+++ b/src/components/CreateColumnModal/CreateColumnModal.module.css
@@ -0,0 +1,106 @@
+.createColumnModalCloseBtn {
+    position: fixed;
+    top: 14px;
+    right: 14px;
+    background-color: #000000;
+    border: none;
+    padding: 0;
+}
+
+.createColumnModalIcon {
+    fill: none;
+    cursor: pointer;
+    stroke: rgba(255, 255, 255, 1);
+}
+
+.createColumnModal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 335px;
+    height: 221px;
+    background: #000000;
+    border: 1px solid #bedbb080;
+    border-radius: 20px;
+}
+
+.createColumnModalOverlay {
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.419);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.createColumnModalContainer {
+    margin: 24px;
+}
+
+.createColumnModalForm {
+    display: flex;
+    flex-direction: column;
+}
+
+.createColumnModalInput {
+    background: #1F1F1F;
+    border: 1px solid #BEDBB0;
+    width: 287px;
+    height: 49px;
+    top: 75px;
+    left: 24px;
+    padding: 14px;
+    gap: 0px;
+    border-radius: 8px;
+    margin-bottom: 24px;
+    outline: none;
+    opacity: 40%;
+    color: #fff;
+}
+
+.createColumnModalInput:hover,
+.createColumnModalInput:focus {
+    opacity: 100%;
+}
+
+.createColumnModalText {
+    font-size: 18px;
+    font-weight: 500;
+    line-height: 27px;
+    letter-spacing: -0.02em;
+    text-align: left;
+    font-family: "Poppins", sans-serif;
+}
+
+.createColumnModalSubmit {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px 16px;
+    font-size: 14px;
+    font-weight: 500;
+    background-color: #bedbb0;
+    color: rgba(22, 22, 22, 1);
+    border: none;
+    width: 287px;
+    height: 49px;
+    border-radius: 8px;
+    cursor: pointer;
+}
+
+.createColumnModalSpan {
+    width: 28px;
+    height: 28px;
+    background-color: #121212;
+    position: relative;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 8px;
+}
+
+.createColumnModalAddIcon {
+    stroke: white;
+}
\ No newline at end of file
diff --git a/src/components/EditCardModal/EditCardModal.jsx b/src/components/EditCardModal/EditCardModal.jsx
new file mode 100644
index 0000000..80db8b3
--- /dev/null
+++ b/src/components/EditCardModal/EditCardModal.jsx
@@ -0,0 +1,67 @@
+import Modal from "react-modal";
+import css from "./EditCardModal.module.css";
+import * as Yup from 'yup';
+import { Form, Formik, Field } from "formik";
+import svg from "../../img/icons.svg";
+
+Modal.setAppElement('#root');
+
+export const EditCard = ({ isOpen, isClose }) => {
+    const columnModalValidation = Yup.object().shape({
+        columnname: Yup.string().min(3, 'Too short!').max(20, 'Too long!').required('Required!')
+    });
+
+    return (
+    <>
+    <Modal isOpen={isOpen} onRequestClose={isClose} className={css.editCardModal} overlayClassName={css.editCardModalOverlay}>
+    <button className={css.editCardModalCloseBtn} type="button" onClick={isClose}>
+        <svg className={css.editCardModalIcon} width="18px" height="18px">
+          <use href={svg + "#x-close"}></use>
+        </svg>
+      </button>
+        <div className={css.editCardModalContainer}>
+            <h1 className={css.editCardModalText}>Edit card</h1>
+            <Formik
+                initialValues={{ cardtitle: '', carddescription: ''}}
+                validationSchema={columnModalValidation}
+                // onSubmit={(values, actions) => {}}
+                    >
+                    <Form autoComplete="off" className={css.editCardModalForm}>
+                        <Field type='text' name='cardtitle' className={css.editCardModalInput1} placeholder="Title" />
+                        <Field as='textarea' name='carddescription' className={css.editCardModalInput2} placeholder="Description" />
+                        <label>Label color
+                            <div className={css.editCardModalRadioContainer}>
+                                <div>
+                                    <Field type="radio" value="Low" className={css.editCardModalRadio1} id="editCardModalRadio1" name="color" />
+                                    <label htmlFor="editCardModalRadio1" className="radio-label"></label>
+                                </div>
+                                <div>
+                                    <Field type="radio" value="Medium" className={css.editCardModalRadio2} id="editCardModalRadio2" name="color" />
+                                    <label htmlFor="editCardModalRadio2" className="radio-label"></label>
+                                </div>
+                                <div>
+                                    <Field type="radio" value="High" className={css.editCardModalRadio3} id="editCardModalRadio3" name="color" />
+                                    <label htmlFor="editCardModalRadio3" className="radio-label"></label>
+                                </div>
+                                <div>
+                                    <Field type="radio" value="Without priority" className={css.editCardModalRadio4} id="editCardModalRadio4" name="color" />
+                                    <label htmlFor="editCardModalRadio4" className="radio-label"></label>
+                                </div>
+                            </div>
+                        </label>
+                        
+                        <button type="submit" className={css.editCardModalSubmit} onClick={() => isClose()}>
+                            <span className={css.editCardModalSpan}>
+                                <svg className={css.editCardModalAddIcon} width="14px" height="14px">
+                                    <use href={svg + "#icon-plus"}></use>
+                                </svg>
+                            </span>
+                        Edit</button>
+                    </Form>
+            </Formik>
+        </div>
+
+    </Modal>
+    </>
+)
+}
\ No newline at end of file
diff --git a/src/components/EditCardModal/EditCardModal.module.css b/src/components/EditCardModal/EditCardModal.module.css
new file mode 100644
index 0000000..37f3891
--- /dev/null
+++ b/src/components/EditCardModal/EditCardModal.module.css
@@ -0,0 +1,185 @@
+.editCardModalRadioContainer {
+    display: flex;
+    gap: 10px;
+    width: 80px;
+}
+
+.editCardModalRadio1,
+.editCardModalRadio2,
+.editCardModalRadio3,
+.editCardModalRadio4 {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+}
+
+.editCardModalRadio1 + label::before,
+.editCardModalRadio2 + label::before,
+.editCardModalRadio3 + label::before,
+.editCardModalRadio4 + label::before {
+    content: '';
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background-color: #000000; 
+    transition: border-color 0.3s, background-color 0.3s;
+    cursor: pointer;
+}
+
+.editCardModalRadio1 + label::before {
+    background-color: #8FA1D0;
+}
+
+.editCardModalRadio2 + label::before {
+    background-color: #E09CB5;
+}
+
+.editCardModalRadio3 + label::before {
+    background-color: #BEDBB0;
+}
+
+.editCardModalRadio4 + label::before {
+    background-color: #FFFFFF4D;
+}
+
+.editCardModalRadio1:focus + label::before {
+    border: 1px solid #8FA1D0;
+}
+.editCardModalRadio2:focus + label::before {
+    border: 1px solid #E09CB5;
+}
+.editCardModalRadio3:focus + label::before {
+    border: 1px solid #BEDBB0;
+}
+.editCardModalRadio4:focus + label::before {
+    border: 1px solid #FFFFFF4D;
+}  
+ 
+.editCardModalCloseBtn {
+    position: fixed;
+    top: 14px;
+    right: 14px;
+    background-color: #000000;
+    border: none;
+    padding: 0;
+}
+
+.editCardModalIcon {
+    fill: none;
+    cursor: pointer;
+    stroke: rgba(255, 255, 255, 1);
+}
+
+.editCardModal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 335px;
+    height: 522px;
+    background: #000000;
+    border: 1px solid #bedbb080;
+    border-radius: 20px;
+}
+
+.editCardModalOverlay {
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.419);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.editCardModalContainer {
+    margin: 24px;
+}
+
+.editCardModalText {
+    font-size: 18px;
+    font-weight: 500;
+    line-height: 27px;
+    letter-spacing: -0.02em;
+    text-align: left;
+    margin-bottom: 24px;
+}
+
+.editCardModalForm {
+    display: flex;
+    flex-direction: column;
+}
+
+.editCardModalInput1 {
+    background: #1F1F1F;
+    border: 1px solid #BEDBB0;
+    width: 287px;
+    height: 49px;
+    padding: 14px;
+    border-radius: 8px;
+    margin-bottom: 24px;
+    outline: none;
+    opacity: 40%;
+    color: #fff;
+}
+
+.editCardModalInput2 {
+    background: #1F1F1F;
+    border: 1px solid #BEDBB0;
+    width: 287px;
+    height: 154px;
+    padding: 14px;
+    border-radius: 8px;
+    margin-bottom: 24px;
+    outline: none;
+    opacity: 40%;
+    color: #fff;
+    resize: none;
+    box-sizing: border-box;
+    vertical-align: top;
+    word-wrap: break-word;
+}
+
+.editCardModalInput1:hover,
+.editCardModalInput1:focus,
+.editCardModalInput2:hover,
+.editCardModalInput2:focus {
+    opacity: 100%;
+}
+
+.editCardModalRadio1 {
+    margin-right: 5px;
+    color: #8FA1D0;
+}
+
+.editCardModalSubmit {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px 16px;
+    font-size: 14px;
+    font-weight: 500;
+    background-color: #bedbb0;
+    color: rgba(22, 22, 22, 1);
+    border: none;
+    width: 287px;
+    height: 49px;
+    border-radius: 8px;
+    cursor: pointer;
+}
+
+.editCardModalSpan {
+    width: 28px;
+    height: 28px;
+    background-color: #121212;
+    position: relative;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 8px;
+}
+
+.editCardModalAddIcon {
+    stroke: white;
+}
\ No newline at end of file
diff --git a/src/components/EditColumnModal/EditColumnModal.jsx b/src/components/EditColumnModal/EditColumnModal.jsx
new file mode 100644
index 0000000..1f193d2
--- /dev/null
+++ b/src/components/EditColumnModal/EditColumnModal.jsx
@@ -0,0 +1,46 @@
+import Modal from "react-modal";
+import css from "EditColumn.module.css";
+import * as Yup from 'yup';
+import { Form, Formik, Field } from "formik";
+import svg from "../../img/icons.svg";
+
+Modal.setAppElement('#root');
+
+export const EditColumn = ({ isOpen, isClose, title }) => {
+    const columnModalValidation = Yup.object().shape({
+        columnname: Yup.string().min(3, 'Too short!').max(20, 'Too long!').required('Required!')
+    });
+
+
+    return (
+    <>
+    <Modal isOpen={isOpen} onRequestClose={() => isClose()} className={css.editColumnModal} overlayClassName={css.editColumnModalOverlay}>
+    <button className={css.editColumnModalCloseBtn} type="button" onClick={isClose}>
+        <svg className={css.editColumnModalIcon} width="18px" height="18px">
+          <use href={svg + "#x-close"}></use>
+        </svg>
+      </button>
+        <div className={css.editColumnModalContainer}>
+            <h1 className={css.editColumnModalText}>Edit column</h1>
+            <Formik
+                initialValues={{ columnname: title }}
+                validationSchema={columnModalValidation}
+                portalClassName="createColumnModalContainer"
+                // onSubmit={(values, actions) => {}}
+                >
+                    <Form autoComplete="off" className={css.editColumnModalForm}>
+                        <Field type='text' name='columnname' className={css.editColumnModalInput} placeholder="Title" />
+                        <button type="submit" className={css.editColumnModalSubmit} onClick={() => isClose()}>
+                            <span className={css.editColumnModalSpan}>
+                                <svg className={css.editColumnModalAddIcon} width="14px" height="14px">
+                                    <use href={svg + "#icon-plus"}></use>
+                                </svg>
+                            </span>
+                        Add</button>
+                    </Form>
+            </Formik>
+        </div>
+    </Modal>
+    </>
+)
+}
\ No newline at end of file
diff --git a/src/components/EditColumnModal/EditColumnModal.module.css b/src/components/EditColumnModal/EditColumnModal.module.css
new file mode 100644
index 0000000..e32431a
--- /dev/null
+++ b/src/components/EditColumnModal/EditColumnModal.module.css
@@ -0,0 +1,122 @@
+.editColumnModalCloseBtn {
+    position: fixed;
+    top: 14px;
+    right: 14px;
+    background-color: #000000;
+    border: none;
+    padding: 0;
+}
+
+.editColumnModalIcon {
+    fill: none;
+    cursor: pointer;
+    stroke: rgba(255, 255, 255, 1);
+}
+
+.editColumnModal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 335px;
+    height: 221px;
+    background: #000000;
+    border: 1px solid #bedbb080;
+    border-radius: 20px;
+}
+
+.editColumnModalOverlay {
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.419);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.editColumnModalContainer {
+    margin: 24px;
+}
+
+.editColumnModalForm {
+    display: flex;
+    flex-direction: column;
+}
+
+.editColumnModalInput {
+    background: #1F1F1F;
+    border: 1px solid #BEDBB0;
+    width: 287px;
+    height: 49px;
+    top: 75px;
+    left: 24px;
+    padding: 14px;
+    gap: 0px;
+    border-radius: 8px;
+    margin-bottom: 24px;
+    outline: none;
+    opacity: 40%;
+    color: #fff;
+}
+
+.editColumnModalInput:hover,
+.editColumnModalInput:focus {
+    opacity: 100%;
+}
+
+.editColumnModalText {
+    font-size: 18px;
+    font-weight: 500;
+    line-height: 27px;
+    letter-spacing: -0.02em;
+    text-align: left;
+    font-family: "Poppins", sans-serif;
+}
+
+.editColumnModalSubmit {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px 16px;
+    font-size: 14px;
+    font-weight: 500;
+    background-color: #bedbb0;
+    color: rgba(22, 22, 22, 1);
+    border: none;
+    width: 287px;
+    height: 49px;
+    border-radius: 8px;
+    cursor: pointer;
+}
+
+.editColumnModalSubmitAddBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px 16px;
+    font-size: 14px;
+    font-weight: 500;
+    background-color: #bedbb0;
+    color: rgba(22, 22, 22, 1);
+    border: none;
+    width: 287px;
+    height: 49px;
+    border-radius: 8px;
+    cursor: pointer;
+}
+
+  .editColumnModalSpan {
+    width: 28px;
+    height: 28px;
+    background-color: #121212;
+    position: relative;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 8px;
+}
+
+.editColumnModalAddIcon {
+    stroke: white;
+}
\ No newline at end of file
diff --git a/src/components/Logo/Logo.jsx b/src/components/Logo/Logo.jsx
index 9c8584d..87b53df 100644
--- a/src/components/Logo/Logo.jsx
+++ b/src/components/Logo/Logo.jsx
@@ -1,4 +1,4 @@
-import { Link } from "react-router-dom";
+// import { Link } from "react-router-dom";
 
 import svg from "../../img/icons.svg";
 import css from "./Logo.module.css";
diff --git a/src/components/TaskCard/TaskCard.jsx b/src/components/TaskCard/TaskCard.jsx
index 327ddff..0c39bf0 100644
--- a/src/components/TaskCard/TaskCard.jsx
+++ b/src/components/TaskCard/TaskCard.jsx
@@ -1,7 +1,19 @@
 import css from "./TaskCard.module.css"
 import svg from "../../img/icons.svg";
+import { useSelector } from "react-redux";
+import { EditCard } from "../EditCardModal/EditCardModal";
 
 export const Card = () => {
+  const [isOpen, setIsOpen] = useSelector(false);
+  
+  const openModal = () => {
+    setIsOpen(true)
+  }
+    
+  const closeModal = () => {
+    setIsOpen(false)
+  }
+
     return (
 <div className={css.card}>
         <div className={css.border}></div>
@@ -40,9 +52,11 @@ export const Card = () => {
             <svg className={css.icon} width="16" height="16">
                 <use href={svg + "#icon-arrow-circle"}></use>
             </svg>
-            <svg className={css.icon} width="16" height="16">
-                <use href={svg + "#icon-pencil"}></use>
-            </svg>
+            <button className={css.editModalBtn} onClick={openModal()}>
+              <svg className={css.icon} width="16" height="16">
+                  <use href={svg + "#icon-pencil"}></use>
+              </svg>
+            </button>
             <svg className={css.icon} width="16" height="16">
                 <use href={svg + "#icon-trash"}></use>
             </svg>
@@ -51,6 +65,7 @@ export const Card = () => {
           </div>
 
         </div>
+        <EditCard isOpen={isOpen} isClose={closeModal} />
       </div>
     );
 }
\ No newline at end of file
diff --git a/src/components/TaskCard/TaskCard.module.css b/src/components/TaskCard/TaskCard.module.css
index f2675d0..5486d3e 100644
--- a/src/components/TaskCard/TaskCard.module.css
+++ b/src/components/TaskCard/TaskCard.module.css
@@ -111,6 +111,13 @@
     filter: drop-shadow(0 0 5px #bedbb0);
 }
 
+
+.editModalBtn {
+    position: fixed;
+    background: #121212;
+    border: none;
+    padding: 0;
+
 .icon {
     cursor: pointer;
 }
@@ -119,4 +126,5 @@
 .icon:focus {
   filter: drop-shadow(0 0 5.5px #bedbb0);
   stroke: #bedbb0;
+
 }
\ No newline at end of file
diff --git a/src/components/TaskColumnName/TaskColumnName.jsx b/src/components/TaskColumnName/TaskColumnName.jsx
index 08f3a90..b21af12 100644
--- a/src/components/TaskColumnName/TaskColumnName.jsx
+++ b/src/components/TaskColumnName/TaskColumnName.jsx
@@ -1,12 +1,24 @@
 import css from "./TaskColumnName.module.css";
 import svg from "../../img/icons.svg";
+import { useSelector} from "react"
+import { EditColumn } from "../EditColumnModal/EditColumnModal";
 
 export const TaskColumnName = () => {
+  const [isOpen, setIsOpen] = useSelector(false);
+  
+  const openModal = () => {
+    setIsOpen(true)
+  }
+    
+  const closeModal = () => {
+    setIsOpen(false)
+  }
+  
   return (
     <div className={css.taskColumn}>
       <span className={css.columnName}>To Do</span>
       <div className={css.icons}>
-        <button className={css.iconButton}>
+        <button className={css.iconButton} onClick={openModal}>
         <svg className={css.icon} width="16px" height="16px">
           <use href={svg + "#icon-pencil"}></use>
         </svg>
@@ -17,6 +29,8 @@ export const TaskColumnName = () => {
         </svg>
         </button>
       </div>
+      {isOpen &&
+        <EditColumn isOpen={openModal} isClose={closeModal} title={"To Do"} />}
     </div>
   );
 };