diff --git a/.babelrc.js b/.babelrc.js
index 189fb2552a16237e7ff7929e89c4a36030a25a72..af2bc4633373383c0d465dddb8adb0385780647d 100644
--- a/.babelrc.js
+++ b/.babelrc.js
@@ -2,6 +2,17 @@ module.exports = {
   presets: [
     '@babel/preset-env',
     '@babel/preset-typescript',
-    '@babel/preset-react',
+    ['@babel/preset-react', { pragma: 'jsx' }],
+  ],
+  plugins: [
+    [
+      'auto-import',
+      {
+        declarations: [
+          { default: 'React', path: 'react' },
+          { members: ['jsx'], path: '@emotion/react' },
+        ],
+      },
+    ],
   ],
 }
diff --git a/package-lock.json b/package-lock.json
index 7a5243d235afa0a03ba2e9a8086ef1d8fa0ba56f..194b0e503b6fbf13089675beca0d9d318e35c877 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2790,6 +2790,16 @@
         "resolve": "^1.12.0"
       }
     },
+    "babel-plugin-auto-import": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/babel-plugin-auto-import/-/babel-plugin-auto-import-1.0.5.tgz",
+      "integrity": "sha512-U/TmCczhGEU9l65yKVdKMGP0bNlWUpulFaaRMcNaVwCRSgjfnASdwZUVrHdKbVW1EV02iR0JtO6J96aTHB9NXw==",
+      "dev": true,
+      "requires": {
+        "@babel/core": "^7.2.2",
+        "logical-not": "^1.0.0"
+      }
+    },
     "babel-plugin-dynamic-import-node": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.0.tgz",
@@ -6580,6 +6590,12 @@
         }
       }
     },
+    "logical-not": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/logical-not/-/logical-not-1.0.0.tgz",
+      "integrity": "sha512-l3X5Sf25wwZkprKfrfJ2YjCcxkNnitMvuqoVPAFNz1xpAMG7B4CkdELK19hafcR8K9fcUs0K0LkzZ62U+xdHpA==",
+      "dev": true
+    },
     "lolex": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/lolex/-/lolex-4.2.0.tgz",
diff --git a/package.json b/package.json
index c52892a847694056bb08a1551d7855d299deea8c..7bfbe330f13c597a657d3ec4598389ba8bcc4819 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "@types/react": "^16.9.17",
     "@types/react-dom": "^16.9.4",
     "babel-eslint": "^10.0.3",
+    "babel-plugin-auto-import": "^1.0.5",
     "eslint": "^6.6.0",
     "eslint-config-airbnb-base": "^14.0.0",
     "eslint-config-prettier": "^6.5.0",
diff --git a/theme-source/partials/base-body.tsx b/theme-source/partials/base-body.tsx
index 008c813310e5fd840756a3bb17f7558a0d36d132..bde12f959289d7fafadac8d5428d182b2a1e8e5e 100644
--- a/theme-source/partials/base-body.tsx
+++ b/theme-source/partials/base-body.tsx
@@ -1,7 +1,14 @@
 import React, { PropsWithChildren } from 'react'
 import { SymbolSearch, SymbolMenu, SymbolFacebook } from './svgs'
 import { Search } from './search'
-import { Html } from './html'
+import { css } from '@emotion/react'
+
+const hideOnSmallAndUp = css`
+  display: none;
+  @media (max-width: 300px) {
+    display: block;
+  }
+`
 
 export function BaseBody({
   config,
@@ -25,7 +32,7 @@ export function BaseBody({
           </a>
           <div style={{ zIndex: 2 }} className="brand-logo">
             <a id="logo-container" href="/tag/vse/1/">
-              <img className="hide-on-small-and-up" src="/theme/icon56.png" />
+              <img css={hideOnSmallAndUp} src="/theme/icon56.png" />
               <img
                 className="hide-on-med-and-up hide-on-ultra-small"
                 src="/theme/logo56.png"
diff --git a/theme-source/render-to-string.tsx b/theme-source/render-to-string.tsx
index d0af140cd3b964b909f7c39361707caddbfe9628..fd3070200d8788f50dc0deed72ac61b044b0216a 100644
--- a/theme-source/render-to-string.tsx
+++ b/theme-source/render-to-string.tsx
@@ -1,3 +1,4 @@
+/** @jsx React.createElement */
 import React from 'react'
 import ReactDOM from 'react-dom/server'
 import { CacheProvider } from '@emotion/react'