diff --git a/package.json b/package.json
index a4e42bb..7bdfbdf 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "react-bootstrap": "^2.0.2",
     "react-bootstrap-icons": "^1.5.0",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.3.1",
     "react-scripts": "4.0.3",
     "sass": "^1.43.4",
     "svg-jsx-loader": "^1.0.1",
diff --git a/src/App.css b/src/App.css
index 50702b0..2b4ba3b 100644
--- a/src/App.css
+++ b/src/App.css
@@ -15,7 +15,6 @@
   text-align: center;
   margin-top: 3%;
   font-family: "Roboto";
-  text-decoration: underline;
   color: white;
 }
 #container {
diff --git a/src/App.js b/src/App.js
index 35ae77a..0a662ab 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,7 @@
 import './App.css';
 import {Button, ButtonGroup} from 'react-bootstrap';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import { Facebook, Instagram, Twitter, Github, Youtube, Linkedin, Pinterest, Reddit } from 'react-bootstrap-icons';
+import { BsFacebook, BsInstagram, BsTwitter, BsGithub, BsYoutube, BsLinkedin, BsPinterest, BsReddit } from 'react-icons/bs';
 import Tumblr from './icons/Tumblr';
 import './styles/roots.scss';
 import data from './roots.json'
@@ -15,31 +15,31 @@ function App() {
       <div id="container">
         {data.links.map((rootDetail, index)=>{
           if(rootDetail.type === "facebook") {
-            res = <Button className="roots" id="facebook" variant="primary" href={rootDetail.url}><Facebook/> {rootDetail.text}</Button>
+            res = <Button className="roots" id="facebook" variant="primary" href={rootDetail.url}><BsFacebook/> {rootDetail.text}</Button>
           }
           else if(rootDetail.type === "instagram") {
-            res = <Button className="roots" id="instagram" variant="primary" href={rootDetail.url}><Instagram/> {rootDetail.text}</Button>
+            res = <Button className="roots" id="instagram" variant="primary" href={rootDetail.url}><BsInstagram/> {rootDetail.text}</Button>
           }
           else if (rootDetail.type === "twitter") {
-            res = <Button className="roots" id="twitter" variant="primary" href={rootDetail.url}><Twitter/> {rootDetail.text}</Button>
+            res = <Button className="roots" id="twitter" variant="primary" href={rootDetail.url}><BsTwitter/> {rootDetail.text}</Button>
           }
           else if (rootDetail.type === "github") {
-            res = <Button className="roots" id="github" variant="primary" href={rootDetail.url}><Github/> {rootDetail.text}</Button>
+            res = <Button className="roots" id="github" variant="primary" href={rootDetail.url}><BsGithub/> {rootDetail.text}</Button>
           }
           else if (rootDetail.type === "youtube") {
-            res = <Button className="roots" id="youtube" variant="primary" href={rootDetail.url}><Youtube/> {rootDetail.text}</Button>
+            res = <Button className="roots" id="youtube" variant="primary" href={rootDetail.url}><BsYoutube/> {rootDetail.text}</Button>
           }
           else if (rootDetail.type === "linkedin") {
-            res = <Button className="roots" id="linkedin" variant="primary" href={rootDetail.url}><Linkedin/> {rootDetail.text}</Button>
+            res = <Button className="roots" id="linkedin" variant="primary" href={rootDetail.url}><BsLinkedin/> {rootDetail.text}</Button>
           }
           else if (rootDetail.type === "pinterest") {
-            res = <Button className="roots" id="pinterest" variant="primary" href={rootDetail.url}><Pinterest/> {rootDetail.text}</Button>
+            res = <Button className="roots" id="pinterest" variant="primary" href={rootDetail.url}><BsPinterest/> {rootDetail.text}</Button>
           }
           else if (rootDetail.type === "tumblr") {
             res = <Button className="roots" id="tumblr" variant="primary" href={rootDetail.url}><Tumblr viewBox="250 0 300 200" width="32px" height="32px"/> {rootDetail.text}</Button>
           }
           else if (rootDetail.type === "reddit") {
-            res = <Button className="roots" id="reddit" variant="primary" href={rootDetail.url}><Reddit/> {rootDetail.text}</Button>
+            res = <Button className="roots" id="reddit" variant="primary" href={rootDetail.url}><BsReddit/> {rootDetail.text}</Button>
           }
           else if (rootDetail.type === "basic") {
             res = <Button className="roots" variant="primary" href={rootDetail.url}>{rootDetail.text}</Button>
diff --git a/src/index.js b/src/index.js
index 0d4cde9..43562d1 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
-import "@fontsource/roboto/500-italic.css";
+import "@fontsource/roboto/500.css";
 
 ReactDOM.render(
   <React.StrictMode>
diff --git a/yarn.lock b/yarn.lock
index fd248d0..75a10a7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9379,6 +9379,11 @@ react-error-overlay@^6.0.9:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
+react-icons@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.3.1.tgz#2fa92aebbbc71f43d2db2ed1aed07361124e91ca"
+  integrity sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==
+
 react-is@^16.3.2, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"