diff --git a/browser/lib/wakatime-plugin.js b/browser/lib/wakatime-plugin.js
index 4fb34d03..29126567 100644
--- a/browser/lib/wakatime-plugin.js
+++ b/browser/lib/wakatime-plugin.js
@@ -1,9 +1,9 @@
+import config from 'browser/main/lib/ConfigManager'
 const exec = require('child_process').exec
 const path = require('path')
 let lastHeartbeat = 0
 
 function sendWakatimeHeartBeat (storagePath, noteKey, storageName, isWrite, hasFileChanges, isFileChange) {
-
   if (new Date().getTime() - lastHeartbeat > 120000 || isFileChange) {
     const notePath = path.join(storagePath, 'notes', noteKey + '.cson')
 
@@ -12,14 +12,19 @@ function sendWakatimeHeartBeat (storagePath, noteKey, storageName, isWrite, hasF
     }
 
     lastHeartbeat = new Date()
-    // TODO: add --key sdasdsa-sdsad-asdasd-asdsa-asdasdadas from configuration UI or use ~/.wakatime.conf
-    exec(`wakatime --file ${notePath} --project ${storageName} --plugin Boostnote-wakatime`, (error, stdOut, stdErr) => {
-      if (error) {
-        console.log(error)
-      } else {
-        console.log('wakatime', 'isWrite', isWrite, 'hasChanges', hasFileChanges)
-      }
-    })
+    const wakatimeKey = config.get().wakatime.key
+    if (wakatimeKey) {
+      exec(`wakatime --file ${notePath} --project '${storageName}' --key ${wakatimeKey}  --plugin Boostnote-wakatime`, (error, stdOut, stdErr) => {
+        if (error) {
+          console.log(error)
+          lastHeartbeat = 0
+        } else {
+          console.log('wakatime', 'isWrite', isWrite, 'hasChanges', hasFileChanges, 'isFileChange', isFileChange)
+        }
+      })
+    }
+  } else {
+    console.log('nada :(')
   }
 }
 
diff --git a/browser/main/lib/ConfigManager.js b/browser/main/lib/ConfigManager.js
index 5558b3bd..37069c6b 100644
--- a/browser/main/lib/ConfigManager.js
+++ b/browser/main/lib/ConfigManager.js
@@ -89,7 +89,10 @@ export const DEFAULT_CONFIG = {
     username: '',
     password: ''
   },
-  coloredTags: {}
+  coloredTags: {},
+  wakatime: {
+    key: null
+  }
 }
 
 function validate (config) {
@@ -198,6 +201,7 @@ function set (updates) {
 function assignConfigValues (originalConfig, rcConfig) {
   const config = Object.assign({}, DEFAULT_CONFIG, originalConfig, rcConfig)
   config.hotkey = Object.assign({}, DEFAULT_CONFIG.hotkey, originalConfig.hotkey, rcConfig.hotkey)
+  config.wakatime = Object.assign({}, DEFAULT_CONFIG.wakatime, originalConfig.wakatime, rcConfig.wakatime)
   config.blog = Object.assign({}, DEFAULT_CONFIG.blog, originalConfig.blog, rcConfig.blog)
   config.ui = Object.assign({}, DEFAULT_CONFIG.ui, originalConfig.ui, rcConfig.ui)
   config.editor = Object.assign({}, DEFAULT_CONFIG.editor, originalConfig.editor, rcConfig.editor)
diff --git a/browser/main/modals/PreferencesModal/PluginsTab.js b/browser/main/modals/PreferencesModal/PluginsTab.js
new file mode 100644
index 00000000..0fdc3ac8
--- /dev/null
+++ b/browser/main/modals/PreferencesModal/PluginsTab.js
@@ -0,0 +1,136 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './ConfigTab.styl'
+import ConfigManager from 'browser/main/lib/ConfigManager'
+import store from 'browser/main/store'
+import _ from 'lodash'
+import i18n from 'browser/lib/i18n'
+
+const electron = require('electron')
+const ipc = electron.ipcRenderer
+
+class PluginsTab extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      config: props.config
+    }
+  }
+
+  componentDidMount () {
+    this.handleSettingDone = () => {
+      this.setState({pluginsAlert: {
+        type: 'success',
+        message: i18n.__('Successfully applied!')
+      }})
+    }
+    this.handleSettingError = (err) => {
+      if (
+        this.state.config.wakatime.key === '' ||
+        this.state.config.wakatime.key === null
+      ) {
+        this.setState({pluginsAlert: {
+          type: 'success',
+          message: i18n.__('Successfully applied!')
+        }})
+      } else {
+        this.setState({pluginsAlert: {
+          type: 'error',
+          message: err.message != null ? err.message : i18n.__('An error occurred!')
+        }})
+      }
+    }
+    this.oldWakatimekey = this.state.config.wakatime
+    ipc.addListener('APP_SETTING_DONE', this.handleSettingDone)
+    ipc.addListener('APP_SETTING_ERROR', this.handleSettingError)
+  }
+
+  componentWillUnmount () {
+    ipc.removeListener('APP_SETTING_DONE', this.handleSettingDone)
+    ipc.removeListener('APP_SETTING_ERROR', this.handleSettingError)
+  }
+
+  handleSaveButtonClick (e) {
+    const newConfig = {
+      wakatime: this.state.config.wakatime
+    }
+
+    ConfigManager.set(newConfig)
+
+    store.dispatch({
+      type: 'SET_CONFIG',
+      config: newConfig
+    })
+    this.clearMessage()
+    this.props.haveToSave()
+  }
+
+  handleWakatimeKeyChange (e) {
+    const { config } = this.state
+    config.wakatime = { key: this.refs.key.value }
+    this.setState({
+      config
+    })
+    if (_.isEqual(this.oldWakatimekey, config.wakatime)) {
+      this.props.haveToSave()
+    } else {
+      this.props.haveToSave({
+        tab: 'Plugins',
+        type: 'warning',
+        message: i18n.__('Unsaved Changes!')
+      })
+    }
+  }
+
+  clearMessage () {
+    _.debounce(() => {
+      this.setState({
+        pluginsAlert: null
+      })
+    }, 2000)()
+  }
+
+  render () {
+    const pluginsAlert = this.state.pluginsAlert
+    const pluginsAlertElement = pluginsAlert != null
+      ? <p className={`alert ${pluginsAlert.type}`}>
+        {pluginsAlert.message}
+      </p>
+      : null
+    const { config } = this.state
+
+    return (
+      <div styleName='root'>
+        <div styleName='group'>
+          <div styleName='group-header'>{i18n.__('Plugins')}</div>
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>{i18n.__('Wakatime key')}</div>
+            <div styleName='group-section-control'>
+              <input styleName='group-section-control-input'
+                onChange={(e) => this.handleWakatimeKeyChange(e)}
+                ref='key'
+                value={config.wakatime.key}
+                type='text'
+              />
+            </div>
+          </div>
+          <div styleName='group-control'>
+            <button styleName='group-control-rightButton'
+              onClick={(e) => this.handleSaveButtonClick(e)}>{i18n.__('Save')}
+            </button>
+            {pluginsAlertElement}
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+PluginsTab.propTypes = {
+  dispatch: PropTypes.func,
+  haveToSave: PropTypes.func
+}
+
+export default CSSModules(PluginsTab, styles)
diff --git a/browser/main/modals/PreferencesModal/index.js b/browser/main/modals/PreferencesModal/index.js
index f3fc3751..7b2c5894 100644
--- a/browser/main/modals/PreferencesModal/index.js
+++ b/browser/main/modals/PreferencesModal/index.js
@@ -7,6 +7,7 @@ import InfoTab from './InfoTab'
 import Crowdfunding from './Crowdfunding'
 import StoragesTab from './StoragesTab'
 import SnippetTab from './SnippetTab'
+import PluginsTab from './PluginsTab'
 import Blog from './Blog'
 import ModalEscButton from 'browser/components/ModalEscButton'
 import CSSModules from 'browser/lib/CSSModules'
@@ -95,6 +96,14 @@ class Preferences extends React.Component {
             data={data}
           />
         )
+      case 'PLUGINS':
+        return (
+          <PluginsTab
+            dispatch={dispatch}
+            config={config}
+            haveToSave={alert => this.setState({PluginsAlert: alert})}
+          />
+        )
       case 'STORAGES':
       default:
         return (
@@ -133,7 +142,8 @@ class Preferences extends React.Component {
       {target: 'INFO', label: i18n.__('About')},
       {target: 'CROWDFUNDING', label: i18n.__('Crowdfunding')},
       {target: 'BLOG', label: i18n.__('Blog'), Blog: this.state.BlogAlert},
-      {target: 'SNIPPET', label: i18n.__('Snippets')}
+      {target: 'SNIPPET', label: i18n.__('Snippets')},
+      {target: 'PLUGINS', label: i18n.__('Plugins')}
     ]
 
     const navButtons = tabs.map((tab) => {