diff --git a/module/dev/css/langitem.css b/module/dev/css/langitem.css
index bc9dc7b982..e863ba1a21 100644
--- a/module/dev/css/langitem.css
+++ b/module/dev/css/langitem.css
@@ -2,29 +2,31 @@
 .flex-1 {flex: 1;}
 .align-center {align-items: center;}
 .justify-center {justify-content: center;}
-.h-32 {height: 32px;}
-.py-6 {padding: 6px 0;}
-.my-12 {margin: 12px 0;}
-.ml-20 {margin-left: 20px;}
+.reset-btn {margin-left: 20px;}
 .title {font-size: 13px; color: #313C52; font-weight: 700; height: 40px; text-align: center;}
-.gap-15 {gap: 15px;}
+.h-full {height: 100%;}
 
 /* menu-tree */
 .menu-tree {flex: 0 0 200px; background: #fff; padding: 10px 10px;}
 .menu-tree > .tree {padding-top: 20px;}
-li.has-list > ul > li {padding-left: 10px;}
 .tree ul {margin-bottom: 0;}
+#menuTree > li.has-list > ul > li {padding-left: 10px;}
+#menuTree > li.has-list > ul > li.has-list {padding-left: 15px;}
 
-/* side-left */
-.main-content > .side-left {flex: 0 0 160px; margin-left: 44px;}
-.label-list {background: #F8F8F8; padding: 5px 0;}
-.label-list > .input-label {display: flex; align-items: center; cursor: pointer; padding-left: 40px;}
+/* main-box */
+.flex.main-box {gap: 15px;}
 
-/* side-right */
-.main-content > .side-right {margin-left: 50px;}
-.main-content > .side-right > .input-list {padding: 5px 0;}
-.main-content > .side-right > .input-list > .input-control {position: relative;}
-.main-content > .side-right > .input-list > .input-control > i.icon {position: absolute; font-size: 25px; left: -40px; top: 3px;}
+/* title-content */
+.title-content {gap: 20px;}
+.title-content > .title {margin-left: 44px; width: 160px;}
+
+/* form-content */
+.form-item-content {padding-left: 44px;}
+.form-item-content > .form-item {gap: 20px; height: 56px; align-items: center; position: relative;}
+.form-item-content > .form-item >  .input-label {flex: 0 0 160px; padding-left: 40px; background: #F8F8F8; display: flex; align-items: center;}
+.form-item-content > .form-item >  .input-control > input {margin-left: 40px;}
+.form-item-content > .form-item.active > .icon {display: unset;}
+.form-item-content > .form-item> .icon {display: none; position: absolute; left: 180px; font-size: 25px;}
 
 /* bottom-btn */
-.bottom-btn {display: flex; align-items: center; background: #fff;padding-left: 150px; padding-bottom: 20px;}
+.bottom-btn {display: flex; align-items: center; background: #fff; padding-left: 150px; padding-bottom: 20px;}
diff --git a/module/dev/js/langitem.js b/module/dev/js/langitem.js
index 878d67287c..6346febc34 100644
--- a/module/dev/js/langitem.js
+++ b/module/dev/js/langitem.js
@@ -9,8 +9,7 @@ $(function()
      */
     function addActive(id)
     {
-        $('[labelid=' + id + ']').addClass('text-primary');
-        $('[iconid=' + id + ']').removeClass('hidden');
+        $('[data-id=' + id + ']').addClass('text-primary active');
     }
 
     /**
@@ -22,8 +21,7 @@ $(function()
      */
     function removeActive(id)
     {
-        $('[labelid=' + id + ']').removeClass('text-primary');
-        $('[iconid=' + id + ']').addClass('hidden');
+        $('[data-id=' + id + ']').removeClass('text-primary active');
     }
 
     /**
@@ -35,10 +33,10 @@ $(function()
      */
     function handleClickItem(clickId)
     {
-	      var clearId = $('.label-list > .text-primary').attr('labelid');
+	    var clearId = $('.form-item.active').attr('data-id');
         if(clearId !== clickId)
         {
-            if(clearId) removeActive(clearId); 
+            if(clearId) removeActive(clearId);
             if(clickId) addActive(clickId);
         };
     }
@@ -87,17 +85,16 @@ $(function()
         var childern = null;
         if (item && item.children)
         {
-             children = [];
-             for (var i = 0; i < item.children.length; i++)
-             {
-                 item.children[i].children = filterChildren(item.children[i], val);
-                 if (item.children[i].title.indexOf(val) != -1 || (item.children[i].key && item.children[i].key.indexOf(val) != -1) || item.children[i].children)
-                 {
-                     children.push(item.children[i]);
-                 }
-             }
+            children = [];
+            for (var i = 0; i < item.children.length; i++)
+            {
+                item.children[i].children = filterChildren(item.children[i], val);
+                if (item.children[i].title.indexOf(val) != -1 || (item.children[i].key && item.children[i].key.indexOf(val) != -1) || item.children[i].children)
+                {
+                    children.push(item.children[i]);
+                }
+            }
         }
-
         return children;
     }
 
@@ -127,12 +124,11 @@ $(function()
         {
             var target = $(e.target);
             if (target.attr('data-has-children') === 'true') return;
-
             self.location.href = createLink('dev', 'langItem', 'type=' + type + '&module=' + target.attr('data-module') + '&method=' + target.attr('data-method'));
         })
     }
 
-    $(".input-list").on("click", 'input', function(e)
+    $(".form-item-content").on("click", 'input', function(e)
     {
         handleClickItem(e.target.id);
     }).on("blur", 'input', function(e)
@@ -140,13 +136,21 @@ $(function()
         removeActive(e.target.id);
     });
 
-    $('.label-list > .input-label').on('click', function()
+    $('.form-item-content > .form-item > .input-label').on('click', function()
     {
-        handleClickItem($(this).attr('labelid'));
+        handleClickItem($(this).data('id'));
     });
 
+    $(".form-item-content").on('mouseover', '.form-item', function()
+    {
+        $(this).addClass('text-primary');
+    }).on('mouseout', '.form-item', function()
+    {
+        $(this).removeClass('text-primary');
+    })
+
     initMenu();
     handleInputSearch();
 
-    $('li.has-list > ul').addClass("menu-active-primary menu-hover-primary")
+    $('li.has-list > ul').addClass("menu-active-primary menu-hover-primary");
 })
diff --git a/module/dev/view/langitem.html.php b/module/dev/view/langitem.html.php
index 5cda964829..c7bef4ad02 100644
--- a/module/dev/view/langitem.html.php
+++ b/module/dev/view/langitem.html.php
@@ -35,52 +35,45 @@
     <?php endforeach;?>
   </div>
 </div>
-<div class="flex gap-15">
-<?php if(in_array($type, $config->dev->navTypes)):?>
+<div class="flex main-box">
+  <?php if(in_array($type, $config->dev->navTypes)):?>
   <div class="menu-tree">
     <div class="input-control search-box has-icon-left has-icon-right search-example">
-      <input type="search" class="form-control search-input" />
+      <input type="search" class="form-control search-input"/>
       <label class="input-control-icon-left search-icon flex align-center justify-center"><i class="icon icon-search"></i></label>
     </div>
     <div id="menuTree" class="menu-active-primary menu-hover-primary"></div>
   </div>
-<?php endif;?>
+  <?php endif;?>
+
   <form class='main-form form-ajax flex-1' method='post'>
-    <div id='mainContent' class='main-content flex'>
-      <?php if(str_replace('-', '_', $this->app->getClientLang()) != $language):?>
-      <div class="side-left">
-        <div class="title"><?php echo $lang->dev->currentLang;?> </div>
-        <div class="label-list">
-          <?php foreach($currentLangs as $langKey => $originalLang):?>
-          <div labelId="<?php echo "{$moduleName}_{$langKey}"?>" class="input-label h-32 my-12"><?php echo $originalLang?></div>
-          <?php endforeach;?>
-        </div>
-      </div>
-      <?php endif;?>
-      <div class="side-left">
-        <div class="title"><?php echo $lang->dev->defaultValue ?> </div>
-        <div class="label-list">
-          <?php foreach($originalLangs as $langKey => $originalLang):?>
-          <div labelId="<?php echo "{$moduleName}_{$langKey}"?>" class="input-label h-32 my-12"><?php echo $originalLang?></div>
-          <?php endforeach;?>
-        </div>
-      </div>
-      <div class="side-right">
+    <div class="main-content">
+      <div class="title-content flex">
+        <?php if(str_replace('-', '_', $this->app->getClientLang()) != $language):?>
+          <div class="title"><?php echo $lang->dev->currentLang;?> </div>
+        <?php endif;?>
+        <div class="title"><?php echo $lang->dev->defaultValue?></div>
         <div class="title"><?php echo $lang->dev->modifyValue?></div>
-        <div class="input-list">
-          <?php foreach($originalLangs as $langKey => $originalLang):?>
-          <div class="input-control h-32 my-12">
-            <?php echo html::input("{$moduleName}_{$langKey}", zget($customedLangs, $langKey, ''), "class='form-control shadow-primary-hover' placeholder='{$originalLang}'");?>
-            <i iconId="<?php echo "{$moduleName}_{$langKey}"?>" class="icon icon-angle-right text-primary hidden"></i>
-          </div>
-          <?php endforeach;?>
-        </div>
       </div>
-      <div class="side-main"></div>
+      <div class="form-item-content">
+        <?php foreach($originalLangs as $langKey => $originalLang):?>
+        <div data-id="<?php echo "{$moduleName}_{$langKey}"?>" class="form-item flex">
+          <?php if(str_replace('-', '_', $this->app->getClientLang()) != $language):?>
+          <div data-id="<?php echo "{$moduleName}_{$langKey}"?>" class="input-label h-full"><?php echo $originalLang?></div>
+          <?php endif;?>
+          <div data-id="<?php echo "{$moduleName}_{$langKey}"?>" class="input-label h-full"><?php echo $originalLang?></div>
+          <i class="icon icon-angle-right text-primary"></i>
+          <div class="input-control">
+            <?php echo html::input("{$moduleName}_{$langKey}", zget($customedLangs, $langKey, ''), "class='form-control shadow-primary-hover' placeholder='{$originalLang}'");?>
+          </div>
+        </div>
+        <?php endforeach;?>
+      </div>
     </div>
+
     <div class="bottom-btn">
       <?php echo html::submitButton(); ?>
-      <?php echo html::a(inlink('resetLang', "type={$type}&module={$moduleName}&method={$method}&language={$language}"), $lang->restore, 'hiddenwin', "id='reset' class='btn btn-wide ml-20'");?>
+      <?php echo html::a(inlink('resetLang', "type={$type}&module={$moduleName}&method={$method}&language={$language}"), $lang->restore, 'hiddenwin', "id='reset' class='btn btn-wide reset-btn'");?>
     </div>
   </form>
 </div>