diff --git a/README.md b/README.md
index 5c896eb..87acfd5 100644
--- a/README.md
+++ b/README.md
@@ -46,3 +46,4 @@ export default {
 ### props:
 - `screenImg`: path to image that will be displayed on the phones screen
 - `lightClr`: color of the light in the environment
+- `phoneClr`: color of the phone
diff --git a/bundle/vue-three-d-mockup.esm.js b/bundle/vue-three-d-mockup.esm.js
index 072c14e..bdf90cc 100644
--- a/bundle/vue-three-d-mockup.esm.js
+++ b/bundle/vue-three-d-mockup.esm.js
@@ -116,7 +116,11 @@ var script = {
     },
     lightClr: {
       type: String,
-      default: 'hsl(0, 100%, 100%)',
+      default: 'white',
+    },
+    phoneClr: {
+      type: String,
+      default: 'white',
     },
   },
   setup(props) {
@@ -207,7 +211,7 @@ var script = {
             (body) => {
               body.traverse((child) => {
                 if (child instanceof THREE.Mesh) {
-                  child.material = new THREE.MeshLambertMaterial();
+                  child.material = new THREE.MeshLambertMaterial({ color: props.phoneClr });
                 }
               });
 
diff --git a/src/Mockup.vue b/src/Mockup.vue
index 107a562..9c2cbd1 100644
--- a/src/Mockup.vue
+++ b/src/Mockup.vue
@@ -24,7 +24,11 @@ export default {
     },
     lightClr: {
       type: String,
-      default: 'hsl(0, 100%, 100%)',
+      default: 'white',
+    },
+    phoneClr: {
+      type: String,
+      default: 'white',
     },
   },
   setup(props) {
@@ -115,7 +119,7 @@ export default {
             (body) => {
               body.traverse((child) => {
                 if (child instanceof THREE.Mesh) {
-                  child.material = new THREE.MeshLambertMaterial();
+                  child.material = new THREE.MeshLambertMaterial({ color: props.phoneClr });
                 }
               });