diff --git a/ServiceHost/Areas/Admin/Pages/Company/Employees/Edit.cshtml b/ServiceHost/Areas/Admin/Pages/Company/Employees/Edit.cshtml
index a5fe04a0..bcba05d6 100644
--- a/ServiceHost/Areas/Admin/Pages/Company/Employees/Edit.cshtml
+++ b/ServiceHost/Areas/Admin/Pages/Company/Employees/Edit.cshtml
@@ -16,7 +16,8 @@
 	</style>
 }
 
-<link href="@Href("~/Admintheme/css/personelCreate.css")" rel="stylesheet"/>
+@* <link href="@Href("~/Admintheme/css/personelCreate.css")" rel="stylesheet"/> *@
+<link href="@Href("~/Admintheme/css/personelEdit.css")" rel="stylesheet"/>
 
 <fieldset class="content-fieldset">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
diff --git a/ServiceHost/wwwroot/AdminTheme/css/personelEdit.css b/ServiceHost/wwwroot/AdminTheme/css/personelEdit.css
new file mode 100644
index 00000000..e8dac4f0
--- /dev/null
+++ b/ServiceHost/wwwroot/AdminTheme/css/personelEdit.css
@@ -0,0 +1,827 @@
+.modal-dialog {
+    width: 55%;
+    margin: 30px auto;
+}
+
+#MainModal {
+    backdrop-filter: blur(8px);
+}
+
+.modal .modal-dialog .modal-content {
+    padding: 0;
+}
+
+@media(min-width: 1650px) {
+    .modal-dialog {
+        margin: auto;
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%) !important;
+        width: 50%;
+    }
+}
+
+@media (max-width: 1580px) {
+    .modal-dialog {
+        width: 60%;
+    }
+}
+
+.modal .modal-dialog .modal-content {
+    border-radius: 18px;
+    min-height: 68rem;
+    background: #ebebeb;
+}
+
+@media (max-width: 1200px) {
+    .modal .modal-dialog .modal-content {
+        min-height: 80rem;
+    }
+}
+
+.form-box {
+    position: relative;
+    padding: 40px 20px;
+    top: 5rem;
+    border: 1px solid #d1d1d1;
+    position: relative;
+    border-radius: 1rem;
+    overflow: hidden;
+    min-height: 57rem;
+}
+
+.main-title {
+    position: absolute;
+    width: 17rem;
+    font-size: 1.7rem;
+    background-color: inherit;
+    left: 49%;
+    top: 7px;
+    margin-left: -100px;
+    text-align: center;
+    color: black;
+    border: 1px solid #00000030;
+    border-radius: 9px;
+    padding: 2px 0px;
+}
+
+.ltr {
+    direction: ltr;
+}
+
+.close {
+    margin-top: 12px;
+    margin-left: -19px;
+    font-size: 26px;
+    position: absolute;
+    right: 25px;
+}
+
+.form {
+    position: absolute;
+    font-size: 1.2rem;
+    width: 100%;
+}
+
+.input-type {
+    padding: 0px 8px;
+}
+
+.nationality-type {
+    padding: 0.7px 4px;
+}
+
+.duty-condition {
+    position: relative;
+    top: -5px;
+}
+
+.loc-box {
+    margin-top: 10px;
+}
+
+.loc-text {
+    height: 182px;
+}
+
+.insInput {
+    background-color: #d4e9ff;
+}
+
+.insInputDate label {
+    font-size: 10px;
+}
+
+.content-fieldset {
+    width: 95%;
+    margin: auto;
+}
+
+.radio-sections {
+    padding: 15px 7px !important;
+    background: #ffffff6b;
+    border-radius: 7px;
+    border: 1px solid #0000004a;
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-evenly;
+    align-items: flex-start;
+}
+
+.form1 .form-group, .listForm1 .form-group {
+    justify-content: space-around;
+    padding: 15px 5px 15px 0;
+    border: 1px solid #e3e3e3;
+    box-shadow: 0px 0px 4px 0px #a7a7a7;
+    background: #e5e5e5;
+    border-radius: 7px;
+    margin: 0;
+    margin-bottom: 15px !important;
+    width: 100% !important;
+}
+
+.form1, .listForm1 {
+    margin-top: 30px;
+    width: 96%;
+}
+
+.form2, .listForm2 {
+    left: 1200px;
+    margin-top: 30px;
+}
+
+.form3, .listForm3 {
+    right: 1200px;
+    padding: 0 10px;
+    margin: 0;
+    margin-top: 30px;
+}
+
+.flexible-wrap {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.form3 legend, .listForm3 legend {
+    margin-bottom: 5px;
+    font-size: 16px;
+    border-bottom: 0px;
+    color: #505458;
+    width: 130px;
+    text-align: center;
+}
+
+.form3 fieldset, .listForm3 fieldset {
+    border: 1px solid #999797;
+    border-radius: 10px;
+    padding: 5px 0;
+    width: 100%;
+}
+
+.steps {
+    display: flex;
+    align-items: center;
+    flex-direction: row-reverse;
+    width: 100%;
+    position: absolute;
+    top: 0px;
+    left: 0;
+    height: 42px;
+    border: 1px solid #36292947;
+    border-top-right-radius: 7px;
+    border-top-left-radius: 7px;
+    box-shadow: 0 2px 5px 0 rgb(104 106 106 / 49%), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+}
+
+.step {
+    padding: 7px;
+    text-align: center;
+    margin: 0 3px 0 3px;
+    width: 33.33%;
+    z-index: 9;
+}
+
+.progressBar {
+    position: absolute;
+    width: 33.33%;
+    background: linear-gradient(90deg, rgba(15,149,0,1) 0%, rgba(53,189,37,1) 18%, rgba(68,207,52,1) 47%, rgba(73,214,57,1) 82%, rgba(15,149,0,1) 100%);
+    height: 103%;
+    right: -1px;
+    top: -1px;
+    transition: 1s;
+}
+
+    .progressBar:after {
+        content: '';
+        border-top: 20px solid transparent;
+        border-bottom: 20px solid transparent;
+        position: absolute;
+        left: -19px;
+        top: 1px;
+        border-right: 20px solid #0f9500;
+    }
+
+.radio-box {
+    font-size: 12px;
+    border-radius: 10px;
+    align-items: center;
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(15, 1fr);
+}
+
+.radio-label {
+    grid-column: 1/7;
+    grid-row: 1;
+    margin-bottom: 0;
+}
+
+.radio-input {
+    grid-column: 7 / 16;
+    grid-row: 1;
+    text-align: left;
+    display: grid;
+    grid-template-columns: repeat(15, 1fr);
+}
+
+    .radio-input label:first-child {
+        grid-column: 1 / 8;
+    }
+
+    .radio-input label:nth-child(2) {
+        grid-column: 8 / 16;
+    }
+
+    .radio-input.nationality {
+        grid-column: 5 / 16;
+    }
+
+        .radio-input.nationality label:first-child {
+            grid-column: 1 / 7;
+        }
+
+        .radio-input.nationality label:nth-child(2) {
+            grid-column: 7 / 16;
+        }
+
+.form-box input[type="radio"] {
+    margin: 2px 0px;
+}
+
+.form-box .radio-input input[type="radio"] {
+    margin: 0 4px 0px 4px;
+    transform: translate(0px,4px);
+}
+
+.inputs-box {
+    float: left;
+    display: flex;
+    align-items: center;
+}
+
+.inputs {
+    padding: 10px;
+}
+
+.input {
+    border: 1px solid #0000004a;
+    border-radius: 7px;
+    padding: 7px;
+    width: 100%;
+}
+
+    .input:focus {
+        box-shadow: 0 2px 5px 0 rgb(136 137 141), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+    }
+
+
+#save {
+    background-color: #0f9500;
+    color: white;
+    cursor: pointer;
+}
+
+#close {
+    background-color: white;
+    color: #323030;
+}
+
+.btn-modal {
+    padding: 1rem 0;
+    border-radius: 20px;
+    border: none;
+    font-size: 12px;
+    width: 9rem;
+}
+
+.btns {
+    position: absolute;
+    display: inline-flex;
+    bottom: 12px;
+    width: 100%;
+    justify-content: flex-end;
+    margin-right: 50px;
+}
+
+.btns-2 {
+    bottom: 15px;
+    margin-right: 17px;
+}
+
+.btn-modal.pre, .btn-modal.listPrev {
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+    background-color: #c7c0c0ba;
+    color: #000000b8;
+    margin-left: -4px;
+}
+
+.btn-modal.next, .btn-modal.listNext {
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
+    margin-left: -4px;
+    border-right: 1px solid #817b7b;
+    background-color: white;
+    color: #1e88b3;
+}
+
+.btns-left {
+    float: left;
+}
+
+.btn-rounded {
+    border-radius: 2em;
+    padding: 6px 10px;
+}
+
+.form-footer-btns {
+    position: absolute;
+    bottom: 5px;
+    left: 40%;
+}
+
+.form-footer {
+    padding: 15px;
+    text-align: right;
+    float: left;
+    border-top: 0;
+    position: absolute;
+    bottom: -5px;
+    left: 5px;
+}
+
+#divEdit .form-footer {
+    bottom: 5px;
+}
+
+.btn:hover {
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+}
+
+.children-box {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+#children-container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: 18rem;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: #f2f2f2 transparent;
+    direction: ltr;
+    border: 1px solid #9b97976e;
+    border-radius: 10px 10px 7px 7px;
+    padding: 10px 0;
+    background-color: #dbdadaba;
+    margin-top: 10px;
+    margin-bottom: 5px;
+}
+
+#children {
+    border-collapse: separate !important;
+    position: relative;
+    top: -10px;
+    width: 100%;
+    background: whitesmoke;
+    text-align: center;
+    border-radius: 10px;
+    border: none !important;
+    margin-bottom: 0 !important;
+}
+
+    #children th {
+        text-align: center;
+        color: white;
+        position: sticky;
+        top: -10px;
+        z-index: 20;
+        background-color: #404040;
+        font-size: 13px;
+    }
+
+    #children th, td {
+        padding: 8px;
+    }
+
+        #children th:nth-child(2n) {
+            border-left: 1px solid #fff;
+        }
+
+    #children tr:nth-child(2n) {
+        background-color: #e3e3e3;
+    }
+
+    #children th:nth-child(2n) {
+        border-left: 1px solid #fff;
+    }
+
+
+    #children td:nth-child(2n) {
+        border-left: 1px solid #fff;
+        border-right: 1px solid #9b979721;
+    }
+
+    #children td:nth-child(2n+1) {
+        border-left: 1px solid #9b979721;
+        display: flex;
+        flex-direction: row-reverse;
+        justify-content: center;
+    }
+
+    #children td {
+        text-align: center;
+    }
+
+    #children th:first-child {
+        border-radius: 7px 0px 0px 0px;
+        -moz-border-radius: 7px 0px 0px 0px;
+        -webkit-border-radius: 7px 0px 0px 0px;
+    }
+
+    #children th:last-child {
+        border-left: 1px solid #fff;
+        border-radius: 0px 7px 0 0;
+        -moz-border-radius: 0px 7px 0 0;
+        -webkit-border-radius: 0px 7px 0 0;
+    }
+
+    #children tbody tr {
+        min-height: 68px;
+    }
+
+#children-container.hide-scrollbar::-webkit-scrollbar {
+    width: 0px;
+}
+
+#children-container::-webkit-scrollbar {
+    width: 7px;
+    height: 5px;
+}
+
+#children-container::-webkit-scrollbar-track {
+    background-color: #f2f2f2;
+    border-radius: 5px;
+}
+
+#children-container::-webkit-scrollbar-thumb {
+    background-color: #ccc;
+    border-radius: 5px;
+}
+
+    #children-container::-webkit-scrollbar-thumb:hover {
+        background-color: #aaa;
+    }
+
+.children-box .add {
+    cursor: pointer;
+    padding: 8px 6px;
+    border-radius: 16px;
+    border: 2px solid #0f9500;
+    background: white;
+    color: #0f9500;
+    font-size: 10px;
+    width: 9rem;
+}
+
+.d-flex {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.trash {
+    color: #c91d1d;
+    font-size: 22px;
+    position: relative;
+    left: -7px;
+    top: 5px;
+}
+
+.add:hover {
+    background: #0f9500;
+    color: white;
+    border: 2px solid #0f9500;
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+}
+
+.items, .items1 {
+    border: 1px solid #c7c7c7;
+    border-radius: 5px;
+    padding: 5px 0px;
+    background-color: white;
+    text-align: center;
+}
+
+.green {
+    background-color: #e0ffe0;
+}
+
+.modal-content2 {
+    background-color: whitesmoke;
+    border: 1px solid #a5a5a59e;
+    border-radius: 18px;
+    margin-top: 300px;
+    padding: 0px 30px;
+}
+
+.modal .modal-dialoge .modal-content2 .modal-body {
+    padding: 50px 20px;
+    font-size: 17px;
+}
+
+.modal-dialoge {
+    padding: 0px 180px;
+}
+
+.error-icon {
+    position: absolute;
+    left: 15px;
+    top: 40px;
+    font-size: 16px;
+    color: red;
+}
+
+.error-message {
+    font-size: 1rem;
+    color: red;
+    position: absolute;
+}
+
+.input-div {
+    display: flex;
+}
+
+.education {
+    height: 36px;
+}
+
+.errored, .patternMisMatch {
+    animation: shake 300ms;
+    box-shadow: inset 0 0 2px #eb3434, 0 0 5px #eb3434 !important;
+    border: 1px solid #eb3434 !important;
+    border-radius: 8px;
+}
+
+@media (max-width: 1550px) and (min-width:1441px) {
+    .education {
+        height: 33px;
+    }
+}
+
+@media (max-width: 1550px) {
+    .modal-content {
+        height: 680px !important;
+    }
+
+    .box {
+        font-size: 12px;
+        height: 575px;
+        top: 40px;
+    }
+
+    .inputs {
+        padding: 6px 8px;
+    }
+
+    .btn-modal {
+        font-size: 12px;
+    }
+
+    .main-title {
+        width: 185px;
+        font-size: 17px;
+        left: 52%;
+        top: 5px;
+    }
+
+    .trash {
+        font-size: 18px;
+    }
+}
+
+
+@media (max-width: 1440px) {
+
+    #progress:after {
+        border-top: 17px solid transparent;
+        border-bottom: 17px solid transparent;
+    }
+
+    .inputs {
+        padding: 8px 10px;
+    }
+
+    .education {
+        height: 29px;
+    }
+
+    .btn-modal {
+        font-size: 10px;
+    }
+
+    .main-title {
+        width: 169px;
+        font-size: 15px;
+        left: 53%;
+        top: 3px;
+    }
+
+    .radio-sections {
+        padding: 8px 5px !important;
+        display: flex;
+        align-items: center;
+    }
+
+    .nationality-type {
+        padding: 0px 2px;
+    }
+
+    .input-type {
+        padding: 0px 5px;
+    }
+
+    .duty-condition {
+        top: -9px;
+    }
+
+    .loc-box {
+        margin-top: 9px;
+    }
+
+    #children-container, .loc-text {
+        height: 136px;
+    }
+
+    #children th, td {
+        padding: 5px 8px;
+    }
+
+    #children th {
+        font-size: 11px;
+    }
+
+    .radio-box {
+        font-size: 10px;
+    }
+}
+
+@media (max-width: 1200px) {
+    .form-box {
+        min-height: 69rem;
+    }
+
+    .form1, .listForm1 {
+        width: 93%;
+    }
+
+    .radio-input.nationality label:first-child {
+        grid-column: 1 / 9;
+    }
+
+    .radio-input.nationality label:nth-child(2) {
+        grid-column: 9 / 16;
+    }
+
+    #employee-panel .name-th {
+        max-width: 55px;
+    }
+
+    #employee-panel .Lname-th {
+        max-width: 85px;
+    }
+
+    #employee-panel .code-th {
+        max-width: 55px;
+    }
+
+    #employee-panel .insurance-th {
+        max-width: 50px;
+    }
+
+    #employee-panel #datatable tbody tr td {
+        font-size: 1rem;
+    }
+}
+
+@media (max-width: 900px) {
+    .modal-dialog {
+        width: 75%;
+    }
+    /*    .operationBtns a {
+        width: 3.8rem;
+        height: 3.6rem;
+    }*/
+    #employee-panel .code-th {
+        max-width: 65px;
+    }
+
+    #employee-panel .Lname-th {
+        max-width: 75px;
+    }
+
+    .Lname-td .fulltext {
+        max-width: 68px;
+    }
+}
+
+@media (max-width: 768px) {
+    .form-box {
+        min-height: 85rem;
+        padding: 40px 10px;
+    }
+
+    .radio-box, .step {
+        font-size: 10px;
+    }
+
+    .modal .modal-dialog .modal-content {
+        min-height: 96rem;
+    }
+
+    .form1 .form-group, .listForm1 .form-group {
+        padding: 8px 5px 8px 0;
+    }
+
+    .modal-dialog {
+        width: 90%;
+    }
+
+    .form3 fieldset, .listForm3 fieldset {
+        margin: 10px 0;
+    }
+
+    .form {
+        font-size: 1rem;
+    }
+
+    .input-type {
+        padding: 0px 3px;
+    }
+
+    .loc-text {
+        height: 60px;
+    }
+
+    .radio-input.nationality, .radio-input {
+        grid-column: 5 / 16;
+    }
+
+        .radio-input.nationality label:first-child {
+            grid-column: 1 / 8;
+        }
+}
+
+@media (max-width: 768px) and (min-width:490px ) {
+    .Lname-td .fulltext {
+        max-width: 80px;
+    }
+}
+
+@media (max-width: 450px) {
+    .form-box {
+        min-height: 86rem;
+    }
+
+    .form-footer-btns {
+        left: 25%;
+    }
+
+    .name-td .fulltext {
+        max-width: 75px;
+    }
+
+    .modal .modal-dialog .modal-content {
+        min-height: 96rem;
+    }
+}
+
+@media (max-width: 390px) {
+
+    .name-td .fulltext {
+        max-width: 65px;
+    }
+}