diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index c5c6e8a..0000000
--- a/src/App.css
+++ /dev/null
@@ -1,28 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
-}
-
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
-}
-
-.App-title {
-  font-size: 1.5em;
-}
-
-.App-intro {
-  font-size: large;
-}
-
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
diff --git a/src/App.js b/src/App.js
index c559014..34d69cf 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import Button from 'material-ui/Button';
+import Button from './components/Button';
 import Dialog, {
   DialogTitle,
   DialogContent,
@@ -47,7 +47,7 @@ class App extends React.Component {
             <DialogContentText>Hello World</DialogContentText>
           </DialogContent>
           <DialogActions>
-            <Button color="primary" onClick={this.handleClose}>
+            <Button type="flat" onClick={this.handleClose}>
               OK
             </Button>
           </DialogActions>
@@ -58,8 +58,11 @@ class App extends React.Component {
         <Typography variant="subheading" gutterBottom>
           Showcase App
         </Typography>
-        <Button variant="raised" color="secondary" onClick={this.handleClick}>
-          Test Popup
+        <Button type="primary" onClick={this.handleClick}>
+          Primary
+        </Button>
+        <Button type="secondary" onClick={this.handleClick}>
+          Secondary
         </Button>
       </div>
     );
diff --git a/src/App.scss b/src/App.scss
index b67722f..9b9cac6 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css?family=Nunito');
+@import url('https://fonts.googleapis.com/css?family=Nunito:600,700');
 @import './assets/sass/mixins.scss';
 
 body {
diff --git a/src/assets/sass/variables.scss b/src/assets/sass/variables.scss
index 81a51d2..7540e51 100644
--- a/src/assets/sass/variables.scss
+++ b/src/assets/sass/variables.scss
@@ -7,5 +7,5 @@ $copy: #A3A1AA;
 $main: black;
 
 // Font weights
-$normal: 500;
-$bold: 600;
+$normal: 600;
+$bold: 700;
diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
new file mode 100644
index 0000000..8da98d3
--- /dev/null
+++ b/src/components/Button/Button.scss
@@ -0,0 +1,35 @@
+@import '../../assets/sass/variables.scss';
+
+.button {
+  font-weight: 700 !important;
+  border-radius: 3px !important;
+  text-transform: capitalize !important;
+  box-shadow: none !important;
+
+  /** Primary Button **/
+  &.primary {
+    background: $success !important;
+    color: #FFFFFF !important;
+    font-size: 20px !important;
+    padding: 8px 42px !important;
+    box-shadow: 0 10px 15px rgba($success, 0.25) !important;
+
+    &:hover {
+      background: darken($success, 15%) !important;
+    }
+
+    &:active {
+      box-shadow: 0 5px 10px rgba($success, 0.2) !important;
+    }
+  }
+
+  /** Secondary Button **/
+  &.secondary {
+    background: transparent !important;
+    border: 2px solid $success !important;
+    font-size: 20px !important;
+    color: $success !important;
+    padding: 6px 40px !important;
+  }
+
+}
\ No newline at end of file
diff --git a/src/components/Button/index.js b/src/components/Button/index.js
new file mode 100644
index 0000000..6bf4f15
--- /dev/null
+++ b/src/components/Button/index.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import Button from 'material-ui/Button';
+import './Button.css';
+
+function CustomButton(props) {
+  const {
+    type = 'primary',
+    onClick,
+    className = '',
+    variant = 'flat',
+    children,
+  } = props;
+
+  return (
+    <Button
+      color={type}
+      variant={variant}
+      onClick={onClick}
+      className={`button ${type} ${className}`}  
+    >
+        { children ? children : 'Button' }
+    </Button>
+  )
+}
+
+export default CustomButton;
\ No newline at end of file
diff --git a/src/withRoot.js b/src/withRoot.js
index 06ea604..e1ce48f 100644
--- a/src/withRoot.js
+++ b/src/withRoot.js
@@ -1,23 +1,26 @@
 import React from 'react';
 import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
-import purple from 'material-ui/colors/purple';
-import green from 'material-ui/colors/green';
 import CssBaseline from 'material-ui/CssBaseline';
 
 // A theme with custom primary and secondary color.
 // It's optional.
 const theme = createMuiTheme({
+    typography: {
+        fontFamily: 'Nunito',
+        fontWeightRegular: 600,
+        fontWeightMedium: 700
+    },
     palette: {
         primary: {
-            light: purple[300],
-            main: purple[500],
-            dark: purple[700],
+            main: '#4E4674',
         },
         secondary: {
-            light: green[300],
-            main: green[500],
-            dark: green[700],
+            main: '#42F062',
+            contrastText: '#FFFFFF'
         },
+        error: {
+            main: '#FF5757'
+        }
     },
 });