diff --git a/invenio_search_ui/assets/semantic-ui/js/invenio_search_ui/components/SearchResultsBox.js b/invenio_search_ui/assets/semantic-ui/js/invenio_search_ui/components/SearchResultsBox.js
new file mode 100644
index 0000000..e8ffc52
--- /dev/null
+++ b/invenio_search_ui/assets/semantic-ui/js/invenio_search_ui/components/SearchResultsBox.js
@@ -0,0 +1,75 @@
+// This file is part of Invenio
+// Copyright (C) 2024 CERN.
+//
+// Invenio is free software; you can redistribute it and/or modify it
+// under the terms of the MIT License; see LICENSE file for more details.
+
+import { InvenioSearchPagination } from "@js/invenio_search_ui/components";
+import { i18next } from "@translations/invenio_search_ui/i18next";
+import PropTypes from "prop-types";
+import React from "react";
+import { Count, ResultsList, Sort } from "react-searchkit";
+import { Grid, Segment } from "semantic-ui-react";
+
+export const SearchResultsBox = ({
+  sortOptions,
+  paginationOptions,
+  currentResultsState,
+}) => {
+  const { total } = currentResultsState.data;
+  return (
+    total && (
+      <Grid>
+        <Grid.Row>
+          <Grid.Column width={16}>
+            <Segment>
+              <Grid>
+                <Grid.Row
+                  verticalAlign="middle"
+                  className="small pt-5 pb-5 highlight-background"
+                >
+                  <Grid.Column width={4}>
+                    <Count
+                      label={() => (
+                        <>
+                          {i18next.t("{{count}} results found", {
+                            count: total,
+                          })}
+                        </>
+                      )}
+                    />
+                  </Grid.Column>
+                  <Grid.Column width={12} textAlign="right">
+                    {sortOptions && (
+                      <Sort
+                        values={sortOptions}
+                        label={(cmp) => (
+                          <>
+                            <label className="mr-10">{i18next.t("Sort by")}</label>
+                            {cmp}
+                          </>
+                        )}
+                      />
+                    )}
+                  </Grid.Column>
+                </Grid.Row>
+                <Grid.Row>
+                  <Grid.Column>
+                    <ResultsList />
+                  </Grid.Column>
+                </Grid.Row>
+              </Grid>
+            </Segment>
+          </Grid.Column>
+        </Grid.Row>
+        <InvenioSearchPagination paginationOptions={paginationOptions} />
+      </Grid>
+    )
+  );
+};
+
+SearchResultsBox.propTypes = {
+  sortOptions: PropTypes.object.isRequired,
+  paginationOptions: PropTypes.object.isRequired,
+  currentResultsState: PropTypes.object.isRequired,
+};
diff --git a/invenio_search_ui/assets/semantic-ui/js/invenio_search_ui/components/index.js b/invenio_search_ui/assets/semantic-ui/js/invenio_search_ui/components/index.js
index 4e76aea..451a03e 100644
--- a/invenio_search_ui/assets/semantic-ui/js/invenio_search_ui/components/index.js
+++ b/invenio_search_ui/assets/semantic-ui/js/invenio_search_ui/components/index.js
@@ -26,3 +26,4 @@ export {
   ContribBucketAggregationElement,
   ContribBucketAggregationValuesElement,
 } from "./common/facets";
+export { SearchResultsBox } from "./SearchResultsBox";