diff --git a/MySQL_conf_pbx/test1/mariadb_data/aria_log.00000001 b/MySQL_conf_pbx/test1/mariadb_data/aria_log.00000001
index 6ab4a0c..4e14826 100644
Binary files a/MySQL_conf_pbx/test1/mariadb_data/aria_log.00000001 and b/MySQL_conf_pbx/test1/mariadb_data/aria_log.00000001 differ
diff --git a/MySQL_conf_pbx/test1/mariadb_data/aria_log_control b/MySQL_conf_pbx/test1/mariadb_data/aria_log_control
index c2cfc55..32990a0 100644
Binary files a/MySQL_conf_pbx/test1/mariadb_data/aria_log_control and b/MySQL_conf_pbx/test1/mariadb_data/aria_log_control differ
diff --git a/MySQL_conf_pbx/test1/reactcezenpbx/src/components/landing-page/homePage.jsx b/MySQL_conf_pbx/test1/reactcezenpbx/src/components/landing-page/homePage.jsx
index e74125c..5387ae4 100755
--- a/MySQL_conf_pbx/test1/reactcezenpbx/src/components/landing-page/homePage.jsx
+++ b/MySQL_conf_pbx/test1/reactcezenpbx/src/components/landing-page/homePage.jsx
@@ -12,7 +12,6 @@ export default function LandingPage() {
       <article className="landing_screen">
         <p>Welcome to the landing page !</p>
       </article>
-      <EndPoints />
     </>
   );
 }
diff --git a/MySQL_conf_pbx/test1/reactcezenpbx/src/components/landing-page/navStyleImpl.css b/MySQL_conf_pbx/test1/reactcezenpbx/src/components/landing-page/navStyleImpl.css
index 1103ca6..6e9de08 100755
--- a/MySQL_conf_pbx/test1/reactcezenpbx/src/components/landing-page/navStyleImpl.css
+++ b/MySQL_conf_pbx/test1/reactcezenpbx/src/components/landing-page/navStyleImpl.css
@@ -8,6 +8,7 @@
   gap: 2rem;
   justify-content: space-between;
   border-radius: 2rem;
+  margin-bottom: 5rem;
 }
 
 .navigation span {
diff --git a/MySQL_conf_pbx/test1/reactcezenpbx/src/components/operations/endPoint.jsx b/MySQL_conf_pbx/test1/reactcezenpbx/src/components/operations/endPoint.jsx
index 1f732bb..b6fc37d 100644
--- a/MySQL_conf_pbx/test1/reactcezenpbx/src/components/operations/endPoint.jsx
+++ b/MySQL_conf_pbx/test1/reactcezenpbx/src/components/operations/endPoint.jsx
@@ -1,14 +1,44 @@
 import "./end_points.css";
 import phoneSvgLogo from "../../assets/phone.svg";
+import { useState } from "react";
 
 export default function EndPoints() {
+  const [endpointEditStatus, endpointEditFunction] = useState(false);
+
+  function toggleEndpointOrEditEndpoint() {
+    endpointEditFunction((prev) => {
+      return (prev = !prev);
+    });
+  }
+
   return (
     <>
-      <div className="heading">
-        <h1>End point setup</h1>
-      </div>
       {/* phone container */}
       <div className="containment">
+        <div className="heading">
+          <section className="setup_edit_toggle">
+            <button
+              className={endpointEditStatus ? "orange" : "blue"}
+              onClick={toggleEndpointOrEditEndpoint}
+            >
+              {endpointEditStatus
+                ? "Edit End Point Mode "
+                : "Set Up Endpoint Mode"}
+            </button>
+            {endpointEditStatus && (
+              <form>
+                <div className="extension_number_enter">
+                  <label for="ext_num">Extension number</label>
+                  <input type="text" id="ext_num" name="ext_num"></input>
+                </div>
+                <button> Search</button>
+              </form>
+            )}
+            {/* <h1 className="endpoint_heading">
+              End point <span>setup</span>
+            </h1> */}
+          </section>
+        </div>
         <form className="phone_container phones_spacing">
           <div className="extension_number  rowSpacing_1to3 pills">
             <label for="extension">Extension Number</label>
@@ -128,10 +158,82 @@ export default function EndPoints() {
             </p>
           </div>
           <div className="extension_button">
-            <button>Create Extension</button>
+            {endpointEditStatus ? (
+              <button>Update Extension</button>
+            ) : (
+              <button>Create Extension</button>
+            )}
           </div>
         </form>
       </div>
+      {/* List of all the extensions */}
+      <div className="extension_table">
+        <h2>List of All the extensions</h2>
+        <table>
+          <tr>
+            <th>Extension Number</th>
+            <th>Caller Id</th>
+            <th>Mail Box</th>
+            <th>Delete Extension</th>
+          </tr>
+          <tr>
+            <td>1001</td>
+            <td>Mathew</td>
+            <td>mat@gmail.com</td>
+            <td>
+              <button className="delete_button">Delete</button>
+            </td>
+          </tr>
+          <tr>
+            <td>1002</td>
+            <td>Sbin</td>
+            <td>Mexico@gmail.com</td>
+            <td>
+              <button className="delete_button">Delete</button>
+            </td>
+          </tr>
+          <tr>
+            <td>1003</td>
+            <td>Sbin</td>
+            <td>Mexico@gmail.com</td>
+            <td>
+              <button className="delete_button">Delete</button>
+            </td>
+          </tr>
+          <tr>
+            <td>1004</td>
+            <td>Sbin</td>
+            <td>Mexico@gmail.com</td>
+            <td>
+              <button className="delete_button">Delete</button>
+            </td>
+          </tr>
+          <tr>
+            <td>1005</td>
+            <td>Sbin</td>
+            <td>Mexico@gmail.com</td>
+            <td>
+              <button className="delete_button">Delete</button>
+            </td>
+          </tr>
+          <tr>
+            <td>1006</td>
+            <td>Sbin</td>
+            <td>Mexico@gmail.com</td>
+            <td>
+              <button className="delete_button">Delete</button>
+            </td>
+          </tr>
+          <tr>
+            <td>1007</td>
+            <td>Sbin</td>
+            <td>Mexico@gmail.com</td>
+            <td>
+              <button className="delete_button">Delete</button>
+            </td>
+          </tr>
+        </table>
+      </div>
     </>
   );
 }
diff --git a/MySQL_conf_pbx/test1/reactcezenpbx/src/components/operations/end_points.css b/MySQL_conf_pbx/test1/reactcezenpbx/src/components/operations/end_points.css
index 0d19a4c..b2cf528 100644
--- a/MySQL_conf_pbx/test1/reactcezenpbx/src/components/operations/end_points.css
+++ b/MySQL_conf_pbx/test1/reactcezenpbx/src/components/operations/end_points.css
@@ -12,7 +12,6 @@
 
 .phones_spacing {
   grid-template-columns: repeat(4, 1fr);
-  margin-top: 4rem;
 }
 
 .phones_spacing > div {
@@ -39,7 +38,7 @@
 
 .pills p {
   color: #00898488;
-  transition: all 1s;
+  transition: all 0.33s;
 }
 
 .pills:hover p {
@@ -125,3 +124,137 @@
   font-size: 1.6rem;
   max-width: 14rem;
 }
+
+.setup_edit_toggle {
+  display: flex;
+  flex-direction: row;
+  border-radius: 1rem;
+  margin-top: 2rem;
+  margin-bottom: 0rem;
+}
+
+.setup_edit_toggle > button {
+  border-radius: 5px;
+  padding: 1rem;
+  max-height: 5rem;
+  font-size: 2rem;
+  font-weight: 900;
+  transition: all 0.33s;
+  margin-bottom: 2.69rem;
+}
+
+.orange {
+  border: solid #ff7b00 1px;
+  background-color: #ff7b0017;
+  color: #ff7b00;
+}
+
+.blue {
+  border: solid #008984 1px;
+  background-color: #00898415;
+  color: #008984;
+}
+
+.setup_edit_toggle > button:hover {
+  cursor: pointer;
+}
+
+.setup_edit_toggle form {
+  display: flex;
+  margin: 1rem;
+  margin-left: 2rem;
+}
+
+.setup_edit_toggle form div label {
+  font-size: 1.6rem;
+  margin-bottom: 0.5rem;
+}
+.setup_edit_toggle form div input {
+  padding: 0.5rem;
+  font-size: 1.8rem;
+  background-color: #0089843b;
+  border: none;
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+
+.setup_edit_toggle form button {
+  all: revert;
+  align-self: flex-end;
+  padding: 0.8rem 1rem;
+  border: none;
+  background-color: #008984;
+  color: #ffffff;
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+
+.setup_edit_toggle form button:hover {
+  cursor: pointer;
+}
+
+.extension_number_enter {
+  display: flex;
+  flex-direction: column;
+  margin-left: 2rem;
+}
+
+.endpoint_heading {
+  font-size: 2rem;
+}
+
+.extension_table {
+  margin-top: 5rem;
+  text-transform: capitalize;
+  display: flex;
+  flex-direction: column;
+}
+
+.extension_table table {
+  margin-bottom: 2rem;
+  border-spacing: 0px;
+}
+
+.extension_table h2 {
+  text-align: center;
+  font-size: 3rem;
+  margin-bottom: 2rem;
+  color: #193d54;
+}
+
+.extension_table tr th {
+  background-color: #03045e;
+  color: #caf0f8;
+  text-align: center;
+  font-size: 1.6rem;
+  padding: 2rem;
+}
+
+th:first-child {
+  border-top-left-radius: 10px;
+}
+th:last-child {
+  border-top-right-radius: 10px;
+}
+
+.extension_table tr:nth-child(odd) {
+  background-color: #caf0f8;
+}
+
+.extension_table tr td {
+  padding: 1.4rem;
+  font-size: 1.4rem;
+  text-align: center;
+}
+
+.delete_button {
+  padding: 0.6rem;
+  background-color: red;
+  color: rgb(255, 228, 228);
+  border: none;
+}
+
+.delete_button:hover {
+  background-color: rgb(255, 49, 49);
+  cursor: pointer;
+}