diff --git a/package-lock.json b/package-lock.json
index 09619c3..5646b11 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5488,7 +5488,8 @@
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -5670,11 +5671,13 @@
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -5691,6 +5694,7 @@
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -5898,6 +5902,7 @@
         "strip-ansi": {
           "version": "3.0.1",
           "bundled": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -5936,7 +5941,8 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
diff --git a/src/TopBar.css b/src/TopBar.css
new file mode 100644
index 0000000..8500f69
--- /dev/null
+++ b/src/TopBar.css
@@ -0,0 +1,18 @@
+
+.navbar-light .navbar-nav .nav-link {
+    color: rgb(255, 255, 255);
+}
+
+
+.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
+    color: rgba(255,255,255);
+}
+
+.navbar-light .navbar-nav .nav-link:hover, .navbar-light {
+    color: rgba(248, 245, 245, 0.808);
+}
+
+
+.navbar-light .navbar-nav .show > .nav-link, .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .nav-link.active {
+    color: rgb(248, 245, 245, 0,808);
+}
diff --git a/src/TopBar.js b/src/TopBar.js
index dbfd628..a7b74df 100644
--- a/src/TopBar.js
+++ b/src/TopBar.js
@@ -9,6 +9,7 @@ import {
 	Button
 } from 'react-bootstrap'; //eslint-disable-next-line
 import { Link, withRouter } from 'react-router-dom';
+import './TopBar.css';
 // import PropTypes from "prop-types";
 
 class TopBar extends Component {
@@ -34,13 +35,7 @@ class TopBar extends Component {
 	render() {
 		return (
 			<Row>
-				<style type="text/css">
-					{`
-    .nav-custom {
-        color: white;
-    }
-    `}
-				</style>
+			
 				<Navbar bg="dark" className="py-0 px-1 w-100" expand="md">
 					<Navbar.Brand>
 						<Link to="/">HazeTV</Link>
@@ -50,7 +45,7 @@ class TopBar extends Component {
 						<Nav className="mr-auto">
 							<Nav.Link href="#home" className="text-light">Home</Nav.Link>
 							<Nav.Link href="#link" className="text-light">Link</Nav.Link>
-							<NavDropdown title="arnaldo" id="basic-nav-dropdown" bsPrefix="nav-custom">
+							<NavDropdown title="arnaldo" id="basic-nav-dropdown" >
 								<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
 								<NavDropdown.Item href="#action/3.2">
 									Another action