diff --git a/sysgo/UI/foot_bar.go b/sysgo/UI/foot_bar.go
index cf69d0b..53c692b 100644
--- a/sysgo/UI/foot_bar.go
+++ b/sysgo/UI/foot_bar.go
@@ -1,7 +1,225 @@
 package UI
 
+import (
+	"github.com/veandco/go-sdl2/sdl"
+	"github.com/veandco/go-sdl2/ttf"
+	
+	"github.com/cuu/gogame/rect"
+	"github.com/cuu/gogame/surface"
+	
+)
+
 var FootBar_BarHeight = 20
 
-type FootBar struct {
+type FootBarIconItem struct {
+	MultiIconItem
+	Parent *FootBar
+}
+
+func NewFootBarIconItem() *FootBarIconItem {
+	m := &FootBarIconItem{}
+	return m
+}
+
+func (self *FootBarIconItem) TotalWidth() int {
+	lab_w,_ := self.Label.Size()
+	return self.Width + lab_w
+}
+
+func (self *FootBarIconItem) Draw() {
+	
+	if self.Label != nil {
+		lab_w,lab_h:= self.Label.Size()
+		if self.Align == ALIGN["VCenter"] {
+			self.Label.NewCoord( self.PosX - lab_w/2, self.PosY+ self.Height/2+12)
+		} else if self.Align == ALIGN["HLeft"] {
+			self.Label.NewCoord( self.PosX + self.Width/2+3, self.PosY - lab_h/2)
+		}
+		self.Label.Draw()
+	}
+
+	if self.ImgSurf != nil {
+		portion := rect.Rect(0, self.IconIndex*self.IconHeight, self.IconWidth, self.IconHeight)
+		surface.Blit(self.Parent.CanvasHWND, self.ImgSurf, draw.MidRect(self.PosX,self.PosY, self.Width,self.Height, Width,Height),&portion)
+		
+	}
 	
 }
+
+type FootBar struct {
+
+	PosX int
+	PosY int
+	Width int
+	Height int
+	BarHeight int
+	BorderWidth int
+	CanvasHWND *sdl.Surface
+	HWND       *sdl.Surface
+	Icons   map[string]IconItemInterface
+	IconWidth int
+	IconHeight int
+	LabelFont *ttf.Font
+	State   string
+	SkinManager *SkinManager
+	icon_base_path string
+	
+}
+
+
+func NewFootBar() *FootBar {
+	f := &FootBar{}
+	f.Width = Width
+
+	f.BorderWidth = 1
+	f.BarHeight = FootBar_BarHeight
+	f.Height = 20
+
+	f.IconWidth = 18
+	f.IconHeight = 18
+	
+	f.LabelFont = Fonts["veramono10"]
+	f.State = "normal"
+	f.icon_base_path = SkinMap("gameshell/footbar_icons/")
+
+	f.Icons = make(map[string]IconItemInterface)
+	
+	return f
+}
+
+func (self *FootBar) ReadFootBarIcons( icondir string) {
+	if FileExists(icondir) == false && IsDirectory(icondir) == false {
+		return
+	}
+	keynames := [5]string{"nav","x","y","a","b"}
+
+	share_surf := image.Load(icon_base_path+"footbar.png")
+
+	files,err := ioutil.ReadDir(icondir)
+	if err != nil {
+		log.Fatal(err)
+		return
+	}
+
+	for i,v := range keynames { // share_surf contains same number of image pieces of keynames
+		it := NewFootBarIconItem()
+		it.MyType = ICON_TYPES["NAV"]
+		it.Parent = self
+		it.ImgSurf = share_surf
+		it.Align = ALIGN["HLeft"] // (X)Text
+		it.AddLabel("game", self.LabelFont)
+		it.Adjust( self.IconWidth/2+i*self.IconWidth, self.IconHeight/2+2, self.IconWidth,self.IconHeight,0)
+		it.IconIndex = i
+		self.Icons[v] = it
+	}
+}
+
+
+func (self *FootBar) Init(main_screen *MainScreen) {
+	self.CanvasHWND = surface.Surface(self.Width,self.Height)
+	self.HWND = main_screen.HWND
+	self.SkinManager = main_screen.SkinManager
+	self.DBusManager = main_screen.DBusManager
+
+
+	round_corners := NewFootBarIconItem()
+	round_corners.IconWidth = 10
+	round_corners.IconHeight = 10
+	
+	round_corners.MyType = ICON_TYPES["STAT"]
+	round_corners.Parent = self
+	round_corners.ImgSurf = MyIconPool.GetImageSurf["roundcorners"]
+	round_corners.Adjust(0,0,10,10,0)
+	
+	self.Icons["round_corners"] = round_corners
+	
+}
+
+func (self *FootBar) ResetNavText() {
+	self.Icons["nav"].Label.SetText("Nav.")
+	self.State = "normal"
+	self.Draw()
+}
+
+func (self *FootBar) UpdateNavText(texts string) {
+	self.State = "tips"
+	my_text := font.Render(self.LabelFont, texts, true,self.SkinManager.GiveColor("Text"))
+
+	left_width := self.Width - 18
+
+	final_piece := ""
+
+	for i,_ := range texts {
+		text_ := texts[:i+1]
+		my_text := font.Render(self.LabelFont, text_, true, self.SkinManager.GiveColor("Text"))
+		final_piece  = text_
+		if my_text.W >= left_width {
+			break
+		}
+	}
+	
+	fmt.Printf("finalpiece %s\n", final_piece)
+
+	self.Icons["nav"].Label.SetText(final_piece)
+	self.Draw()
+	
+}
+
+func (self *FootBar) SetLabelTexts( texts []string) {
+	keynames := [5]string{"nav","x","y","a","b"}
+	if len(texts) < 5 {
+		log.Fatal("SetLabelTexts texts length error")
+		return
+	}
+
+	for idx,x := range keynames {
+		self.Icons[x].Label.SetText(texts[idx])
+	}
+	
+}
+
+func (self *FootBar) ClearCanvas() {
+	surface.Fill( self.CanvasHWND,  self.SkinManager.GiveColor("White"))
+
+	self.Icons["round_corners"].NewCoord(5,self.Height-5)
+	self.Icons["round_corners"].SetIconIndex(2)
+	self.Icons["round_corners"].Draw()
+
+
+	self.Icons["round_corners"].NewCoord(self.Width - 5,self.Height - 5)
+	self.Icons["round_corners"].SetIconIndex(3)
+
+	self.Icons["round_corners"].Draw()
+	
+}
+
+func (self *FootBar) Draw() {
+	self.ClearCanvas()
+	self.Icons["nav"].NewCoord(self.IconWidth/2+3, self.IconHeight/2+2)
+	self.Icons["nav"].Draw()
+
+	if self.State == "normal" {
+		_w := 0
+
+		for i,x := range []string{"b","a","y","x"} {
+			if self.Icons[x].Label.GetText() != "" {
+				if i== 0 {
+					_w += self.Icons[x].TotalWidth()
+				}else {
+					_w += self.Icons[x].TotalWidth()+5
+				}
+
+				start_x := self.Width - _w
+				start_y := self.IconHeight/2+2
+				self.Icons[x].NewCoord(start_x, start_y)
+				self.Icons[x].Draw()
+			}
+		}
+
+		draw.Line(self.CanvasHWND, self.SkinManager.GiveColor("Line"),0,0,Width,0,self.BorderWidth)
+
+		if self.HWND != nil {
+			rect_ := rect.Rect(self.PosX, Height - self.Height, Width, self.BarHeight)
+			surface.Blit(self.HWND,self.CanvasHWND, &rect_,nil)
+		}
+}
diff --git a/sysgo/UI/icon_item.go b/sysgo/UI/icon_item.go
index fc1eb12..5457e25 100644
--- a/sysgo/UI/icon_item.go
+++ b/sysgo/UI/icon_item.go
@@ -30,7 +30,8 @@ type IconItemInterface interface {
 	
 	Coord() (int,int)
 	NewCoord(x,y int)
-	
+
+	TotalWidth() int
 	Size() (int,int)
 	
 	AddLabel(text string, fontobj *ttf.Font)
@@ -151,7 +152,11 @@ func (self *IconItem) NewCoord(x,y int) {
 	self.PosY = y
 }
 
-func (self *IconItem) NewCoord(x,y int) {
+func (self *IconItem) TotalWidth() int {
+	
+}
+
+func (self *IconItem) Size() (int,int) {
 	return self.Width,self.Height
 }
 
diff --git a/sysgo/UI/page.go b/sysgo/UI/page.go
index 6baf5c8..596dc7a 100644
--- a/sysgo/UI/page.go
+++ b/sysgo/UI/page.go
@@ -138,29 +138,60 @@ func (self *PageSelector) Draw() {
 
 
 type PageInterface interface {
-	// shared functions
-	// GetScreen
-	// GetIcons
-	// SetScreen
-	// SetFootMsg
-	// SetCanvasHWND
-	// GetCanvasHWND
-	// GetHWND
-	// SetHWND
-	// AdjustHLeftAlign
-	// AdjustSAutoLeftAlign
-	// SetPsIndex
-	// SetIconIndex
-	// GetPsIndex
-	// GetIconIndex
-	// Coord
-	// Size
-	// UpdateIconNumbers
-	// GetIconNumbers
-	// SetOnShow
-	// AppendIcon
-	// GetName()
-	// GetFootMsg
+	// ## shared functions ##
+	Adjust()
+	Init()
+	
+	GetScreen() *MainScreen
+	GetIcons() []IconItemInterface
+	SetScreen( main_screen *MainScreen)
+	SetFootMsg(footmsg [5]string)
+	GetCanvasHWND() *sdl.Surface
+	SetCanvasHWND( canvas *sdl.Surface)
+
+	GetHWND() *sdl.Surface
+	SetHWND(h *sdl.Surface)
+	
+	AdjustHLeftAlign()
+	AdjustSAutoLeftAlign()
+
+	SetPsIndex( idx int)
+	GetPsIndex() int
+
+	SetIconIndex(idx int)
+	GetIconIndex() int
+
+	Coord() (int, int)
+	Size() (int,int)
+
+	UpdateIconNumbers()
+	GetIconNumbers() int
+
+	SetOnShow(on_show bool)
+	GetOnShow() bool
+	
+	AppendIcon( it interface{} )
+	ClearIcons()
+	DrawIcons()
+	
+	GetName() string
+	GetFootMsg() [5]string
+
+	KeyDown( ev *event.Event)
+
+	ReturnToUpLevelPage()
+	
+	OnLoadCb()
+	OnReturnBackCb()
+	OnExitCb()
+
+//	IconClick()
+	ResetPageSelector()
+	DrawPageSelector()
+
+	ClearCanvas()
+	Draw()
+
 	
 }
 
@@ -208,6 +239,15 @@ func NewPage() *Page {
 	return p
 }
 
+func (self *Page) GetScreen() *MainScreen {
+	return self.Screen
+}
+
+func (self *Page) SetScreen(main_screen *MainScreen) {
+	self.Screen = main_screen
+}
+
+
 func (self *Page) AdjustHLeftAlign() {
 	self.PosX = self.Index*self.Screen.Width
 	self.Width = self.Screen.Width
@@ -450,6 +490,10 @@ func (self *Page) Adjust() { // default init way,
 	
 }
 
+func (self *Page) GetOnShow() bool {
+	return self.OnShow
+}
+
 func (self *Page) SetOnShow( on_show bool) {
 	self.OnShow = on_show
 }
@@ -769,6 +813,10 @@ func (self *Page) AppendIcon( it interface{} ) {
 	self.Icons = append(self.Icons, it)
 }
 
+func (self *Page) GetIcons() []IconItemInterface {
+	return self.Icons
+}
+
 func (self *Page) ClearIcons() {
 	for i:=0;i<self.IconNumbers; i++ {
 		self.Icons[i].Clear()
@@ -854,9 +902,58 @@ func (self *Page) Draw() {
 	self.DrawPageSelector()
 }
 
+func (self *Page) GetFootMsg() [5]string {
+	return self.FootMsg
+}
+
+func (self *Page) SetFootMsg(footmsg [5]string) {
+	self.FootMsg = footmsg
+}
 
 
+func (self *Page) GetCanvasHWND() *sdl.Surface {
+	return self.CanvasHWND
+}
+
+func (self *Page)	SetCanvasHWND( canvas *sdl.Surface) {
+	self.CanvasHWND = canvas
+}
 
 
+func (self *Page)	GetHWND() *sdl.Surface {
+	return self.HWND
+}
+
+func (self *Page)	SetHWND(h *sdl.Surface) {
+	self.HWND = h
+}
+
+func (self *Page) SetPsIndex( idx int) {
+	self.PsIndex = idx
+}
+
+func (self *Page) GetPsIndex() int {
+	return self.PsIndex
+}
+
+func (self *Page) SetIconIndex( idx int) {
+	self.IconIndex = idx
+}
+
+func (self *Page) GetIconIndex() int {
+	return self.IconIndex
+}
 
 
+func (self *Page) Coord() (int,int) {
+	return self.PosX,self.PosY
+}
+
+func (self *Page) Size() (int,int) {
+	return self.Width,self.Height
+}
+
+
+func (self *Page) GetName() string {
+	return self.Name
+}
diff --git a/sysgo/UI/title_bar.go b/sysgo/UI/title_bar.go
index ce319b7..b4073d9 100644
--- a/sysgo/UI/title_bar.go
+++ b/sysgo/UI/title_bar.go
@@ -7,11 +7,15 @@ import (
 	"strings"
 	
 	"github.com/veandco/go-sdl2/sdl"
+//	"github.com/veandco/go-sdl2/ttf"
 	
 	"github.com/cuu/gogame/surface"
+	"github.com/cuu/gogame/font"
 	
 	"github.com/itchyny/volume-go"
-
+	
+	"github.com/vjeantet/jodaTime"
+	
 	"../../sysgo"
 )
 
@@ -77,6 +81,9 @@ type TitleBar struct {
 	DBusManager *DBusInterface
 	
 	icon_base_path string /// SkinMap("gameshell/titlebar_icons/")
+
+	TitleFont *ttf.Font
+	TimeFont  *ttf.Font
 }
 
 
@@ -100,6 +107,9 @@ func NewTitleBar() *TitleBar {
 	t.Icons = make(map[string]IconItemInterface)
 	
 	t.icon_base_path  = SkinMap("gameshell/titlebar_icons/")
+
+	t.TitleFont = Fonts["varela12"]
+	t.TimeFont  = Fonts["varela16"]
 }
 
 func (t *TitleBar) RoundRobinCheck {
@@ -110,9 +120,9 @@ func (t *TitleBar) UpdateWifiStrength() {
 	
 }
 
-func (t *TitleBar) GetWifiStrength(stren string) int {
+func (t *TitleBar) GetWifiStrength(stren int) int {
 	segs := [][]int{ []int{-2,-1}, []int{0,25}, []int{25,50}, []int{50,75},int{75,100}}
-	stren_number,_ :=  strconv.Atoi( stren )
+	stren_number :=  stren 
 	ge := 0
 	if stren_number == 0 {
 		return ge
@@ -281,8 +291,74 @@ func (self *TitleBar) Init(main_screen *MainScreen) {
 	
 	self.Icons["round_corners"] = round_corners
 
-	if is_wifi_connected_now() {
+	if self.DBusManager.IsWifiConnectedNow() {
 		print("wifi is connected")
-		print( wifi_strength())
+		print( self.DBusManager.WifiStrength())
 	}
 }
+
+func (self *TitleBar) ClearCanvas() {
+	surface.Fill(self.CanvasHWND, self.SkinManager.GiveColor("TitleBg"))
+
+	self.Icons["round_corners"].NewCoord(5,5)
+	self.Icons["round_corners"].SetIconIndex(0)
+	self.Icons["round_corners"].Draw()
+
+	self.Icons["round_corners"].NewCoord(self.Width-5, 5)
+	self.Icons["round_corners"].SetIconIndex(1)
+	self.Icons["round_corners"].Draw()
+	
+}
+
+
+func (self *TitleBar) Draw(title string) {
+	self.ClearCanvas()
+	self.Title = title
+
+	cur_time := jodaTime.Format("HH:mm", time.Now())
+	
+	time_text_w,  time_text_h  := font.Size(self.TimeFont, cur_time)
+	title_text_w, title_text_h := font.Size(self.TitleFont, self.Title)
+
+	title_text_surf := font.Render(self.TitleFont, self.Title, true, self.SkinManager.GiveColor("Text"))
+	
+	surface.Blit(self.CanvasHWND,title_text_surf, draw.MidRect(title_text_w/2+self.LOffset,title_text_h/2+(self.BarHeight-title_text_h)/2,title_text_w,title_text_h,Width,Height),nil)
+
+
+	time_text_surf := font.Render(self.TimeFont, cur_time,true,self.SkinManager.GiveColor("Text"))
+	surface.Blit(self.CanvasHWND, time_text_surf, draw.MidRect(Width-time_text_w/2-self.ROffset, time_text_h/2+(self.BarHeight-time_text_h)/2, time_text_w,time_text_h,Width,Height),nil)
+
+	start_x := Width - time_text_w - self.ROffset - self.IconWidth*3 // close to the time_text
+	self.Icons["sound"].NewCoord( start_x, self.IconHeight/2+ (self.BarHeight-self.IconHeight)/2)
+	self.Icons["battery"].NewCoord(start_x+self.IconWidth+self.IconWidth+8, self.IconHeight/2+(self.BarHeight-self.IconHeight)/2)
+
+	if self.DBusManager.IsWifiConnectedNow() == true {
+		ge := self.GetWifiStrength( self.DBusManager.WifiStrength() )
+		if ge > 0 {
+			self.Icons["wifistatus"].SetIconIndex(ge)
+			self.Icons["wifistatus"].NewCoord(start_x+self.IconWidth+5, self.IconHeight/2+(self.BarHeight-self.IconHeight)/2 )
+			self.Icons["wifistatus"].Draw()
+		}else {
+			self.Icons["wifistatus"].SetIconIndex(0)
+			self.Icons["wifistatus"].Draw()
+		}
+	}else {
+		self.Icons["wifistatus"].SetIconIndex(0)
+		self.Icons["wifistatus"].NewCoord(start_x+self.IconWidth+5, self.IconHeight/2+(self.BarHeight-self.IconHeight)/2)
+		self.Icons["wifistatus"].Draw()
+	}
+
+	self.Icons["sound"].Draw()
+	self.Icons["battery"].Draw()
+
+	
+	draw.Line(self.CanvasHWND,self.SkinManager.GiveColor("Line"), 0,self.BarHeight,self.Width,self.BarHeight, self.BorderWidth)
+
+	if self.HWND != nil {
+		rect_ := rect.Rect(self.PosX,self.PosY, self.Width,self.Height)
+		surface.Blit(self.HWND, self.CanvasHWND, &rect_, nil)
+	}
+}
+
+	
+	
diff --git a/test b/test
index b048f2f..4a16a62 100755
Binary files a/test and b/test differ
diff --git a/test.go b/test.go
index 9c06211..74eeb73 100644
--- a/test.go
+++ b/test.go
@@ -27,7 +27,7 @@ func run() int {
 	
 	screen := display.SetMode(int32(width),int32(height),0,32)
 	
-	surface.Fill(screen, color.Color{255,255,255,255} ) 
+	surface.Fill(screen, &color.Color{255,255,255,255} ) 
 
 	rect1 := rect.Rect(0,10, 12, 10)
 	
@@ -59,8 +59,8 @@ func run() int {
 	}
   */
 	
-//	draw.Line(screen,color.Color{255,44,255,0}, 0,100, 320,100,3)
-//	draw.Line(screen,color.Color{255,44,255,0}, 10, 0, 10,250,4)
+	draw.Line(screen,&color.Color{255,44,255,255}, 0,100, 320,100,3)
+	draw.Line(screen,&color.Color{255,44,255,255}, 10, 0, 10,250,4)
 
 	rect2 := rect.Rect(3,120,200,30)
 	draw.AARoundRect(screen,&rect2,&color.Color{0,213,222,255},10,0, &color.Color{0,213,222,255})
@@ -68,7 +68,6 @@ func run() int {
 	font.Init()
 	
 	font_path := "skin/default/truetype/NotoSansCJK-Regular.ttf"
-
 	
 	notocjk15 := font.Font(font_path,15)