diff --git a/ui/details.reel/details.css b/ui/details.reel/details.css
index 4e4537ee..6bbfca6a 100644
--- a/ui/details.reel/details.css
+++ b/ui/details.reel/details.css
@@ -17,22 +17,13 @@
     white-space: nowrap;
 }
 
-.details .score {
-    margin: 0 30px 0 2px;
-    padding: 4px 0px;
-    color: hsl(0,0%,100%);
-}
-.details .score:last-child {
-    margin: 0 0px 0 2px;
-}
-
-.scroller {
+.details .scroller {
     width: 650px;
     margin: 0 auto;
     height: 120px;
 }
 
-.description {
+.details .description {
     margin: 0;
     text-align: left;
     font-size: 16px;
@@ -40,8 +31,7 @@
 
 }
 
-
-.action-buttons {
+.details .action-buttons {
     position: absolute;
     top: 88px;
     right: 40px;
@@ -65,18 +55,3 @@
 .details .montage-Button:active {
     background-color: hsl(210,100%,40%);
 }
-
-
-.rt-icon {
-    display: inline-block;
-    margin-left: 2px;
-    width: 25px;
-    height: 25px;
-    vertical-align: bottom;
-    background-size: 25px auto;
-    background-image: url(rt_lg.png);
-    background-repeat: no-repeat;
-}
-
-
-
diff --git a/ui/details.reel/details.html b/ui/details.reel/details.html
index 73193472..99fe0797 100644
--- a/ui/details.reel/details.html
+++ b/ui/details.reel/details.html
@@ -55,26 +55,6 @@
                 }
             },
 
-            "dates": {
-                "prototype": "montage/ui/dynamic-text.reel",
-                "properties": {
-                    "element": {"#": "dates-content"}
-                },
-                "bindings": {
-                    "value": {"<-": "@owner.data.release_dates.theater" }
-                }
-            },
-
-            "runtime": {
-                "prototype": "montage/ui/dynamic-text.reel",
-                "properties": {
-                    "element": {"#": "runtime-content"}
-                },
-                "bindings": {
-                    "value": {"<-": "@owner.data.runtime" }
-                }
-            },
-
             "rentButton": {
                 "prototype": "montage/ui/button.reel",
                 "properties": {
@@ -101,39 +81,27 @@
                 ]
             },
 
-            "audienceScore": {
-                "prototype": "montage/ui/dynamic-text.reel",
+            "scroller": {
+                "prototype": "montage/ui/scroller.reel",
                 "properties": {
-                    "element": {"#": "audience-score-content"}
-                },
-                "bindings": {
-                    "value": {"<-": "@owner.data.ratings.audience_score" }
+                    "element": {"#": "scroller"},
+                    "hasMomentum": true
                 }
             },
 
-            "criticsScore": {
-                "prototype": "montage/ui/dynamic-text.reel",
+            "moviescores": {
+               "prototype": "ui/moviescores.reel",
                 "properties": {
-                    "element": {"#": "critics-score-content"}
+                    "element": {"#": "moviescores"}
                 },
                 "bindings": {
-                    "value": {"<-": "@owner.data.ratings.critics_score" }
-                }
-            },
-
-            "scroller": {
-                "prototype": "montage/ui/scroller.reel",
-                "properties": {
-                    "element": {"#": "scroller"},
-                    "hasMomentum": true
+                    "data": {"<-": "@owner.data" }
                 }
             },
 
             "owner": {
                 "properties": {
-                    "element": {"#": "details"},
-                    "cImage": {"#": "c-image"},
-                    "aImage": {"#": "a-image"}
+                    "element": {"#": "details"}
                 }
             }
         }
@@ -145,14 +113,7 @@
 
           <section>
               <h2 data-montage-id="title" class="title"></h2>
-              <p>
-                  <time data-montage-id="dates-content" class="score"></time>
-                  Runtime <span data-montage-id="runtime-content" class="score"></span>
-                  Audience <span data-montage-id="a-image" class="rt-icon icon-audience"></span>
-                           <span data-montage-id="audience-score-content" class="score"></span>
-                  Critics <span data-montage-id="c-image" class="rt-icon icon-critics"></span>
-                          <span data-montage-id="critics-score-content" class="score"></span>
-              </p>
+              <p data-montage-id="moviescores"></p>
               <div data-montage-id="scroller" class="scroller">
                   <p data-montage-id="description" class="description"></p>
               </div>
diff --git a/ui/details.reel/details.js b/ui/details.reel/details.js
index e29ab11f..fa5887cf 100644
--- a/ui/details.reel/details.js
+++ b/ui/details.reel/details.js
@@ -32,56 +32,7 @@ var Montage     = require("montage/core/core").Montage,
     Component   = require("montage/ui/component").Component;
 
 exports.Details = Montage.create(Component, {
-    _data: {
-        value: null
-    },
-
-    data: {
-        set: function(val){
-            this._data = val;
-            this.needsDraw = true;
-        },
-        get: function(){
-            return this._data;
-        }
-    },
-
-    draw: {
-        value: function(){
-            if( this.data ){
-                var audience = this.data.ratings.audience_rating,
-                    critics = this.data.ratings.critics_rating;
-
-                if( audience == "Fresh" ){
-                    this.aImage.style.backgroundPosition = '0px 0px'
-                }else if( audience == "Rotten" ){
-                    this.aImage.style.backgroundPosition = '0px -25px'
-                }else if( audience == "Certified Fresh" ){
-                    this.aImage.style.backgroundPosition = '0px -50px'
-                }else if( audience == "Upright" ){
-                    this.aImage.style.backgroundPosition = '0px -75px'
-                }else if( audience == "Spilled" ){
-                    this.aImage.style.backgroundPosition = '0px -125px'
-                }else{
-                    this.aImage.style.backgroundPosition = '0px -100px'
-                }
-
-                if( critics == "Fresh" ){
-                    this.cImage.style.backgroundPosition = '0px 0px'
-                }else if( critics == "Rotten" ){
-                    this.cImage.style.backgroundPosition = '0px -25px'
-                }else if( critics == "Certified Fresh" ){
-                    this.cImage.style.backgroundPosition = '0px -50px'
-                }else if( critics == "Upright" ){
-                    this.cImage.style.backgroundPosition = '0px -75px'
-                }else if( critics == "Spilled" ){
-                    this.cImage.style.backgroundPosition = '0px -125px'
-                }else{
-                    this.cImage.style.backgroundPosition = '0px -100px'
-                }
-            }
-        }
-    },
+    data: { value: null },
 
     handleRentButtonAction: {
         value: function() {
diff --git a/ui/moviescores.reel/moviescores.css b/ui/moviescores.reel/moviescores.css
new file mode 100644
index 00000000..25354072
--- /dev/null
+++ b/ui/moviescores.reel/moviescores.css
@@ -0,0 +1,30 @@
+/* @override http://localhost:8082/montage-projects/ui/moviescores.reel/moviescores.css */
+
+.moviescores {
+    position: relative;
+    text-align: center;
+    color: hsl(0,0%,60%);
+}
+
+.moviescores .score {
+    margin: 0 30px 0 2px;
+    padding: 4px 0px;
+    color: hsl(0,0%,100%);
+}
+.moviescores .score:last-child {
+    margin: 0 0px 0 2px;
+}
+
+.moviescores .rt-icon {
+    display: inline-block;
+    margin-left: 2px;
+    width: 25px;
+    height: 25px;
+    vertical-align: bottom;
+    background-size: 25px auto;
+    background-image: url(rt_lg.png);
+    background-repeat: no-repeat;
+}
+
+
+
diff --git a/ui/moviescores.reel/moviescores.html b/ui/moviescores.reel/moviescores.html
new file mode 100644
index 00000000..d70e3dbc
--- /dev/null
+++ b/ui/moviescores.reel/moviescores.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <link rel="stylesheet" type="text/css" href="moviescores.css">
+
+    <script type="text/montage-serialization">
+        {
+
+            "dates": {
+                "prototype": "montage/ui/dynamic-text.reel",
+                "properties": {
+                    "element": {"#": "dates-content"}
+                },
+                "bindings": {
+                    "value": {"<-": "@owner.data.release_dates.theater" }
+                }
+            },
+
+            "runtime": {
+                "prototype": "montage/ui/dynamic-text.reel",
+                "properties": {
+                    "element": {"#": "runtime-content"}
+                },
+                "bindings": {
+                    "value": {"<-": "@owner.data.runtime" }
+                }
+            },
+
+            "audienceScore": {
+                "prototype": "montage/ui/dynamic-text.reel",
+                "properties": {
+                    "element": {"#": "audience-score-content"}
+                },
+                "bindings": {
+                    "value": {"<-": "@owner.data.ratings.audience_score" }
+                }
+            },
+
+            "criticsScore": {
+                "prototype": "montage/ui/dynamic-text.reel",
+                "properties": {
+                    "element": {"#": "critics-score-content"}
+                },
+                "bindings": {
+                    "value": {"<-": "@owner.data.ratings.critics_score" }
+                }
+            },
+
+            "owner": {
+                "properties": {
+                    "element": {"#": "moviescores"},
+                    "cImage": {"#": "c-image"},
+                    "aImage": {"#": "a-image"}
+                }
+            }
+        }
+    </script>
+</head>
+<body>
+	<div id="moviescores" class="moviescores">
+		<div data-montage-id="scores-container" class="scores-container">
+			<p>
+				<time data-montage-id="dates-content" class="score"></time>
+				Runtime <span data-montage-id="runtime-content" class="score"></span>
+				Audience <span data-montage-id="a-image" class="rt-icon icon-audience"></span>
+				<span data-montage-id="audience-score-content" class="score"></span>
+				Critics <span data-montage-id="c-image" class="rt-icon icon-critics"></span>
+				<span data-montage-id="critics-score-content" class="score"></span>
+			</p>
+		</div>
+	</div>
+</body>
+</html>
diff --git a/ui/moviescores.reel/moviescores.js b/ui/moviescores.reel/moviescores.js
new file mode 100644
index 00000000..c8d4140b
--- /dev/null
+++ b/ui/moviescores.reel/moviescores.js
@@ -0,0 +1,56 @@
+var Montage     = require("montage/core/core").Montage,
+    Component   = require("montage/ui/component").Component;
+
+exports.Moviescores = Montage.create(Component, {
+    _data: {
+        value: null
+    },
+
+    data: {
+        set: function(val){
+            this._data = val;
+            this.needsDraw = true;
+        },
+        get: function(){
+            return this._data;
+        }
+    },
+
+    draw: {
+        value: function(){
+            if( this.data ){
+                var audience = this.data.ratings.audience_rating,
+                    critics = this.data.ratings.critics_rating;
+
+                if( audience == "Fresh" ){
+                    this.aImage.style.backgroundPosition = '0px 0px'
+                }else if( audience == "Rotten" ){
+                    this.aImage.style.backgroundPosition = '0px -25px'
+                }else if( audience == "Certified Fresh" ){
+                    this.aImage.style.backgroundPosition = '0px -50px'
+                }else if( audience == "Upright" ){
+                    this.aImage.style.backgroundPosition = '0px -75px'
+                }else if( audience == "Spilled" ){
+                    this.aImage.style.backgroundPosition = '0px -125px'
+                }else{
+                    this.aImage.style.backgroundPosition = '0px -100px'
+                }
+
+                if( critics == "Fresh" ){
+                    this.cImage.style.backgroundPosition = '0px 0px'
+                }else if( critics == "Rotten" ){
+                    this.cImage.style.backgroundPosition = '0px -25px'
+                }else if( critics == "Certified Fresh" ){
+                    this.cImage.style.backgroundPosition = '0px -50px'
+                }else if( critics == "Upright" ){
+                    this.cImage.style.backgroundPosition = '0px -75px'
+                }else if( critics == "Spilled" ){
+                    this.cImage.style.backgroundPosition = '0px -125px'
+                }else{
+                    this.cImage.style.backgroundPosition = '0px -100px'
+                }
+            }
+        }
+    }
+
+});
diff --git a/ui/details.reel/rt_lg.png b/ui/moviescores.reel/rt_lg.png
similarity index 100%
rename from ui/details.reel/rt_lg.png
rename to ui/moviescores.reel/rt_lg.png