diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..78f5f9e
Binary files /dev/null and b/.DS_Store differ
diff --git a/data/schema.sql b/data/schema.sql
index e69de29..ccec1ed 100644
--- a/data/schema.sql
+++ b/data/schema.sql
@@ -0,0 +1,31 @@
+let mysql = require(‘mysql’);
+let con = mysql = mysql.createConnection({
+    host: “localhost”,
+    user: “root”,
+    password: Jordan2017,
+    database: “Pokemon”
+});
+con.connect(err => {
+    if (err) {
+        throw err;
+    }
+    con.query(“SELECT * FROM pokemon”, (err, result, fields) => {
+        if (err) {
+            throw err;
+        }
+        console.log(result);
+    });
+});
+let pokemon_id = 1;
+let name = “Bulbasaur”;
+let color = “Green”;
+//console.log(`INSERT into pokemon (pokemon_id, name, color) VALUES (${pokemon_id}, ${name}, ${color});`);
+con.query(`INSERT into pokemon (pokemon_id, name, color) VALUES (${pokemon_id}, ${name}, ${color});`, (err, result, fields) => {
+    if (err) {
+        throw err;
+    }
+});
+-- 9:00
+-- ALTER USER ‘root’@‘localhost’ IDENTIFIED WITH mysql_native_password BY ‘password’;
+-- 9:00
+-- FLUSH PRIVILEGES;
diff --git a/index.js b/index.js
deleted file mode 100644
index bba5463..0000000
--- a/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-const express = require('express')
-const app = express()
-const port = 3000
-
-app.get('/', (req, res) => {
-  res.send('Hello World!')
-})
-
-app.listen(port, () => {
-  console.log(`Example app listening at http://localhost:${port}`)
-})
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 1fca92a..2942519 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -63,6 +63,15 @@
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
       "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
     },
+    "cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "requires": {
+        "object-assign": "^4",
+        "vary": "^1"
+      }
+    },
     "debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -213,16 +222,16 @@
       "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
     },
     "mime-db": {
-      "version": "1.45.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.45.0.tgz",
-      "integrity": "sha512-CkqLUxUk15hofLoLyljJSrukZi8mAtgd+yE5uO4tqRZsdsAJKv0O+rFMhVDRJgozy+yG6md5KwuXhD4ocIoP+w=="
+      "version": "1.46.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.46.0.tgz",
+      "integrity": "sha512-svXaP8UQRZ5K7or+ZmfNhg2xX3yKDMUzqadsSqi4NCH/KomcH75MAMYAGVlvXn4+b/xOPhS3I2uHKRUzvjY7BQ=="
     },
     "mime-types": {
-      "version": "2.1.28",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.28.tgz",
-      "integrity": "sha512-0TO2yJ5YHYr7M2zzT7gDU1tbwHxEUWBCLt0lscSNpcdAfFyJOVEpRYNS7EXVcTLNj/25QO8gulHC5JtTzSE2UQ==",
+      "version": "2.1.29",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.29.tgz",
+      "integrity": "sha512-Y/jMt/S5sR9OaqteJtslsFZKWOIIqMACsJSiHghlCAyhf7jfVYjKBmLiX8OgpWeW+fjJ2b+Az69aPFPkUOY6xQ==",
       "requires": {
-        "mime-db": "1.45.0"
+        "mime-db": "1.46.0"
       }
     },
     "ms": {
@@ -235,6 +244,11 @@
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
       "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw=="
     },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+    },
     "on-finished": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
diff --git a/package.json b/package.json
index 944e450..2d4824e 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
   },
   "homepage": "https://github.com/code-differently/Pokedex-App#readme",
   "dependencies": {
+    "cors": "^2.8.5",
     "express": "^4.17.1"
   }
 }
diff --git a/rest/app.js b/rest/app.js
new file mode 100644
index 0000000..131ebf9
--- /dev/null
+++ b/rest/app.js
@@ -0,0 +1,58 @@
+const express = require('express')
+const app = express()
+const port = 3000
+
+app.get('/', (req, res) => {
+  res.send('Hello World!')
+})
+
+app.listen(port, () => {
+  console.log(`Example app listening at http://localhost:${port}`)
+})
+console.log(hello);
+
+let pokedex = document.getElementById("pokedex");
+console.log(pokedex);
+let url = "https://pokeapi.co/api/v2/pokemon/";
+let fetchPokemon = () => {
+  const promises = [];
+  for (let i = 1; i <= 139; i++, status == 200) {
+    // console.log(url + i);
+    
+      promises.push(fetch(url + i).then((res) => {
+        return res.json();
+      
+    }));
+  }
+
+  Promise.all(promises).then(results => {
+    const pokemon = results.map((data) => ({
+      name: data.name,
+      id: data.id,
+      image: data.sprites['front_shiny'],
+      type: data.types[0].type.name
+    }));
+    displayPokemon(pokemon);
+  });
+};
+let thisPokemon;
+let displayPokemon = (pokemon) => {
+  // console.log(pokemon.type);
+  const pokemonHTMLString = pokemon.map(
+    (pokeman) => `  
+          <div class = "card ${pokeman.type}">
+                <img src= "${pokeman.image}" />
+                <h2> ${pokeman.id}. ${pokeman.name}</h2>
+                <p>Type: ${pokeman.type}</p>
+           </div>
+      `).join('');
+  pokedex.innerHTML = pokemonHTMLString;
+  //   return cardColor();
+};
+// card.classList.add('card', `${​​​​​pokeman.types[0].type.name}​​​​​`, 'font-weight-bold');
+function cardColor() {
+  if (pokeman.type === 'grass') {
+    document.getElementsByClassName("card")[0].style.backgroundColor = "blue";
+  }
+};
+fetchPokemon();
\ No newline at end of file
diff --git a/rest/index.js b/rest/index.js
deleted file mode 100644
index bba5463..0000000
--- a/rest/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-const express = require('express')
-const app = express()
-const port = 3000
-
-app.get('/', (req, res) => {
-  res.send('Hello World!')
-})
-
-app.listen(port, () => {
-  console.log(`Example app listening at http://localhost:${port}`)
-})
\ No newline at end of file
diff --git a/web/.DS_Store b/web/.DS_Store
new file mode 100644
index 0000000..a308495
Binary files /dev/null and b/web/.DS_Store differ
diff --git a/web/index.html b/web/index.html
index 1de928b..d7776eb 100644
--- a/web/index.html
+++ b/web/index.html
@@ -1,11 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <!-- <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" /> -->
+    <title>JAF's Pokedex</title>
+    <link rel="stylesheet" href="styles.css" />
+    <!-- <link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet" /> -->
 </head>
+
 <body>
-    <p>Hello Pokemon!</p>
+    <div class="container">
+        <h1>JAF's Pokedex</h1>
+        <h2>Gotta catch'em all!</h2>
+        <ol id="pokedex">  </ol>
+            
+    </div>
+    <script src="../rest/app.js"></script>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/web/styles.css b/web/styles.css
new file mode 100644
index 0000000..ca5f630
--- /dev/null
+++ b/web/styles.css
@@ -0,0 +1,135 @@
+/*PokedexJAF.css*/
+/* testiing testing testing  */
+body {
+    background-color: orangered;
+    color: white;
+    margin: 0;
+    font-family: rubik;
+    }
+    
+    .container {
+    padding: 40px;
+    margin: 0 auto;
+    }
+    
+    h1 {
+    text-transform: uppercase;
+    text-align: center;
+    font-size: 20px;
+    font-style: pokemon;
+    }
+    h2{
+    font-style: andybold;
+    text-align: center;
+    }
+    
+    /* pokedex {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    grid-gap: 20px;
+    padding-inline-start: 0;
+    } */
+    
+    .card {
+    height: 200px;
+    width: 180px;
+    list-style: none;
+    padding: 40px;
+    background-color: #f4f4f4;
+    color: #222;
+    text-align: center;
+    display: inline-block;
+    margin: 1%;
+    }
+    
+    .card:hover {
+    animation: bounce 0.5s linear;
+    }
+    
+    .card-title {
+    text-transform: capitalize;
+    margin-bottom: 0px;
+    font-size: 32px;
+    font-weight: normal;
+    }
+    .card-subtitle {
+    margin-top: 5px;
+    color: #666;
+    font-weight: lighter;
+    }
+    
+    .card-image {
+    height: 180px;
+    }
+    /* text wrap */
+    .fire {
+        background-color: firebrick;
+       }
+        
+       .bug {
+        background-color: greenyellow;
+       }
+        
+       .grass {
+        background-color: green;
+       }
+        
+       .water {
+        background-color: aqua;
+       }
+        
+       .normal {
+        background-color: burlywood;
+       }
+        
+       .electric {
+        background-color: yellow;
+       }
+        
+       .poison {
+        background-color: slateblue;
+       }
+        
+       .ground {
+        background-color: chocolate;
+       }
+        
+       .fairy {
+        background-color: pink;
+       }
+        
+       .psychic {
+        background-color: rebeccapurple;
+       }
+        
+       .rock {
+        background-color: grey;
+       }
+        
+       .fighting {
+        background-color: crimson;
+       }
+        
+       .ghost {
+        background-color: darkmagenta;
+       }
+        
+       .ice {
+        background-color: darkturquoise;
+       }
+        
+       .dragon {
+        background-color: olive;
+       }
+        
+       .steel {
+        background-color: steelblue;
+       }
+        
+       .dark {
+        background-color: darkslategrey;
+       }
+        
+       .flying {
+        background-color: lightskyblue;
+       }
\ No newline at end of file