diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index e69de29..0000000
--- a/src/App.css
+++ /dev/null
diff --git a/src/App.tsx b/src/App.tsx
index bacbfa1..a260020 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -22,7 +22,7 @@
           }
       ],
       tables: []
-  }
+  };
   
   const {
     screenState,
@@ -38,19 +38,24 @@
   
   const {
     tableState,
-    tableActions
+    tableActions,
+    tableDispatch
   } = useTables(projectData);
   
   return (
     <div className="h-screen flex flex-col overflow-hidden">
-      <Header projectData={{
-        ...projectData, screens: screenState.screens, tables: tableState.tables
-      }} />
+      <Header 
+        projectData={{
+          ...projectData, screens: screenState.screens, tables: tableState.tables
+        }}
+        setScreens={screenDispatch.setScreens}
+        setTables={tableDispatch.setTables}
+       />
       <div className="flex-1 overflow-hidden">
         <Workspace 
           screenStateAndActions={{screenActions, screenState, screenDispatch}}
           componentStateAndActions={{componentActions, componentState, componentDispatch}}
-          tableStateAndActions={{tableState, tableActions}}
+          tableStateAndActions={{tableState, tableActions, tableDispatch}}
         />
       </div>
     </div>
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 9f2080c..e9e4cdb 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -1,29 +1,49 @@
+import { CiImport } from 'react-icons/ci';
 import { jsonExport } from '../lib/jsonExport';
 import type { Project } from '../types/project';
-import { useState } from 'react';
+import { useRef, useState, type Dispatch, type SetStateAction } from 'react';
 import { FaFileExport } from 'react-icons/fa';
+import type { Table } from '../types/table';
+import type { Screen } from '../types/screen';
 
-export default function Header({ projectData }: { projectData: Project }) {
+export default function Header(
+    { projectData, setScreens, setTables }
+    : { projectData: Project, setScreens: Dispatch<SetStateAction<Screen[]>>, setTables: Dispatch<SetStateAction<Table[]>> }
+) {
     
+    const jsonInputRef = useRef<HTMLInputElement>(null);
     const [exportTypeOpen, setExportTypeOpen] = useState<boolean>(false);
+    const [importTypeOpen, setImportTypeOpen] = useState<boolean>(false);
 
     const exportJson = async () => {
-        // console.log(pid)
-        // const project = await fetch(`/api/projects/${pid}`);
-        // const data = await project.json();
         jsonExport(projectData);
+        setExportTypeOpen(false);
     }
+    
+    const importJson = () => {
+        jsonInputRef.current?.click();
+    }
+    
+    const handleJsonFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+        const file = event.target.files?.[0];
+        if (!file) return;
+        try {
+            const text = await file.text();
+            const json = JSON.parse(text);
+            setScreens(json.screens)
+            setTables(json.tables)
+        } catch (error) {
+            console.log(error);
+            alert("JSONファイルの読み込みに失敗しました");
+        }
+        setImportTypeOpen(false);
+    }
+    
 
     return (
         <header className="sticky top-0 z-50 w-full border-b bg-white/80 backdrop-blur-md">
             <div className="px-4 h-12 flex items-center justify-between">
                 <div className='flex gap-4 items-center'>
-                    {/* <button
-                        onClick={handleBack}
-                        className="flex items-center gap-2 px-2 py-1 rounded-lg hover:bg-gray-100 transition-colors duration-200 text-gray-700 hover:text-gray-900"
-                    >
-                        <FiArrowLeft size={20} />
-                    </button> */}
                     <div className='items-center'>
                         {projectData.title}
                     </div>
@@ -31,7 +51,33 @@
                 <div className='flex gap-4'>
                     <div className='relative'>
                         <button
-                            onClick={() => { setExportTypeOpen(prev => !prev) }}
+                        onClick={() => {setImportTypeOpen(prev => !prev); setExportTypeOpen(false)}}
+                            className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-100
+                                transition-colors duration-200 text-gray-700 hover:text-gray-900
+                                border border-rounded border-gray-400
+                            "
+                    >
+                            <CiImport size={20} />
+                        </button>
+                        {importTypeOpen &&
+                            <div
+                                className='absolute right-0 mt-2 w-max rounded-lg border bg-white shadow-lg z-50'
+                            >
+                                <ul className="py-1 text-sm">
+                                    <li
+                                        className='px-4 py-2 hover:bg-gray-100 cursor-pointer'
+                                        onClick={importJson}
+                                    >
+                                        JSONファイル
+                                    </li>
+                                    <input ref={jsonInputRef} type="file"  accept="application/json,.json" onChange={handleJsonFileChange} hidden />
+                                </ul>
+                            </div>
+                        }
+                    </div>
+                    <div className='relative'>
+                        <button
+                            onClick={() => { setExportTypeOpen(prev => !prev); setImportTypeOpen(false) }}
                             className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-100
                                 transition-colors duration-200 text-gray-700 hover:text-gray-900
                                 border border-rounded border-gray-400
@@ -60,15 +106,6 @@
                             </div>
                         }
                     </div>
-                    {/* <button
-                        className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-100
-                            transition-colors duration-200 text-gray-700 hover:text-gray-900
-                            border border-rounded border-gray-400
-                        "
-                        onClick={simulation}
-                    >
-                        <VscRunAll size={20} />
-                    </button> */}
                 </div>
             </div>
             <div className='relative'>
diff --git a/src/hooks/useTables.ts b/src/hooks/useTables.ts
index 34cf4d4..20d623b 100644
--- a/src/hooks/useTables.ts
+++ b/src/hooks/useTables.ts
@@ -1,6 +1,6 @@
 import type { Project } from "../types/project";
 import type { Table } from "../types/table";
-import { useState } from "react";
+import { useState, type Dispatch, type SetStateAction } from "react";
 
 export interface TablesState {
     tables: Table[]
@@ -14,7 +14,8 @@
 
 export interface TableStateAndActions {
     tableState: TablesState,
-    tableActions: TablesActions
+    tableActions: TablesActions,
+    tableDispatch: {setTables: Dispatch<SetStateAction<Table[]>>}
 }
 
 export function useTables(project: Project): TableStateAndActions {
@@ -39,7 +40,8 @@
             addTable,
             updateTable,
             deleteTable
-        }
+        },
+        tableDispatch: { setTables }
     }
 
 }
\ No newline at end of file