diff --git a/frontend/document/koptinterface.lua b/frontend/document/koptinterface.lua
index 187bdea80..c17743b21 100644
--- a/frontend/document/koptinterface.lua
+++ b/frontend/document/koptinterface.lua
@@ -67,14 +67,24 @@ KoptOptions = {
 			{
 				name = "max_columns",
 				name_text = "Columns",
-				item_text = {"1","2","3","4"},
-				values = {1,2,3,4},
+				item_icons = {
+					"resources/icons/appbar.column.one.png",
+					"resources/icons/appbar.column.two.png",
+					"resources/icons/appbar.column.three.png",
+				},
+				values = {1,2,3},
 				default_value = 2,
 			},
 			{
 				name = "justification",
-				name_text = "Justification",
-				item_text = {"auto","left","center","right","full"},
+				name_text = "Text Align",
+				item_icons = {
+					"resources/icons/appbar.align.auto.png",
+					"resources/icons/appbar.align.left.png",
+					"resources/icons/appbar.align.center.png",
+					"resources/icons/appbar.align.right.png",
+					"resources/icons/appbar.align.justify.png",
+				},
 				values = {-1,0,1,2,3},
 				default_value = -1,
 			},
@@ -102,7 +112,7 @@ KoptOptions = {
 				name_text = "Contrast",
 				name_align_right = 0.2,
 				item_text = {"lightest", "lighter", "default", "darker", "darkest"},
-				item_font_size = math.floor(18*Screen:getWidth()/600),
+				item_font_size = 18,
 				item_align_center = 0.8,
 				values = {2.0, 1.5, 1.0, 0.5, 0.2},
 				default_value = 1.0,
diff --git a/frontend/document/pdfdocument.lua b/frontend/document/pdfdocument.lua
index 8dd860f5d..a0dbecd88 100644
--- a/frontend/document/pdfdocument.lua
+++ b/frontend/document/pdfdocument.lua
@@ -1,7 +1,6 @@
 require "cache"
 require "ui/geometry"
 require "ui/screen"
-require "ui/device"
 require "ui/reader/readerconfig"
 require "document/koptinterface"
 
@@ -11,7 +10,7 @@ PdfDocument = Document:new{
 	mupdf_cache_size = 5 * 1024 * 1024,
 	dc_null = DrawContext.new(),
 	screen_size = Screen:getSize(),
-	screen_dpi = Device:getModel() == "KindlePaperWhite" and 212 or 167,
+	screen_dpi = Screen:getDPI(),
 	options = KoptOptions,
 	configurable = Configurable,
 	koptinterface = KoptInterface,
diff --git a/frontend/ui/config.lua b/frontend/ui/config.lua
index e0dead867..32d269459 100644
--- a/frontend/ui/config.lua
+++ b/frontend/ui/config.lua
@@ -109,6 +109,48 @@ function OptionTextItem:onTapSelect()
 	return true
 end
 
+OptionIconItem = InputContainer:new{}
+function OptionIconItem:init()
+	self.dimen = self.icon:getSize()
+	self[1] = UnderlineContainer:new{
+		self.icon,
+		padding = self.padding,
+		color = self.color,
+	}
+	-- we need this table per-instance, so we declare it here
+	if Device:isTouchDevice() then
+		self.ges_events = {
+			TapSelect = {
+				GestureRange:new{
+					ges = "tap",
+					range = self.dimen,
+				},
+				doc = "Select Option Item",
+			},
+		}
+	end
+end
+
+function OptionIconItem:onTapSelect()
+	for _, item in pairs(self.items) do
+		--item[1][1].invert = false
+		item[1].color = 0
+	end
+	--self[1][1].invert = true
+	self[1].color = 15
+	local option_value = nil
+	local option_arg = nil
+	if type(self.values) == "table" then
+		option_value = self.values[self.current_item]
+		self.config:onConfigChoice(self.name, option_value, self.event)
+	elseif type(self.args) == "table" then
+		option_arg = self.args[self.current_item]
+		self.config:onConfigChoice(self.name, option_arg, self.event)
+	end
+	UIManager.repaint_all = true
+	return true
+end
+
 --[[
 Dummy Widget that reserves vertical and horizontal space
 ]]
@@ -139,7 +181,7 @@ function ToggleSwitch:init()
 	self.position = nil
 	
 	local label_font_face = "cfont"
-	local label_font_size = math.floor(20*Screen:getWidth()/600)
+	local label_font_size = 16
 	
 	self.toggle_frame = FrameContainer:new{background = 0, color = 7, radius = 7, bordersize = 1, padding = 2,}
 	self.toggle_content = HorizontalGroup:new{}
@@ -280,18 +322,18 @@ end
 
 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(50*Screen:getWidth()/600)
-	local default_option_padding = math.floor(30*Screen:getWidth()/600)
+	local default_name_font_size = 20
+	local default_item_font_size = 16
+	local default_items_spacing = 30
+	local default_option_height = 50
+	local default_option_padding = 15
 	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
 			local item_align = self.options[c].item_align_center and self.options[c].item_align_center or 0.66
-			local name_font_face = self.options[c].name_font_face and self.options[c].name_font_face or "tfont"
+			local name_font_face = self.options[c].name_font_face and self.options[c].name_font_face or "cfont"
 			local name_font_size = self.options[c].name_font_size and self.options[c].name_font_size or default_name_font_size
 			local item_font_face = self.options[c].item_font_face and self.options[c].item_font_face or "cfont"
 			local item_font_size = self.options[c].item_font_size and self.options[c].item_font_size or default_item_font_size
@@ -400,6 +442,30 @@ function ConfigOption:init()
 				end
 			end
 			
+			if self.options[c].item_icons then
+				for d = 1, #self.options[c].item_icons do
+					local option_item = OptionIconItem:new{
+						icon = ImageWidget:new{
+							file = self.options[c].item_icons[d]
+						},
+						padding = -2,
+						color = d == current_item and 15 or 0,
+					}
+					option_items[d] = option_item
+					option_item.items = option_items
+					option_item.name = self.options[c].name
+					option_item.values = self.options[c].values
+					option_item.args = self.options[c].args
+					option_item.event = self.options[c].event
+					option_item.current_item = d
+					option_item.config = self.config
+					table.insert(option_items_group, option_item)
+					if d ~= #self.options[c].item_icons then
+						table.insert(option_items_group, items_spacing)
+					end
+				end
+			end
+			
 			if self.options[c].toggle then
 				local switch = ToggleSwitch:new{
 					name = self.options[c].name,
diff --git a/frontend/ui/font.lua b/frontend/ui/font.lua
index 764d96641..f3c7eaca2 100644
--- a/frontend/ui/font.lua
+++ b/frontend/ui/font.lua
@@ -43,6 +43,8 @@ function Font:getFace(font, size)
 		-- default to content font
 		font = self.cfont
 	end
+	
+	local size = math.floor(size*Screen:getDPI()/167)
 
 	local face = self.faces[font..size]
 	-- build face if not found
diff --git a/frontend/ui/screen.lua b/frontend/ui/screen.lua
index a73ce2d5e..5844af55d 100644
--- a/frontend/ui/screen.lua
+++ b/frontend/ui/screen.lua
@@ -97,6 +97,10 @@ function Screen:getHeight()
 	return self.height
 end
 
+function Screen:getDPI()
+	return Device:getModel() == "KindlePaperWhite" and 212 or 167
+end
+
 function Screen:getPitch()
 	return self.ptich
 end
diff --git a/resources/icons/appbar.align.auto.png b/resources/icons/appbar.align.auto.png
new file mode 100644
index 000000000..5d63b3965
Binary files /dev/null and b/resources/icons/appbar.align.auto.png differ
diff --git a/resources/icons/appbar.align.center.png b/resources/icons/appbar.align.center.png
new file mode 100644
index 000000000..6db64f325
Binary files /dev/null and b/resources/icons/appbar.align.center.png differ
diff --git a/resources/icons/appbar.align.justify.png b/resources/icons/appbar.align.justify.png
new file mode 100644
index 000000000..7897f35ed
Binary files /dev/null and b/resources/icons/appbar.align.justify.png differ
diff --git a/resources/icons/appbar.align.left.png b/resources/icons/appbar.align.left.png
new file mode 100644
index 000000000..d6acd7568
Binary files /dev/null and b/resources/icons/appbar.align.left.png differ
diff --git a/resources/icons/appbar.align.right.png b/resources/icons/appbar.align.right.png
new file mode 100644
index 000000000..68e060963
Binary files /dev/null and b/resources/icons/appbar.align.right.png differ
diff --git a/resources/icons/appbar.column.one.png b/resources/icons/appbar.column.one.png
new file mode 100644
index 000000000..2ba8f0998
Binary files /dev/null and b/resources/icons/appbar.column.one.png differ
diff --git a/resources/icons/appbar.column.three.png b/resources/icons/appbar.column.three.png
new file mode 100644
index 000000000..a66eaeb6f
Binary files /dev/null and b/resources/icons/appbar.column.three.png differ
diff --git a/resources/icons/appbar.column.two.large.png b/resources/icons/appbar.column.two.large.png
index 6fc0150b7..12ff14bba 100644
Binary files a/resources/icons/appbar.column.two.large.png and b/resources/icons/appbar.column.two.large.png differ
diff --git a/resources/icons/appbar.column.two.png b/resources/icons/appbar.column.two.png
new file mode 100644
index 000000000..222d33c2a
Binary files /dev/null and b/resources/icons/appbar.column.two.png differ
diff --git a/resources/icons/src/appbar.align.center.xaml b/resources/icons/src/appbar.align.center.xaml
new file mode 100644
index 000000000..52e696825
--- /dev/null
+++ b/resources/icons/src/appbar.align.center.xaml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="appbar_align_center" Width="48.0067" Height="48.0067" Clip="F1 M 0,0L 48.0067,0L 48.0067,48.0067L 0,48.0067L 0,0">
+	<Path Width="14.0023" Height="2.00031" Canvas.Left="17.0024" Canvas.Top="13.0018" Stretch="Fill" Fill="#FF000000" Data="F1 M 17.0024,13.0018L 31.0047,13.0018L 31.0047,15.0021L 17.0024,15.0021L 17.0024,13.0018 Z "/>
+	<Path Width="22.0031" Height="2.00028" Canvas.Left="13.0018" Canvas.Top="17.0024" Stretch="Fill" Fill="#FF000000" Data="F1 M 13.0018,17.0024L 35.0049,17.0024L 35.0049,19.0026L 13.0018,19.0027L 13.0018,17.0024 Z "/>
+	<Path Width="16.0022" Height="2.00028" Canvas.Left="16.0022" Canvas.Top="21.0029" Stretch="Fill" Fill="#FF000000" Data="F1 M 16.0022,21.0029L 32.0045,21.0029L 32.0045,23.0032L 16.0022,23.0032L 16.0022,21.0029 Z "/>
+	<Path Width="24.0031" Height="2.0003" Canvas.Left="12.0017" Canvas.Top="25.0035" Stretch="Fill" Fill="#FF000000" Data="F1 M 12.0017,25.0035L 36.0047,25.0035L 36.0047,27.0038L 12.0017,27.0038L 12.0017,25.0035 Z "/>
+	<Path Width="14.002" Height="2.00028" Canvas.Left="17.0024" Canvas.Top="29.004" Stretch="Fill" Fill="#FF000000" Data="F1 M 17.0024,29.004L 31.0043,29.004L 31.0043,31.0043L 17.0024,31.0043L 17.0024,29.004 Z "/>
+	<Rectangle Width="18.0025" Height="2.00028" Canvas.Left="15.0021" Canvas.Top="33.0046" Stretch="Fill" Fill="#FF000000"/>
+</Canvas>
diff --git a/resources/icons/src/appbar.align.justify.xaml b/resources/icons/src/appbar.align.justify.xaml
new file mode 100644
index 000000000..1a929c590
--- /dev/null
+++ b/resources/icons/src/appbar.align.justify.xaml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="appbar_align_justify" Width="48.0067" Height="48.0067" Clip="F1 M 0,0L 48.0067,0L 48.0067,48.0067L 0,48.0067L 0,0">
+	<Path Width="24.0033" Height="2.00028" Canvas.Left="12.0017" Canvas.Top="13.0018" Stretch="Fill" Fill="#FF000000" Data="F1 M 12.0017,13.0018L 36.005,13.0018L 36.005,15.0021L 12.0017,15.0021L 12.0017,13.0018 Z "/>
+	<Path Width="24.0033" Height="2.00029" Canvas.Left="12.0017" Canvas.Top="17.0024" Stretch="Fill" Fill="#FF000000" Data="F1 M 12.0017,17.0024L 36.005,17.0024L 36.005,19.0027L 12.0017,19.0026L 12.0017,17.0024 Z "/>
+	<Path Width="24.0033" Height="2.00028" Canvas.Left="12.0017" Canvas.Top="21.0029" Stretch="Fill" Fill="#FF000000" Data="F1 M 12.0017,21.0029L 36.005,21.0029L 36.005,23.0032L 12.0017,23.0032L 12.0017,21.0029 Z "/>
+	<Path Width="24.0033" Height="2.00029" Canvas.Left="12.0017" Canvas.Top="25.0035" Stretch="Fill" Fill="#FF000000" Data="F1 M 12.0017,25.0035L 36.005,25.0035L 36.005,27.0038L 12.0017,27.0038L 12.0017,25.0035 Z "/>
+	<Path Width="24.0033" Height="2.00028" Canvas.Left="12.0017" Canvas.Top="29.004" Stretch="Fill" Fill="#FF000000" Data="F1 M 12.0017,29.004L 36.005,29.004L 36.005,31.0043L 12.0017,31.0043L 12.0017,29.004 Z "/>
+	<Path Width="24.0033" Height="2.00029" Canvas.Left="12.0017" Canvas.Top="33.0046" Stretch="Fill" Fill="#FF000000" Data="F1 M 12.0017,33.0046L 36.005,33.0046L 36.005,35.0049L 12.0017,35.0049L 12.0017,33.0046 Z "/>
+</Canvas>
diff --git a/resources/icons/src/appbar.align.left.xaml b/resources/icons/src/appbar.align.left.xaml
new file mode 100644
index 000000000..d7e0e0c7d
--- /dev/null
+++ b/resources/icons/src/appbar.align.left.xaml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="appbar_align_left" Width="48.0067" Height="48.0067" Clip="F1 M 0,0L 48.0067,0L 48.0067,48.0067L 0,48.0067L 0,0">
+	<Path Width="16.0023" Height="2.00033" Canvas.Left="12.0017" Canvas.Top="13.0018" Stretch="Fill" Fill="#FF000000" Data="F1 M 12.0017,13.0018L 28.004,13.0019L 28.004,15.0021L 12.0017,15.0021L 12.0017,13.0018 Z "/>
+	<Path Width="19.0024" Height="2.0003" Canvas.Left="12.0017" Canvas.Top="17.0024" Stretch="Fill" Fill="#FF000000" Data="F1 M 12.0017,17.0024L 31.004,17.0024L 31.004,19.0027L 12.0017,19.0026L 12.0017,17.0024 Z "/>
+	<Path Width="15.0023" Height="2.00034" Canvas.Left="12.0017" Canvas.Top="21.0029" Stretch="Fill" Fill="#FF000000" Data="F1 M 12.0017,21.0029L 27.004,21.003L 27.004,23.0033L 12.0017,23.0032L 12.0017,21.0029 Z "/>
+	<Path Width="21.0023" Height="2.00032" Canvas.Left="12.0017" Canvas.Top="25.0035" Stretch="Fill" Fill="#FF000000" Data="F1 M 12.0017,25.0035L 33.004,25.0035L 33.004,27.0038L 12.0017,27.0038L 12.0017,25.0035 Z "/>
+	<Path Width="17.0023" Height="2.00034" Canvas.Left="12.0017" Canvas.Top="29.004" Stretch="Fill" Fill="#FF000000" Data="F1 M 12.0017,29.004L 29.004,29.0041L 29.004,31.0044L 12.0017,31.0043L 12.0017,29.004 Z "/>
+	<Rectangle Width="20.0023" Height="2.00028" Canvas.Left="12.0017" Canvas.Top="33.0046" Stretch="Fill" Fill="#FF000000"/>
+</Canvas>
diff --git a/resources/icons/src/appbar.align.right.xaml b/resources/icons/src/appbar.align.right.xaml
new file mode 100644
index 000000000..08a86c4cb
--- /dev/null
+++ b/resources/icons/src/appbar.align.right.xaml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="appbar_align_right" Width="48.0067" Height="48.0067" Clip="F1 M 0,0L 48.0067,0L 48.0067,48.0067L 0,48.0067L 0,0">
+	<Path Width="16.0023" Height="2.00033" Canvas.Left="20.0027" Canvas.Top="13.0018" Stretch="Fill" Fill="#FF000000" Data="F1 M 36.005,13.0018L 20.0027,13.0019L 20.0027,15.0021L 36.005,15.0021L 36.005,13.0018 Z "/>
+	<Path Width="19.0023" Height="2.0003" Canvas.Left="17.0027" Canvas.Top="17.0024" Stretch="Fill" Fill="#FF000000" Data="F1 M 36.005,17.0024L 17.0027,17.0024L 17.0027,19.0027L 36.005,19.0026L 36.005,17.0024 Z "/>
+	<Path Width="15.0023" Height="2.00034" Canvas.Left="21.0027" Canvas.Top="21.0029" Stretch="Fill" Fill="#FF000000" Data="F1 M 36.005,21.0029L 21.0027,21.003L 21.0027,23.0033L 36.005,23.0032L 36.005,21.0029 Z "/>
+	<Path Width="21.0023" Height="2.00032" Canvas.Left="15.0027" Canvas.Top="25.0035" Stretch="Fill" Fill="#FF000000" Data="F1 M 36.005,25.0035L 15.0027,25.0035L 15.0027,27.0038L 36.005,27.0038L 36.005,25.0035 Z "/>
+	<Path Width="17.0023" Height="2.00032" Canvas.Left="19.0027" Canvas.Top="29.004" Stretch="Fill" Fill="#FF000000" Data="F1 M 36.005,29.004L 19.0027,29.0041L 19.0027,31.0044L 36.005,31.0043L 36.005,29.004 Z "/>
+	<Rectangle Width="20.0023" Height="2.00028" Canvas.Left="16.0027" Canvas.Top="33.0046" Stretch="Fill" Fill="#FF000000"/>
+</Canvas>