diff --git a/src/default-popup/components/obj/obj-list.component.tsx b/src/default-popup/components/obj/obj-list.component.tsx
index 6b89103..6db7d19 100644
--- a/src/default-popup/components/obj/obj-list.component.tsx
+++ b/src/default-popup/components/obj/obj-list.component.tsx
@@ -15,7 +15,7 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 import { ObjDto, ObjPageDataDto, ObjTypeDto } from '../../../common/model/obj/obj.dto';
-import React, { FunctionComponent, useEffect, useState } from 'react';
+import React, { FunctionComponent, useState } from 'react';
 import { BrowserApi } from '@pinmenote/browser-api';
 import { BusMessageType } from '../../../common/model/bus.model';
 import { LogManager } from '../../../common/popup/log.manager';
@@ -31,60 +31,14 @@ import { PdfRemoveCommand } from '../../../common/command/pdf/pdf-remove.command
 import { PinListElement } from './pin-list-element.component';
 import { PinRemoveCommand } from '../../../common/command/pin/pin-remove.command';
 import { SnapshotListElement } from './snapshot-list-element.component';
-import { ObjGetCommand } from '../../../common/command/obj/obj-get.command';
 
 interface Props {
   editNoteCallback: (obj: ObjDto<ObjPageNoteDto>) => void;
-  idList: number[];
-  href?: string;
+  objList: ObjDto<ObjPageDataDto>[];
 }
 
-interface FetchObjectsResult {
-  objs: ObjDto<ObjPageDataDto>[];
-  index: number;
-}
-
-const hrefFilter = (obj: ObjDto<ObjPageDataDto>, href?: string) => {
-  if ([ObjTypeDto.PageSnapshot, ObjTypeDto.PageElementSnapshot].includes(obj.type)) {
-    if ((obj.data as ObjPageDto).snapshot.info.url.href === href) return true;
-  } else if (obj.type === ObjTypeDto.PageElementPin) {
-    if ((obj.data as ObjPinDto).data.url.href === href) return true;
-  } else if (obj.type === ObjTypeDto.PageNote) {
-    if ((obj.data as ObjPageNoteDto).url.href === href) return true;
-  } else if (obj.type === ObjTypeDto.Pdf) {
-    if ((obj.data as ObjPdfDto).data.rawUrl === href) return true;
-  }
-  return false;
-};
-
-const fetchObjects = async (idList: number[], index: number, href?: string): Promise<FetchObjectsResult> => {
-  LogManager.log(`aaa ${href || 'undefined'} bbb ${idList.length} ccc ${index}`);
-  if (index >= idList.length) return { objs: [], index };
-  const objs: ObjDto<ObjPageDataDto>[] = [];
-  for (index; index < idList.length; index++) {
-    const obj = await new ObjGetCommand<ObjPageDataDto>(idList[index]).execute();
-    if (hrefFilter(obj, href)) continue;
-    objs.push(obj);
-  }
-  return { objs, index };
-};
-
 export const ObjListComponent: FunctionComponent<Props> = (props) => {
-  const [objList, setObjList] = useState<ObjDto<ObjPageDataDto>[]>([]);
-  const [index, setIndex] = useState<number>(0);
-
-  useEffect(() => {
-    refetch();
-  }, [props]);
-
-  const refetch = () => {
-    fetchObjects(props.idList, index, props.href)
-      .then((data) => {
-        setObjList(data.objs);
-        setIndex(data.index);
-      })
-      .catch(() => LogManager.log('error'));
-  };
+  const [reRender, setReRender] = useState(false);
 
   const handlePinRemove = async (data: ObjDto<ObjPinDto>) => {
     await new PinRemoveCommand(data.id, data.data.data.url, data.data.data.iframe).execute();
@@ -108,32 +62,31 @@ export const ObjListComponent: FunctionComponent<Props> = (props) => {
   };
 
   const handleRemove = (id: number) => {
-    for (let i = 0; i < props.idList.length; i++) {
-      if (props.idList[i] === id) {
-        props.idList.splice(i, 1);
-        refetch();
+    for (let i = 0; i < props.objList.length; i++) {
+      const obj = props.objList[i];
+      if (obj.id === id) {
+        props.objList.splice(i, 1);
+        setReRender(!reRender);
         break;
       }
     }
   };
 
   // Render pins
-  const components: React.ReactNode[] = [];
-  for (const obj of objList) {
+  const objs: React.ReactNode[] = [];
+  for (const obj of props.objList) {
     switch (obj.type) {
       case ObjTypeDto.PageElementPin:
-        components.push(
-          <PinListElement key={obj.id} obj={obj as ObjDto<ObjPinDto>} removeCallback={handlePinRemove} />
-        );
+        objs.push(<PinListElement key={obj.id} obj={obj as ObjDto<ObjPinDto>} removeCallback={handlePinRemove} />);
         break;
       case ObjTypeDto.PageElementSnapshot:
       case ObjTypeDto.PageSnapshot:
-        components.push(
+        objs.push(
           <SnapshotListElement key={obj.id} obj={obj as ObjDto<ObjPageDto>} removeCallback={handleSnapshotRemove} />
         );
         break;
       case ObjTypeDto.PageNote:
-        components.push(
+        objs.push(
           <NoteListElementComponent
             editCallback={props.editNoteCallback}
             obj={obj as ObjDto<ObjPageNoteDto>}
@@ -142,17 +95,16 @@ export const ObjListComponent: FunctionComponent<Props> = (props) => {
         );
         break;
       case ObjTypeDto.Pdf:
-        components.push(<PdfListElementComponent obj={obj as ObjDto<ObjPdfDto>} removeCallback={handlePdfRemove} />);
+        objs.push(<PdfListElementComponent obj={obj as ObjDto<ObjPdfDto>} removeCallback={handlePdfRemove} />);
         break;
       default: {
         LogManager.log(`UNSUPPORTED ${obj.type}`);
       }
     }
   }
-  // TODO add scroll handler
   return (
-    <div style={{ width: '100%', display: 'flex', flexDirection: 'column' }}>
-      <div>{components}</div>
+    <div style={{ width: '100%' }}>
+      <div style={{ width: '100%' }}>{objs}</div>
     </div>
   );
 };
diff --git a/src/default-popup/components/obj/obj-view.component.tsx b/src/default-popup/components/obj/obj-view.component.tsx
index 1d8f0aa..5beff7c 100644
--- a/src/default-popup/components/obj/obj-view.component.tsx
+++ b/src/default-popup/components/obj/obj-view.component.tsx
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU General Public License
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
-import { ObjDto } from '../../../common/model/obj/obj.dto';
+import { ObjDto, ObjPageDataDto, ObjTypeDto } from '../../../common/model/obj/obj.dto';
 import React, { FunctionComponent, useEffect, useState } from 'react';
 import { BusMessageType } from '../../../common/model/bus.model';
 import { ObjGetHrefCommand } from '../../../common/command/obj/url/obj-get-href.command';
@@ -23,15 +23,49 @@ import { ObjListComponent } from './obj-list.component';
 import { ObjPageNoteDto } from '../../../common/model/obj/obj-note.dto';
 import { PopupActiveTabStore } from '../../store/popup-active-tab.store';
 import { TinyDispatcher } from '@pinmenote/tiny-dispatcher';
+import { LogManager } from '../../../common/popup/log.manager';
+import { ObjPageDto } from '../../../common/model/obj/obj-page.dto';
+import { ObjPinDto } from '../../../common/model/obj/obj-pin.dto';
+import { ObjPdfDto } from '../../../common/model/obj/obj-pdf.dto';
+import { ObjGetCommand } from '../../../common/command/obj/obj-get.command';
 
 interface Props {
   editNoteCallback: (obj: ObjDto<ObjPageNoteDto>) => void;
 }
 
+interface FetchObjectsResult {
+  objs: ObjDto<ObjPageDataDto>[];
+  index: number;
+}
+
+const hrefFilter = (obj: ObjDto<ObjPageDataDto>, href?: string) => {
+  if ([ObjTypeDto.PageSnapshot, ObjTypeDto.PageElementSnapshot].includes(obj.type)) {
+    if ((obj.data as ObjPageDto).snapshot.info.url.href === href) return true;
+  } else if (obj.type === ObjTypeDto.PageElementPin) {
+    if ((obj.data as ObjPinDto).data.url.href === href) return true;
+  } else if (obj.type === ObjTypeDto.PageNote) {
+    if ((obj.data as ObjPageNoteDto).url.href === href) return true;
+  } else if (obj.type === ObjTypeDto.Pdf) {
+    if ((obj.data as ObjPdfDto).data.rawUrl === href) return true;
+  }
+  return false;
+};
+
+const fetchObjects = async (idList: number[], index: number, href?: string): Promise<FetchObjectsResult> => {
+  LogManager.log(`aaa ${href || 'undefined'} bbb ${idList.length} ccc ${index}`);
+  if (index >= idList.length) return { objs: [], index };
+  const objs: ObjDto<ObjPageDataDto>[] = [];
+  for (index; index < idList.length; index++) {
+    const obj = await new ObjGetCommand<ObjPageDataDto>(idList[index]).execute();
+    if (hrefFilter(obj, href)) continue;
+    objs.push(obj);
+  }
+  return { objs, index };
+};
+
 export const ObjViewComponent: FunctionComponent<Props> = (props) => {
-  const [originIds, setOriginIds] = useState<number[]>([]);
-  const [hrefIds, setHrefIds] = useState<number[]>([]);
-  const [initialized, setInitialized] = useState<boolean>(false);
+  const [originObjs, setOriginObjs] = useState<ObjDto<ObjPageDataDto>[]>([]);
+  const [hrefObjs, setHrefObjs] = useState<ObjDto<ObjPageDataDto>[]>([]);
 
   useEffect(() => {
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
@@ -42,27 +76,24 @@ export const ObjViewComponent: FunctionComponent<Props> = (props) => {
     return () => {
       TinyDispatcher.getInstance().removeListener(BusMessageType.POP_UPDATE_URL, urlKey);
     };
-  }, []);
+  }, [props]);
 
   const initUrl = async () => {
-    if (initialized) return;
+    LogManager.log('initUrl');
     if (!PopupActiveTabStore.url) return;
-    setInitialized(true);
-    const href = await new ObjGetHrefCommand(PopupActiveTabStore.url).execute();
-    const origin = await new ObjGetOriginCommand(PopupActiveTabStore.url).execute();
-    setHrefIds(href);
-    setOriginIds(origin);
+    const hrefIds = await new ObjGetHrefCommand(PopupActiveTabStore.url).execute();
+    const href = await fetchObjects(hrefIds, 0);
+    setHrefObjs(href.objs);
+    const originIds = await new ObjGetOriginCommand(PopupActiveTabStore.url).execute();
+    const origin = await fetchObjects(originIds, 0, PopupActiveTabStore.url.href);
+    setOriginObjs(origin.objs);
   };
   return (
     <div style={{ maxHeight: '420px', display: 'flex', flexDirection: 'column', overflow: 'auto' }}>
       <div style={{ fontWeight: 'bold', fontSize: '14px' }}>On this page</div>
-      <ObjListComponent idList={hrefIds} editNoteCallback={props.editNoteCallback} />
+      <ObjListComponent objList={hrefObjs} editNoteCallback={props.editNoteCallback} />
       <div style={{ fontWeight: 'bold', fontSize: '14px' }}>On {PopupActiveTabStore.url?.origin}</div>
-      <ObjListComponent
-        idList={originIds}
-        href={PopupActiveTabStore.url?.href}
-        editNoteCallback={props.editNoteCallback}
-      />
+      <ObjListComponent objList={originObjs} editNoteCallback={props.editNoteCallback} />
     </div>
   );
 };