diff --git a/frontend/document/koptinterface.lua b/frontend/document/koptinterface.lua
index 2f14c8bde..3d625debf 100644
--- a/frontend/document/koptinterface.lua
+++ b/frontend/document/koptinterface.lua
@@ -23,11 +23,10 @@ KoptOptions = {
 		icon = "resources/icons/appbar.transform.rotate.right.large.png",
 		options = {
 			{
-				name="screen_rotation",
-				name_text = "Screen Rotation",
+				name="screen_mode",
+				name_text = "Screen Mode",
 				item_text = {"portrait", "landscape"},
-				values = {0, 90},
-				default_value = 0,
+				-- TODO: add screen mode changing command
 			}
 		}
 	},
@@ -46,14 +45,6 @@ KoptOptions = {
 	{
 		icon = "resources/icons/appbar.column.two.large.png",
 		options = {
-			{
-				name = "max_columns",
-				name_text = "Columns",
-				item_text = {"1","2","3","4"},
-				values = {1,2,3,4},
-				default_value = 2,
-				show = false
-			},
 			{
 				name = "page_margin",
 				name_text = "Page Margin",
@@ -118,11 +109,18 @@ KoptOptions = {
 				event = "RedrawCurrentPage",
 			},
 			{
-				name = "word_spacing",
-				name_text = "Word Gap",
-				item_text = {"small", "medium", "large"},
-				values = {0.05, 0.15, 0.375},
-				default_value = 0.15,
+				name = "max_columns",
+				name_text = "Columns",
+				item_text = {"1","2","3","4"},
+				values = {1,2,3,4},
+				default_value = 2,
+			},
+			{
+				name="screen_rotation",
+				name_text = "Vertical Text",
+				item_text = {"true", "false"},
+				values = {90, 0},
+				default_value = 0,
 			},
 			{
 				name = "quality",
@@ -130,7 +128,6 @@ KoptOptions = {
 				item_text = {"low", "default", "high"},
 				values={0.5, 0.8, 1.0},
 				default_value = 0.8,
-				show = false,
 			},
 			{
 				name = "auto_straighten",
@@ -140,12 +137,11 @@ KoptOptions = {
 				default_value = 0,
 			},
 			{
-				name = "detect_indent",
-				name_text = "Indentation",
-				item_text = {"enable","disable"},
-				values = {1, 0},
-				default_value = 1,
-				show = false,
+				name = "word_spacing",
+				name_text = "Word Gap",
+				item_text = {"small", "medium", "large"},
+				values = {0.05, 0.15, 0.375},
+				default_value = 0.15,
 			},
 			{
 				name = "defect_size",
@@ -153,6 +149,13 @@ KoptOptions = {
 				item_text = {"small","medium","large"},
 				values = {0.5, 1.0, 2.0},
 				default_value = 1.0,
+			},
+			{
+				name = "detect_indent",
+				name_text = "Indentation",
+				item_text = {"enable","disable"},
+				values = {1, 0},
+				default_value = 1,
 				show = false,
 			},
 		}
diff --git a/frontend/ui/config.lua b/frontend/ui/config.lua
index 2446ac0e8..485abcc12 100644
--- a/frontend/ui/config.lua
+++ b/frontend/ui/config.lua
@@ -43,15 +43,17 @@ function MenuBarItem:init()
 end
 
 function MenuBarItem:onTapSelect()
-	for _, item in pairs(self.items) do
-		item[1].invert = false
-	end
 	self[1].invert = true
-	self.config:onShowOptions(self.options)
-	UIManager.repaint_all = true
+	self.config:onShowConfigPanel(self.index)
+	UIManager:scheduleIn(0.5, function() self:invert(false) end)
 	return true
 end
 
+function MenuBarItem:invert(invert)
+	self[1].invert = invert
+	UIManager:setDirty(self.config, "partial")
+end
+
 OptionTextItem = InputContainer:new{}
 function OptionTextItem:init()
 	local text_widget = self[1]
@@ -97,22 +99,15 @@ function OptionTextItem:onTapSelect()
 	return true
 end
 
-ConfigIcons = HorizontalGroup:new{}
-function ConfigIcons:init()
-	for c = 1, #self.icons do
-		table.insert(self, self.spacing)
-		table.insert(self, self.icons[c])
-	end
-	table.insert(self, self.spacing)
-end
-
-ConfigOption = CenterContainer:new{dimen = Geom:new{ w = Screen:getWidth(), h = math.floor(150*Screen:getWidth()/600)}}
+ConfigOption = CenterContainer:new{}
 function ConfigOption:init()
 	local default_name_font_size = math.floor(20*Screen:getWidth()/600)
 	local default_item_font_size = math.floor(20*Screen:getWidth()/600)
 	local default_items_spacing = math.floor(30*Screen:getWidth()/600)
-	local default_option_height = math.floor(30*Screen:getWidth()/600)
+	local default_option_height = math.floor(40*Screen:getWidth()/600)
+	local default_option_padding = math.floor(40*Screen:getWidth()/600)
 	local vertical_group = VerticalGroup:new{}
+	table.insert(vertical_group, VerticalSpan:new{ width = default_option_padding })
 	for c = 1, #self.options do
 		if self.options[c].show ~= false then
 			local name_align = self.options[c].name_align_right and self.options[c].name_align_right or 0.33
@@ -228,23 +223,33 @@ function ConfigOption:init()
 			table.insert(vertical_group, horizontal_group)
 		end -- if
 	end -- for
+	table.insert(vertical_group, VerticalSpan:new{ width = default_option_padding })
 	self[1] = vertical_group
+	self.dimen = vertical_group:getSize()
 end
 
-ConfigPanel = VerticalGroup:new{}
+ConfigPanel = FrameContainer:new{ background = 0, bordersize = 0, }
 function ConfigPanel:init()
-	local default_option = ConfigOption:new{
-		options = self.config_options.default_options
-	}
-	local menu_bar = FrameContainer:new{
-		background = 0,
+	local config_options = self.config_dialog.config_options
+	local default_option = config_options.default_options and config_options.default_options 
+							or config_options[1].options
+	local panel = ConfigOption:new{
+		options = self.index and config_options[self.index].options or default_option,
+		config = self.config_dialog,
 	}
+	self.dimen = panel:getSize()
+	table.insert(self, panel)
+end
+
+MenuBar = FrameContainer:new{ background = 0, }
+function MenuBar:init()
+	local config_options = self.config_dialog.config_options
 	local menu_items = {}
 	local icons_width = 0
 	local icons_height = 0
-	for c = 1, #self.config_options do
+	for c = 1, #config_options do
 		local menu_icon = ImageWidget:new{
-			file = self.config_options[c].icon
+			file = config_options[c].icon
 		}
 		local icon_dimen = menu_icon:getSize()
 		icons_width = icons_width + icon_dimen.w
@@ -252,29 +257,46 @@ function ConfigPanel:init()
 		
 		menu_items[c] = MenuBarItem:new{
 			menu_icon,
-			options = ConfigOption:new{
-				options = self.config_options[c].options,
-				config = self.config_dialog,
-			},
+			index = c,
 			config = self.config_dialog,
-			items = menu_items,
 		}
 	end
-	menu_bar[1] = ConfigIcons:new{
-		icons = menu_items,
-		spacing = HorizontalSpan:new{
-			width = (Screen:getWidth() - icons_width) / (#menu_items+1)
-		}
+	
+	local spacing = HorizontalSpan:new{
+		width = (Screen:getWidth() - icons_width) / (#menu_items+1)
 	}
-	menu_bar.dimen = Geom:new{ w = Screen:getWidth(), h = icons_height}
 	
-	self[1] = default_option
-	self[2] = menu_bar
+	local menu_bar = HorizontalGroup:new{}
+	
+	for c = 1, #menu_items do
+		table.insert(menu_bar, spacing)
+		table.insert(menu_bar, menu_items[c])
+	end
+	table.insert(menu_bar, spacing)
+	
+	self.dimen = Geom:new{ w = Screen:getWidth(), h = icons_height}
+	table.insert(self, menu_bar)
 end
 
 --[[
-Widget that displays config menu
+Widget that displays config menubar and config panel
+
+ +----------------+
+ |                |
+ |                |
+ |                |
+ |                |
+ |                |
+ +----------------+
+ |                |
+ |  Config Panel  |
+ |                |
+ +----------------+
+ |    Menu Bar    |
+ +----------------+
+ 
 --]]
+
 ConfigDialog = InputContainer:new{
 	--is_borderless = false,
 }
@@ -283,28 +305,13 @@ function ConfigDialog:init()
 	------------------------------------------
 	-- start to set up widget layout ---------
 	------------------------------------------
-	self.config_panel = ConfigPanel:new{ 
-		config_options = self.config_options,
+	self.config_panel = ConfigPanel:new{
 		config_dialog = self,
 	}
-	
-	local config_panel_size = self.config_panel:getSize()
-	
-	self.menu_dimen = Geom:new{
-		x = (Screen:getWidth() - config_panel_size.w)/2,
-		y = Screen:getHeight() - config_panel_size.h,
-		w = config_panel_size.w,
-		h = config_panel_size.h,
-	}
-
-	self[1] = BottomContainer:new{
-		dimen = Screen:getSize(),
-		FrameContainer:new{
-			dimen = self.config_panel:getSize(),
-			background = 0,
-			self.config_panel,
-		}
+	self.config_menubar = MenuBar:new{ 
+		config_dialog = self,
 	}
+	self:makeDialog()
 	------------------------------------------
 	-- start to set up input event callback --
 	------------------------------------------
@@ -327,11 +334,44 @@ function ConfigDialog:init()
 	end
 	self.key_events.Select = { {"Press"}, doc = "select current menu item"}
 	
-	UIManager.repaint_all = true
+	UIManager:setDirty(self, "partial")
+end
+
+function ConfigDialog:updateConfigPanel(index)
+	self.config_panel = ConfigPanel:new{
+		index = index,
+		config_dialog = self,
+	}
+end
+
+function ConfigDialog:makeDialog()
+	local dialog = VerticalGroup:new{
+		self.config_panel,
+		self.config_menubar,
+	}
+	
+	local dialog_size = dialog:getSize()
+	
+	self[1] = BottomContainer:new{
+		dimen = Screen:getSize(),
+		FrameContainer:new{
+			dimen = dialog_size,
+			background = 0,
+			dialog,
+		}
+	}
+	
+	self.dialog_dimen = Geom:new{
+		x = (Screen:getWidth() - dialog_size.w)/2,
+		y = Screen:getHeight() - dialog_size.h,
+		w = dialog_size.w,
+		h = dialog_size.h,
+	}	
 end
 
-function ConfigDialog:onShowOptions(options)
-	self.config_panel[1] = options
+function ConfigDialog:onShowConfigPanel(index)
+	self:updateConfigPanel(index)
+	self:makeDialog()
 	UIManager.repaint_all = true
 	return true
 end
@@ -345,9 +385,8 @@ function ConfigDialog:onCloseMenu()
 end
 
 function ConfigDialog:onTapCloseMenu(arg, ges_ev)
-	if ges_ev.pos:notIntersectWith(self.menu_dimen) then
+	if ges_ev.pos:notIntersectWith(self.dialog_dimen) then
 		self:onCloseMenu()
-		--self.ui:handleEvent(Event:new("GotoPageRel", 0))
 		return true
 	end
 end