diff --git a/public/images/github.svg b/app/javascript/images/github.svg
similarity index 100%
rename from public/images/github.svg
rename to app/javascript/images/github.svg
diff --git a/public/images/icon.svg b/app/javascript/images/icon.svg
similarity index 100%
rename from public/images/icon.svg
rename to app/javascript/images/icon.svg
diff --git a/app/javascript/images/image.d.ts b/app/javascript/images/image.d.ts
new file mode 100644
index 0000000..79fe2de
--- /dev/null
+++ b/app/javascript/images/image.d.ts
@@ -0,0 +1,12 @@
+declare module '*.jpg'
+declare module '*.jpeg'
+declare module '*.png'
+declare module '*.gif'
+declare module '*.tiff'
+declare module '*.ico'
+declare module '*.svg'
+declare module '*.eot'
+declare module '*.otf'
+declare module '*.ttf'
+declare module '*.woff'
+declare module '*.woff2'
diff --git a/public/images/mui.png b/app/javascript/images/mui.png
similarity index 100%
rename from public/images/mui.png
rename to app/javascript/images/mui.png
diff --git a/app/javascript/packs/components/Footer.tsx b/app/javascript/packs/components/Footer.tsx
index 6431b20..95cb446 100644
--- a/app/javascript/packs/components/Footer.tsx
+++ b/app/javascript/packs/components/Footer.tsx
@@ -1,3 +1,4 @@
+import GitHub from "images/github.svg";
 import * as React from "react";
 
 export const Footer: React.StatelessComponent<{}> = () => {
@@ -11,7 +12,7 @@ export const Footer: React.StatelessComponent<{}> = () => {
       </p>
       <div className="github">
         <a href="https://github.com/tynmarket/coffeehub" target="_blank">
-          <img src="/images/github.svg" />
+          <img src={GitHub} />
          </a>
       </div>
       <div className="copyright-flaticon">
diff --git a/app/javascript/packs/components/Header.tsx b/app/javascript/packs/components/Header.tsx
index 5e53cf6..8d73ce9 100644
--- a/app/javascript/packs/components/Header.tsx
+++ b/app/javascript/packs/components/Header.tsx
@@ -1,10 +1,11 @@
+import Icon from "images/icon.svg";
 import * as React from "react";
 
 export const Header: React.StatelessComponent<{}> = () => {
   return (
     <header className="header">
       <a className="header-logo" href="/">
-        <img src="/images/icon.svg" />
+        <img src={Icon} />
         <span className="header-title">
           Coffee Hub
         </span>
diff --git a/app/javascript/packs/components/Pickup.tsx b/app/javascript/packs/components/Pickup.tsx
index 21b669d..b437630 100644
--- a/app/javascript/packs/components/Pickup.tsx
+++ b/app/javascript/packs/components/Pickup.tsx
@@ -1,10 +1,11 @@
+import Mui from "images/mui.png";
 import * as React from "react";
 
 export const Pickup: React.StatelessComponent<{}> = () => {
   return (
     <section className="pickup">
       <a href="http://www.mui-motosumi.co.jp" target="_blank">
-        <img className="pickup-image" src="/images/mui.png" />
+        <img className="pickup-image" src={Mui} />
         <span className="pickup-note">
           ピックアップ
         </span>