diff --git a/browser/lib/modes.js b/browser/lib/modes.js
index 2ea68258..8f1cdbd5 100644
--- a/browser/lib/modes.js
+++ b/browser/lib/modes.js
@@ -8,379 +8,442 @@ const modes = [
     name: 'abap',
     label: 'ABAP',
     alias: [],
-    mode: 'abap'
+    mode: 'abap',
+    match: /\.abap$/i
   },
   {
     name: 'abc',
     label: 'ABC',
     alias: [],
-    mode: 'abc'
+    mode: 'abc',
+    match: /\.abc$/i
   },
   {
     name: 'actionscript',
     label: 'ActionScript',
     alias: ['as'],
-    mode: 'actionscript'
+    mode: 'actionscript',
+    match: /\.as$/i
   },
   {
     name: 'ada',
     label: 'Ada',
     alias: [],
-    mode: 'ada'
+    mode: 'ada',
+    match: /\.ada$/i
   },
   {
     name: 'apache_conf',
     label: 'Apache config',
     alias: ['apache', 'conf'],
-    mode: 'apache_conf'
+    mode: 'apache_conf',
+    match: /\.conf$/i
   },
   {
     name: 'applescript',
     label: 'AppleScript',
     alias: ['scpt'],
-    mode: 'applescript'
+    mode: 'applescript',
+    match: /\.scpt$|\.scptd$|\.AppleScript$/i
   },
   {
     name: 'asciidoc',
     label: 'AsciiDoc',
     alias: ['ascii', 'doc', 'txt'],
-    mode: 'asciidoc'
+    mode: 'asciidoc',
+    match: /\.txt$/i
   },
   {
     name: 'assembly_x86',
     label: 'Assembly x86',
     alias: ['assembly', 'x86', 'asm'],
-    mode: 'assembly_x86'
+    mode: 'assembly_x86',
+    match: /\.asm$/i
   },
   {
     name: 'autohotkey',
     label: 'AutoHotkey',
     alias: ['ahk'],
-    mode: 'autohotkey'
+    mode: 'autohotkey',
+    match: /\.ahk$/i
   },
   {
     name: 'batchfile',
     label: 'Batch file',
     alias: ['dos', 'windows', 'bat', 'cmd', 'btm'],
-    mode: 'batchfile'
+    mode: 'batchfile',
+    match: /\.bat$|\.cmd$/i
   },
   {
     name: 'c',
     label: 'C',
     alias: ['c', 'h', 'clang', 'clang'],
-    mode: 'c_cpp'
+    mode: 'c_cpp',
+    match: /\.c$|\.h\+\+$/i
   },
   {
     name: 'cirru',
     label: 'Cirru',
     alias: [],
-    mode: 'cirru'
+    mode: 'cirru',
+    match: /\.cirru$/i
   },
   {
     name: 'clojure',
     label: 'Clojure',
     alias: ['clj', 'cljs', 'cljc', 'edn'],
-    mode: 'clojure'
+    mode: 'clojure',
+    match: /\.clj$|\.cljs$|\.cljc$|\.edn$/i
   },
   {
     name: 'cobol',
     label: 'COBOL',
     alias: ['cbl', 'cob', 'cpy'],
-    mode: 'cobol'
+    mode: 'cobol',
+    match: /\.cbl$|\.cob$\.cpy$/i
   },
   {
     name: 'coffee',
     label: 'CoffeeScript',
     alias: ['coffee'],
-    mode: 'coffee'
+    mode: 'coffee',
+    match: /\.coffee$|\.litcoffee$/i
   },
   {
     name: 'coldfusion',
     label: 'ColdFusion',
     alias: ['cfm', 'cfc'],
-    mode: 'coldfusion'
+    mode: 'coldfusion',
+    match: /\.cfm$|\.cfc$/i
   },
   {
     name: 'cpp',
     label: 'C++',
     alias: ['cc', 'cpp', 'cxx', 'hh', 'c++', 'cplusplus'],
-    mode: 'c_cpp'
+    mode: 'c_cpp',
+    match: /\.cc$|\.cpp$|\.cxx$|\.C$|\.c\+\+$|\.hh$|\.hpp$|\.hxx$|\.h\+\+$/i
   },
   {
     name: 'csharp',
     label: 'C#',
     alias: ['cs', 'c#'],
-    mode: 'csharp'
+    mode: 'csharp',
+    match: /\.cs$/i
   },
   {
     name: 'css',
     label: 'CSS',
     alias: ['cascade', 'stylesheet'],
-    mode: 'css'
+    mode: 'css',
+    match: /\.css$/i
   },
   {
     name: 'curly',
     label: 'Curly',
     alias: [],
-    mode: 'curly'
+    mode: 'curly',
+    match: /\.curly$/i
   },
   {
     name: 'd',
     label: 'D',
     alias: ['dlang'],
-    mode: 'd'
+    mode: 'd',
+    match: /\.d$/i
   },
   {
     name: 'dockerfile',
     label: 'DockerFile',
     alias: ['docker'],
-    mode: 'docker'
+    mode: 'docker',
+    match: /Dockerfile$/i
   },
   {
     name: 'dart',
     label: 'Dart',
     alias: [],
-    mode: 'dart'
+    mode: 'dart',
+    match: /\.dart$/i
   },
   {
     name: 'diff',
     label: 'Diff',
     alias: [],
-    mode: 'diff'
+    mode: 'diff',
+    match: /\.diff$|\.patch$/i
   },
   {
     name: 'django',
     label: 'Django',
     alias: [],
-    mode: 'djt'
+    mode: 'djt',
+    match: /\.djt$/i
   },
   {
     name: 'dot',
     label: 'DOT',
     alias: ['gv'],
-    mode: 'dot'
+    mode: 'dot',
+    match: /\.gv$|\.dot/i
   },
   {
     name: 'eiffel',
     label: 'Eiffel',
     alias: [],
-    mode: 'eiffel'
+    mode: 'eiffel',
+    match: /\.e$/i
   },
   {
     name: 'ejs',
     label: 'EJS',
     alias: [],
-    mode: 'ejs'
+    mode: 'ejs',
+    match: /\.ejs$/i
   },
   {
     name: 'elixir',
     label: 'Elixir',
     alias: ['ex', 'exs'],
-    mode: 'elixir'
+    mode: 'elixir',
+    match: /\.ex$|\.exs$/i
   },
   {
     name: 'elm',
     label: 'Elm',
     alias: [],
-    mode: 'elm'
+    mode: 'elm',
+    match: /\.elm$/i
   },
   {
     name: 'erlang',
     label: 'Erlang',
     alias: ['erl', 'hrl'],
-    mode: 'erlang'
+    mode: 'erlang',
+    match: /\.erl$|\.hrl$/i
   },
   {
     name: 'forth',
     label: 'Forth',
     alias: ['fs', 'fth'],
-    mode: 'forth'
+    mode: 'forth',
+    match: /\.fs$|\.fth$/i
   },
   {
     name: 'freemaker',
     label: 'Freemaker',
     alias: ['ftl'],
-    mode: 'ftl'
+    mode: 'ftl',
+    match: /\.ftl$/i
   },
   {
     name: 'gcode',
     label: 'G-code',
     alias: ['mpt', 'mpf', 'nc'],
-    mode: 'gcode'
+    mode: 'gcode',
+    match: /\.mpt$|\.mpf$|\.nc$/i
   },
   {
     name: 'gherkin',
     label: 'Gherkin',
     alias: ['cucumber'],
-    mode: 'gherkin'
+    mode: 'gherkin',
+    match: /\.feature$/i
   },
   {
     name: 'gitignore',
     label: 'Gitignore',
     alias: ['git'],
-    mode: 'gitignore'
+    mode: 'gitignore',
+    match: /\.gitignore$/i
   },
   {
     name: 'glsl',
     label: 'GLSL',
     alias: ['opengl', 'shading'],
-    mode: 'glsl'
+    mode: 'glsl',
+    match: /\.vert$|\.frag/i
   },
   {
     name: 'golang',
     label: 'Go',
     alias: ['go'],
-    mode: 'golang'
+    mode: 'golang',
+    match: /\.go$/i
   },
   {
     name: 'groovy',
     label: 'Groovy',
     alias: [],
-    mode: 'grooby'
+    mode: 'grooby',
+    match: /\.groovy$/i
   },
   {
     name: 'haml',
     label: 'Haml',
     alias: [],
-    mode: 'haml'
+    mode: 'haml',
+    match: /\.haml$/i
   },
   {
     name: 'handlebars',
     label: 'Handlebars',
     alias: ['hbs'],
-    mode: 'handlebars'
+    mode: 'handlebars',
+    match: /\.hbs$/i
   },
   {
     name: 'haskell',
     label: 'Haskell',
     alias: ['hs', 'lhs'],
-    mode: 'haskell'
+    mode: 'haskell',
+    match: /\.hs$|\.lhs$/i
   },
   {
     name: 'haxe',
     label: 'Haxe',
     alias: ['hx', 'hxml'],
-    mode: 'haxe'
+    mode: 'haxe',
+    match: /\.hx$|\.hxml$/i
   },
   {
     name: 'html',
     label: 'HTML',
     alias: [],
-    mode: 'html'
+    mode: 'html',
+    match: /\.html$/i
   },
   {
     name: 'html_ruby',
     label: 'HTML (Ruby)',
     alias: ['erb', 'rhtml'],
-    mode: 'html_ruby'
+    mode: 'html_ruby',
+    match: /\.erb$|\.rhtml$/i
   },
   {
     name: 'jsx',
     label: 'JSX',
     alias: ['es', 'babel', 'js', 'jsx', 'react'],
-    mode: 'jsx'
+    mode: 'jsx',
+    match: /\.jsx$/i
   },
   {
     name: 'typescript',
     label: 'TypeScript',
     alias: ['ts'],
-    mode: 'typescript'
+    mode: 'typescript',
+    match: /\.ts$/i
   },
   {
     name: 'ini',
     label: 'INI file',
     alias: [],
-    mode: 'ini'
+    mode: 'ini',
+    match: /\.ini$/i
   },
   {
     name: 'io',
     label: 'Io',
     alias: [],
-    mode: 'io'
+    mode: 'io',
+    match: /\.io$/i
   },
   {
     name: 'jack',
     label: 'Jack',
     alias: [],
-    mode: 'jack'
+    mode: 'jack',
+    match: /\.jack$/i
   },
   {
-    name: 'jade',
-    label: 'Jade',
-    alias: [],
-    mode: 'jade'
+    name: 'pug',
+    label: 'Pug(Jade)',
+    alias: ['jade'],
+    mode: 'jade',
+    match: /\.jade$|\.pug$/i
   },
   {
     name: 'java',
     label: 'Java',
     alias: [],
-    mode: 'java'
+    mode: 'java',
+    match: /\.java$/i
   },
   {
     name: 'javascript',
     label: 'JavaScript',
     alias: ['js', 'jscript', 'babel', 'es'],
-    mode: 'javascript'
+    mode: 'javascript',
+    match: /\.js$/i
   },
   {
     name: 'json',
     label: 'JSON',
     alias: [],
-    mode: 'json'
+    mode: 'json',
+    match: /\.json$/i
   },
   {
     name: 'jsoniq',
     label: 'JSONiq',
     alias: ['query'],
-    mode: 'jsoniq'
+    mode: 'jsoniq',
+    match: /\.jq$|\.jqy$/i
   },
   {
     name: 'jsp',
     label: 'JSP',
     alias: [],
-    mode: 'jsp'
+    mode: 'jsp',
+    match: /\.jsp$/i
   },
   {
     name: 'julia',
     label: 'Julia',
     alias: [],
-    mode: 'julia'
+    mode: 'julia',
+    match: /\.jl$/i
   },
   {
     name: 'latex',
     label: 'Latex',
     alias: ['tex'],
-    mode: 'latex'
+    mode: 'latex',
+    match: /\.tex$/i
   },
   {
     name: 'lean',
     label: 'Lean',
     alias: [],
-    mode: 'lean'
+    mode: 'lean',
+    match: /\.lean$/i
   },
   {
     name: 'less',
     label: 'Less',
     alias: [],
-    mode: 'less'
+    mode: 'less',
+    match: /\.less$/i
   },
   {
     name: 'liquid',
     label: 'Liquid',
     alias: [],
-    mode: 'liquid'
+    mode: 'liquid',
+    match: /\.liquid$/i
   },
   {
     name: 'lisp',
     label: 'Lisp',
     alias: ['lsp'],
-    mode: 'lisp'
+    mode: 'lisp',
+    match: /\.lisp$|\.lsp$|\.cl/i
   },
   {
     name: 'livescript',
     label: 'LiveScript',
     alias: ['ls'],
-    mode: 'livescript'
+    mode: 'livescript',
+    match: /\.ls$/i
   },
   {
     name: 'logiql',
@@ -392,19 +455,22 @@ const modes = [
     name: 'lsl',
     label: 'LSL',
     alias: [],
-    mode: 'lsl'
+    mode: 'lsl',
+    match: /\.lsl$/i
   },
   {
     name: 'lua',
     label: 'Lua',
     alias: [],
-    mode: 'lua'
+    mode: 'lua',
+    match: /\.lsl$/i
   },
   {
     name: 'luapage',
     label: 'Luapage',
     alias: [],
-    mode: 'luapage'
+    mode: 'luapage',
+    match: /\.lp$/i
   },
   {
     name: 'lucene',
@@ -416,13 +482,15 @@ const modes = [
     name: 'makefile',
     label: 'Makefile',
     alias: [],
-    mode: 'makefile'
+    mode: 'makefile',
+    match: /Makefile$/i
   },
   {
     name: 'markdown',
     label: 'Markdown',
     alias: ['md'],
-    mode: 'markdown'
+    mode: 'markdown',
+    match: /\.md$/i
   },
   {
     name: 'mask',
@@ -434,7 +502,8 @@ const modes = [
     name: 'matlab',
     label: 'MATLAB',
     alias: [],
-    mode: 'matlab'
+    mode: 'matlab',
+    match: /\.m$|\.mat$/i
   },
   {
     name: 'maze',
@@ -464,55 +533,64 @@ const modes = [
     name: 'mysql',
     label: 'MySQL',
     alias: [],
-    mode: 'mysql'
+    mode: 'mysql',
+    match: /\.mysql$/i
   },
   {
     name: 'nix',
     label: 'Nix',
     alias: [],
-    mode: 'nix'
+    mode: 'nix',
+    match: /\.nix$/i
   },
   {
     name: 'objectivec',
     label: 'Objective C',
     alias: ['objc'],
-    mode: 'objectivec'
+    mode: 'objectivec',
+    match: /\.h$|\.m$|\.mm$/i
   },
   {
     name: 'ocaml',
     label: 'OCaml',
     alias: [],
-    mode: 'ocaml'
+    mode: 'ocaml',
+    match: /\.ml$|\.mli$/i
   },
   {
     name: 'pascal',
     label: 'Pascal',
     alias: [],
-    mode: 'pascal'
+    mode: 'pascal',
+    match: /\.pp$|\.pas$|\.inc$/i
   },
   {
     name: 'perl',
     label: 'Perl',
     alias: [],
-    mode: 'perl'
+    mode: 'perl',
+    match: /\.pl$|\.pm$|\.t$|\.pod$/i
   },
   {
     name: 'pgsql',
     label: 'Postgres SQL',
     alias: ['postgres'],
-    mode: 'pgsql'
+    mode: 'pgsql',
+    match: /\.pgsql$/i
   },
   {
     name: 'php',
     label: 'PHP',
     alias: [],
-    mode: 'php'
+    mode: 'php',
+    match: /\.php$/i
   },
   {
     name: 'powershell',
     label: 'PowerShell',
     alias: ['ps1'],
-    mode: 'powershell'
+    mode: 'powershell',
+    match: /\.ps1$/i
   },
   {
     name: 'praat',
@@ -524,121 +602,141 @@ const modes = [
     name: 'prolog',
     label: 'Prolog',
     alias: ['pl', 'pro'],
-    mode: 'prolog'
+    mode: 'prolog',
+    match: /\.pl$/i
   },
   {
     name: 'properties',
     label: 'Properties',
     alias: [],
-    mode: 'properties'
+    mode: 'properties',
+    match: /\.properties$/i
   },
   {
     name: 'protobuf',
     label: 'Protocol Buffers',
     alias: ['protocol', 'buffers'],
-    mode: 'protobuf'
+    mode: 'protobuf',
+    match: /\.proto$/i
   },
   {
     name: 'python',
     label: 'Python',
     alias: ['py'],
-    mode: 'python'
+    mode: 'python',
+    match: /\.py$/i
   },
   {
     name: 'r',
     label: 'R',
     alias: ['rlang'],
-    mode: 'r'
+    mode: 'r',
+    match: /\.r$/i
   },
   {
     name: 'rdoc',
     label: 'RDoc',
     alias: [],
-    mode: 'rdoc'
+    mode: 'rdoc',
+    match: /\.rdoc$/i
   },
   {
     name: 'ruby',
     label: 'Ruby',
     alias: ['rb'],
-    mode: 'ruby'
+    mode: 'ruby',
+    match: /\.rb$/i
   },
   {
     name: 'rust',
     label: 'Rust',
     alias: [],
-    mode: 'rust'
+    mode: 'rust',
+    match: /\.rs$/i
   },
   {
     name: 'sass',
     label: 'Sass',
     alias: [],
-    mode: 'sass'
+    mode: 'sass',
+    match: /\.sass$/i
   },
   {
     name: 'scad',
     label: 'SCAD',
     alias: [],
-    mode: 'scad'
+    mode: 'scad',
+    match: /\.scad$/i
   },
   {
     name: 'scala',
     label: 'Scala',
     alias: [],
-    mode: 'scala'
+    mode: 'scala',
+    match: /\.scala$|\.sc$/i
   },
   {
     name: 'scheme',
     label: 'Scheme',
     alias: ['scm', 'ss'],
-    mode: 'scheme'
+    mode: 'scheme',
+    match: /\.scm$|\.ss$/i
   },
   {
     name: 'scss',
     label: 'Scss',
     alias: [],
-    mode: 'scss'
+    mode: 'scss',
+    match: /\.scss$/i
   },
   {
     name: 'sh',
     label: 'Shell',
     alias: ['shell'],
-    mode: 'sh'
+    mode: 'sh',
+    match: /\.sh$/i
   },
   {
     name: 'sjs',
     label: 'StratifiedJS',
     alias: ['stratified'],
-    mode: 'sjs'
+    mode: 'sjs',
+    match: /\.sjs$/i
   },
   {
     name: 'smarty',
     label: 'Smarty',
     alias: [],
-    mode: 'smarty'
+    mode: 'smarty',
+    match: /\.smarty$/i
   },
   {
     name: 'snippets',
     label: 'Snippets',
     alias: [],
-    mode: 'snippets'
+    mode: 'snippets',
+    match: /snippets$/i
   },
   {
     name: 'soy_template',
     label: 'Soy Template',
     alias: ['soy'],
-    mode: 'soy_template'
+    mode: 'soy_template',
+    match: /\.soy$/i
   },
   {
     name: 'space',
     label: 'Space',
     alias: [],
-    mode: 'space'
+    mode: 'space',
+    match: /\.space$/i
   },
   {
     name: 'sql',
     label: 'SQL',
     alias: [],
-    mode: 'sql'
+    mode: 'sql',
+    match: /\.sql$/i
   },
   {
     name: 'sqlserver',
@@ -650,103 +748,120 @@ const modes = [
     name: 'stylus',
     label: 'Stylus',
     alias: [],
-    mode: 'stylus'
+    mode: 'stylus',
+    match: /\.styl$/i
   },
   {
     name: 'svg',
     label: 'SVG',
     alias: [],
-    mode: 'svg'
+    mode: 'svg',
+    match: /\.svg$/i
   },
   {
     name: 'swift',
     label: 'Swift',
     alias: [],
-    mode: 'swift'
+    mode: 'swift',
+    match: /\.swift$/i
   },
   {
     name: 'swig',
     label: 'SWIG',
     alias: [],
-    mode: 'swig'
+    mode: 'swig',
+    match: /\.i$|\.swg$/i
   },
   {
     name: 'tcl',
     label: 'Tcl',
     alias: [],
-    mode: 'tcl'
+    mode: 'tcl',
+    match: /\.tcl$/i
   },
   {
     name: 'tex',
     label: 'TeX',
     alias: [],
-    mode: 'tex'
+    mode: 'tex',
+    match: /\.tex$/i
   },
   {
     name: 'textile',
     label: 'Textile',
     alias: [],
-    mode: 'textile'
+    mode: 'textile',
+    match: /\.textile$/i
   },
   {
     name: 'toml',
     label: 'TOML',
     alias: [],
-    mode: 'toml'
+    mode: 'toml',
+    match: /\.toml$/i
   },
   {
     name: 'twig',
     label: 'Twig',
     alias: [],
-    mode: 'twig'
+    mode: 'twig',
+    match: /\.twig$/i
   },
   {
     name: 'vala',
     label: 'Vala',
     alias: [],
-    mode: 'vala'
+    mode: 'vala',
+    match: /\.vala$|\.vapi$/i
   },
   {
     name: 'vbscript',
     label: 'VBScript',
     alias: ['vbs', 'vbe'],
-    mode: 'vbscript'
+    mode: 'vbscript',
+    match: /\.vbs$|\.vbe$/i
   },
   {
     name: 'velocity',
     label: 'Velocity',
     alias: [],
-    mode: 'velocity'
+    mode: 'velocity',
+    match: /\.vm$/i
   },
   {
     name: 'verilog',
     label: 'Verilog',
     alias: [],
-    mode: 'verilog'
+    mode: 'verilog',
+    match: /\.v$/i
   },
   {
     name: 'vhdl',
     label: 'VHDL',
     alias: [],
-    mode: 'vhdl'
+    mode: 'vhdl',
+    match: /\.vhdl$/i
   },
   {
     name: 'xml',
     label: 'XML',
     alias: [],
-    mode: 'xml'
+    mode: 'xml',
+    match: /\.xml$/i
   },
   {
     name: 'xquery',
     label: 'XQuery',
     alias: [],
-    mode: 'xquery'
+    mode: 'xquery',
+    match: /\.xq$|\.xqy$|\.xquery$/i
   },
   {
     name: 'yaml',
     label: 'YAML',
     alias: [],
-    mode: 'yaml'
+    mode: 'yaml',
+    match: /\.yaml$/i
   }
 ]
 
diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js
index 94471e2d..2bfc5714 100644
--- a/browser/main/Detail/SnippetNoteDetail.js
+++ b/browser/main/Detail/SnippetNoteDetail.js
@@ -11,6 +11,17 @@ import modes from 'browser/lib/modes'
 import { hashHistory } from 'react-router'
 import ee from 'browser/main/lib/eventEmitter'
 
+function detectModeByFilename (filename) {
+  for (let key in modes) {
+    const mode = modes[key]
+    if (mode.match != null && mode.match.test(filename)) {
+      console.log(mode)
+      return mode.mode
+    }
+  }
+  return null
+}
+
 const electron = require('electron')
 const { remote } = electron
 const Menu = remote.Menu
@@ -251,18 +262,18 @@ class SnippetNoteDetail extends React.Component {
     }
   }
 
-  handleNameInputChange (index) {
-    return (e) => {
-      let snippets = this.state.note.snippets.slice()
-      snippets[index].name = e.target.value
-      this.state.note.snippets = snippets
+  handleNameInputChange (e, index) {
+    let snippets = this.state.note.snippets.slice()
+    snippets[index].name = e.target.value
+    let mode = detectModeByFilename(e.target.value.trim())
+    if (mode != null) snippets[index].mode = mode
+    this.state.note.snippets = snippets
 
-      this.setState({
-        note: this.state.note
-      }, () => {
-        this.save()
-      })
-    }
+    this.setState({
+      note: this.state.note
+    }, () => {
+      this.save()
+    })
   }
 
   handleModeButtonClick (index) {
@@ -359,7 +370,7 @@ class SnippetNoteDetail extends React.Component {
           <input styleName='tabView-top-name'
             placeholder='Filename including extensions...'
             value={snippet.name}
-            onChange={(e) => this.handleNameInputChange(index)(e)}
+            onChange={(e) => this.handleNameInputChange(e, index)}
           />
           <button styleName='tabView-top-mode'
             onClick={(e) => this.handleModeButtonClick(index)(e)}