diff --git a/src/main/webui/src/app/components/content/hosted/HostedList.jsx b/src/main/webui/src/app/components/content/hosted/HostedList.jsx
index 83eafee..c928a34 100644
--- a/src/main/webui/src/app/components/content/hosted/HostedList.jsx
+++ b/src/main/webui/src/app/components/content/hosted/HostedList.jsx
@@ -14,9 +14,109 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, {useEffect, useState} from "react";
+import {useParams} from "react-router-dom";
+import {ListJsonDebugger} from "../common/Debugger.jsx";
+import ListControl from "../common/ListControl.jsx";
+import {hostedOptionLegend as options} from "../../ComponentConstants.js";
+import {StoreListingWidget} from "../common/StoreListingWidget.jsx";
+import {LoadingSpiner} from "../common/LoadingSpiner.jsx";
+import {Utils} from "#utils/AppUtils.js";
+import {IndyRest} from "#utils/RestClient.js";
 
+const {storeRes, disableRes} = IndyRest;
+
+const handlers = {
+  handleDebug: (event, setState) => {
+    setState({
+      enableDebug: event.target.checked,
+    });
+  },
+  handleSearch: (event, rawList, setState) => {
+    setState({
+      rawList,
+      listing: Utils.searchByKeyForNewStores(event.target.value, rawList),
+    });
+  },
+  handleSortBy: (event, rawList, setState) => {
+    setState({
+      rawList,
+      listing: Utils.sortByPropForStores(event.target.value, rawList),
+    });
+  },
+};
 
 export default function HostedList() {
-  return <div>This is not implemented yet</div>;
+  const {packageType} = useParams();
+  const [state, setState] = useState({
+    rawList: [],
+    listing: [],
+    disabledMap: {},
+    enableDebug: false,
+    message: "",
+  });
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setLoading(true);
+    const fetchdData = async () => {
+      const res = await storeRes.getStores(packageType, "hosted");
+      if (res.success) {
+        const timeoutRes = await disableRes.getAllStoreTimeout();
+        let disabledMap = {};
+        if (timeoutRes.success) {
+          const timeoutData = timeoutRes.result;
+          disabledMap = Utils.setDisableMap(timeoutData);
+        } else {
+          Utils.logMessage(`disable timeout get failed in hosted listing! Error reason: ${timeoutRes.error.message}`,);
+        }
+        let data = res.result;
+        if (typeof data === "string") {
+          data = JSON.parse(data);
+        }
+        setState({
+          rawList: data.items,
+          listing: data.items,
+          disabledMap,
+        });
+      } else {
+        setState({
+          message: res.error.message,
+        });
+      }
+      setLoading(false);
+    };
+    fetchdData();
+  }, [packageType]);
+
+  if (loading) {
+    return <LoadingSpiner />;
+  }
+
+  return (
+    <React.Fragment>
+      <ListControl
+        type="hosted"
+        legends={options}
+        handleSearch={event => handlers.handleSearch(event, state.rawList, setState)
+        }
+        handleDebug={event => handlers.handleDebug(event, setState)}
+        handleSortBy={event => handlers.handleSortBy(event, state.rawList, setState)
+        }
+      />
+      {state.listing ?
+        <StoreListingWidget
+          storeList={state.listing}
+          disableMap={state.disabledMap}
+          storeType="hosted"
+        />
+       :
+        <div className="container-fluid">No content fetched!</div>
+      }
+      <ListJsonDebugger
+        enableDebug={state.enableDebug}
+        jsonObj={state.listing}
+      />
+    </React.Fragment>
+  );
 }
diff --git a/src/main/webui/src/app/components/content/hosted/HostedList.test.jsx b/src/main/webui/src/app/components/content/hosted/HostedList.test.jsx
new file mode 100644
index 0000000..2ba1c4e
--- /dev/null
+++ b/src/main/webui/src/app/components/content/hosted/HostedList.test.jsx
@@ -0,0 +1,69 @@
+/**
+ * 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 from "react";
+import {MemoryRouter, Route, Routes} from 'react-router-dom';
+import {render, screen, cleanup, waitFor} from '@testing-library/react';
+import '@testing-library/jest-dom';
+import fetchMock from "fetch-mock";
+import HostedList from "./HostedList.jsx";
+import {Utils} from "#utils/AppUtils.js";
+import {STORE_API_BASE_URL} from "../../ComponentConstants.js";
+
+beforeEach(()=>{
+  fetchMock.restore();
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+describe('HostedList tests', () => {
+  it("Verify HostedList", async ()=>{
+    const mockHostedStoreList = JSON.stringify({items: [
+      {name: "central", type: "hosted", packageType: "maven",
+       key: "maven:hosted:central", disabled: false, "allow_snapshots": true,
+       "allow_releases": true, url: "https://repo.maven.apache.org/maven2/",
+       description: "official maven central"},
+      {name: "mrrc", type: "hosted", packageType: "maven",
+       key: "maven:hosted:mrrc", disabled: false,
+       url: "https://maven.repository.redhat.com/ga/",
+       description: "Red Hat maven repository"}
+    ]});
+    const mockDisableTimeout = JSON.stringify({items: [
+        {name: "Disable-Timeout", group: "maven:hosted:central#Disable-Timeout",
+          expiration: "2030-02-22T17:00:00.000Z"},
+        {name: "Disable-Timeout", group: "maven:hosted:mrrc#Disable-Timeout",
+          expiration: "2030-03-22T17:00:00.000Z"}
+    ]});
+    fetchMock.mock(`${STORE_API_BASE_URL}/maven/hosted`, {status: 200, body: JSON.stringify(mockHostedStoreList)});
+    fetchMock.mock("/api/admin/schedule/store/all/disable-timeout", {status: 200, body: JSON.stringify(mockDisableTimeout)});
+    render(<MemoryRouter initialEntries={["/hosted/maven"]}>
+      <Routes>
+        <Route path="/hosted/:packageType" element={<HostedList />} />
+      </Routes>
+    </MemoryRouter>);
+
+    await waitFor(() => {
+      // ListControl section testing
+      expect(screen.getByRole("button", {name: "New..."})).toBeInTheDocument();
+
+      // StoreListing section testing
+      expect(screen.getByRole("link", {name: Utils.storeHref("maven:hosted:central")})).toHaveAttribute("href", Utils.storeHref("maven:hosted:central"));
+      expect(screen.getByRole("link", {name: Utils.storeHref("maven:hosted:mrrc")})).toHaveAttribute("href", Utils.storeHref("maven:hosted:mrrc"));
+    });
+  });
+});