diff --git a/CREATE-PLAY.md b/CREATE-PLAY.md
index b34bc5028c..4d4e20d922 100644
--- a/CREATE-PLAY.md
+++ b/CREATE-PLAY.md
@@ -48,6 +48,11 @@ Welcome developers! We are as excited as you are to know that you are going to c
             <td>Yes</td>
             <td>Let the application know your choice of script. It supports both <b>JavaScript</b> and <b>TypeScript</b>. You can pick either of it.</td>
           </tr>
+          <tr>
+            <td>Style to be used (css/scss)</td>
+            <td>Yes</td>
+            <td>Let the application know your choice of style. It supports both <b>css</b> and <b>scss</b>. You can pick either of it.</td>
+          </tr>
           <tr>
             <td>What is the level of this play?</td>
             <td>Yes</td>
diff --git a/plop-templates/component_js.hbs b/plop-templates/component_js.hbs
index 7d45b89374..718a2e036d 100644
--- a/plop-templates/component_js.hbs
+++ b/plop-templates/component_js.hbs
@@ -1,6 +1,7 @@
 import { getPlayById } from 'meta/play-meta-util';
 
 import PlayHeader from 'common/playlists/PlayHeader';
+import './{{camelCase name}}.{{style}}';
 
 function {{pascalCase name}}(props) {
   // Do not remove the below lines. 
diff --git a/plop-templates/component_ts.hbs b/plop-templates/component_ts.hbs
index 6941972c0e..f337692592 100644
--- a/plop-templates/component_ts.hbs
+++ b/plop-templates/component_ts.hbs
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { getPlayById } from 'meta/play-meta-util';
 
 import PlayHeader from 'common/playlists/PlayHeader';
+import './{{camelCase name}}.{{style}}';
 
 function {{pascalCase name}}(props:any) {
   // Do not remove the below lines. 
diff --git a/plop-templates/style_css.hbs b/plop-templates/style_css.hbs
new file mode 100644
index 0000000000..5fd508fa9e
--- /dev/null
+++ b/plop-templates/style_css.hbs
@@ -0,0 +1 @@
+/* enter stlyes here */
diff --git a/plop-templates/style_scss.hbs b/plop-templates/style_scss.hbs
new file mode 100644
index 0000000000..5fd508fa9e
--- /dev/null
+++ b/plop-templates/style_scss.hbs
@@ -0,0 +1 @@
+/* enter stlyes here */
diff --git a/plopfile.js b/plopfile.js
index ac9b407ed3..01ab257a45 100644
--- a/plopfile.js
+++ b/plopfile.js
@@ -33,6 +33,12 @@ module.exports = plop => {
         message: 'Language to be used (javascript/typescript):',
         choices: ['js', 'ts']
       },
+      {
+        type: 'list',
+        name: 'style',
+        message: 'Style to be used (css/scss):',
+        choices: ['css', 'scss']
+      },
       {
         type: 'list',
         name: 'level',
@@ -71,6 +77,11 @@ module.exports = plop => {
         path: 'src/plays/{{generateFolderName name}}/{{pascalCase name}}.{{language}}x',
         templateFile: 'plop-templates/component_{{language}}.hbs',
       },
+      {
+        type: 'add',
+        path: 'src/plays/{{generateFolderName name}}/{{camelCase name}}.{{style}}',
+        templateFile: 'plop-templates/style_{{style}}.hbs',
+      },
       {
         type: 'add',
         path: 'src/plays/{{generateFolderName name}}/Readme.md',
diff --git a/screens/plop-create.png b/screens/plop-create.png
index cd3cf6307d..091485aae3 100644
Binary files a/screens/plop-create.png and b/screens/plop-create.png differ