diff --git a/subject-maininfo.json b/data/subject-maininfo.json
similarity index 100%
rename from subject-maininfo.json
rename to data/subject-maininfo.json
diff --git a/subjects.json b/data/subjects.json
similarity index 100%
rename from subjects.json
rename to data/subjects.json
diff --git a/src/App.tsx b/src/App.tsx
index f90e480..f0be803 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,8 +6,8 @@ import {
     // initializeSubject, subjectCodeList,
     initializeSubject,
 } from './subject';
-import SyllabusTable from './subject/SyllabusTable';
-import SyllabusTableRaw from './subject/SyllabusTableRaw';
+import SyllabusTable from './table-view/SyllabusTable';
+import SyllabusTableRaw from './table-view/SyllabusTableRaw';
 // import { numberOfSubjectsToShow } from './subject/SyllabusTable';
 
 
diff --git a/src/subject/SearchComponent.tsx b/src/subject/SearchComponent.tsx
new file mode 100644
index 0000000..5dc9092
--- /dev/null
+++ b/src/subject/SearchComponent.tsx
@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+
+type SearchComponentProps = {
+    onSearch: (term: string, checkbox: boolean) => void;
+};
+
+const SearchComponent: React.FC<SearchComponentProps> = ({ onSearch }) => {
+    const [searchTerm, setSearchTerm] = useState('');
+    const [checkboxValue, setCheckboxValue] = useState(false);
+
+    const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setSearchTerm(e.target.value);
+    };
+
+    const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setCheckboxValue(e.target.checked);
+    };
+
+    const handleSearch = () => {
+        onSearch(searchTerm, checkboxValue);
+    };
+
+    return (
+        <div>
+            <input
+                type="text"
+                value={searchTerm}
+                onChange={handleSearchChange}
+                placeholder="検索..."
+            />
+            <input
+                type="checkbox"
+                checked={checkboxValue}
+                onChange={handleCheckboxChange}
+            />
+            <button onClick={handleSearch}>検索</button>
+        </div>
+    );
+};
+
+export default SearchComponent;
diff --git a/src/subject/index.ts b/src/subject/index.ts
index 467721c..121ce7b 100644
--- a/src/subject/index.ts
+++ b/src/subject/index.ts
@@ -1,6 +1,6 @@
 // import { Periods } from './period';
 
-import subjectData from '../../subject-maininfo.json'
+import subjectData from '../../data/subject-maininfo.json'
 
 export interface kaisetsuki {
   rishuNenji: number
diff --git a/src/subject/SubjectUnitComponent.css b/src/table-view/SubjectUnitComponent.css
similarity index 100%
rename from src/subject/SubjectUnitComponent.css
rename to src/table-view/SubjectUnitComponent.css
diff --git a/src/subject/SubjectUnitComponent.tsx b/src/table-view/SubjectUnitComponent.tsx
similarity index 100%
rename from src/subject/SubjectUnitComponent.tsx
rename to src/table-view/SubjectUnitComponent.tsx
diff --git a/src/subject/SyllabusTable.css b/src/table-view/SyllabusTable.css
similarity index 100%
rename from src/subject/SyllabusTable.css
rename to src/table-view/SyllabusTable.css
diff --git a/src/subject/SyllabusTable.module.css b/src/table-view/SyllabusTable.module.css
similarity index 100%
rename from src/subject/SyllabusTable.module.css
rename to src/table-view/SyllabusTable.module.css
diff --git a/src/subject/SyllabusTable.tsx b/src/table-view/SyllabusTable.tsx
similarity index 95%
rename from src/subject/SyllabusTable.tsx
rename to src/table-view/SyllabusTable.tsx
index 32b7238..9d390ba 100644
--- a/src/subject/SyllabusTable.tsx
+++ b/src/table-view/SyllabusTable.tsx
@@ -4,10 +4,10 @@ import {
     subjectCodeList,
     subjectMap,
     // propertyToShowList,
-} from './';
+} from '../subject';
 
 import './SyllabusTable.css';
-import { SearchOptions } from './search';
+import { SearchOptions } from '../subject/search';
 
 const fillteredSubjectCodeList = (options: SearchOptions) => {
     return subjectCodeList.filter((subjectCode) =>
diff --git a/src/subject/SyllabusTableRaw.tsx b/src/table-view/SyllabusTableRaw.tsx
similarity index 98%
rename from src/subject/SyllabusTableRaw.tsx
rename to src/table-view/SyllabusTableRaw.tsx
index 2989c64..9c4c1dc 100644
--- a/src/subject/SyllabusTableRaw.tsx
+++ b/src/table-view/SyllabusTableRaw.tsx
@@ -5,10 +5,10 @@ import {
     subjectCodeList,
     subjectMap,
     propertyToShowList,
-} from '.';
+} from '../subject';
 
 import './SyllabusTable.css';
-import { SearchOptions } from './search';
+import { SearchOptions } from '../subject/search';
 
 // TODO 要実装
 // reactなら元データsearch option 変えるだけでできるんじゃね