diff --git a/src/main/webui/src/app/components/content/GroupEdit.jsx b/src/main/webui/src/app/components/content/GroupEdit.jsx
new file mode 100644
index 0000000..c8ad006
--- /dev/null
+++ b/src/main/webui/src/app/components/content/GroupEdit.jsx
@@ -0,0 +1,37 @@
+/**
+ * Copyright (C) 2023 Red Hat, Inc. (https://github.com/Commonjava/indy-ui-service)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, {useState, useEffect} from 'react';
+import {useLocation, useNavigate, useParams} from 'react-router-dom';
+import {PropTypes} from 'prop-types';
+import {StoreEditControlPanel as EditControlPanel} from './StoreControlPanels.jsx';
+import {DisableTimeoutHint, DurationHint, PrefetchHint, Hint} from './Hints.jsx';
+import {PackageTypeSelect} from './CommonPageWidget.jsx';
+// import ViewJsonDebugger from './Debugger.jsx';
+import {Utils} from '../CompUtils.js';
+// import Filters from '../Filters.js';
+import {TimeUtils} from '../../TimeUtils.js';
+import {jsonRest} from '../../RestClient.js';
+
+
+export default function GroupEdit() {
+  const [state, setState] = useState({
+    store: {},
+    storeView: {}
+  });
+
+  return <div>This is not implemented yet!</div>;
+}
diff --git a/src/main/webui/src/app/components/content/GroupList.jsx b/src/main/webui/src/app/components/content/GroupList.jsx
index 6bfbe34..85375ab 100644
--- a/src/main/webui/src/app/components/content/GroupList.jsx
+++ b/src/main/webui/src/app/components/content/GroupList.jsx
@@ -22,130 +22,11 @@ import ListControl from "./ListControl.jsx";
 import {ListJsonDebugger} from './Debugger.jsx';
 import {LocalURLSection, StoreNameSection} from './CommonPageWidget.jsx';
 
-const init = function (state, setState){
-  useEffect(()=>{
-    Utils.getStores(state, setState, "group");
-  }, [state.listing]);
-};
-
-
-const createNew = () => {
-  // mock
-};
-
-const hideAll = () => {
-  // mock
-};
-
-const handleSearch = (event, rawList, setState) => {
-  setState({
-    listing: Utils.searchByKeyForNewStores(event.target.value, rawList)
-  });
-};
-
-const handleDebug = (event, setState) => {
-  setState({
-    enableDebug: event.target.checked
-  });
-};
-
-const GroupListItem = ({store, storeClass, disableMap}) => {
-  const [hideCons, setHideCons] = useState(true);
-  let constituents = store.constituents ? Utils.reConstituents(store) : undefined;
-  return (
-    <div className="store-listing-item">
-      <StoreNameSection store={store} storeClass={storeClass} />
-      <div className="fieldset">
-        <div>
-          <LocalURLSection storeKey={store.key} />
-          <div className="options-field field right-half">
-            <div className="inline-label">
-              {store.constituents && store.constituents.length} Constituent(s) [
-              <span className="option">
-                {
-                  hideCons ?
-                  <a href="#" onClick={event => {
-                    event.preventDefault();
-                    setHideCons(false);
-                  }}>+</a> :
-                  <a href="#" onClick={event => {
-                    event.preventDefault();
-                    setHideCons(true);
-                  }}>-</a>
-                }
-              </span>
-              ]
-            </div>
-            {
-              !hideCons && constituents &&
-                <ol className="content-panel subsection">
-                  {
-                    constituents.map(item => {
-                      let itemStoreClass = Utils.isDisabled(item.key, disableMap)? "disabled-store":"enabled-store";
-                      return (
-                        <li key={item.key}>
-                          <Link to={`/${item.type}/${item.packageType}/view/${item.name}`}>
-                              <span className={itemStoreClass}>{item.key}</span>
-                          </Link>
-                          {
-                            item.type==='remote' &&
-                              <div className="subfields">
-                                <span className="description field">(Remote URL: <a target="_new" href={Utils.storeHref(item.key)}>{Utils.storeHref(item.key)}</a>)</span>
-                              </div>
-                          }
-                        </li>
-                      );
-                    })
-                  }
-                </ol>
-            }
-          </div>
-        </div>
-        <div className="description field"><span>{store.description}</span></div>
-      </div>
-    </div>
-  );
-};
-
-GroupListItem.propTypes={
-  store: PropTypes.object.isRequired,
-  storeClass: PropTypes.string,
-  disableMap: PropTypes.object
-};
-
-export default function GroupList() {
+export default function GruopList() {
   const [state, setState] = useState({
-    listing: [],
-    rawListing: [],
-    disabledMap: {},
-    enableDebug: false,
+    store: {},
+    raw: {},
     message: ''
   });
-  init(state, setState);
-  let listing = state.listing;
-  let disMap = state.disabledMap;
-
-  return (
-    <div className="container-fluid">
-      <ListControl
-        useHideAll={true} handleHideAll={hideAll}
-        useSearch={true} handleSearch={handleSearch}
-        useDebug={true} handleDebug={handleDebug}
-        handleCreateNew={createNew} />
-      <div className="content-panel">
-        <div className="store-listing">
-          {
-            listing.map(store => {
-              let storeClass = Utils.isDisabled(store.key, disMap)? "disabled-store":"enabled-store";
-              return (
-                <GroupListItem key={store.key} store={store} storeClass={storeClass} disableMap={disMap} />
-              );
-            })
-          }
-        </div>
-      </div>
-
-      <ListJsonDebugger enableDebug={state.enableDebug} jsonObj={state.listing} />
-    </div>
-  );
+  return <div>This is not implemented yet!</div>;
 }
diff --git a/src/main/webui/src/app/components/content/GroupView.jsx b/src/main/webui/src/app/components/content/GroupView.jsx
index 6b468b1..1149ecd 100644
--- a/src/main/webui/src/app/components/content/GroupView.jsx
+++ b/src/main/webui/src/app/components/content/GroupView.jsx
@@ -24,187 +24,11 @@ import {Filters} from '../Filters.js';
 import {TimeUtils} from '../../TimeUtils.js';
 import {jsonGet} from '../../RestClient.js';
 
-const getDisTimeouts = (store, state, setState) => {
-  jsonGet({
-    url: '/api/admin/schedule/store/all/disable-timeout',
-    done: response => {
-      let newStore = Utils.cloneObj(store);
-      let disabledMap = Utils.setDisableMap(response, state.listing);
-      let expiration = disabledMap[store.key];
-      if(expiration){
-        newStore.disableExpiration = expiration;
-      }
-      setState({
-        store: newStore,
-        disabledMap
-      });
-    },
-    fail: () => {
-      Utils.logMessage("disable timeout getting failed");
-      setState({
-        store
-      });
-    }
-  });
-};
-
-const getStore = (state, setState) => {
-  const [packageType, name] = useParams();
-  let getUrl = `/api/admin/stores/${packageType}/group/${name}`;
-  jsonGet({
-    url: getUrl,
-    done: response => {
-      let raw = response;
-      let store = Utils.cloneObj(raw);
-      store.disabled = raw.disabled === undefined ? false : raw.disabled;
-      setState({
-        raw
-      });
-      getDisTimeouts(store, state, setState);
-    },
-    fail: errorText => {
-      setState({
-        message: JSON.parse(errorText).error
-      });
-    }
-  });
-};
-
-const init = function (state, setState){
-  useEffect(()=>{
-    getStore(state, setState);
-  }, [state.raw]);
-};
-
-
-const handlers = {
-  handleDisable: () => {
-    // Mock
-  },
-
-  handleEnable: () => {
-    // Mock
-  },
-
-  handleEdit: () => {
-    // Mock
-  },
-
-  handleCreate: () => {
-    // Mock
-  },
-
-  handleRemove: () => {
-    // Mock
-  }
-};
 export default function GroupView() {
   const [state, setState] = useState({
-    raw: {}, store: {}, disableMap: [], message: ''
+    store: {},
+    raw: {},
+    message: ''
   });
-
-  init(state, setState);
-  let store = state.store;
-
-  if(!Utils.isEmptyObj(store)) {
-    return (
-      <div className="container-fluid">
-        <div className="control-panel">
-          <ControlPanel
-            enabled={!store.disabled} handleEnable={handlers.handleEnable}
-            handleDisable={handlers.handleDisable}
-            handleEdit={handlers.handleEdit}
-            handleCreate={handlers.handleCreate}
-            handleRemove={handlers.handleRemove} />
-        </div>
-
-        <div className="content-panel">
-          <div className="fieldset-caption">Basics</div>
-          <BasicSection store={store} />
-
-          <div className="fieldset-caption">Description</div>
-          <div className="fieldset">
-            <div className="text-field">
-              <textarea readOnly className="text-description" value={store.description} />
-            </div>
-          </div>
-
-          <div className="fieldset-caption">Constituents</div>
-          <div className="fieldset">
-          {
-            store.constituents && store.constituents.length>0 &&
-
-              <ol className="detail-value detail-value-list">
-                {
-                  store.constituents.map(item=>{
-                    let href = Utils.detailHref(item);
-                    let isDisabled = Utils.isDisabled(item, state.disabledMap);
-                    let storeClassName = isDisabled? 'disabled-store': 'enabled-store';
-                    return (
-                      <li key={item} className="detail-value-list-item">
-                      {
-                        href?
-                        <Link to={href}>
-                          <span className={storeClassName} >{item}</span>
-                        </Link>:
-                        <span>{item}</span>
-                      }
-                      </li>
-                    );
-                  })
-                }
-            </ol>
-          }
-          </div>
-        </div>
-        {
-          // <ViewJsonDebugger enableDebug={false} storeJson={store} rawJson={raw} />
-        }
-      </div>
-    );
-  }
-  return null;
+  return <div>This is not implemented yet!</div>;
 }
-
-const BasicSection = ({store})=> <div className="fieldset">
-      <div className="detail-field">
-          <label>Package Type:</label>
-          <span className="key">{store.packageType}</span>
-      </div>
-      <div className="detail-field">
-          <label>Name:</label>
-          <span className="key">{store.name}</span>
-      </div>
-      <div className="detail-field">
-          <span>{Filters.checkmark(!store.disabled)}</span>
-          <label>Enabled?</label>
-          {
-            store.disabled && store.disableExpiration &&
-            <span className="hint">Set to automatically re-enable at {TimeUtils.timestampToDateFormat(store.disableExpiration)}</span>
-          }
-      </div>
-      <div className="detail-field">
-        <span>{Filters.checkmark(store.prepend_constituent)}</span>
-        <label>Prepend Constituents?</label>
-        <span className="hint">If enabled, all new constituents which are added not manually(like promotion) will be at the top of constituents list</span>
-      </div>
-      <div className="sub-fields">
-        <div className="detail-field">
-          <label>Disable Timeout:</label>
-          <span>{store.disable_timeout}</span>
-          <DisableTimeoutHint />
-        </div>
-      </div>
-      <div className="detail-field">
-        <label>Local URL:</label>
-        {
-          // TODO: is this store.demo still available now?
-          store.demo ?
-          <span>{Utils.storeHref(store.key)}</span> :
-          <span><a href={Utils.storeHref(store.key)} target="_new">{Utils.storeHref(store.key)}</a></span>
-        }
-      </div>
-    </div>;
-BasicSection.propTypes = {
-  store: PropTypes.object.isRequired
-};
diff --git a/src/main/webui/src/app/components/content/HostedEdit.jsx b/src/main/webui/src/app/components/content/HostedEdit.jsx
new file mode 100644
index 0000000..28c8d3d
--- /dev/null
+++ b/src/main/webui/src/app/components/content/HostedEdit.jsx
@@ -0,0 +1,37 @@
+/**
+ * Copyright (C) 2023 Red Hat, Inc. (https://github.com/Commonjava/indy-ui-service)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, {useState, useEffect} from 'react';
+import {useLocation, useNavigate, useParams} from 'react-router-dom';
+import {PropTypes} from 'prop-types';
+import {StoreEditControlPanel as EditControlPanel} from './StoreControlPanels.jsx';
+import {DisableTimeoutHint, DurationHint, PrefetchHint, Hint} from './Hints.jsx';
+import {PackageTypeSelect} from './CommonPageWidget.jsx';
+// import ViewJsonDebugger from './Debugger.jsx';
+import {Utils} from '../CompUtils.js';
+// import Filters from '../Filters.js';
+import {TimeUtils} from '../../TimeUtils.js';
+import {jsonRest} from '../../RestClient.js';
+
+
+export default function HostedEdit() {
+  const [state, setState] = useState({
+    store: {},
+    storeView: {}
+  });
+
+  return <div>This is not implemented yet!</div>;
+}
diff --git a/src/main/webui/src/app/components/content/HostedList.jsx b/src/main/webui/src/app/components/content/HostedList.jsx
index 0dc5227..8fe5794 100644
--- a/src/main/webui/src/app/components/content/HostedList.jsx
+++ b/src/main/webui/src/app/components/content/HostedList.jsx
@@ -22,27 +22,6 @@ import {hostedOptionLegend as options} from "../ComponentConstants.js";
 import {StoreListingWidget} from './CommonPageWidget.jsx';
 
 
-const init = (state, setState) => {
-  useEffect(()=>{
-    Utils.getStores(state, setState, "hosted");
-  }, [state.listing]);
-};
-
-const handlers = {
-  createNew: () => {
-    // mock
-  },
-  handleDebug: (event, setState) => {
-    setState({
-      enableDebug: event.target.checked
-    });
-  },
-  handleSearch: (event, rawList, setState) => {
-    setState({
-      listing: Utils.searchByKeyForNewStores(event.target.value, rawList)
-    });
-  }
-};
 
 export default function HostedList() {
   const [state, setState] = useState({
@@ -53,19 +32,5 @@ export default function HostedList() {
     message: ''
   });
 
-  init(state, setState);
-  let listing = state.listing;
-  let disMap = state.disabledMap;
-
-  return (
-    <div className="container-fluid">
-      <ListControl
-        useSearch={true} handleSearch={event => handlers.handleSearch(event, state.rawListing, setState)}
-        useLegend={true} legends={options}
-        useDebug={true} handleDebug={event => handlers.handleDebug(event, setState)}
-        handleCreateNew={handlers.createNew} />
-      <StoreListingWidget StoreList={listing} DisMap={disMap} StoreType="hosted" />
-      <ListJsonDebugger enableDebug={state.enableDebug} jsonObj={state.listing} />
-    </div>
-  );
+  return <div>This is not implemented yet</div>;
 }
diff --git a/src/main/webui/src/app/components/content/HostedView.jsx b/src/main/webui/src/app/components/content/HostedView.jsx
index 5125218..0a99ce4 100644
--- a/src/main/webui/src/app/components/content/HostedView.jsx
+++ b/src/main/webui/src/app/components/content/HostedView.jsx
@@ -25,206 +25,11 @@ import {Filters} from '../Filters.js';
 import {TimeUtils} from '../../TimeUtils.js';
 import {jsonGet} from '../../RestClient.js';
 
-const getStoreDisableTimeout = (store, setState) => {
-  jsonGet({
-    url: `/api/admin/schedule/store/${store.packageType}/${store.type}/${store.name}/disable-timeout`,
-    done: response => {
-      let newStore = Utils.cloneObj(store);
-      newStore.disableExpiration = response.expiration;
-      setState({
-        store: newStore
-      });
-    },
-    fail: () => {
-      Utils.logMessage("disable timeout getting failed");
-      setState({
-        store
-      });
-    }
-  });
-};
-
-const getStore = setState => {
-  const [packageType, name] = useParams();
-  let getUrl = `/api/admin/stores/${packageType}/hosted/${name}`;
-  jsonGet({
-    url: getUrl,
-    done: response => {
-      let raw = response;
-      let store = Utils.cloneObj(raw);
-      store.disabled = raw.disabled === undefined ? false : raw.disabled;
-      setState({
-        raw
-      });
-      getStoreDisableTimeout(store, setState);
-    },
-    fail: errorText => {
-      setState({
-        message: JSON.parse(errorText).error
-      });
-    }
-  });
-};
-
-const init = (state, setState) => {
-  useEffect(()=>{
-    getStore(setState);
-  }, [state.raw]);
-};
-
-
-const handlers = {
-  handleDisable: () => {
-    // mock
-  },
-
-  handleEnable: () => {
-    // mock
-  },
-
-  handleEdit: () => {
-    // mock
-  },
-
-  handleCreate: () => {
-    // mock
-  },
-
-  handleRemove: () => {
-    // mock
-  }
-};
 export default function HostedView() {
   const [state, setState] = useState({
     store: {},
     raw: {},
     message: ''
   });
-  init(state, setState);
-  let store = state.store;
-  if(!Utils.isEmptyObj(store)) {
-    return (
-      <div className="container-fluid">
-        <div className="control-panel">
-          <ControlPanel
-            enabled={!store.disabled} handleEnable={handlers.handleEnable}
-            handleDisable={handlers.handleDisable}
-            handleEdit={handlers.handleEdit}
-            handleCreate={handlers.handleCreate}
-            handleRemove={handlers.handleRemove} />
-        </div>
-
-        <div className="content-panel">
-          <div className="fieldset-caption">Basics</div>
-          <BasicSection store={store} />
-
-          <div className="fieldset-caption">Description</div>
-          <div className="fieldset">
-            <div className="text-field">
-              <textarea readOnly className="text-description" value={store.description} />
-            </div>
-          </div>
-
-          <div className="fieldset-caption">Capabilities</div>
-          <div className="detail-table">
-            {
-              (store.allow_releases || store.allow_snapshots) &&
-
-                <div>
-                  <div className="detail-field">
-                    <span>{Filters.checkmark(store.allow_releases || store.allow_snapshots)}</span>
-                    <label>Allow Uploads</label>
-                  </div>
-                  <div className="detail-field">
-                    <span>{Filters.checkmark(store.allow_releases)}</span>
-                    <label>Allow Releases</label>
-                  </div>
-                  <div className="detail-field">
-                    <span>{Filters.checkmark(store.allow_snapshots)}</span>
-                    <label>Snapshots Allowed?</label>
-                  </div>
-                  {
-                    store.allow_snapshots &&
-                    <div className="sub-fields">
-                      <div className="detail-field">
-                        <label>Snapshot Timeout:</label>
-                        <span>{TimeUtils.secondsToDuration(store.snapshotTimeoutSeconds)}</span>
-                      </div>
-                    </div>
-                  }
-                </div>
-
-            }
-          </div>
-        </div>
-        {
-          // <ViewJsonDebugger enableDebug={false} storeJson={store} rawJson={raw} />
-        }
-      </div>
-    );
-  }
-  return null;
+  return <div>This is not implemented yet!</div>;
 }
-
-/* eslint-disable-next-line max-lines-per-function */
-const BasicSection = ({store}) => <div className="fieldset">
-      <div className="detail-field">
-          <label>Package Type:</label>
-          <span className="key">{store.packageType}</span>
-      </div>
-      <div className="detail-field">
-          <label>Name:</label>
-          <span className="key">{store.name}</span>
-      </div>
-      <div className="detail-field">
-          <span>{Filters.checkmark(!store.disabled)}</span>
-          <label>Enabled?</label>
-          {
-            store.disabled && store.disableExpiration &&
-            <span className="hint">Set to automatically re-enable at {TimeUtils.timestampToDateFormat(store.disableExpiration)}</span>
-          }
-      </div>
-      <div className="detail-field">
-        <span>{Filters.checkmark(store.readonly)}</span>
-        <label>Readonly?</label>
-        {
-          !store.readonly &&
-          <span className="hint">If set to readonly, all uploading and deleting operations to this repo are prohibited</span>
-        }
-      </div>
-      <div className="detail-field">
-        <span>{Filters.checkmark(store.authoritative_index || store.readonly)}</span>
-        <label>Authoritative index enabled?</label>
-        {
-          !store.authoritative_index && store.readonly &&
-          <span className="hint">Make the content index authoritative to this repository</span>
-        }
-      </div>
-      <div className="sub-fields">
-        <div className="detail-field">
-          <label>Disable Timeout:</label>
-          <span>{store.disable_timeout}</span>
-          <DisableTimeoutHint />
-        </div>
-      </div>
-      <div className="detail-field">
-        <label>Local URL:</label>
-        {
-          // TODO: is this store.demo still available now?
-          store.demo ?
-          <span>{Utils.storeHref(store.key)}</span> :
-          <span><a href={Utils.storeHref(store.key)} target="_new">{Utils.storeHref(store.key)}</a></span>
-        }
-      </div>
-      {
-        store.storage &&
-        <div className="detail-field">
-          <label>Alternative Storage Directory:</label>
-          <span>{store.storage}</span>
-        </div>
-      }
-    </div>;
-
-BasicSection.propTypes = {
-  store: PropTypes.object.isRequired
-};
diff --git a/src/main/webui/src/app/components/content/Main.jsx b/src/main/webui/src/app/components/content/Main.jsx
index 9417127..699125d 100644
--- a/src/main/webui/src/app/components/content/Main.jsx
+++ b/src/main/webui/src/app/components/content/Main.jsx
@@ -23,6 +23,8 @@ import RemoteView from './RemoteView.jsx';
 import HostedView from './HostedView.jsx';
 import GroupView from './GroupView.jsx';
 import RemoteEdit from './RemoteEdit.jsx';
+import GroupEdit from './GroupEdit.jsx';
+import HostedEdit from './HostedEdit.jsx';
 
 // const browseCompatible=`<!--[if lt IE 7]>
 //     <p className="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
@@ -48,11 +50,12 @@ export const Main = () => <div>
         <Route path="/group/:packageType/view/:name" element={<GroupView />} />
 
         <Route exact path="/remote/new" element={<RemoteEdit />} />
+        <Route exact path={"/hosted/new"} element={<HostedEdit />} />
+        <Route exact path={"/group/new"} element={<GroupEdit />} />
         <Route path="/remote/:packageType/edit/:name" element={<RemoteEdit />} />
+        <Route path="/hosted/:packageType/edit/:name" element={<HostedEdit />} />
+        <Route path="/group/:packageType/edit/:name" element={<GroupEdit />} />
         {
-        // <Route exact path={["/hosted/new","/hosted/:packageType/edit/:name"]} element={HostedEdit} />
-        // <Route exact path={["/group/new","/group/:packageType/edit/:name"]} element={GroupEdit} />
-
         // <Route exact path={["/nfc", "/nfc/view/all", "/nfc/view/:packageType/:type/:name"]} element={} />
         //
         // <Route exact path={"/logout"} element={} />