diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..833b23e
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,16 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "pwa-chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}",
+            "runtimeExecutable": "C:/Users/mikwee/AppData/Local/Chromium/Application/chrome.exe"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index fa710af..2a6d893 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "@testing-library/user-event": "^12.1.10",
     "react": "^17.0.2",
     "react-awesome-button": "^6.5.1",
+    "react-bootstrap-icons": "^1.5.0",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"
diff --git a/src/App.css b/src/App.css
index 5d4c8bc..9bdadc2 100644
--- a/src/App.css
+++ b/src/App.css
@@ -17,4 +17,7 @@
   font-family: "Roboto";
   text-decoration: underline;
   color: white;
+}
+.roots {
+  display: block;
 }
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 2292bb5..425b1d8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,15 +1,27 @@
-import logo from './logo.svg';
 import './App.css';
-import {AwesomeButton} from 'react-awesome-button';
-import "react-awesome-button/dist/styles.css";
+import {AwesomeButton, AwesomeButtonSocial} from 'react-awesome-button';
+import AwesomeButtonStyle from "react-awesome-button/dist/styles.css";
 import data from './roots.json'
 
 function App() {
+  var res;
+  const socialTypes = ["facebook", "instagram", "twitter", "github", "youtube", "linkedin", "pinterest", "messenger", "whatsapp"];
+
   return (
     <div className="App">
-      <div id="bg"></div>
       <h1 id="title">{data.title}</h1>
-      {}
+      {data.links.map((rootDetail, index)=>{
+        if(socialTypes.includes(rootDetail.type)) {
+          res = <button className="roots">{rootDetail.text}</button>
+        }
+        else if (rootDetail.type === "basic") {
+          res = <button className="roots">{rootDetail.text}</button>
+        }
+        else {
+          // throw "One of your roots has an unrecognized type. Check out the documentation for the supported types.";
+        }
+        return res;
+      })}
     </div>
   );
 }
diff --git a/yarn.lock b/yarn.lock
index a04bb98..c439580 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8986,6 +8986,13 @@ react-awesome-button@^6.5.1:
   dependencies:
     web-animation-club "^0.6.0"
 
+react-bootstrap-icons@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/react-bootstrap-icons/-/react-bootstrap-icons-1.5.0.tgz#30ccd09cac69e4037c4cb500cc704d04c4a466a4"
+  integrity sha512-QC5q4meHQG0cO9RJzeDLSqZ1gbVa9jxFCpONCE3GYl2FkbAKSyJAEsONlzTApbZ8/oG87gPWq0xAyn5SZ/Jafw==
+  dependencies:
+    prop-types "^15.7.2"
+
 react-dev-utils@^11.0.3:
   version "11.0.4"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-11.0.4.tgz#a7ccb60257a1ca2e0efe7a83e38e6700d17aa37a"