diff --git a/frontend/public/fonts/Mosk-Bold-700.ttf b/frontend/public/fonts/Mosk-Bold-700.ttf
new file mode 100644
index 0000000..ec0327c
Binary files /dev/null and b/frontend/public/fonts/Mosk-Bold-700.ttf differ
diff --git a/frontend/public/fonts/Mosk-Light-300.ttf b/frontend/public/fonts/Mosk-Light-300.ttf
new file mode 100644
index 0000000..118f0bf
Binary files /dev/null and b/frontend/public/fonts/Mosk-Light-300.ttf differ
diff --git a/frontend/public/fonts/Mosk-Normal-400.ttf b/frontend/public/fonts/Mosk-Normal-400.ttf
new file mode 100644
index 0000000..9d6c10c
Binary files /dev/null and b/frontend/public/fonts/Mosk-Normal-400.ttf differ
diff --git a/frontend/src/App.js b/frontend/src/App.js
index ab4fa49..8d40323 100755
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -1,5 +1,6 @@
 import React from "react";
 import "./App.css";
+import "./styles/index.css"
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 
 import Main from "./Main";
diff --git a/frontend/src/components/Footer.js b/frontend/src/components/Footer.js
index da52a4f..30a2fa9 100755
--- a/frontend/src/components/Footer.js
+++ b/frontend/src/components/Footer.js
@@ -1,13 +1,15 @@
 import React from 'react';
 
 const Footer = () => {
+    function getYear() {
+        const date = new Date();
+        const currentYear = date.getFullYear();
+        return currentYear;
+    }
+
     return ( 
-        <footer className="main-footer">
-            <strong>Copyright © 2014-2019 <a href="http://adminlte.io">AdminLTE.io</a>.</strong>
-            All rights reserved.
-            <div className="float-right d-none d-sm-inline-block">
-                <b>Version</b> 3.0.5
-            </div>
+        <footer className="main-footer Bk-color-black secondary-font">
+            <strong>Copyright © {getYear()} <a href="https://bakano.ec/" className='Bk-link'>BAKANO</a></strong>
         </footer>
      );
 }
diff --git a/frontend/src/components/Menu.js b/frontend/src/components/Menu.js
index 6c93904..8e9d5b8 100755
--- a/frontend/src/components/Menu.js
+++ b/frontend/src/components/Menu.js
@@ -26,7 +26,7 @@ const Menu = ({ history }) => {
     };
 
     return (
-        <aside className="main-sidebar sidebar-dark-primary elevation-4">
+        <aside className="main-sidebar sidebar-dark-primary elevation-4 Bk-bg-black">
             {/* Brand Logo */}
             <Link to={"/dashboard"} className="brand-link">
                 <img
diff --git a/frontend/src/screens/auth/LoginScreen.js b/frontend/src/screens/auth/LoginScreen.js
index 81a66fb..14246a3 100755
--- a/frontend/src/screens/auth/LoginScreen.js
+++ b/frontend/src/screens/auth/LoginScreen.js
@@ -90,7 +90,7 @@ const LoginScreen = ({ history }) => {
                                 <div className="col-4">
                                     <button
                                         type="submit"
-                                        className="btn btn-primary btn-block"
+                                        className="btn btn-primary btn-block Bk-button"
                                     >
                                         Sign In
                                     </button>
diff --git a/frontend/src/styles/BkColors.css b/frontend/src/styles/BkColors.css
new file mode 100644
index 0000000..61e3f11
--- /dev/null
+++ b/frontend/src/styles/BkColors.css
@@ -0,0 +1,31 @@
+.Bk-color-black{
+  color: #191423;
+}
+.Bk-color-pink{
+  color: #e6285c;
+}
+
+.Bk-bg-black{
+  background-color: #191423;
+}
+.Bk-bg-pink{
+  background-color: #e6285c;
+}
+
+.Bk-link{
+  color: #e6285c;
+  &:hover{
+    color: #c2234e;
+  }
+}
+.Bk-button{
+  background-color: #e6285c;
+  color: #fff;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 5px;
+  cursor: pointer;
+  &:hover{
+    background-color: #c2234e;
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/styles/BkFontVariables.css b/frontend/src/styles/BkFontVariables.css
new file mode 100644
index 0000000..5e11c48
--- /dev/null
+++ b/frontend/src/styles/BkFontVariables.css
@@ -0,0 +1,53 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap');
+
+@font-face {
+  font-family: 'Mosk';
+  src: url('/fonts/Mosk-Light-300.ttf') format('truetype');
+  font-weight: 300;
+  font-style: light;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Mosk';
+  src: url('/fonts/Mosk-Normal-400.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Mosk';
+  src: url('/fonts/Mosk-Bold-700.ttf') format('truetype');
+  font-weight: 700;
+  font-style: bold;
+  font-display: swap;
+}
+
+.primary-font {
+  font-family: 'Mosk', sans-serif;
+}
+.secondary-font {
+  font-family: 'Inter', serif;
+}
+
+.font-size-small {
+  font-size: 0.75rem;
+}
+.font-size-normal {
+  font-size: 1rem;
+}
+.font-size-large {
+  font-size: 1.5rem;
+}
+.font-size-extra-large {
+  font-size: 3rem;
+}
+
+.font-weight-thin {
+  font-weight: 300;
+}
+.font-weight-normal {
+  font-weight: 400;
+}
+.font-weight-bold {
+  font-weight: 700;
+}
\ No newline at end of file
diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css
new file mode 100644
index 0000000..9ba3ca1
--- /dev/null
+++ b/frontend/src/styles/index.css
@@ -0,0 +1,2 @@
+@import url('./BkColors.css');
+@import url('./BkFontVariables.css');
\ No newline at end of file