diff --git a/mythtv/themes/MythCenter-wide/recordings-ui.xml b/mythtv/themes/MythCenter-wide/recordings-ui.xml
index e1e36bef863..360330593db 100644
--- a/mythtv/themes/MythCenter-wide/recordings-ui.xml
+++ b/mythtv/themes/MythCenter-wide/recordings-ui.xml
@@ -4,6 +4,11 @@
 
     <window name ="watchrecordings">
 
+        <imagetype name="fanart">
+            <area>0,0,100%,100%</area>
+            <filename />
+        </imagetype>
+
         <textarea name="pagetitle" from="basetextarea">
             <area>20,4,570,40</area>
             <font>baselarge</font>
@@ -11,77 +16,162 @@
         </textarea>
 
         <clock name="clock">
-            <area>850,10,410,30</area>
+            <area>850,5,410,30</area>
             <font>basesmall_normal</font>
             <align>vcenter,right</align>
             <template>%DATE% %TIME%</template>
         </clock>
 
-        <imagetype name="listbackground">
-            <filename>reclist_background.png</filename>
-            <position>0,60</position>
-        </imagetype>
+        <shape name="groupbackground" from="basebackground">
+            <area>20,80,330,310</area>
+        </shape>
+
+        <shape name="progbackground" from="basebackground">
+            <area>360,80,900,310</area>
+        </shape>
+
+        <shape name="detailsbackground" from="basebackground">
+            <area>20,400,1240,300</area>
+        </shape>
 
         <buttonlist name="recgroups">
             <arrange>stack</arrange>
-            <area>364,30,634,40</area>
-            <align>hcenter</align>
-            <scrollstyle>center</scrollstyle>
+            <align>top,hcenter</align>
+            <spacing>0</spacing>
+            <scrollstyle>free</scrollstyle>
             <wrapstyle>items</wrapstyle>
             <layout>horizontal</layout>
-            <buttonarea>0,0,100%,100%</buttonarea>
+
+            <area>370,35,880,46</area>
+            <buttonarea>25,0,-25,100%</buttonarea>
+
             <statetype name="buttonitem">
+                <area>0,0,400,100%</area>
+                <minsize>50,100%</minsize>
+
                 <state name="selectedinactive">
-                    <area>0,0,300,100%</area>
-                    <textarea name="buttontext">
-                        <area>10,2,-10,-5</area>
-                        <align>center</align>
-                        <font>basemedium</font>
-                        <alpha>200</alpha>
-                    </textarea>
+                    <area>0,5,100%,-5</area>
+                    <minsize>50,100%</minsize>
+                    <group name="areagroup">
+                        <area>0,0,100%,100%</area>
+                        <minsize>50,100%</minsize>
+
+                        <shape name="recGroupShape">
+                            <area>0,0,100%,100%</area>
+                            <minsize>50,100%</minsize>
+                            <type>roundbox</type>
+                            <cornerradius>15</cornerradius>
+                            <line color="#ffffff" alpha="255" width="3" />
+                            <fill style="gradient">
+                                <gradient start="#00aa00" end="#00ff00" alpha="200" direction="vertical" />
+                            </fill>
+                        </shape>
+                        <textarea name="buttontext">
+                            <area>15,5,-15,-5</area>
+                            <minsize>50,100%</minsize>
+                            <extraleading>4</extraleading>
+                            <align>center</align>
+                            <cutdown>yes</cutdown>
+                            <font>basesmall</font>
+                            <alpha>255</alpha>
+                        </textarea>
+                    </group>
                 </state>
+
+                <state name="selectedactive" from="selectedinactive" />
+
                 <state name="inactive" from="selectedinactive">
-                    <textarea name="buttontext">
-                        <area>0,0,0,0</area>
-                    </textarea>
+                    <area>0,0,100%,100%</area>
+                    <group name="areagroup">
+                        <area>0,5,100%,-5</area>
+                        <minsize>50,100%</minsize>
+                        <shape name="recGroupShape">
+                            <area>0,0,100%,100%</area>
+                            <minsize>50,100%</minsize>
+                            <type>roundbox</type>
+                            <fill color="#00aa00" alpha="120" />
+                            <line color="#cccccc" width="3" alpha="100" />
+                            <cornerradius>15</cornerradius>
+                        </shape>
+                    </group>
                 </state>
+
+                <state name="active" from="inactive" />
+
             </statetype>
+
             <statetype name="upscrollarrow">
-                <area>0,0,0,0</area>
+                <position>0,50%-16</position>
+                <showempty>yes</showempty>
+                <state type="full">
+                    <imagetype name="lefton">
+                        <filename>ui/left_arrow-sel.png</filename>
+                    </imagetype>
+                </state>
             </statetype>
             <statetype name="downscrollarrow">
-                <area>0,0,0,0</area>
+                <position>100%-32,50%-16</position>
+                <showempty>yes</showempty>
+                <state type="full">
+                    <imagetype name="righton">
+                        <filename>ui/right_arrow-sel.png</filename>
+                    </imagetype>
+                </state>
             </statetype>
+
         </buttonlist>
 
-        <buttonlist name="groups">
-            <area>46,100,300,300</area>
-            <buttonarea>0,0,250,250</buttonarea>
-            <spacing>4</spacing>
-            <scrollstyle>center</scrollstyle>
-            <wrapstyle>items</wrapstyle>
+        <buttonlist name="groups" from="basebuttonlist2">
+            <area>25,54,305,350</area>
+            <buttonarea>0,36,255,270</buttonarea>
+            <spacing>0</spacing>
+            <wrapstyle>captive</wrapstyle>
             <searchposition>-1,390</searchposition>
             <triggerevent context="Global" action="ESCAPE">LEFT</triggerevent>
             <statetype name="buttonitem">
-                <state name="active">
-                    <textarea name="name">
-                        <area>10,0,300,30</area>
+                <state name="active" >
+                    <area>5,0,305,30</area>
+                    <textarea name="buttontext">
+                        <area>3,0,100%-6,30</area>
+                        <font>basesmall_normal</font>
+                        <cutdown>yes</cutdown>
+                        <align>left,vcenter</align>
+                    </textarea>
+                </state>
+                <state name="selectedinactive" from="active">
+                    <shape name="selectbar">
+                        <area>0,0,100%,30</area>
+                    </shape>
+                    <textarea name="buttontext">
+                        <area>3,0,100%-6,30</area>
                         <font>basesmall_normal</font>
                         <cutdown>yes</cutdown>
                         <align>left,vcenter</align>
                     </textarea>
                 </state>
-                <state name="selectedinactive" from="active" />
                 <state name="selectedactive" from="active">
-                    <textarea name="name">
+                    <shape name="selectbar">
+                        <area>0,0,100%,30</area>
+                    </shape>
+                    <textarea name="buttontext">
+                        <area>3,0,100%-6,30</area>
                         <font>basesmall_normal_selected</font>
+                        <cutdown>yes</cutdown>
+                        <align>left,vcenter</align>
                     </textarea>
                 </state>
             </statetype>
+            <statetype name="upscrollarrow">
+                <position>240,310</position>
+            </statetype>
+            <statetype name="downscrollarrow">
+                <position>270,310</position>
+            </statetype>
+
         </buttonlist>
 
         <buttonlist name="recordings" from="basebuttonlist2">
-            <area>364,44,880,350</area>
+            <area>370,54,870,350</area>
             <buttonarea>0,36,880,270</buttonarea>
             <wrapstyle>captive</wrapstyle>
             <spacing>0</spacing>
@@ -89,7 +179,7 @@
             <triggerevent context="Global" action="MENU">RIGHT</triggerevent>
             <statetype name="buttonitem">
                 <state name="active">
-                <area>0,0,100%,30</area>
+                <area>0,0,880,30</area>
                 <statetype name="status">
                     <position>0,2</position>
                     <state name="disabled">
@@ -152,12 +242,12 @@
                 </state>
                 <state name="selectedinactive" from="active">
                     <shape name="selectbar">
-                        <area>26,0,854,30</area>
+                        <area>0,0,100%,30</area>
                     </shape>
                 </state>
                 <state name="selectedactive" from="active">
                     <shape name="selectbar">
-                        <area>26,0,854,30</area>
+                        <area>0,0,100%,30</area>
                     </shape>
                     <textarea name="titlesubtitle" from="buttontext">
                         <area>32,2,656,28</area>
@@ -180,35 +270,35 @@
                 </state>
             </statetype>
             <statetype name="upscrollarrow">
-                <position>850,0</position>
+                <position>810,310</position>
             </statetype>
             <statetype name="downscrollarrow">
-                <position>850,328</position>
+                <position>840,310</position>
             </statetype>
         </buttonlist>
 
         <imagetype name="autoexpire">
             <filename>autoexpire.png</filename>
-            <position>988,670</position>
+            <position>988,660</position>
         </imagetype>
 
         <imagetype name="commflagged">
             <filename>commflagged.png</filename>
-            <position>1024,670</position>
+            <position>1024,660</position>
         </imagetype>
 
         <imagetype name="bookmark">
             <filename>bookmark.png</filename>
-            <position>1060,670</position>
+            <position>1060,660</position>
         </imagetype>
 
         <imagetype name="cutlist">
             <filename>cutlist.png</filename>
-            <position>1094,670</position>
+            <position>1094,660</position>
         </imagetype>
 
         <statetype name="audioprops">
-            <position>1128,670</position>
+            <position>1128,660</position>
             <showempty>yes</showempty>
             <state name="stereo">
                 <imagetype name="stereo">
@@ -233,7 +323,7 @@
         </statetype>
 
         <statetype name="subtitletypes">
-            <position>1162,670</position>
+            <position>1162,660</position>
             <showempty>yes</showempty>
             <state name="cc">
                 <imagetype name="cc">
@@ -253,7 +343,7 @@
         </statetype>
 
         <statetype name="videoprops">
-            <position>1196,670</position>
+            <position>1196,660</position>
             <showempty>yes</showempty>
             <state name="hd1080">
                 <imagetype name="hd1080">
@@ -284,41 +374,50 @@
 
         <imagetype name="processing">
             <filename>processing.png</filename>
-            <position>1230,670</position>
+            <position>1230,660</position>
         </imagetype>
 
         <textarea name="title" from="basetextarea">
-            <area>24,400,700,40</area>
+            <area>30,400,800,40</area>
             <font>baselarge</font>
             <cutdown>yes</cutdown>
             <align>vcenter</align>
         </textarea>
 
         <textarea name="channel" from="basetextarea">
-            <area>24,444,256,30</area>
+            <area>30,444,256,30</area>
         </textarea>
 
         <textarea name="timedate" from="basetextarea">
-            <area>364,444,480,30</area>
+            <area>295,444,415,30</area>
+            <align>hcenter</align>
+            <template>%startdate%%| startyear%, %starttime% </template>
         </textarea>
 
         <textarea name="filesize_str" from="basetextarea">
-            <area>710,444,190,30</area>
+            <area>715,444,185,30</area>
             <align>right</align>
         </textarea>
 
         <textarea name="description" from="basetextarea">
-            <area>24,484,890,220</area>
+            <area>30,480,885,210</area>
             <multiline>yes</multiline>
-            <cutdown>yes</cutdown>
+            <scroll direction="vertical" />
+            <cutdown>no</cutdown>
             <template>%"|SUBTITLE|" %%(|STARS|) %%DESCRIPTION%</template>
         </textarea>
 
-        <imagetype name="preview">
+        <imagetype name="preview" depends="!coverart">
             <area>920,410,320,240</area>
             <preserveaspect>true</preserveaspect>
         </imagetype>
 
+        <imagetype name="coverart" >
+            <area>920,410,320,240</area>
+            <filename />
+            <preserveaspect>true</preserveaspect>
+        </imagetype>
+
         <textarea name="norecordings">
             <area>20,74,760,300</area>
             <font>basemedium</font>
@@ -329,24 +428,24 @@
         </textarea>
 
         <progressbar name="usedbar">
-            <area>14,664,536,38</area>
+            <area>20,45,330,28</area>
             <layout>horizontal</layout>
             <style>reveal</style>
             <imagetype name="background">
+                <area>0,0,100%,28</area>
                 <filename>progressbar_background.png</filename>
             </imagetype>
             <imagetype name="progressimage">
-                <area>0,0,100%,100%</area>
+                <area>0,0,100%,28</area>
                 <filename>progressbar_fill2.png</filename>
             </imagetype>
         </progressbar>
 
         <textarea name="freereport">
-            <area>24,666,526,34</area>
+            <area>20,45,330,28</area>
             <align>center</align>
-            <font>basemedium</font>
+            <font>basesmaller</font>
         </textarea>
-
     </window>
 
     <window name="groupselector">
@@ -488,7 +587,7 @@
         </button>
     </window>
 
-     <window name="editmetadata">
+    <window name="editmetadata">
         <area>-1,-1,800,600</area>
 
         <imagetype name="backimg">
@@ -529,12 +628,12 @@
         </textarea>
 
         <textedit name="inetref" from="basetextedit">
-           <position>165,210</position>
+            <position>165,210</position>
         </textedit>
 
         <textarea name="seaslabel" from="titlelabel">
-           <position>8,275</position>
-           <value>Season:</value>
+            <position>8,275</position>
+            <value>Season:</value>
         </textarea>
 
         <spinbox name="season" from="basespinbox">
diff --git a/mythtv/themes/MythCenter-wide/ui/down_arrow-reg.png b/mythtv/themes/MythCenter-wide/ui/down_arrow-reg.png
new file mode 100644
index 00000000000..2197db70451
Binary files /dev/null and b/mythtv/themes/MythCenter-wide/ui/down_arrow-reg.png differ
diff --git a/mythtv/themes/MythCenter-wide/ui/down_arrow-sel.png b/mythtv/themes/MythCenter-wide/ui/down_arrow-sel.png
new file mode 100644
index 00000000000..47676891aae
Binary files /dev/null and b/mythtv/themes/MythCenter-wide/ui/down_arrow-sel.png differ
diff --git a/mythtv/themes/MythCenter-wide/ui/left_arrow-reg.png b/mythtv/themes/MythCenter-wide/ui/left_arrow-reg.png
new file mode 100644
index 00000000000..f058cd97e17
Binary files /dev/null and b/mythtv/themes/MythCenter-wide/ui/left_arrow-reg.png differ
diff --git a/mythtv/themes/MythCenter-wide/ui/left_arrow-sel.png b/mythtv/themes/MythCenter-wide/ui/left_arrow-sel.png
new file mode 100644
index 00000000000..28a0fe5c50b
Binary files /dev/null and b/mythtv/themes/MythCenter-wide/ui/left_arrow-sel.png differ
diff --git a/mythtv/themes/MythCenter-wide/ui/right_arrow-reg.png b/mythtv/themes/MythCenter-wide/ui/right_arrow-reg.png
new file mode 100644
index 00000000000..ae8879bb9b0
Binary files /dev/null and b/mythtv/themes/MythCenter-wide/ui/right_arrow-reg.png differ
diff --git a/mythtv/themes/MythCenter-wide/ui/right_arrow-sel.png b/mythtv/themes/MythCenter-wide/ui/right_arrow-sel.png
new file mode 100644
index 00000000000..e1be273c866
Binary files /dev/null and b/mythtv/themes/MythCenter-wide/ui/right_arrow-sel.png differ
diff --git a/mythtv/themes/MythCenter-wide/ui/up_arrow-reg.png b/mythtv/themes/MythCenter-wide/ui/up_arrow-reg.png
new file mode 100644
index 00000000000..bc08dda835b
Binary files /dev/null and b/mythtv/themes/MythCenter-wide/ui/up_arrow-reg.png differ
diff --git a/mythtv/themes/MythCenter-wide/ui/up_arrow-sel.png b/mythtv/themes/MythCenter-wide/ui/up_arrow-sel.png
new file mode 100644
index 00000000000..712a1ed53bb
Binary files /dev/null and b/mythtv/themes/MythCenter-wide/ui/up_arrow-sel.png differ