diff --git a/lua/app/config/hero.lua b/lua/app/config/hero.lua
index 4aae8ba3..6c7c17af 100644
--- a/lua/app/config/hero.lua
+++ b/lua/app/config/hero.lua
@@ -35,7 +35,9 @@ local hero = {
 		["atk_12"]=210,
 		["atk_13"]=220,
 		["atk_14"]=230,
-		["atk_15"]=240
+		["atk_15"]=240,
+		["model_id"]="p00001",
+		["icon"]="1"
 	},
 	[22001]={
 		["position"]=2,
@@ -73,7 +75,9 @@ local hero = {
 		["atk_12"]=210,
 		["atk_13"]=220,
 		["atk_14"]=230,
-		["atk_15"]=240
+		["atk_15"]=240,
+		["model_id"]="p00002",
+		["icon"]="2"
 	},
 	[32001]={
 		["position"]=3,
@@ -111,7 +115,9 @@ local hero = {
 		["atk_12"]=210,
 		["atk_13"]=220,
 		["atk_14"]=230,
-		["atk_15"]=240
+		["atk_15"]=240,
+		["model_id"]="p00003",
+		["icon"]="3"
 	},
 	[42001]={
 		["position"]=4,
@@ -149,7 +155,9 @@ local hero = {
 		["atk_12"]=210,
 		["atk_13"]=220,
 		["atk_14"]=230,
-		["atk_15"]=240
+		["atk_15"]=240,
+		["model_id"]="p00004",
+		["icon"]="4"
 	},
 	[52001]={
 		["position"]=5,
@@ -187,7 +195,9 @@ local hero = {
 		["atk_12"]=210,
 		["atk_13"]=220,
 		["atk_14"]=230,
-		["atk_15"]=240
+		["atk_15"]=240,
+		["model_id"]="p00005",
+		["icon"]="5"
 	},
 	[23001]={
 		["position"]=2,
@@ -225,7 +235,9 @@ local hero = {
 		["atk_12"]=315,
 		["atk_13"]=330,
 		["atk_14"]=345,
-		["atk_15"]=360
+		["atk_15"]=360,
+		["model_id"]="p00006",
+		["icon"]="6"
 	},
 	[33001]={
 		["position"]=3,
@@ -263,7 +275,9 @@ local hero = {
 		["atk_12"]=315,
 		["atk_13"]=330,
 		["atk_14"]=345,
-		["atk_15"]=360
+		["atk_15"]=360,
+		["model_id"]="p00007",
+		["icon"]="7"
 	},
 	[43001]={
 		["position"]=4,
@@ -301,7 +315,9 @@ local hero = {
 		["atk_12"]=315,
 		["atk_13"]=330,
 		["atk_14"]=345,
-		["atk_15"]=360
+		["atk_15"]=360,
+		["model_id"]="p00008",
+		["icon"]="8"
 	}
 }
 local config = {
diff --git a/lua/app/global/global_const.lua b/lua/app/global/global_const.lua
index e19e1ff3..7a9ba012 100644
--- a/lua/app/global/global_const.lua
+++ b/lua/app/global/global_const.lua
@@ -9,6 +9,7 @@ local CONST_PATHS = {
 	TipsConst = "app/module/tips/tips_const",
 	TutorialConst = "app/module/tutorial/tutorial_const",
 	BattleConst = "app/module/battle/battle_const",
+	HeroConst = "app/module/hero/hero_const",
 }
 
 if EDITOR_MODE then
@@ -169,6 +170,7 @@ GConst.ATLAS_PATH = {
 	ICON_ITEM = "assets/arts/atlas/icon/item.asset",
 	UI_LOGIN = "assets/arts/atlas/ui/login.asset",
 	ICON_SKILL = "assets/arts/atlas/icon/skill.asset",
+	ICON_HERO = "assets/arts/atlas/icon/hero.asset",
 }
 
 GConst.TOUCH_EVENT = {
@@ -353,6 +355,16 @@ GConst.HERO_FRAME = {
 	RED = "frame_7",
 }
 
+GConst.HERO_FRAME_QLT = {
+	[1] = "frame_1",
+	[2] = "frame_2",
+	[3] = "frame_3",
+	[4] = "frame_4",
+	[5] = "frame_5",
+	[6] = "frame_6",
+	[7] = "frame_7",
+}
+
 GConst.QLT_LABLE = {
 	DEFAULT = "equip_quality_1",
 	GRAY = "equip_quality_1",
diff --git a/lua/app/module/hero/hero_const.lua b/lua/app/module/hero/hero_const.lua
new file mode 100644
index 00000000..f4ec3740
--- /dev/null
+++ b/lua/app/module/hero/hero_const.lua
@@ -0,0 +1,12 @@
+local HeroConst = {}
+
+HeroConst.MATCH_ICON_NAME = {
+	[1] = "match_1",
+	[2] = "match_2",
+	[3] = "match_3",
+	[4] = "match_4",
+	[5] = "match_5",
+}
+
+
+return HeroConst
\ No newline at end of file
diff --git a/lua/app/module/hero/hero_const.lua.meta b/lua/app/module/hero/hero_const.lua.meta
new file mode 100644
index 00000000..e0c0b60d
--- /dev/null
+++ b/lua/app/module/hero/hero_const.lua.meta
@@ -0,0 +1,10 @@
+fileFormatVersion: 2
+guid: 41cd8986f3405bc43887a7a5dccce698
+ScriptedImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 2
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
+  script: {fileID: 11500000, guid: 3b8b241bab4a4ac9a22fcce9c64f1242, type: 3}
diff --git a/lua/app/ui/common/cell/hero_cell.lua b/lua/app/ui/common/cell/hero_cell.lua
index 61526040..ace79c14 100644
--- a/lua/app/ui/common/cell/hero_cell.lua
+++ b/lua/app/ui/common/cell/hero_cell.lua
@@ -1,6 +1,32 @@
 local HeroCell = class("HeroCell", BaseCell)
 
-function HeroCell:refresh()
+function HeroCell:init()
+	local uiMap = self.baseObject:genAllChildren()
+	self.icon = uiMap["hero_cell.hero_bg.icon"]
+	self.heroBg = uiMap["hero_cell.hero_bg"]
+	self.check = uiMap["hero_cell.hero_bg.mask"]
+	self.matchImg = uiMap["hero_cell.hero_bg.match_img"]
+end
+
+function HeroCell:refresh(heroEntity)
+	local heroInfo = heroEntity:getConfig()
+	self:_refresh(heroInfo)
+end
+
+function HeroCell:refreshWithCfgId(id)
+	local heroInfo = ConfigManager:getConfig("hero")[id]
+	self:_refresh(heroInfo)
+end
+
+function HeroCell:_refresh(heroInfo)
+	self.heroBg:setSprite(GConst.ATLAS_PATH.ICON_HERO, GConst.HERO_FRAME_QLT[heroInfo.qlt])
+	self.icon:setSprite(GConst.ATLAS_PATH.ICON_HERO, tostring(heroInfo.icon))
+	self.matchImg:setSprite(GConst.ATLAS_PATH.ICON_HERO, GConst.HeroConst.MATCH_ICON_NAME[heroInfo.position])
+	self.check:setVisible(false)
+end
+
+function HeroCell:setVisible(visible)
+	self.baseObject:setVisible(visible)
 end
 
 return HeroCell
diff --git a/lua/app/ui/hero/cell/hero_list_cell.lua b/lua/app/ui/hero/cell/hero_list_cell.lua
index 7ea45a26..99e3ab78 100644
--- a/lua/app/ui/hero/cell/hero_list_cell.lua
+++ b/lua/app/ui/hero/cell/hero_list_cell.lua
@@ -1,8 +1,8 @@
 local HeroListCell = class("HeroListCell", BaseCell)
 
 local H = {
-    NORMAL = 112,
-    HAS_TITLE = 216
+    NORMAL = 220,
+    HAS_TITLE = 340
 }
 
 function HeroListCell:init()
@@ -12,32 +12,43 @@ function HeroListCell:init()
 		self.uiMap["hero_list_cell.prop_node.hero_cell_2"]:addLuaComponent(GConst.TYPEOF_LUA_CLASS.HERO_CELL),
 		self.uiMap["hero_list_cell.prop_node.hero_cell_3"]:addLuaComponent(GConst.TYPEOF_LUA_CLASS.HERO_CELL),
 		self.uiMap["hero_list_cell.prop_node.hero_cell_4"]:addLuaComponent(GConst.TYPEOF_LUA_CLASS.HERO_CELL),
-		self.uiMap["hero_list_cell.prop_node.hero_cell_5"]:addLuaComponent(GConst.TYPEOF_LUA_CLASS.HERO_CELL),
 	}
 	self.title = self.uiMap["hero_list_cell.title"]
 	self.titleTx = self.uiMap["hero_list_cell.title.title_desc"]
 end
 
-function HeroListCell:refresh(list)
-    -- for i, cell in ipairs(self.heroCells) do
-    --     local info = list.unitList and list.unitList[i]
-    --     cell:getBaseObject():setActive(info ~= nil)
-    --     if info and info.entity then
-    --         cell:refresh(info.entity)
-    --     end
-    -- end
-
-    -- self.title:setActive(list.showTitle ~= nil)
-    -- if list.showTitle ~= nil then
-    --     self.titleTx:setText(list.showTitle)
-    --     self:getBaseObject():setSizeDeltaY(H.HAS_TITLE)
-    -- else
-    --     local h = H.NORMAL
-    --     if list.isFirstLine then
-    --         h = h + 30
-    --     end
-    --     self:getBaseObject():setSizeDeltaY(h)
-    -- end
+function HeroListCell:refresh(index, heroList, allHeroCount, activeCount)
+    if activeCount > 0 and index == 1  then
+        self.title:setVisible(true)
+        self:getBaseObject():setSizeDeltaY(H.HAS_TITLE)
+    elseif index == math.ceil(activeCount / 4) + 1 then
+        self.title:setVisible(true)
+        self:getBaseObject():setSizeDeltaY(H.HAS_TITLE)
+    else
+        self.title:setVisible(false)
+        self:getBaseObject():setSizeDeltaY(H.NORMAL)
+    end
+    local heroStartIndex = (index-1)*4 + 1
+    if heroStartIndex > activeCount then
+        heroStartIndex = heroStartIndex - activeCount%4
+    end
+    local heroIndex = heroStartIndex
+    for i = 1, 4 do
+        if heroIndex <= activeCount then
+            self.heroCells[i]:setVisible(true)
+            self.heroCells[i]:refresh(DataManager.HeroData:getHeroById(heroList[heroStartIndex]))
+        elseif heroIndex <= allHeroCount then
+            if heroStartIndex <= activeCount then
+                self.heroCells[i]:setVisible(false)
+            else
+                self.heroCells[i]:setVisible(true)
+                self.heroCells[i]:refreshWithCfgId(heroList[heroStartIndex])
+            end
+        else
+            self.heroCells[i]:setVisible(false)
+        end
+        heroIndex = heroIndex + 1
+    end
 end
 
 return HeroListCell
\ No newline at end of file
diff --git a/lua/app/ui/hero/hero_comp.lua b/lua/app/ui/hero/hero_comp.lua
index 2a08e5f0..66813423 100644
--- a/lua/app/ui/hero/hero_comp.lua
+++ b/lua/app/ui/hero/hero_comp.lua
@@ -9,30 +9,30 @@ function HeroComp:init()
 		return HERO_LIST_CELL
 	end)
 	self.scrollRect:addRefreshCallback(function(index, cell)
-		cell:refresh()
+		cell:refresh(index, self.heroList, self.allHeroCount, self.activeCount)
 	end)
 	self.heroList = {}
+	local heroCfg = ConfigManager:getConfig("hero")
+	for id, v in pairs(heroCfg) do
+		table.insert(self.heroList, id)
+	end
 end
 
 function HeroComp:refresh()
-	if #self.heroList <= 0 then
-		local heroes = DataManager.HeroData:getAllHeroes()
-		for k, v in pairs(heroes) do
-			table.insert(self.heroList, v)
-		end
-	end
 	self:refreshScrollRect()
 end
 
 function HeroComp:refreshScrollRect()
-	local activeCount = DataManager.HeroData:getActiveHeroCount()
-	local lockCount = #self.heroList - activeCount
+	self:sortHeroList()
+	self.allHeroCount = #self.heroList
+	self.activeCount = DataManager.HeroData:getActiveHeroCount()
+	local lockCount = self.allHeroCount - self.activeCount
 	local cellCount = 0
-	if activeCount > 0 then
-		cellCount = cellCount + math.ceil(activeCount / 5)
+	if self.activeCount > 0 then
+		cellCount = cellCount + math.ceil(self.activeCount / 4)
 	end
 	if lockCount > 0 then
-		cellCount = cellCount + math.ceil(lockCount / 5)
+		cellCount = cellCount + math.ceil(lockCount / 4)
 	end
 	local currCount = self.scrollRect:getTotalCount()
 	if cellCount == currCount then
@@ -43,4 +43,32 @@ function HeroComp:refreshScrollRect()
 	end
 end
 
+-- 等级>品质>id
+function HeroComp:sortHeroList()
+	local heroA
+	local heroB
+	local HeroData = DataManager.HeroData
+	table.sort(self.heroList, function(a, b)
+		heroA = HeroData:getHeroById(a)
+		heroB = HeroData:getHeroById(b)
+		if heroA and heroB then
+			if heroA:getLv() == heroB:getLv() then
+				if heroA:getQlt() == heroB:getQlt() then
+					return a > b
+				else
+					return heroA:getQlt() > heroB:getQlt()
+				end
+			else
+				return heroA:getLv() > heroB:getLv()
+			end
+		elseif heroA and heroB == nil then
+			return true
+		elseif heroB and heroA == nil then
+			return false
+		else
+			return a > b
+		end
+	end)
+end
+
 return HeroComp
\ No newline at end of file
diff --git a/lua/app/userdata/hero/hero_data.lua b/lua/app/userdata/hero/hero_data.lua
index a86c8be0..d4c5916a 100644
--- a/lua/app/userdata/hero/hero_data.lua
+++ b/lua/app/userdata/hero/hero_data.lua
@@ -23,11 +23,14 @@ function HeroData:addHero(cfgId, lv)
 	if self.heroes[cfgId] then
 		return
 	end
-	Logger.logHighlight("cfgId=%s, lv=%s", cfgId, lv)
 	self.heroes[cfgId] = HeroEntity:create(cfgId, lv)
 	self.data.activeCount = self.data.activeCount + 1
 end
 
+function HeroData:getHeroById(id)
+	return self.heroes[id]
+end
+
 function HeroData:getAllHeroes()
 	return self.heroes
 end
diff --git a/lua/app/userdata/hero/hero_entity.lua b/lua/app/userdata/hero/hero_entity.lua
index 84322578..ce74f08e 100644
--- a/lua/app/userdata/hero/hero_entity.lua
+++ b/lua/app/userdata/hero/hero_entity.lua
@@ -31,6 +31,10 @@ function HeroEntity:getLv()
 	return self.data.lv
 end
 
+function HeroEntity:getQlt()
+	return self.config.qlt
+end
+
 function HeroEntity:setAttrDirty()
 	self.attrDirty = true
 end
@@ -91,5 +95,8 @@ function HeroEntity:getLvUpMaterials()
 	return nextLvInfo.exp
 end
 
+function HeroEntity:getConfig()
+	return self.config
+end
 
 return HeroEntity
\ No newline at end of file