diff --git a/src/components/database/item-type/book/BookDetail.tsx b/src/components/database/item-type/book/BookDetail.tsx
index 0a727ef..adbcf36 100644
--- a/src/components/database/item-type/book/BookDetail.tsx
+++ b/src/components/database/item-type/book/BookDetail.tsx
@@ -1,46 +1,34 @@
-import React, { ReactNode } from 'react';
-import ItemTypeField from '../lib/field';
+import React from 'react';
 import { ItemBook } from '../../lib/ItemUtil';
+import DetailBase, { DetailBaseProps } from '../lib/DetailBase';
+import ItemTypeField from '../lib/field';
 
-const BookDetail = (props: { item: ItemBook }) => {
-    const { item } = props;
-    const fields: { label: ReactNode, value: ReactNode }[] = [
-        { label: 'ID', value: item.doi },
-        { label: 'Language', value: <ItemTypeField.Language lang={item.lang} /> },
-        { label: 'Title', value: item.title },
-        { label: 'Free Keywords', value: <ItemTypeField.FreeKeyword keyword={item.keyword} /> },
-        { label: 'Description', value: <ItemTypeField.Description description={item.description} /> },
-        { label: 'Last Modified Date', value: <ItemTypeField.DateTime date={item.last_update_date} /> },
-        { label: 'Created Date', value: <ItemTypeField.DateTime date={item.creation_date} /> },
-        { label: 'Contributor', value: <ItemTypeField.Contributer uname={item.uname} name={item.name} /> },
-        { label: 'Item Type', value: item.item_type_display_name },
-        { label: 'Change Log(History)', value: <ItemTypeField.ChangeLog changelog={item.changelog} /> },
-        { label: 'Author', value: <ItemTypeField.Author author={item.author} /> },
-        { label: 'Editor', value: item.editor },
-        { label: 'Publisher', value: item.publisher },
-        { label: 'Publication Year', value: item.publication_year },
-        { label: 'URL', value: <a href={item.url} target="_blank" rel="noopener noreferrer">{item.url}</a> },
-        { label: 'PDF File', value: <ItemTypeField.ItemFile file={item.file} type="book_pdf" /> },
-        { label: 'Index', value: <ItemTypeField.ItemIndex index={item.index} /> },
-        { label: 'Related to', value: <ItemTypeField.RelatedTo relatedTo={item.related_to} /> },
-    ];
-    let evenodd = 'even';
-    const elements = fields.map((value, i) => {
-        evenodd = evenodd === 'even' ? 'odd' : 'even'
-        return (
-            <tr key={i}>
-                <td className="head">{value.label}</td>
-                <td className={evenodd}>{value.value}</td>
-            </tr>
-        )
-    });
-    return (
-        <table className="outer itemDetail">
-            <tbody>
-                {elements}
-            </tbody>
-        </table>
-    );
-};
+class BookDetail extends DetailBase {
+
+    constructor(props: DetailBaseProps) {
+        super(props);
+        const item = this.item as ItemBook;
+        this.fields = [
+            { label: 'ID', value: item.doi },
+            { label: 'Language', value: <ItemTypeField.Language lang={item.lang} /> },
+            { label: 'Title', value: item.title },
+            { label: 'Free Keywords', value: <ItemTypeField.FreeKeyword keyword={item.keyword} /> },
+            { label: 'Description', value: <ItemTypeField.Description description={item.description} /> },
+            { label: 'Last Modified Date', value: <ItemTypeField.DateTime date={item.last_update_date} /> },
+            { label: 'Created Date', value: <ItemTypeField.DateTime date={item.creation_date} /> },
+            { label: 'Contributor', value: <ItemTypeField.Contributer uname={item.uname} name={item.name} /> },
+            { label: 'Item Type', value: item.item_type_display_name },
+            { label: 'Change Log(History)', value: <ItemTypeField.ChangeLog changelog={item.changelog} /> },
+            { label: 'Author', value: <ItemTypeField.Author author={item.author} /> },
+            { label: 'Editor', value: item.editor },
+            { label: 'Publisher', value: item.publisher },
+            { label: 'Publication Year', value: item.publication_year },
+            { label: 'URL', value: <a href={item.url} target="_blank" rel="noopener noreferrer">{item.url}</a> },
+            { label: 'PDF File', value: <ItemTypeField.ItemFile file={item.file} type="book_pdf" /> },
+            { label: 'Index', value: <ItemTypeField.ItemIndex index={item.index} /> },
+            { label: 'Related to', value: <ItemTypeField.RelatedTo relatedTo={item.related_to} /> },
+        ];
+    }
+}
 
 export default BookDetail;
diff --git a/src/components/database/item-type/conference/ConferenceDetail.tsx b/src/components/database/item-type/conference/ConferenceDetail.tsx
index cda87c0..915369c 100644
--- a/src/components/database/item-type/conference/ConferenceDetail.tsx
+++ b/src/components/database/item-type/conference/ConferenceDetail.tsx
@@ -1,47 +1,35 @@
-import React, { ReactNode } from 'react';
-import ItemTypeField from '../lib/field';
+import React from 'react';
 import { ItemConference } from '../../lib/ItemUtil';
+import DetailBase, { DetailBaseProps } from '../lib/DetailBase';
+import ItemTypeField from '../lib/field';
 import ConferenceUtil from './ConferenceUtil';
 
-const ConferenceDetail = (props: { item: ItemConference }) => {
-    const { item } = props;
-    const fields: { label: ReactNode, value: ReactNode }[] = [
-        { label: 'ID', value: item.doi },
-        { label: 'Language', value: <ItemTypeField.Language lang={item.lang} /> },
-        { label: 'Conference Title', value: item.conference_title },
-        { label: 'Place', value: item.place },
-        { label: 'Date', value: <ConferenceUtil.ConferenceDate item={item} /> },
-        { label: 'Last Modified Date', value: <ItemTypeField.DateTime date={item.last_update_date} /> },
-        { label: 'Created Date', value: <ItemTypeField.DateTime date={item.creation_date} /> },
-        { label: 'Contributor', value: <ItemTypeField.Contributer uname={item.uname} name={item.name} /> },
-        { label: 'Item Type', value: item.item_type_display_name },
-        { label: 'Change Log(History)', value: <ItemTypeField.ChangeLog changelog={item.changelog} /> },
-        { label: 'Presentation Title', value: item.title },
-        { label: 'Author', value: <ItemTypeField.Author author={item.author} /> },
-        { label: 'Abstract', value: <ItemTypeField.Description description={item.abstract} /> },
-        { label: 'Presentation File', value: <ItemTypeField.ItemFile file={item.file} type="conference_file" /> },
-        { label: 'Presentation Type', value: <ConferenceUtil.PresentationType type={item.presentation_type} /> },
-        { label: 'Conference Paper', value: <ItemTypeField.ItemFile file={item.file} type="conference_paper" /> },
-        { label: 'Index', value: <ItemTypeField.ItemIndex index={item.index} /> },
-        { label: 'Related to', value: <ItemTypeField.RelatedTo relatedTo={item.related_to} /> },
-    ];
-    let evenodd = 'even';
-    const elements = fields.map((value, i) => {
-        evenodd = evenodd === 'even' ? 'odd' : 'even'
-        return (
-            <tr key={i}>
-                <td className="head">{value.label}</td>
-                <td className={evenodd}>{value.value}</td>
-            </tr>
-        )
-    });
-    return (
-        <table className="outer itemDetail">
-            <tbody>
-                {elements}
-            </tbody>
-        </table>
-    );
-};
+class ConferenceDetail extends DetailBase {
+
+    constructor(props: DetailBaseProps) {
+        super(props);
+        const item = this.item as ItemConference;
+        this.fields = [
+            { label: 'ID', value: item.doi },
+            { label: 'Language', value: <ItemTypeField.Language lang={item.lang} /> },
+            { label: 'Conference Title', value: item.conference_title },
+            { label: 'Place', value: item.place },
+            { label: 'Date', value: <ConferenceUtil.ConferenceDate item={item} /> },
+            { label: 'Last Modified Date', value: <ItemTypeField.DateTime date={item.last_update_date} /> },
+            { label: 'Created Date', value: <ItemTypeField.DateTime date={item.creation_date} /> },
+            { label: 'Contributor', value: <ItemTypeField.Contributer uname={item.uname} name={item.name} /> },
+            { label: 'Item Type', value: item.item_type_display_name },
+            { label: 'Change Log(History)', value: <ItemTypeField.ChangeLog changelog={item.changelog} /> },
+            { label: 'Presentation Title', value: item.title },
+            { label: 'Author', value: <ItemTypeField.Author author={item.author} /> },
+            { label: 'Abstract', value: <ItemTypeField.Description description={item.abstract} /> },
+            { label: 'Presentation File', value: <ItemTypeField.ItemFile file={item.file} type="conference_file" /> },
+            { label: 'Presentation Type', value: <ConferenceUtil.PresentationType type={item.presentation_type} /> },
+            { label: 'Conference Paper', value: <ItemTypeField.ItemFile file={item.file} type="conference_paper" /> },
+            { label: 'Index', value: <ItemTypeField.ItemIndex index={item.index} /> },
+            { label: 'Related to', value: <ItemTypeField.RelatedTo relatedTo={item.related_to} /> },
+        ];
+    }
+}
 
 export default ConferenceDetail;
\ No newline at end of file
diff --git a/src/components/database/item-type/data/DataDetail.tsx b/src/components/database/item-type/data/DataDetail.tsx
index efbb397..938e0c5 100644
--- a/src/components/database/item-type/data/DataDetail.tsx
+++ b/src/components/database/item-type/data/DataDetail.tsx
@@ -1,48 +1,36 @@
-import React, { ReactNode } from 'react';
-import ItemTypeField from '../lib/field';
+import React from 'react';
 import { ItemData } from '../../lib/ItemUtil';
+import DetailBase, { DetailBaseProps } from '../lib/DetailBase';
+import ItemTypeField from '../lib/field';
 import DataUtil from './DataUtil';
 
-const DataDetail = (props: { item: ItemData }) => {
-    const { item } = props;
-    const fields: { label: ReactNode, value: ReactNode }[] = [
-        { label: 'ID', value: item.doi },
-        { label: 'Language', value: <ItemTypeField.Language lang={item.lang} /> },
-        { label: 'Title', value: item.title },
-        { label: 'Free Keywords', value: <ItemTypeField.FreeKeyword keyword={item.keyword} /> },
-        { label: 'Description', value: <ItemTypeField.Description description={item.description} /> },
-        { label: 'Date', value: <ItemTypeField.PublicationDate year={item.publication_year} month={item.publication_month} mday={item.publication_mday} /> },
-        { label: 'Last Modified Date', value: <ItemTypeField.DateTime date={item.last_update_date} /> },
-        { label: 'Created Date', value: <ItemTypeField.DateTime date={item.creation_date} /> },
-        { label: 'Contributor', value: <ItemTypeField.Contributer uname={item.uname} name={item.name} /> },
-        { label: 'Item Type', value: item.item_type_display_name },
-        { label: 'Change Log(History)', value: <ItemTypeField.ChangeLog changelog={item.changelog} /> },
-        { label: 'Data Type', value: <DataUtil.DataType type={item.data_type} /> },
-        { label: 'Experimenter', value: <ItemTypeField.Author author={item.experimenter} /> },
-        { label: 'Preview', value: <ItemTypeField.Preview file={item.file} /> },
-        { label: 'Data File', value: <ItemTypeField.ItemFile file={item.file} type="data_file" rights={item.rights} useCc={item.use_cc} ccCommercialUse={item.cc_commercial_use} ccModification={item.cc_modification} /> },
-        { label: 'Readme', value: <ItemTypeField.Readme readme={item.readme} /> },
-        { label: 'Rights', value: <ItemTypeField.Rights rights={item.rights} useCc={item.use_cc} ccCommercialUse={item.cc_commercial_use} ccModification={item.cc_modification} /> },
-        { label: 'Index', value: <ItemTypeField.ItemIndex index={item.index} /> },
-        { label: 'Related to', value: <ItemTypeField.RelatedTo relatedTo={item.related_to} /> },
-    ];
-    let evenodd = 'even';
-    const elements = fields.map((value, i) => {
-        evenodd = evenodd === 'even' ? 'odd' : 'even'
-        return (
-            <tr key={i}>
-                <td className="head">{value.label}</td>
-                <td className={evenodd}>{value.value}</td>
-            </tr>
-        )
-    });
-    return (
-        <table className="outer itemDetail">
-            <tbody>
-                {elements}
-            </tbody>
-        </table>
-    );
-};
+class DataDetail extends DetailBase {
+
+    constructor(props: DetailBaseProps) {
+        super(props);
+        const item = this.item as ItemData;
+        this.fields = [
+            { label: 'ID', value: item.doi },
+            { label: 'Language', value: <ItemTypeField.Language lang={item.lang} /> },
+            { label: 'Title', value: item.title },
+            { label: 'Free Keywords', value: <ItemTypeField.FreeKeyword keyword={item.keyword} /> },
+            { label: 'Description', value: <ItemTypeField.Description description={item.description} /> },
+            { label: 'Date', value: <ItemTypeField.PublicationDate year={item.publication_year} month={item.publication_month} mday={item.publication_mday} /> },
+            { label: 'Last Modified Date', value: <ItemTypeField.DateTime date={item.last_update_date} /> },
+            { label: 'Created Date', value: <ItemTypeField.DateTime date={item.creation_date} /> },
+            { label: 'Contributor', value: <ItemTypeField.Contributer uname={item.uname} name={item.name} /> },
+            { label: 'Item Type', value: item.item_type_display_name },
+            { label: 'Change Log(History)', value: <ItemTypeField.ChangeLog changelog={item.changelog} /> },
+            { label: 'Data Type', value: <DataUtil.DataType type={item.data_type} /> },
+            { label: 'Experimenter', value: <ItemTypeField.Author author={item.experimenter} /> },
+            { label: 'Preview', value: <ItemTypeField.Preview file={item.file} /> },
+            { label: 'Data File', value: <ItemTypeField.ItemFile file={item.file} type="data_file" rights={item.rights} useCc={item.use_cc} ccCommercialUse={item.cc_commercial_use} ccModification={item.cc_modification} /> },
+            { label: 'Readme', value: <ItemTypeField.Readme readme={item.readme} /> },
+            { label: 'Rights', value: <ItemTypeField.Rights rights={item.rights} useCc={item.use_cc} ccCommercialUse={item.cc_commercial_use} ccModification={item.cc_modification} /> },
+            { label: 'Index', value: <ItemTypeField.ItemIndex index={item.index} /> },
+            { label: 'Related to', value: <ItemTypeField.RelatedTo relatedTo={item.related_to} /> },    
+        ];
+    }
+}
 
 export default DataDetail;
\ No newline at end of file
diff --git a/src/components/database/item-type/lib/DetailBase.tsx b/src/components/database/item-type/lib/DetailBase.tsx
new file mode 100644
index 0000000..389690c
--- /dev/null
+++ b/src/components/database/item-type/lib/DetailBase.tsx
@@ -0,0 +1,40 @@
+import React, { ReactNode, Component } from 'react';
+import ItemUtil, { Item } from '../../lib/ItemUtil';
+
+export interface DetailBaseProps { item: Item }
+export interface DetailBaseField { label: ReactNode, value: ReactNode }
+
+class DetailBase extends Component<DetailBaseProps> {
+
+    protected item: Item;
+    protected fields: DetailBaseField[] = [];
+    protected url: string;
+
+    constructor(props: DetailBaseProps) {
+        super(props);
+        this.item = props.item;
+        this.url = ItemUtil.getUrl(this.item);
+    }
+
+    render() {
+        let evenodd = 'even';
+        const elements = this.fields.map((value, i) => {
+            evenodd = evenodd === 'even' ? 'odd' : 'even'
+            return (
+                <tr key={i}>
+                    <td className="head">{value.label}</td>
+                    <td className={evenodd}>{value.value}</td>
+                </tr>
+            )
+        });
+        return (
+            <table className="outer itemDetail">
+                <tbody>
+                    {elements}
+                </tbody>
+            </table>
+        );
+    }
+}
+
+export default DetailBase;
diff --git a/src/components/database/item-type/lib/ListBase.tsx b/src/components/database/item-type/lib/ListBase.tsx
index cfdd67c..398f3b2 100644
--- a/src/components/database/item-type/lib/ListBase.tsx
+++ b/src/components/database/item-type/lib/ListBase.tsx
@@ -8,7 +8,7 @@ class ListBase extends Component<ListBaseProps> {
     protected item: Item;
     protected label = '';
     protected icon = '';
-    protected url = '';
+    protected url: string;
 
     constructor(props: ListBaseProps) {
         super(props);
diff --git a/src/components/database/item-type/model/ModelDetail.tsx b/src/components/database/item-type/model/ModelDetail.tsx
index 95d5495..18e1f81 100644
--- a/src/components/database/item-type/model/ModelDetail.tsx
+++ b/src/components/database/item-type/model/ModelDetail.tsx
@@ -1,47 +1,35 @@
-import React, { ReactNode } from 'react';
-import ItemTypeField from '../lib/field';
+import React from 'react';
 import { ItemModel } from '../../lib/ItemUtil';
+import DetailBase, { DetailBaseProps } from '../lib/DetailBase';
+import ItemTypeField from '../lib/field';
 import ModelUtil from './ModelUtil';
 
-const ModelDetail = (props: { item: ItemModel }) => {
-    const { item } = props;
-    const fields: { label: ReactNode, value: ReactNode }[] = [
-        { label: 'ID', value: item.doi },
-        { label: 'Language', value: <ItemTypeField.Language lang={item.lang} /> },
-        { label: 'Title', value: item.title },
-        { label: 'Free Keywords', value: <ItemTypeField.FreeKeyword keyword={item.keyword} /> },
-        { label: 'Description', value: <ItemTypeField.Description description={item.description} /> },
-        { label: 'Last Modified Date', value: <ItemTypeField.DateTime date={item.last_update_date} /> },
-        { label: 'Created Date', value: <ItemTypeField.DateTime date={item.creation_date} /> },
-        { label: 'Contributor', value: <ItemTypeField.Contributer uname={item.uname} name={item.name} /> },
-        { label: 'Item Type', value: item.item_type_display_name },
-        { label: 'Change Log(History)', value: <ItemTypeField.ChangeLog changelog={item.changelog} /> },
-        { label: 'Model Type', value: <ModelUtil.ModelType type={item.model_type} /> },
-        { label: 'Creator', value: <ItemTypeField.Author author={item.creator} /> },
-        { label: 'Preview', value: <ItemTypeField.Preview file={item.file} /> },
-        { label: 'Model File', value: <ItemTypeField.ItemFile file={item.file} type="model_data" rights={item.rights} useCc={item.use_cc} ccCommercialUse={item.cc_commercial_use} ccModification={item.cc_modification} /> },
-        { label: 'Readme', value: <ItemTypeField.Readme readme={item.readme} /> },
-        { label: 'Rights', value: <ItemTypeField.Rights rights={item.rights} useCc={item.use_cc} ccCommercialUse={item.cc_commercial_use} ccModification={item.cc_modification} /> },
-        { label: 'Index', value: <ItemTypeField.ItemIndex index={item.index} /> },
-        { label: 'Related to', value: <ItemTypeField.RelatedTo relatedTo={item.related_to} /> },
-    ];
-    let evenodd = 'even';
-    const elements = fields.map((value, i) => {
-        evenodd = evenodd === 'even' ? 'odd' : 'even'
-        return (
-            <tr key={i}>
-                <td className="head">{value.label}</td>
-                <td className={evenodd}>{value.value}</td>
-            </tr>
-        )
-    });
-    return (
-        <table className="outer itemDetail">
-            <tbody>
-                {elements}
-            </tbody>
-        </table>
-    );
-};
+class ModelDetail extends DetailBase {
+
+    constructor(props: DetailBaseProps) {
+        super(props);
+        const item = this.item as ItemModel;
+        this.fields = [
+            { label: 'ID', value: item.doi },
+            { label: 'Language', value: <ItemTypeField.Language lang={item.lang} /> },
+            { label: 'Title', value: item.title },
+            { label: 'Free Keywords', value: <ItemTypeField.FreeKeyword keyword={item.keyword} /> },
+            { label: 'Description', value: <ItemTypeField.Description description={item.description} /> },
+            { label: 'Last Modified Date', value: <ItemTypeField.DateTime date={item.last_update_date} /> },
+            { label: 'Created Date', value: <ItemTypeField.DateTime date={item.creation_date} /> },
+            { label: 'Contributor', value: <ItemTypeField.Contributer uname={item.uname} name={item.name} /> },
+            { label: 'Item Type', value: item.item_type_display_name },
+            { label: 'Change Log(History)', value: <ItemTypeField.ChangeLog changelog={item.changelog} /> },
+            { label: 'Model Type', value: <ModelUtil.ModelType type={item.model_type} /> },
+            { label: 'Creator', value: <ItemTypeField.Author author={item.creator} /> },
+            { label: 'Preview', value: <ItemTypeField.Preview file={item.file} /> },
+            { label: 'Model File', value: <ItemTypeField.ItemFile file={item.file} type="model_data" rights={item.rights} useCc={item.use_cc} ccCommercialUse={item.cc_commercial_use} ccModification={item.cc_modification} /> },
+            { label: 'Readme', value: <ItemTypeField.Readme readme={item.readme} /> },
+            { label: 'Rights', value: <ItemTypeField.Rights rights={item.rights} useCc={item.use_cc} ccCommercialUse={item.cc_commercial_use} ccModification={item.cc_modification} /> },
+            { label: 'Index', value: <ItemTypeField.ItemIndex index={item.index} /> },
+            { label: 'Related to', value: <ItemTypeField.RelatedTo relatedTo={item.related_to} /> },     
+        ];
+    }
+}
 
 export default ModelDetail;
\ No newline at end of file
diff --git a/src/components/database/item-type/paper/PaperDetail.tsx b/src/components/database/item-type/paper/PaperDetail.tsx
index 8a3e77a..c6f0822 100644
--- a/src/components/database/item-type/paper/PaperDetail.tsx
+++ b/src/components/database/item-type/paper/PaperDetail.tsx
@@ -1,48 +1,36 @@
-import React, { ReactNode } from 'react';
-import ItemTypeField from '../lib/field';
+import React from 'react';
 import { ItemPaper } from '../../lib/ItemUtil';
+import DetailBase, { DetailBaseProps } from '../lib/DetailBase';
+import ItemTypeField from '../lib/field';
 import PaperUtil from './PaperUtil';
 
-const PaperDetail = (props: { item: ItemPaper }) => {
-    const { item } = props;
-    const fields: { label: ReactNode, value: ReactNode }[] = [
-        { label: 'ID', value: item.doi },
-        { label: 'Language', value: <ItemTypeField.Language lang={item.lang} /> },
-        { label: 'PubmedID', value: <PaperUtil.PubmedLink pubmedId={item.pubmed_id} /> },
-        { label: 'Title', value: item.title },
-        { label: 'Free Keywords', value: <ItemTypeField.FreeKeyword keyword={item.keyword} /> },
-        { label: 'Description', value: <ItemTypeField.Description description={item.description} /> },
-        { label: 'Last Modified Date', value: <ItemTypeField.DateTime date={item.last_update_date} /> },
-        { label: 'Created Date', value: <ItemTypeField.DateTime date={item.creation_date} /> },
-        { label: 'Contributor', value: <ItemTypeField.Contributer uname={item.uname} name={item.name} /> },
-        { label: 'Item Type', value: item.item_type_display_name },
-        { label: 'Change Log(History)', value: <ItemTypeField.ChangeLog changelog={item.changelog} /> },
-        { label: 'Author', value: <ItemTypeField.Author author={item.author} /> },
-        { label: 'Journal', value: item.journal },
-        { label: 'Publication Year', value: item.publication_year },
-        { label: 'Volume', value: item.volume },
-        { label: 'Number', value: item.number },
-        { label: 'Page', value: item.page },
-        { label: 'Index', value: <ItemTypeField.ItemIndex index={item.index} /> },
-        { label: 'Related to', value: <ItemTypeField.RelatedTo relatedTo={item.related_to} /> },
-    ];
-    let evenodd = 'even';
-    const elements = fields.map((value, i) => {
-        evenodd = evenodd === 'even' ? 'odd' : 'even'
-        return (
-            <tr key={i}>
-                <td className="head">{value.label}</td>
-                <td className={evenodd}>{value.value}</td>
-            </tr>
-        )
-    });
-    return (
-        <table className="outer itemDetail">
-            <tbody>
-                {elements}
-            </tbody>
-        </table>
-    );
-};
+class PaperDetail extends DetailBase {
+
+    constructor(props: DetailBaseProps) {
+        super(props);
+        const item = this.item as ItemPaper;
+        this.fields = [
+            { label: 'ID', value: item.doi },
+            { label: 'Language', value: <ItemTypeField.Language lang={item.lang} /> },
+            { label: 'PubmedID', value: <PaperUtil.PubmedLink pubmedId={item.pubmed_id} /> },
+            { label: 'Title', value: item.title },
+            { label: 'Free Keywords', value: <ItemTypeField.FreeKeyword keyword={item.keyword} /> },
+            { label: 'Description', value: <ItemTypeField.Description description={item.description} /> },
+            { label: 'Last Modified Date', value: <ItemTypeField.DateTime date={item.last_update_date} /> },
+            { label: 'Created Date', value: <ItemTypeField.DateTime date={item.creation_date} /> },
+            { label: 'Contributor', value: <ItemTypeField.Contributer uname={item.uname} name={item.name} /> },
+            { label: 'Item Type', value: item.item_type_display_name },
+            { label: 'Change Log(History)', value: <ItemTypeField.ChangeLog changelog={item.changelog} /> },
+            { label: 'Author', value: <ItemTypeField.Author author={item.author} /> },
+            { label: 'Journal', value: item.journal },
+            { label: 'Publication Year', value: item.publication_year },
+            { label: 'Volume', value: item.volume },
+            { label: 'Number', value: item.number },
+            { label: 'Page', value: item.page },
+            { label: 'Index', value: <ItemTypeField.ItemIndex index={item.index} /> },
+            { label: 'Related to', value: <ItemTypeField.RelatedTo relatedTo={item.related_to} /> },
+        ];
+    }
+}
 
 export default PaperDetail;
\ No newline at end of file
diff --git a/src/components/database/item-type/url/UrlDetail.tsx b/src/components/database/item-type/url/UrlDetail.tsx
index 8db7658..e93cf2f 100644
--- a/src/components/database/item-type/url/UrlDetail.tsx
+++ b/src/components/database/item-type/url/UrlDetail.tsx
@@ -1,43 +1,31 @@
-import React, { ReactNode } from 'react';
-import ItemTypeField from '../lib/field';
+import React from 'react';
 import { ItemUrl } from '../../lib/ItemUtil';
+import DetailBase, { DetailBaseProps } from '../lib/DetailBase';
+import ItemTypeField from '../lib/field';
 import UrlUtil from './UrlUtil';
 
-const UrlDetail = (props: { item: ItemUrl }) => {
-    const { item } = props;
-    const fields: { label: ReactNode, value: ReactNode }[] = [
-        { label: 'ID', value: item.doi },
-        { label: 'Language', value: <ItemTypeField.Language lang={item.lang} /> },
-        { label: 'Title', value: item.title },
-        { label: 'Free Keywords', value: <ItemTypeField.FreeKeyword keyword={item.keyword} /> },
-        { label: 'Description', value: <ItemTypeField.Description description={item.description} /> },
-        { label: 'Last Modified Date', value: <ItemTypeField.DateTime date={item.last_update_date} /> },
-        { label: 'Created Date', value: <ItemTypeField.DateTime date={item.creation_date} /> },
-        { label: 'Contributor', value: <ItemTypeField.Contributer uname={item.uname} name={item.name} /> },
-        { label: 'Item Type', value: item.item_type_display_name },
-        { label: 'Change Log(History)', value: <ItemTypeField.ChangeLog changelog={item.changelog} /> },
-        { label: 'URL', value: <a href={item.url} target="_blank" rel="noopener noreferrer">{item.url}</a> },
-        { label: 'Banner File', value: <UrlUtil.BannerFile file={item.file} /> },
-        { label: 'Index', value: <ItemTypeField.ItemIndex index={item.index} /> },
-        { label: 'Related to', value: <ItemTypeField.RelatedTo relatedTo={item.related_to} /> },
-    ];
-    let evenodd = 'even';
-    const elements = fields.map((value, i) => {
-        evenodd = evenodd === 'even' ? 'odd' : 'even'
-        return (
-            <tr key={i}>
-                <td className="head">{value.label}</td>
-                <td className={evenodd}>{value.value}</td>
-            </tr>
-        )
-    });
-    return (
-        <table className="outer itemDetail">
-            <tbody>
-                {elements}
-            </tbody>
-        </table>
-    );
-};
+class UrlDetail extends DetailBase {
 
-export default UrlDetail;
+    constructor(props: DetailBaseProps) {
+        super(props);
+        const item = this.item as ItemUrl;
+        this.fields = [
+            { label: 'ID', value: item.doi },
+            { label: 'Language', value: <ItemTypeField.Language lang={item.lang} /> },
+            { label: 'Title', value: item.title },
+            { label: 'Free Keywords', value: <ItemTypeField.FreeKeyword keyword={item.keyword} /> },
+            { label: 'Description', value: <ItemTypeField.Description description={item.description} /> },
+            { label: 'Last Modified Date', value: <ItemTypeField.DateTime date={item.last_update_date} /> },
+            { label: 'Created Date', value: <ItemTypeField.DateTime date={item.creation_date} /> },
+            { label: 'Contributor', value: <ItemTypeField.Contributer uname={item.uname} name={item.name} /> },
+            { label: 'Item Type', value: item.item_type_display_name },
+            { label: 'Change Log(History)', value: <ItemTypeField.ChangeLog changelog={item.changelog} /> },
+            { label: 'URL', value: <a href={item.url} target="_blank" rel="noopener noreferrer">{item.url}</a> },
+            { label: 'Banner File', value: <UrlUtil.BannerFile file={item.file} /> },
+            { label: 'Index', value: <ItemTypeField.ItemIndex index={item.index} /> },
+            { label: 'Related to', value: <ItemTypeField.RelatedTo relatedTo={item.related_to} /> },    
+        ];
+    }
+}
+
+export default UrlDetail;
\ No newline at end of file