diff --git a/src/application.tsx b/src/application.tsx
index f1c5867..6e27ec8 100644
--- a/src/application.tsx
+++ b/src/application.tsx
@@ -2,16 +2,6 @@ import React, { useEffect, useState } from 'react';
 import { MemoTalk, MemoTalkCore } from './core/memo-talk-core.ts';
 import { MemoTalkContainer } from './memo-talk.tsx';
 
-const memoTalkCore = new MemoTalkCore();
-
-memoTalkCore.onUpdate(() => {
-  localStorage.setItem('memoTalks', memoTalkCore.encode());
-});
-
-if (localStorage.getItem('memoTalks')) {
-  memoTalkCore.merge(localStorage.getItem('memoTalks') as string);
-}
-
 export interface Props {
   memoTalkCore: MemoTalkCore;
 }
@@ -27,8 +17,8 @@ export const App: React.FC<Props> = (props) => {
     <MemoTalkContainer
       memoTalks={memoTalks}
       onCreateMemoTalk={(content: string) => {
-        memoTalkCore.createMemoTalk(content);
-        setMemoTalks(memoTalkCore.getMemoTalkList());
+        props.memoTalkCore.createMemoTalk(content);
+        setMemoTalks(props.memoTalkCore.getMemoTalkList());
       }}
     />
   );
diff --git a/src/main.tsx b/src/main.tsx
index 429ac61..ff30e92 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -5,6 +5,14 @@ import { MemoTalkCore } from './core/memo-talk-core.ts';
 
 const memoTalkCore = new MemoTalkCore();
 
+if (localStorage.getItem('memoTalks')) {
+  memoTalkCore.merge(localStorage.getItem('memoTalks') as string);
+}
+
+memoTalkCore.onUpdate(() => {
+  localStorage.setItem('memoTalks', memoTalkCore.encode());
+});
+
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <App memoTalkCore={memoTalkCore}></App>