diff --git a/farmdata2/farmdata2_modules/fd2_school/API/api.html b/farmdata2/farmdata2_modules/fd2_school/API/api.html
new file mode 100644
index 00000000..c8acc2db
--- /dev/null
+++ b/farmdata2/farmdata2_modules/fd2_school/API/api.html
@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html>
+    <hr>
+    
+    <body>
+        <div id="report" >
+            <h1>
+                {{(header!="") ? header : "Mock Harvest Report"}}
+            </h1>
+            <p>
+                This page is a <i>mockup</i> of a simplified harvest report.
+                <ul>
+                    <li>
+                        <label for="report">Title:</label>
+                        <input type="text" v-model="header"/>
+                    </li>
+
+                    <li>
+                        <label for="start">Start:</label>
+                        <input type="date" id="startDate" :min="start" :max="end" v-model="start"/>
+                    
+                        <label for="end">End:</label>
+                        <input type="date" id="endDate" :min="start" :max="end" v-model="end"/>
+                    </li>
+
+                    <li>
+                        <label for="crop">Crop:</label>
+                        <select id="crop" v-model="crop" >
+                            <option v-for="crop in cropNames">{{ crop }}</option>
+                        </select>
+                    </li>
+
+                    <li><label for="area">Area:</label>
+                        <select id="area" name="fields">
+                            <option v-for="area in areaNames">{{ area }}</option>
+                        </select>
+                    </li>
+                </ul>
+                <button v-on:click="saveLog" @click="changeState('edit')">Generate Report</button>
+
+            </p>
+            
+        
+        <hr>
+        
+            <h1>
+                <h1>{{(header!="") ? header : "Mock Harvest Report"}}</h1>
+            </h1>
+            <p>
+                Detail:
+                <dd>
+                    <ul>
+                        <li v-model="farm"><strong>Farm:</strong>{{farm}}</li>
+                        <li v-model="user"><strong>User:</strong>{{user}}</li>
+                        <li v-model="language"><strong>Language:</strong>{{language}}</li> <br>
+                    </ul>
+                    <ul>
+                        <li><strong>Start:</strong>{{start}}</li>
+                        <li><strong>End:</strong>{{end}}</li>
+                        <li><strong>Crop:</strong>{{crop}}</li>
+                    </ul>
+                </dd>
+            </p>
+        </body>
+        
+        <table border="1" v-if="state !== 'defualt'">
+            <tr>
+                <th>Row</th>
+                <th>Date</th>
+                <th>Area</th>
+                <th>Crop</th>
+                <th>Yield</th>
+                <th>Units</th>
+            </tr>
+            <tr v-for="(item,index) in harvestLog">
+                <td>{{index+1}}</td>
+                <td>{{item.date}}</td>
+                <td>{{item.area}}</td>
+                <td>{{item.crop}}</td>
+                <td>{{item.yield}}</td>
+                <td>{{item.units}}</td>
+            </tr>
+        </table>
+    </div>
+    <script src="https://unpkg.com/vue@2"></script>
+    <script>
+        var harvest_report = new Vue({
+            el: "#report",
+
+            
+            data: {
+                farm:"",
+                user:"",
+                language:"",
+                state: 'defualt',
+                header: "My Sample Harvest Report",
+                start: "05/05/2020",
+                end: "05/15/2020",
+                crop: "kale",
+                harvestLog: [],
+                idToCropMap: new Map(),
+                idToAreaMap: new Map(),
+                
+            },
+            computed:{                       
+                cropNames() {
+                    return Array.from(this.idToCropMap.values());
+                },
+                areaNames() {
+                    return Array.from(this.idToAreaMap.values());
+                },
+            },
+            methods:{
+                saveLog: function(){
+
+                    axios.get('http://fd2_farmdata2/farm.json') 
+                            .then((response) => {
+
+                                this.farm = response.data.name
+
+                                this.user = response.data.user.name
+
+                                this.language = response.data.languages.en.name
+
+
+                            })
+                            .catch((error) => {
+                                console.log("Error Occurred")
+                                console.log(error)
+                            })
+                            this.farm = "Sample Farm";
+                            this.user = "manager2";
+                            this.language = "English";
+                },
+
+                changeState: function(newState){
+                    this.state = newState;
+                }
+            },
+            created() {
+	                    getIDToCropMap()
+                        .then((cropMap) =>{
+                            console.log(cropMap);
+                            this.idToCropMap=cropMap;
+                        })
+                        .catch((err) => {
+                            console.log("Error Occurred")
+                            console.log(error)
+
+                        });
+                        getIDToAreaMap()
+                            .then((areaMap) => {
+                            console.log(areaMap);
+                            this.idToAreaMap = areaMap;
+                        })
+                        .catch((error) => {
+                        console.log("Error Occurred");
+                        console.log(error);
+                });
+            },
+        });
+        Vue.config.devtools = true;
+    </script>
+    </body>
+    <hr>
+
+</html>
\ No newline at end of file
diff --git a/farmdata2/farmdata2_modules/fd2_school/HTML/HTML.html b/farmdata2/farmdata2_modules/fd2_school/HTML/HTML.html
new file mode 100644
index 00000000..c25c5f44
--- /dev/null
+++ b/farmdata2/farmdata2_modules/fd2_school/HTML/HTML.html
@@ -0,0 +1,85 @@
+<html>
+    <hr>
+    
+    <body>
+        <h1>
+            Harvest Report
+        </h1>
+        <p>
+            This page is a <i>mockup</i> of a simplified harvest report.
+            <ul>
+                <li>
+                    <label for="tile">Title:</label>
+                    <input type="text" id="title" name="title" value="My Sample Harvest Report"/>
+                </li>
+
+                <li><label for="start">Start:</label>
+                    <input type="date" id="start" name="date-start" value="2020-05-05" min="2014-01-01" max="2022-01-01"/>
+                
+                <label for="end">End:</label>
+                    <input type="date" id="end" name="date-end" value="2020-05-15" min="2020-05-05" max="2022-01-01"/>
+                </li>
+                <li><label for="crop">Crop:</label>
+                    <select id="crop" name="crops" >
+                            <option>Broccoli</option>
+                            <option selected>Kale</option>
+                            <option>Peas</option>
+                    </select>
+                </li>
+                <li><label for="area">Area:</label>
+                    <select id="area" name="fields">
+                        <option selected>All</option>
+                        <option>Chuau-1</option>
+                        <option>SQ7</option>
+                    </select>
+                </li>
+            </ul>
+        </p>
+
+    </body>
+    <hr>
+    <body>
+        <h1>
+            My Sample Harvest Report
+        </h1>
+        <p>
+            Detail:
+            <dd>
+                <ul>
+                    <li><strong>Farm:</strong>Sample Farm</li>
+                    <li><strong>User:</strong>manager1</li>
+                    <li><strong>Language:</strong>English</li> <br>
+
+
+                    <li><strong>Start:</strong>05/01/2018</li>
+                    <li><strong>End:</strong>05/15/2018</li>
+                    <li><strong>Crop:</strong>Kale</li>
+                </ul>
+            </dd>
+        </p>
+    </body>
+    <table border="1">
+        <tr>
+            <td><strong>Date</strong></td>
+            <td><strong>Area</strong></td>
+            <td><strong>Crop</strong></td>
+            <td><strong>Yield</strong></td>
+            <td><strong>Units</strong></td>
+        </tr>
+        <tr>
+            <td>05/02/2018</td>
+            <td>Chuau-1</td>
+            <td>Kale</td>
+            <td>10</td>
+            <td>Bunches</td>
+        </tr>
+        <tr>
+            <td>05/05/2018</td>
+            <td>SQ7</td>
+            <td>Kale</td>
+            <td>7</td>
+            <td>Bunches</td>
+        </tr>
+    </table>
+    <hr>
+</html>
\ No newline at end of file
diff --git a/farmdata2/farmdata2_modules/fd2_school/Vue1/Vue1.html b/farmdata2/farmdata2_modules/fd2_school/Vue1/Vue1.html
new file mode 100644
index 00000000..8de6b1b1
--- /dev/null
+++ b/farmdata2/farmdata2_modules/fd2_school/Vue1/Vue1.html
@@ -0,0 +1,102 @@
+<html>
+    <hr>
+    
+    <body>
+        <div id="report" >
+            <h1>
+                {{(header!="") ? header : "Mock Harvest Report"}}
+            </h1>
+            <p>
+                This page is a <i>mockup</i> of a simplified harvest report.
+                <ul>
+                    <li>
+                        <label for="report">Title:</label>
+                        <input type="text" v-model="header"/>
+                    </li>
+
+                    <li>
+                        <label for="start">Start:</label>
+                        <input type="date" id="startDate" min="2014-01-01" max="2022-01-01" v-model="start"/>
+                    
+                        <label for="end">End:</label>
+                        <input type="date" id="endDate" value="2020-05-15" min="2020-05-05" v-model="end"/>
+                    </li>
+
+                    <li>
+                        <label for="crop">Crop:</label>
+                        <select id="crop" v-model="crop" >
+                            <option v-for="item in plant">{{item}}</option>
+                        </select>
+                    </li>
+
+                    <li><label for="area">Area:</label>
+                        <select id="area" name="fields">
+                            <option v-for="item in area">{{item}}</option>
+                        </select>
+                    </li>
+                </ul>
+            </p>
+            <input type="button" value="Generate Report"/>
+
+        </body>
+        <hr>
+        <body>
+            <h1>
+                <h1>{{(header!="") ? header : "Mock Harvest Report"}}</h1>
+            </h1>
+            <p>
+                Detail:
+                <dd>
+                    <ul>
+                        <li><strong>Farm:</strong>Sample Farm</li>
+                        <li><strong>User:</strong>manager1</li>
+                        <li><strong>Language:</strong>English</li> <br>
+
+
+                        <li><strong>Start:</strong>{{start}}</li>
+                        <li><strong>End:</strong>{{end}}</li>
+                        <li><strong>Crop:</strong>{{crop}}</li>
+                    </ul>
+                </dd>
+            </p>
+        </body>
+        <table border="1">
+            <tr><td v-for="item in table">{{item.row1}}</td></tr>
+            <tr><td v-for="item in table">{{item.row2}}</td></tr>
+            <tr><td v-for="item in table">{{item.row3}}</td></tr>
+        </table>
+    </div>
+    <script>
+        var harvest_report = new Vue({
+            el: "#report",
+
+            data: {
+                header: "My Sample Harvest Report",
+                start: "",
+                end: "",
+                crop: "",
+                plant: [
+                    "Broccoli",
+                    "Kale",
+                    "Peas",
+                ],
+                area: [
+                    "All",
+                    "Chuau-1",
+                    "SQ7",
+                ],
+
+                table:[
+                    {row1: "Date", row2: "05/05/2020", row3: "05/08/2020"},
+                    {row1: "Area", row2: "SQ7", row3: "Chuau-1"},
+                    {row1: "Crop", row2: "Kale", row3: "Kale"},
+                    {row1: "Yield", row2: "10", row3: "10"},
+                    {row1: "Units", row2: "Bunches", row3: "Bunches"},
+                ]
+
+            }
+        })
+        Vue.config.devtools = true;
+    </script>
+    <hr>
+</html>
\ No newline at end of file
diff --git a/farmdata2/farmdata2_modules/fd2_school/Vue2/Vue2.html b/farmdata2/farmdata2_modules/fd2_school/Vue2/Vue2.html
new file mode 100644
index 00000000..e8c6316f
--- /dev/null
+++ b/farmdata2/farmdata2_modules/fd2_school/Vue2/Vue2.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html>
+    <hr>
+    
+    <body>
+        <div id="report" >
+            <h1>
+                {{(header!="") ? header : "Mock Harvest Report"}}
+            </h1>
+            <p>
+                This page is a <i>mockup</i> of a simplified harvest report.
+                <ul>
+                    <li>
+                        <label for="report">Title:</label>
+                        <input type="text" v-model="header"/>
+                    </li>
+
+                    <li>
+                        <label for="start">Start:</label>
+                        <input type="date" id="startDate" :min="start" :max="end" v-model="start"/>
+                    
+                        <label for="end">End:</label>
+                        <input type="date" id="endDate" :min="start" :max="end" v-model="end"/>
+                    </li>
+
+                    <li>
+                        <label for="crop">Crop:</label>
+                        <select id="crop" v-model="crop" >
+                            <option v-for="item in plant">{{item}}</option>
+                        </select>
+                    </li>
+
+                    <li><label for="area">Area:</label>
+                        <select id="area" name="fields">
+                            <option v-for="item in area">{{item}}</option>
+                        </select>
+                    </li>
+                </ul>
+                <botton v-on:click="saveLog" @click="changeState('edit')">Generate Report</botton>
+
+            </p>
+            
+        
+        <hr>
+        
+            <h1>
+                <h1>{{(header!="") ? header : "Mock Harvest Report"}}</h1>
+            </h1>
+            <p>
+                Detail:
+                <dd>
+                    <ul>
+                        <li><strong>Farm:</strong>Sample Farm</li>
+                        <li><strong>User:</strong>manager1</li>
+                        <li><strong>Language:</strong>English</li> <br>
+
+                        <li><strong>Start:</strong>{{start}}</li>
+                        <li><strong>End:</strong>{{end}}</li>
+                        <li><strong>Crop:</strong>{{crop}}</li>
+                    </ul>
+                </dd>
+            </p>
+        </body>
+        
+        <table border="1" v-if="state !== 'defualt'">
+            <tr>
+                <th>Row</th>
+                <th>Date</th>
+                <th>Area</th>
+                <th>Crop</th>
+                <th>Yield</th>
+                <th>Units</th>
+            </tr>
+            <tr v-for="(item,index) in harvestLog">
+                <td>{{index+1}}</td>
+                <td>{{item.date}}</td>
+                <td>{{item.area}}</td>
+                <td>{{item.crop}}</td>
+                <td>{{item.yield}}</td>
+                <td>{{item.units}}</td>
+            </tr>
+        </table>
+    </div>
+    <script>
+        var harvest_report = new Vue({
+            el: "#report",
+
+            data: {
+                state: 'defualt',
+                header: "My Sample Harvest Report",
+                start: "05/05/2020",
+                end: "05/15/2020",
+                crop: "",
+                plant: [
+                    "Broccoli",
+                    "Kale",
+                    "Peas",
+                ],
+                area: [
+                    "All",
+                    "Chuau-1",
+                    "SQ7",
+                ],
+
+                harvestLog: [
+
+                ],
+
+                
+            },
+            methods:{
+                saveLog: function(){
+                    this.harvestLog.push({date:'05/01/2018', area:'Orion-3', crop:'Kale', yield:'12', units:'Bunches'});      
+                },
+
+                changeState: function(newState){
+                    this.state = newState;
+                }
+            }
+        });
+        Vue.config.devtools = true;
+    </script>
+    </body>
+    <hr>
+
+</html>
\ No newline at end of file
diff --git a/farmdata2/farmdata2_modules/fd2_school/fd2_school.module b/farmdata2/farmdata2_modules/fd2_school/fd2_school.module
index 167ca8ef..7291464b 100644
--- a/farmdata2/farmdata2_modules/fd2_school/fd2_school.module
+++ b/farmdata2/farmdata2_modules/fd2_school/fd2_school.module
@@ -61,7 +61,41 @@ function fd2_school_menu() {
   );
 
   // Add items blocks for new sub-tabs here.
+  $items['farm/fd2-school/HTML'] = array(
+      'title' => 'HTML',
+      'type' => MENU_LOCAL_TASK,
+      'page callback' => 'fd2_school_view',
+      'page arguments' => array('HTML'),
+      'access arguments' => array('view fd2 school'),
+      'weight' => 100,
+    );
 
+    $items['farm/fd2-school/Vue1'] = array(
+      'title' => 'Vue1',
+      'type' => MENU_LOCAL_TASK,
+      'page callback' => 'fd2_school_view',
+      'page arguments' => array('Vue1'),
+      'access arguments' => array('view fd2 school'),
+      'weight' => 200,
+    );
+
+    $items['farm/fd2-school/Vue2'] = array(
+      'title' => 'Vue2',
+      'type' => MENU_LOCAL_TASK,
+      'page callback' => 'fd2_school_view',
+      'page arguments' => array('Vue2'),
+      'access arguments' => array('view fd2 school'),
+      'weight' => 300,
+    );
+
+    $items['farm/fd2-school/API'] = array(
+      'title' => 'API',
+      'type' => MENU_LOCAL_TASK,
+      'page callback' => 'fd2_school_view',
+      'page arguments' => array('API'),
+      'access arguments' => array('view fd2 school'),
+      'weight' => 400,
+    );
   return $items;
 };
 

Date	Area	Crop	Yield	Units
05/02/2018	Chuau-1	Kale	10	Bunches
05/05/2018	SQ7	Kale	7	Bunches