diff --git a/.gitignore b/.gitignore
new file mode 100644
index 00000000..9bd61150
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,225 @@
+# Created by https://www.toptal.com/developers/gitignore/api/windows,macos,visualstudiocode,nova,node
+# Edit at https://www.toptal.com/developers/gitignore?templates=windows,macos,visualstudiocode,nova,node
+
+### macOS ###
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+### macOS Patch ###
+# iCloud generated files
+*.icloud
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+### Node Patch ###
+# Serverless Webpack directories
+.webpack/
+
+# Optional stylelint cache
+
+# SvelteKit build / generate output
+.svelte-kit
+
+### nova ###
+.nova/*
+
+### VisualStudioCode ###
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/*.code-snippets
+
+# Local History for Visual Studio Code
+.history/
+
+# Built Visual Studio Code Extensions
+*.vsix
+
+### VisualStudioCode Patch ###
+# Ignore all local history of files
+.history
+.ionide
+
+### Windows ###
+# Windows thumbnail cache files
+Thumbs.db
+Thumbs.db:encryptable
+ehthumbs.db
+ehthumbs_vista.db
+
+# Dump file
+*.stackdump
+
+# Folder config file
+[Dd]esktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Windows Installer files
+*.cab
+*.msi
+*.msix
+*.msm
+*.msp
+
+# Windows shortcuts
+*.lnk
+
+# End of https://www.toptal.com/developers/gitignore/api/windows,macos,visualstudiocode,nova,node
\ No newline at end of file
diff --git a/app.css b/app.css
index bc7c9b7f..13bb571c 100644
--- a/app.css
+++ b/app.css
@@ -3,7 +3,6 @@ body {
     background: rgb(111, 208, 224);
     background: linear-gradient(0deg,rgb(111, 208, 224) 0%, rgb(171, 228, 167) 100%);
     font-family: 'Open Sans', sans-serif;
-    text-align: center;
     min-height: 100vh;
 }
 
@@ -19,6 +18,9 @@ h3 {
     font-family: 'Oswald', sans-serif;
 }
 
+img {
+    max-width: 100%;
+}
 @media (min-width: 650px) {
     h1 {
         font-size: 5em;
@@ -31,7 +33,7 @@ h3 {
     }
 }
 
-p {
+p, label {
     font-weight: 100;
 }
 
@@ -108,6 +110,7 @@ p {
     position: absolute;
     bottom: 0;
     width: 100%;
+    height: 106px;
     padding: 0.8em 0.8em 1.8em;
     margin:0;
     box-sizing: border-box;
@@ -126,13 +129,14 @@ p {
 }
 
 form p {
+    display: block;
     margin-bottom: 0.3em;
     font-size: 1.3em;
     font-weight: 600;
     font-family: 'Oswald', sans-serif;
 }
 
-input {
+/* input {
     padding: 0.7em;
     background: #fff;
     border: 0;
@@ -147,13 +151,13 @@ input {
 .form-field__full {
     width: 100%;
     box-sizing: border-box;
-}
+} */
 
 select {
     display: block;
 }
 
-#btn {
+/* .btn {
     display: inline-block;
     background: #ccc;
     padding: 0.8em;
@@ -161,10 +165,14 @@ select {
     transition: ease 0.3s all;
 }
 
-#btn:hover {
+.btn:hover {
     background: #777;
     color: #fff;
     cursor: pointer;
+} */
+
+.d-inline {
+    display: inline-block;
 }
 
 /* Footer */
diff --git a/app.js b/app.js
index 36c871d0..947c5757 100644
--- a/app.js
+++ b/app.js
@@ -1,32 +1,177 @@
+function createElement (type, props, ...children) {
+    const $el = document.createElement(type)
+    Object.keys(props).forEach((prop) => 
+        prop === 'style' ? 
+        Object.keys(props[prop]).forEach((style) => $el[prop][style] = props[prop][style]) : 
+        $el[prop] = props[prop]);
+    $el.append(...children)
+    return $el
+}
 
-    // Create Dino Constructor
-
-
-    // Create Dino Objects
-
-
-    // Create Human Object
-
-    // Use IIFE to get human data from form
+Array.prototype.shuffle = function () {
+    const copy = this.slice(0)
+    
+    let i = 0
+    const length = copy.length
+    while (i < length) {
+        const r = Math.floor(Math.random() * length)
+        const tmp = copy[i]
+        copy[i] = copy[r]
+        copy[r] = tmp
+        i++
+    }
+    
+    return copy
+}
 
 
-    // Create Dino Compare Method 1
-    // NOTE: Weight in JSON file is in lbs, height in inches. 
+function Tile (species, name, fact) {
+    return createElement(
+        'div',
+        { className: 'grid-item' },
+        createElement('h3', { className: 'text-center mt-2' }, name),
+        createElement('img', { src: `images/${species.toLowerCase()}.png`, alt: name}),
+        createElement('p', {}, fact)
+    )
+}
 
+function Dino ({ species, weight, height, diet, where, when, fact }) {
+    const compareWeight = (human) => {
+        const diff = weight - human.getWeight()
+        
+        if (diff < 0) {
+            return `The ${species} weighs ${Math.abs(diff)} fewer lbs than you.`
+        } else if (diff > 0) {
+            return `The ${species} weighs ${diff} more lbs than you.`
+        } else {
+            return `The ${species} and you are the same weight.`
+        }
+    }
     
-    // Create Dino Compare Method 2
-    // NOTE: Weight in JSON file is in lbs, height in inches.
+    
+    const compareHeight = (human) => {
+        const diff = height - human.getHeight()
+        if (diff < 0) {
+            return `The ${species} is ${Math.abs(diff)} inches shorter than you.`
+        } else if (diff > 0) {
+            return `The ${species} is ${diff} inches taller than you.`
+        } else {
+            return `The ${species} and you are the same height.`
+        }
+    }
+    
+    
+    const compareDiet = (human) => {
+        if (diet.toLowerCase() === human.getDiet().toLowerCase()) {
+            return `The ${species} and you are both ${diet}s.`
+        } else {
+            return `The ${species} was a ${diet} and you are a ${human.getDiet()}`
+        }
+    }
+    
+    const getFact = () => fact
+    const getSpecies = () => species
+    const getWhen = () => when
+    const getWhere = () => where
+    
+    const html = (fact) => Tile(species, species, fact)
+    
+    return {
+        compareWeight,
+        compareHeight,
+        compareDiet,
+        getFact,
+        getSpecies,
+        getWhen,
+        getWhere,
+        html
+    }
+}
 
+function Human ({ name, feet, inches, weight, diet }) {
+    const html = () => Tile('Human', name, '')
+    const getWeight = () => parseInt(weight)
+    const getHeight = () => parseInt(feet) * 12 + parseInt(inches)
+    const getDiet = () => diet
     
-    // Create Dino Compare Method 3
-    // NOTE: Weight in JSON file is in lbs, height in inches.
+    return {
+        html,
+        getWeight,
+        getHeight,
+        getDiet
+    }
+}
 
 
-    // Generate Tiles for each Dino in Array
-  
-        // Add tiles to DOM
 
-    // Remove form from screen
+const $compareForm = document.getElementById('compareForm')
+const $return = document.getElementById('return')
+const $grid = document.getElementById('grid')
+const testing = true
 
+$compareForm.addEventListener('submit', async function (e) {
+    e.preventDefault()
+    
+    // validating form
+    if (testing || $compareForm.checkValidity()) {
+        // creating info graph
+        const response = await fetch('dino.json')
+        const data = await response.json()
+        const dinos = data.Dinos.shuffle()
+        const tiles = []
+        
+        const elements = Array.from($compareForm.elements)
+        const formData = {}
+        elements.forEach(($el) => { formData[$el.id] = $el.value })
+        
+        const human = testing ? 
+            Human({ name: 'Ted', feet: '5', inches: '11', weight: '170', diet: 'Herbivore'}) : 
+            Human(formData)
+        
+        $compareForm.classList.add('d-none')
+        $return.classList.remove('d-none')
+        
+        dinos.forEach((obj, index) => {
+            if (index === 4) {
+                $grid.append(human.html())
+            }
+            
+            const dino = Dino(obj)
+            
+            if (dino.getSpecies() === 'Pigeon') {
+                $grid.append(dino.html(dino.getFact()))
+            } else {
+                const roll = Math.floor(Math.random() * 6 + 1)
+                
+                switch (roll) {
+                    case 1:
+                        $grid.append(dino.html(dino.getFact()))
+                        break;
+                    case 2:
+                        $grid.append(dino.html(dino.compareWeight(human)))
+                        break;
+                    case 3:
+                        $grid.append(dino.html(dino.compareHeight(human)))
+                        break;
+                    case 4:
+                        $grid.append(dino.html(dino.compareDiet(human)))
+                        break;
+                    case 5:
+                        $grid.append(dino.html(`The ${dino.getSpecies()} lived during the ${dino.getWhen()} period.`))
+                        break;
+                    case 6:
+                        $grid.append(dino.html(`The ${dino.getSpecies()} lived during the ${dino.getWhere()} period.`))
+                        break;
+                }
+            }
+        })    
+    } else {
+        $compareForm.classList.add('was-validated')   
+    }
+})
 
-// On button click, prepare and display infographic
+$return.addEventListener('click', function () {
+    $compareForm.classList.remove('d-none')
+    $return.classList.add('d-none')
+    $grid.innerHTML = ''
+}) 
\ No newline at end of file
diff --git a/dino.json b/dino.json
index 468a614a..e0c6eafe 100644
--- a/dino.json
+++ b/dino.json
@@ -4,7 +4,7 @@
             "species": "Triceratops",
             "weight": 13000,
             "height": 114,
-            "diet": "herbavor",
+            "diet": "herbivore",
             "where": "North America",
             "when": "Late Cretaceous",
             "fact": "First discovered in 1889 by Othniel Charles Marsh"
@@ -13,7 +13,7 @@
             "species": "Tyrannosaurus Rex",
             "weight": 11905,
             "height": 144,
-            "diet": "carnivor",
+            "diet": "carnivore",
             "where": "North America",
             "when": "Late Cretaceous",
             "fact": "The largest known skull measures in at 5 feet long."
@@ -22,7 +22,7 @@
             "species": "Anklyosaurus",
             "weight": 10500,
             "height": 55,
-            "diet": "herbavor",
+            "diet": "herbivore",
             "where": "North America",
             "when": "Late Cretaceous",
             "fact": "Anklyosaurus survived for approximately 135 million years."
@@ -31,7 +31,7 @@
             "species": "Brachiosaurus",
             "weight": 70000,
             "height": "372",
-            "diet": "herbavor",
+            "diet": "herbivore",
             "where": "North America",
             "when": "Late Jurasic",
             "fact": "An asteroid was named 9954 Brachiosaurus in 1991."
@@ -40,7 +40,7 @@
             "species": "Stegosaurus",
             "weight": 11600,
             "height": 79,
-            "diet": "herbavor",
+            "diet": "herbivore",
             "where": "North America, Europe, Asia",
             "when": "Late Jurasic to Early Cretaceous",
             "fact": "The Stegosaurus had between 17 and 22 seperate places and flat spines."
@@ -49,7 +49,7 @@
             "species": "Elasmosaurus",
             "weight": 16000,
             "height": 59,
-            "diet": "carnivor",
+            "diet": "carnivore",
             "where": "North America",
             "when": "Late Cretaceous",
             "fact": "Elasmosaurus was a marine reptile first discovered in Kansas."
@@ -58,7 +58,7 @@
             "species": "Pteranodon",
             "weight": 44,
             "height": 20,
-            "diet": "carnivor",
+            "diet": "carnivore",
             "where": "North America",
             "when": "Late Cretaceous",
             "fact": "Actually a flying reptile, the Pteranodon is not a dinosaur."
@@ -67,7 +67,7 @@
             "species": "Pigeon",
             "weight": 0.5,
             "height": 9,
-            "diet": "herbavor",
+            "diet": "herbivore",
             "where": "World Wide",
             "when": "Holocene",
             "fact": "All birds are living dinosaurs."
diff --git a/index.html b/index.html
index d9ddfd1f..121d23e1 100644
--- a/index.html
+++ b/index.html
@@ -9,38 +9,72 @@
     <link href="https://fonts.googleapis.com/css?family=Frijole|Open+Sans|Oswald&display=swap" rel="stylesheet">
     <!-- Normalize browser styles -->
     <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
     <link href="app.css" rel="stylesheet">
     <!-- Link to app.js with defer till HTML render -->
     <script defer src="app.js"></script>
 </head>
 <body>
-    <header>
+    <header class="text-center mb-5">
         <h2>Natural History Museum</h2> 
         <h1>Dinosaurs</h1>
         <h3>How do you compare?</h3>
     </header>
     <!-- Form to get user input -->
-    <form id="dino-compare">
-        <div class="form-container">
-            <p>Name:</p>
-            <input id="name" class="form-field__full" type="text" name="name">
-            <p>Height</p>
-            <label>Feet: <input id="feet" class="form-field__short" type="number" name="feet"></label>
-            <label>inches: <input id="inches" class="form-field__short" type="number" name="inches"></label>
-            <p>Weight:</p>
-            <label><input id="weight" class="form-field__full" type="number" name="weight">lbs</label>
-            <p>Diet:</p>
-            <select id="diet" class="form-field__full" name="diet">
-                <option>Herbavor</option>
-                <option>Omnivor</option>
-                <option>Carnivor</option>
-            </select>
-            <div id="btn">Compare Me!</div>
+    <form id="compareForm" class="row mb-3" novalidate>
+        <div class="col-md-8 offset-md-2 col-lg-6 offset-lg-3 bg-light p-5">
+            <div class="form-group mb-3">
+                <label class="form-label fw-bold">Name:</label>
+                <input id="name" class="form-control" type="text" name="name" required>
+                <div class="invalid-feedback">
+                    Please provide a name
+                </div>
+            </div>
+            
+            <div class="form-group mb-3">
+                <label class="form-label fw-bold">Height:</label>
+                <div class="row">
+                    <div class="col">
+                        <input id="feet" class="form-control" type="number" min="0" name="feet" value="0" required><span class="form-text">Feet</span>
+                    </div>
+                    <div class="col">
+                        <input id="inches" class="form-control" type="number" min="0" name="inches" value="0" required><span class="form-text">Inches</span>
+                    </div>
+                </div>
+                <div class="invalid-feedback">
+                    Please provide a height
+                </div>
+            </div>
+            
+            <div class="form-group mb-3">
+                <label class="form-label fw-bold">Weight:</label>
+                <input id="weight" class="form-control" type="number" min="0" name="weight" value="0" required><span class="form-text">lbs</span>
+                <div class="invalid-feedback">
+                    Please provide a weight
+                </div>
+            </div>
+            
+            <div class="form-group mb-3">
+                <label class="form-label fw-bold">Diet:</label>
+                <select id="diet" class="form-select" name="diet" required>
+                    <option value="">Select a Diet</option>
+                    <option>Herbivore</option>
+                    <option>Omnivore</option>
+                    <option>Carnivore</option>
+                </select>
+                <div class="invalid-feedback">
+                    Please select a diet
+                </div>
+            </div>
+            <button type="submit" class="btn btn-secondary">Compare Me!</button>
         </div>
     </form>
     <!-- .grid to attach tiles to -->
+    <div class="d-flex justify-content-center mb-3">
+        <button id="return" class="btn btn-primary d-none">Return to Form</button>
+    </div>
     <main id="grid"></main>
-    <footer>
+    <footer class="text-center">
         <!-- Include information source -->
         <p class="fine-print">Data Sourced from <a href="https://www.wikipedia.org/">Wikipedia.org</a>, all numbers are approximations.</p>
     </footer>