diff --git a/src/Components/ExternalResources/ExternalResources.css b/src/Components/ExternalResources/ExternalResources.css
index 3158e40..9903539 100644
--- a/src/Components/ExternalResources/ExternalResources.css
+++ b/src/Components/ExternalResources/ExternalResources.css
@@ -1,3 +1,7 @@
+.pagebody {
+  background-color: #262626;
+}
+
 body {
   color: white;
 }
diff --git a/src/Components/ExternalResources/ExternalResources.js b/src/Components/ExternalResources/ExternalResources.js
index 29e4a28..cc6b706 100644
--- a/src/Components/ExternalResources/ExternalResources.js
+++ b/src/Components/ExternalResources/ExternalResources.js
@@ -23,9 +23,16 @@ export default class ExternalResources extends Component {
   };
 
   render() {
-    const sampleData = ["sample1", "sample2", "sample3", "sample4"];
+    const sampleData = [
+      "sample1",
+      "sample2",
+      "sample3",
+      "sample4",
+      "sample5",
+      "sample6"
+    ];
     return (
-      <div>
+      <div class="pagebody">
         <h1>External Resources</h1>
         <p>
           Search here to find courses to start learning for your new career or
diff --git a/src/Components/ExternalResources/SearchBarComponent.css b/src/Components/ExternalResources/SearchBarComponent.css
new file mode 100644
index 0000000..d67d9f6
--- /dev/null
+++ b/src/Components/ExternalResources/SearchBarComponent.css
@@ -0,0 +1,61 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.row {
+  margin: 1% 1% 0 1%;
+}
+
+.row:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.column {
+  float: left;
+  width: 25%;
+  padding: 0 3.5%;
+  margin-bottom: 2%;
+}
+
+@media screen and (max-width: 600px) {
+  .column {
+    width: 50%;
+    padding: 0 3.5%;
+    display: block;
+    margin-bottom: 4%;
+  }
+}
+
+@media screen and (max-width: 350px) {
+  .column {
+    width: 100%;
+    display: block;
+    margin-bottom: 5.5%;
+  }
+}
+
+.card {
+  box-shadow: 0 4px 8px 0 #000000;
+  transition: 0.3s;
+}
+
+.card:hover {
+  box-shadow: 0 8px 16px 0 #000000;
+}
+
+.cardImg {
+  width: 100%;
+}
+
+.container {
+  margin-top: -1.75%;
+  padding: 5%;
+  text-align: center;
+  background-color: #000000;
+}
diff --git a/src/Components/ExternalResources/SearchBarComponent.js b/src/Components/ExternalResources/SearchBarComponent.js
index 955891b..736ffc4 100644
--- a/src/Components/ExternalResources/SearchBarComponent.js
+++ b/src/Components/ExternalResources/SearchBarComponent.js
@@ -1,5 +1,7 @@
 import React from "react";
 
+import "./SearchBarComponent.css";
+
 export default class SearchBarComponent extends React.Component {
   state = {
     initialItems: [],
@@ -31,9 +33,22 @@ export default class SearchBarComponent extends React.Component {
         <form onSubmit={this.submitHandler}>
           <input type="text" placeholder="Search" onChange={this.filterList} />
         </form>
-        <div>
+        <div class="row">
           {this.state.items.map(function(item) {
-            return <div key={item}>{item}</div>;
+            return (
+              <div class="column">
+                <div class="card">
+                  <img
+                    src="https://pixselo.com/wp-content/uploads/2018/03/dummy-placeholder-image-400x400.jpg"
+                    alt="Avatar"
+                    class="cardImg"
+                  ></img>
+                  <div key={item} class="container">
+                    {item}
+                  </div>
+                </div>
+              </div>
+            );
           })}
         </div>
       </div>