diff --git a/service/lib/agama/dbus/software/manager.rb b/service/lib/agama/dbus/software/manager.rb
index 67f1e5cbf7..552a46aa47 100644
--- a/service/lib/agama/dbus/software/manager.rb
+++ b/service/lib/agama/dbus/software/manager.rb
@@ -84,7 +84,7 @@ def initialize(backend, logger)
           end
 
           # value of result hash is category, description, icon, summary and order
-          dbus_method :ListPatterns, "in Filtered:b, out Result:a{s(ssssi)}" do |filtered|
+          dbus_method :ListPatterns, "in Filtered:b, out Result:a{s(sssss)}" do |filtered|
             [
               backend.patterns(filtered).each_with_object({}) do |pattern, result|
                 # make sure all attributes are already preloaded, adjust the "patterns" method
@@ -94,7 +94,7 @@ def initialize(backend, logger)
                   pattern.description,
                   pattern.icon,
                   pattern.summary,
-                  pattern.order.to_i
+                  pattern.order
                 ]
                 result[pattern.name] = value
               end
diff --git a/service/lib/agama/software/manager.rb b/service/lib/agama/software/manager.rb
index e1bcd916b8..1abf0d678f 100644
--- a/service/lib/agama/software/manager.rb
+++ b/service/lib/agama/software/manager.rb
@@ -123,6 +123,7 @@ def propose
         select_resolvables
         result = proposal.calculate
         logger.info "Proposal result: #{result.inspect}"
+        selected_patterns_changed
         result
       end
 
diff --git a/service/package/rubygem-agama.changes b/service/package/rubygem-agama.changes
index cec7cf3320..228e65ded2 100644
--- a/service/package/rubygem-agama.changes
+++ b/service/package/rubygem-agama.changes
@@ -1,3 +1,9 @@
+-------------------------------------------------------------------
+Tue Oct 10 08:51:45 UTC 2023 - Ladislav Slezák <lslezak@suse.com>
+
+- Extended Software service to allow configuring selected patterns
+  (gh#openSUSE/agama#792)
+
 -------------------------------------------------------------------
 Wed Oct  4 19:51:32 UTC 2023 - Josef Reidinger <jreidinger@suse.com>
 
diff --git a/web/cspell.json b/web/cspell.json
index 12cf6761e3..33f8c76794 100644
--- a/web/cspell.json
+++ b/web/cspell.json
@@ -19,31 +19,35 @@
         "addrs",
         "ahci",
         "apsens",
-        "autologin",
         "autoconnect",
+        "autologin",
         "btrfs",
         "ccmp",
         "chzdev",
         "dasd",
         "dasds",
+        "devel",
         "dbus",
         "España",
         "filecontent",
         "filename",
-        "fullname",
         "freedesktop",
+        "fullname",
         "gettext",
+        "hicolor",
         "ibft",
         "ifaces",
         "ipaddr",
         "iscsi",
         "jdoe",
+        "libyui",
         "lldp",
         "localdomain",
         "luks",
         "mgmt",
         "mmcblk",
         "multipath",
+        "multiuser",
         "ngettext",
         "onboot",
         "partitioner",
diff --git a/web/package.json b/web/package.json
index 5315672010..9501d20bdb 100644
--- a/web/package.json
+++ b/web/package.json
@@ -12,7 +12,7 @@
     "server": "webpack server --progress",
     "watch": "webpack --watch --progress",
     "build": "webpack",
-    "cspell": "cspell --no-progress --show-suggestions src",
+    "cspell": "cspell --no-progress --show-suggestions --exclude '*.svg' src",
     "eslint": "eslint --ext .js --ext .jsx src/",
     "eslint:fix": "eslint --fix --ext .js --ext .jsx src/",
     "stylelint": "stylelint 'src/**/*.{css,scss}'",
diff --git a/web/package/cockpit-agama.changes b/web/package/cockpit-agama.changes
index fab3862456..c25de33aed 100644
--- a/web/package/cockpit-agama.changes
+++ b/web/package/cockpit-agama.changes
@@ -1,3 +1,9 @@
+-------------------------------------------------------------------
+Tue Oct 10 08:50:53 UTC 2023 - Ladislav Slezák <lslezak@suse.com>
+
+- Added pattern selector to allow changing the installed software
+  (gh#openSUSE/agama#792)
+
 -------------------------------------------------------------------
 Mon Oct  9 11:30:27 UTC 2023 - Imobach Gonzalez Sosa <igonzalezsosa@suse.com>
 
diff --git a/web/src/assets/styles/app.scss b/web/src/assets/styles/app.scss
index 96dc4ae0d5..8df5bcf579 100644
--- a/web/src/assets/styles/app.scss
+++ b/web/src/assets/styles/app.scss
@@ -109,3 +109,59 @@ button.kebab-toggler {
     margin-inline-end: 5px;
   }
 }
+
+.pattern-container {
+  display: grid;
+  grid-template-columns: 16px auto;
+  grid-template-rows: auto auto;
+  gap: 0.2em 1em;
+  grid-auto-flow: row;
+  grid-template-areas:
+    "checkbox label"
+    "empty summary";
+  margin-bottom: 1em;
+  padding: 0.5em;
+  border-radius: 5px;
+}
+
+.pattern-container:hover {
+  background-color: #eee;
+}
+
+.pattern-label {
+  display: grid;
+  grid-template-columns: 32px auto;
+  grid-template-rows: auto;
+  gap: 0 1em;
+  grid-auto-flow: row;
+  grid-template-areas: "label-icon label-text";
+  grid-area: label;
+}
+
+.pattern-label-icon {
+  grid-area: label-icon;
+  align-self: center;
+}
+
+.pattern-label-text {
+  grid-area: label-text;
+  font-size: 110%;
+  font-weight: bold;
+  justify-self: start;
+  align-self: center;
+}
+
+.pattern-summary {
+  grid-area: summary;
+  color: #666;
+}
+
+.pattern-checkbox {
+  grid-area: checkbox;
+  justify-self: center;
+  align-self: center;
+}
+
+.pattern-group-name {
+  font-size: 120%;
+}
diff --git a/web/src/client/software.js b/web/src/client/software.js
index cc6328eb23..5572033707 100644
--- a/web/src/client/software.js
+++ b/web/src/client/software.js
@@ -74,13 +74,61 @@ class SoftwareBaseClient {
   /**
    * Returns how much space installation takes on disk
    *
-   * @return {Promise<Array<Product>>}
+   * @return {Promise<string>}
    */
   async getUsedSpace() {
     const proxy = await this.client.proxy(SOFTWARE_IFACE);
     return proxy.UsedDiskSpace();
   }
 
+  /**
+   * Returns available patterns
+   *
+   * @param {boolean} filter - `true` = filter the patterns, `false` = all patterns
+   * @return {Promise<Array<string>>}
+   */
+  async patterns(filter) {
+    const proxy = await this.client.proxy(SOFTWARE_IFACE);
+    return proxy.ListPatterns(filter);
+  }
+
+  /**
+   * @typedef {Object.<string, number>} PatternSelection mapping "name" =>
+   * "who selected the pattern"
+   */
+
+  /**
+   * Returns selected patterns
+   *
+   * @return {Promise<PatternSelection>}
+   */
+  async selectedPatterns() {
+    const proxy = await this.client.proxy(SOFTWARE_IFACE);
+    return proxy.SelectedPatterns;
+  }
+
+  /**
+   * Select a pattern to install
+   *
+   * @param {string} name - name of the pattern
+   * @return {Promise<void>}
+   */
+  async addPattern(name) {
+    const proxy = await this.client.proxy(SOFTWARE_IFACE);
+    return proxy.AddPattern(name);
+  }
+
+  /**
+   * Deselect a pattern to install
+   *
+   * @param {string} name - name of the pattern
+   * @return {Promise<void>}
+   */
+  async removePattern(name) {
+    const proxy = await this.client.proxy(SOFTWARE_IFACE);
+    return proxy.RemovePattern(name);
+  }
+
   /**
    * Returns the selected product
    *
diff --git a/web/src/components/overview/SoftwareSection.jsx b/web/src/components/overview/SoftwareSection.jsx
index f8f93bc8fb..2dd432489b 100644
--- a/web/src/components/overview/SoftwareSection.jsx
+++ b/web/src/components/overview/SoftwareSection.jsx
@@ -21,8 +21,9 @@
 
 import React, { useReducer, useEffect } from "react";
 import { Button } from "@patternfly/react-core";
-import { Em, ProgressText, Section } from "~/components/core";
+import { ProgressText, Section } from "~/components/core";
 import { Icon } from "~/components/layout";
+import { UsedSize } from "~/components/software";
 import { useCancellablePromise } from "~/utils";
 import { useInstallerClient } from "~/context/installer";
 import { BUSY } from "~/client/status";
@@ -112,17 +113,6 @@ export default function SoftwareSection({ showErrors }) {
 
   const errors = showErrors ? state.errors : [];
 
-  const UsedSize = () => {
-    if (state.size === "" || state.size === "0 B") return null;
-
-    // TRANSLATORS: %s will be replaced by the estimated installation size,
-    // example: "728.8 MiB"
-    const [msg1, msg2] = _("Installation will take %s").split("%s");
-    return (
-      <>{msg1}<Em>{state.size}</Em>{msg2}</>
-    );
-  };
-
   const SectionContent = () => {
     if (state.busy) {
       const { message, current, total } = state.progress;
@@ -133,7 +123,7 @@ export default function SoftwareSection({ showErrors }) {
 
     return (
       <>
-        <UsedSize />
+        <UsedSize size={state.size} />
         {errors.length > 0 &&
           <Button
             isInline
@@ -156,6 +146,7 @@ export default function SoftwareSection({ showErrors }) {
       icon="apps"
       loading={state.busy}
       errors={errors}
+      path="/software"
     >
       <SectionContent />
     </Section>
diff --git a/web/src/components/software/PatternGroup.jsx b/web/src/components/software/PatternGroup.jsx
new file mode 100644
index 0000000000..9c1b71a545
--- /dev/null
+++ b/web/src/components/software/PatternGroup.jsx
@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) [2023] SUSE LLC
+ *
+ * All Rights Reserved.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of version 2 of the GNU General Public License as published
+ * by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, contact SUSE LLC.
+ *
+ * To contact SUSE LLC about this file by physical or electronic mail, you may
+ * find current contact information at www.suse.com.
+ */
+
+import React from "react";
+import { Section } from "~/components/core";
+
+/**
+ * Pattern group component
+ * @component
+ * @param {string} name name of the group
+ * @param {JSX.Element} children the wrapped content with the patterns belonging to this group
+ * @returns {JSX.Element}
+ */
+export default function PatternGroup({ name, children }) {
+  return (
+    <Section title={name}>{children}</Section>
+  );
+}
diff --git a/web/src/components/software/PatternGroup.test.jsx b/web/src/components/software/PatternGroup.test.jsx
new file mode 100644
index 0000000000..d757172880
--- /dev/null
+++ b/web/src/components/software/PatternGroup.test.jsx
@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) [2023] SUSE LLC
+ *
+ * All Rights Reserved.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of version 2 of the GNU General Public License as published
+ * by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, contact SUSE LLC.
+ *
+ * To contact SUSE LLC about this file by physical or electronic mail, you may
+ * find current contact information at www.suse.com.
+ */
+
+import React from "react";
+
+import { screen } from "@testing-library/react";
+import { plainRender } from "~/test-utils";
+
+import PatternGroup from "./PatternGroup";
+
+describe("PatternGroup", () => {
+  const name = "Pattern name";
+  const content = "Just a children content";
+
+  it("displays the pattern name and the content", async () => {
+    plainRender(<PatternGroup name={name}>{content}</PatternGroup>);
+
+    // the name is displayed
+    screen.getByText(name);
+    // the content is displayed
+    screen.getByText(content);
+  });
+});
diff --git a/web/src/components/software/PatternItem.jsx b/web/src/components/software/PatternItem.jsx
new file mode 100644
index 0000000000..cc6f5ac7e8
--- /dev/null
+++ b/web/src/components/software/PatternItem.jsx
@@ -0,0 +1,135 @@
+/*
+ * Copyright (c) [2023] SUSE LLC
+ *
+ * All Rights Reserved.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of version 2 of the GNU General Public License as published
+ * by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, contact SUSE LLC.
+ *
+ * To contact SUSE LLC about this file by physical or electronic mail, you may
+ * find current contact information at www.suse.com.
+ */
+
+import React, { useEffect, useState } from "react";
+import { sprintf } from "sprintf-js";
+
+import cockpit from "../../lib/cockpit";
+
+import { useInstallerClient } from "~/context/installer";
+import { Icon } from "~/components/layout";
+import { _ } from "~/i18n";
+
+import iconAvailable from "./icons/package-available.svg";
+import iconInstall from "./icons/package-install.svg";
+import iconAutoInstall from "./icons/package-install-auto.svg";
+
+// path to pattern icons, %s is replaced by the icon name
+const ICON_PATH = "/usr/share/icons/hicolor/scalable/apps/%s.svg";
+
+/**
+ * Get checkbox status icon for the required pattern installation status
+ * @param {number} state pattern selection status
+ * @returns {string} Raw SVG icon data
+ */
+function stateIcon(state) {
+  switch (state) {
+    case 0:
+      return iconInstall;
+    case 1:
+      return iconAutoInstall;
+    default:
+      return iconAvailable;
+  }
+}
+
+/**
+ * Get ARIA label for the required pattern installation status
+ * @param {number} state pattern selection status
+ * @returns {string} Label
+ */
+function stateAriaLabel(selected) {
+  switch (selected) {
+    case 0:
+      // TRANSLATORS: pattern status, selected to install (by user)
+      return _("selected");
+    case 1:
+      // TRANSLATORS: pattern status, selected to install (by dependencies)
+      return _("automatically selected");
+    default:
+      // TRANSLATORS: pattern status, not selected to install
+      return _("not selected");
+  }
+}
+
+/**
+ * Pattern component
+ * @component
+ * @param {Pattern} pattern pattern to display
+ * @param {function} onChange callback called when the pattern status is changed
+ * @returns {JSX.Element}
+ */
+function PatternItem({ pattern, onChange }) {
+  const client = useInstallerClient();
+  const [icon, setIcon] = useState();
+
+  const onClick = () => {
+    switch (pattern.selected) {
+      // available pattern (not selected)
+      case undefined:
+        client.software.addPattern(pattern.name).then(onChange);
+        break;
+      // user selected
+      case 0:
+        client.software.removePattern(pattern.name).then(onChange);
+        break;
+      // auto selected
+      case 1:
+        // try to deselect an automatically selected pattern,
+        // that can work only for soft dependencies (Recommends, Suggests,...),
+        // the hard dependencies (Requires) cannot be changed
+        client.software.removePattern(pattern.name).then(onChange);
+        break;
+      default:
+        console.error("Unknown patterns status: ", pattern.selected);
+    }
+  };
+
+  // download the pattern icon from the system
+  useEffect(() => {
+    if (icon) return;
+    cockpit.file(sprintf(ICON_PATH, pattern.icon)).read()
+      .then((data) => { setIcon(data) });
+  }, [pattern.icon, icon]);
+
+  const patternIcon = (icon)
+    // use a Base64 encoded inline pattern image
+    ? <img src={"data:image/svg+xml;base64," + btoa(icon)} aria-hidden="true" />
+    // fallback icon
+    : <Icon name="apps" aria-hidden="true" />;
+
+  return (
+    <div className="pattern-container" onClick={onClick}>
+      <div className="pattern-checkbox">
+        <img src={stateIcon(pattern.selected)} aria-label={stateAriaLabel(pattern.selected)} />
+      </div>
+      <div className="pattern-label">
+        <div className="pattern-label-icon">
+          { patternIcon }
+        </div>
+        <div className="pattern-label-text">{pattern.summary}</div>
+      </div>
+      <div className="pattern-summary">{pattern.description}</div>
+    </div>
+  );
+}
+
+export default PatternItem;
diff --git a/web/src/components/software/PatternItem.test.jsx b/web/src/components/software/PatternItem.test.jsx
new file mode 100644
index 0000000000..295858cade
--- /dev/null
+++ b/web/src/components/software/PatternItem.test.jsx
@@ -0,0 +1,115 @@
+/*
+ * Copyright (c) [2023] SUSE LLC
+ *
+ * All Rights Reserved.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of version 2 of the GNU General Public License as published
+ * by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, contact SUSE LLC.
+ *
+ * To contact SUSE LLC about this file by physical or electronic mail, you may
+ * find current contact information at www.suse.com.
+ */
+
+import React from "react";
+import { act, screen } from "@testing-library/react";
+import { installerRender } from "~/test-utils";
+
+import { createClient } from "~/client";
+import cockpit from "../../lib/cockpit";
+
+import PatternItem from "./PatternItem";
+
+jest.mock("~/client");
+const addPatternFn = jest.fn().mockResolvedValue();
+const removePatternFn = jest.fn().mockResolvedValue();
+beforeEach(() => {
+  createClient.mockImplementation(() => {
+    return {
+      software: {
+        addPattern: addPatternFn,
+        removePattern: removePatternFn,
+      },
+    };
+  });
+});
+
+jest.mock("../../lib/cockpit");
+const readFn = jest.fn().mockResolvedValue("");
+const fileFn = jest.fn();
+fileFn.mockImplementation(() => {
+  return {
+    read: readFn
+  };
+});
+cockpit.file.mockImplementation(fileFn);
+
+const pattern = {
+  category: "Documentation",
+  description: "Help and Documentation, various books.",
+  icon: "./pattern-documentation",
+  name: "books",
+  order: "5200",
+  summary: "Documentation"
+};
+
+describe("PatternItem", () => {
+  it("displays the pattern summary and description", async () => {
+    await act(async () => installerRender(<PatternItem pattern={pattern} />));
+
+    // the summary is displayed
+    screen.getByText(pattern.summary);
+    // the description is displayed
+    screen.getByText(pattern.description);
+  });
+
+  it("displays the pattern icon if it as available", async () => {
+    readFn.mockResolvedValue("<?xml version=\"1.0\" ?>");
+    const { container } = await act(async () => installerRender(<PatternItem pattern={pattern} />));
+
+    expect(container.querySelector(".pattern-label-icon img")).not.toBeNull();
+  });
+
+  it("displays the generic fallback icon if the pattern icon is not available", async () => {
+    readFn.mockResolvedValue("");
+    const { container } = await act(async () => installerRender(<PatternItem pattern={pattern} />));
+
+    expect(container.querySelector(".pattern-label-icon svg")).not.toBeNull();
+  });
+
+  it("selects unselected pattern after clicking it", async () => {
+    pattern.selected = undefined;
+    const { container, user } = await act(async () => installerRender(<PatternItem pattern={pattern} />));
+
+    // console.log(prettyDOM(container));
+    await user.click(container.querySelector(".pattern-container"));
+
+    expect(addPatternFn).toHaveBeenCalledWith(pattern.name);
+  });
+
+  it("deselects selected pattern after clicking it", async () => {
+    pattern.selected = 0;
+    const { container, user } = await act(async () => installerRender(<PatternItem pattern={pattern} />));
+
+    await user.click(container.querySelector(".pattern-container"));
+
+    expect(removePatternFn).toHaveBeenCalledWith(pattern.name);
+  });
+
+  it("deselects automatically selected pattern after clicking it", async () => {
+    pattern.selected = 1;
+    const { container, user } = await act(async () => installerRender(<PatternItem pattern={pattern} />));
+
+    await user.click(container.querySelector(".pattern-container"));
+
+    expect(removePatternFn).toHaveBeenCalledWith(pattern.name);
+  });
+});
diff --git a/web/src/components/software/PatternSelector.jsx b/web/src/components/software/PatternSelector.jsx
new file mode 100644
index 0000000000..905bb40cf9
--- /dev/null
+++ b/web/src/components/software/PatternSelector.jsx
@@ -0,0 +1,227 @@
+/*
+ * Copyright (c) [2023] SUSE LLC
+ *
+ * All Rights Reserved.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of version 2 of the GNU General Public License as published
+ * by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, contact SUSE LLC.
+ *
+ * To contact SUSE LLC about this file by physical or electronic mail, you may
+ * find current contact information at www.suse.com.
+ */
+
+import React, { useCallback, useEffect, useState } from "react";
+import { SearchInput } from "@patternfly/react-core";
+import { sprintf } from "sprintf-js";
+
+import { useInstallerClient } from "~/context/installer";
+import { ValidationErrors } from "~/components/core";
+import PatternGroup from "./PatternGroup";
+import PatternItem from "./PatternItem";
+import UsedSize from "./UsedSize";
+import { _ } from "~/i18n";
+
+/**
+ * @typedef {Object} Pattern
+ * @property {string} name pattern name (internal ID)
+ * @property {string} group pattern group
+ * @property {string} summary pattern name (user visible)
+ * @property {string} description long description of the pattern
+ * @property {string} order display order (string!)
+ * @property {string} icon icon name (not path or file name!)
+ * @property {number|undefined} selected who selected the pattern, undefined
+ *   means it is not selected to install
+ */
+
+/**
+ * Convert DBus pattern data to JS objects
+ * @param {Object.<string, Array<string>>} pattern_data input pattern data
+ * @param {PatternSelection} selected selected patterns
+ * @returns {Array<Pattern>} converted patterns
+ */
+function convert(pattern_data, selected) {
+  const patterns = [];
+
+  Object.keys(pattern_data).forEach((name) => {
+    const pattern = pattern_data[name];
+
+    patterns.push({
+      name,
+      group: pattern[0],
+      description: pattern[1],
+      icon: pattern[2],
+      summary: pattern[3],
+      order: pattern[4],
+      selected: selected[name]
+    });
+  });
+
+  return patterns;
+}
+
+/**
+ * @typedef {Object.<string, Array<Pattern>} PatternGroups mapping "group name" =>
+ * list of patterns
+ */
+
+/**
+ * Group the patterns with the same group name
+ * @param {Array<Pattern>} patterns input
+ * @returns {PatternGroups}
+ */
+function groupPatterns(patterns) {
+  // group patterns
+  const pattern_groups = {};
+
+  patterns.forEach((pattern) => {
+    if (pattern_groups[pattern.group]) {
+      pattern_groups[pattern.group].push(pattern);
+    } else {
+      pattern_groups[pattern.group] = [pattern];
+    }
+  });
+
+  // sort patterns by the "order" value
+  Object.keys(pattern_groups).forEach((group) => {
+    pattern_groups[group].sort((p1, p2) => {
+      if (p1.order === p2.order) {
+        // there should be no patterns with the same name
+        return p1.name < p2.name ? -1 : 1;
+      } else {
+        // patterns with undefined (empty) order are always at the end
+        if (p1.order === "") return 1;
+        if (p2.order === "") return -1;
+
+        return p1.order < p2.order ? -1 : 1;
+      }
+    });
+  });
+
+  return pattern_groups;
+}
+
+/**
+ * Sort pattern group names
+ * @param {PatternGroups} groups input
+ * @returns {Array<string>} sorted pattern group names
+ */
+function sortGroups(groups) {
+  return Object.keys(groups).sort((g1, g2) => {
+    const order1 = groups[g1][0].order;
+    const order2 = groups[g2][0].order;
+
+    if (order1 === order2) {
+      return g1 === g2 ? 0 : (g1 < g2 ? -1 : 1);
+    }
+
+    // patterns with undefined (empty) order are always at the end
+    if (order1 === "") return 1;
+    if (order2 === "") return -1;
+
+    return order1 < order2 ? -1 : 1;
+  });
+}
+
+/**
+ * Pattern selector component
+ * @component
+ * @returns {JSX.Element}
+ */
+function PatternSelector() {
+  const [patterns, setPatterns] = useState();
+  const [selected, setSelected] = useState();
+  const [errors, setErrors] = useState([]);
+  const [used, setUsed] = useState();
+  const [searchValue, setSearchValue] = useState("");
+  const client = useInstallerClient();
+
+  const onSearchChange = (value) => {
+    setSearchValue(value);
+  };
+
+  // refresh the page content after changing a pattern status
+  const refreshCb = useCallback(() => {
+    const refresh = async () => {
+      setSelected(await client.software.selectedPatterns());
+      setUsed(await client.software.getUsedSpace());
+      setErrors(await client.software.getValidationErrors());
+    };
+
+    refresh();
+  }, [client.software]);
+
+  useEffect(() => {
+    // patterns already loaded
+    if (patterns) return;
+
+    const loadData = async () => {
+      setSelected(await client.software.selectedPatterns());
+      setUsed(await client.software.getUsedSpace());
+      setErrors(await client.software.getValidationErrors());
+      setPatterns(await client.software.patterns(true));
+    };
+
+    loadData();
+  }, [patterns, client.software]);
+
+  // initial empty screen, the patterns are loaded very quickly, no need for any progress
+  if (!patterns) return null;
+
+  let patternsData = convert(patterns, selected);
+
+  // filtering - search the required text in the name and pattern description
+  if (searchValue !== "") {
+    // case insensitive search
+    const searchData = searchValue.toUpperCase();
+    patternsData = patternsData.filter((p) =>
+      p.name.toUpperCase().indexOf(searchData) !== -1 ||
+      p.description.toUpperCase().indexOf(searchData) !== -1
+    );
+  }
+
+  const groups = groupPatterns(patternsData);
+
+  const selector = sortGroups(groups).map((group) => {
+    return (
+      <PatternGroup
+        key={group}
+        name={group}
+      >
+        { (groups[group]).map(p => <PatternItem key={p.name} pattern={p} onChange={refreshCb} />) }
+      </PatternGroup>
+    );
+  });
+
+  // TRANSLATORS: error summary, always plural, %d is replaced by number of errors (2 or more)
+  // if there is just a single error then the error is displayed directly instead of this summary
+  const errorLabel = sprintf(_("%d errors"), errors.length);
+
+  return (
+    <>
+      <UsedSize size={used} />
+      <ValidationErrors errors={errors} title={errorLabel} />
+      <SearchInput
+        // TRANSLATORS: search field placeholder text
+        placeholder={_("Search")}
+        value={searchValue}
+        onChange={(_event, value) => onSearchChange(value)}
+        onClear={() => onSearchChange("")}
+        // do not display the counter when search filter is empty
+        resultsCount={searchValue === "" ? 0 : patternsData.length}
+      />
+
+      { selector }
+    </>
+  );
+}
+
+export default PatternSelector;
diff --git a/web/src/components/software/PatternSelector.test.json b/web/src/components/software/PatternSelector.test.json
new file mode 100644
index 0000000000..e1d64533e2
--- /dev/null
+++ b/web/src/components/software/PatternSelector.test.json
@@ -0,0 +1,58 @@
+{
+  "32bit": [
+    "Base Technologies",
+    "This will install the 32-bit variant of all selected patterns. This allows to execute 32-bit software.",
+    "./pattern-cli",
+    "32-Bit Runtime Environment",
+    "1180"
+  ],
+  "base": [
+    "Base Technologies",
+    "This is the base runtime system.  It contains only a basic multiuser booting system. For running on real hardware, you need to add additional packages and pattern to make this pattern useful on its own.",
+    "./pattern-basis",
+    "Base System",
+    "1030"
+  ],
+  "documentation": [
+    "Documentation",
+    "Help and Support Documentation",
+    "./pattern-documentation",
+    "Help and Support Documentation",
+    "1005"
+  ],
+  "books": [
+    "Documentation",
+    "Help and Documentation, various books.",
+    "./pattern-documentation",
+    "Documentation",
+    "5200"
+  ],
+  "devel_C_C++": [
+    "Development",
+    "Tools and libraries for software development using C/C++ and other derivative\nof the C programming language.",
+    "./pattern-c-devel",
+    "C/C++ Development",
+    "3240"
+  ],
+  "devel_basis": [
+    "Development",
+    "Minimal set of tools for compiling and linking applications.",
+    "./pattern-basis-devel",
+    "Base Development",
+    "3140"
+  ],
+  "devel_rpm_build": [
+    "Development",
+    "Minimal set of tools and libraries for building packages using the RPM package manager.",
+    "./pattern-rpm-devel",
+    "RPM Build Environment",
+    "3280"
+  ],
+  "wsl_base": [
+    "Development",
+    "This package contains the wsl_base pattern: recommended configs,tools,libraries for using WSL.",
+    "./pattern-generic",
+    "Base WSL packages",
+    ""
+  ]
+}
diff --git a/web/src/components/software/PatternSelector.test.jsx b/web/src/components/software/PatternSelector.test.jsx
new file mode 100644
index 0000000000..58923ff724
--- /dev/null
+++ b/web/src/components/software/PatternSelector.test.jsx
@@ -0,0 +1,88 @@
+/*
+ * Copyright (c) [2023] SUSE LLC
+ *
+ * All Rights Reserved.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of version 2 of the GNU General Public License as published
+ * by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, contact SUSE LLC.
+ *
+ * To contact SUSE LLC about this file by physical or electronic mail, you may
+ * find current contact information at www.suse.com.
+ */
+
+import React from "react";
+import { act, screen } from "@testing-library/react";
+import { installerRender } from "~/test-utils";
+
+import { createClient } from "~/client";
+
+import test_patterns from "./PatternSelector.test.json";
+import PatternSelector from "./PatternSelector";
+
+jest.mock("~/client");
+const selectedPatternsFn = jest.fn().mockResolvedValue([]);
+const getUsedSpaceFn = jest.fn().mockResolvedValue();
+const getValidationErrorsFn = jest.fn().mockResolvedValue([]);
+const patternsFn = jest.fn().mockResolvedValue(test_patterns);
+
+beforeEach(() => {
+  createClient.mockImplementation(() => {
+    return {
+      software: {
+        selectedPatterns: selectedPatternsFn,
+        getUsedSpace: getUsedSpaceFn,
+        getValidationErrors: getValidationErrorsFn,
+        patterns: patternsFn
+      },
+    };
+  });
+});
+
+const PatternItemMock = ({ pattern }) => <span>{pattern.summary}</span>;
+jest.mock("~/components/software/PatternItem", () => ({ pattern }) => { return <PatternItemMock pattern={pattern} /> });
+
+describe("PatternSelector", () => {
+  it("displays the pattern groups in correct order", async () => {
+    const { container } = await act(async () => installerRender(<PatternSelector />));
+    const groups = Array.from(container.querySelectorAll("h2")).map((node) => node.textContent);
+
+    expect(groups).toEqual(["Documentation", "Base Technologies", "Development"]);
+  });
+
+  it("displays the patterns in a group in correct order", async () => {
+    await act(async () => installerRender(<PatternSelector />));
+
+    // the "Development" pattern group
+    const develGroup = screen.getByText("Development");
+    // the "Development" pattern names
+    const develPatterns = Array.from(develGroup.nextElementSibling.childNodes).map((node) => node.textContent);
+
+    // sorted by order, the WSL pattern with empty order is the last one
+    expect(develPatterns).toEqual(["Base Development", "C/C++ Development", "RPM Build Environment", "Base WSL packages"]);
+  });
+
+  it("displays only the matching patterns when using the search filter", async () => {
+    const { user } = await act(async () => installerRender(<PatternSelector />));
+
+    // enter "wsl" into the search filter
+    const searchFilter = screen.getByPlaceholderText("Search");
+    await user.type(searchFilter, "wsl");
+
+    // the "Development" pattern group
+    const develGroup = screen.getByText("Development");
+    // the "Development" pattern names
+    const develPatterns = Array.from(develGroup.nextElementSibling.childNodes).map((node) => node.textContent);
+
+    // only the WSL pattern is displayed
+    expect(develPatterns).toEqual(["Base WSL packages"]);
+  });
+});
diff --git a/web/src/components/software/SoftwarePage.jsx b/web/src/components/software/SoftwarePage.jsx
new file mode 100644
index 0000000000..30cab4cccb
--- /dev/null
+++ b/web/src/components/software/SoftwarePage.jsx
@@ -0,0 +1,87 @@
+/*
+ * Copyright (c) [2023] SUSE LLC
+ *
+ * All Rights Reserved.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of version 2 of the GNU General Public License as published
+ * by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, contact SUSE LLC.
+ *
+ * To contact SUSE LLC about this file by physical or electronic mail, you may
+ * find current contact information at www.suse.com.
+ */
+
+import React, { useState, useEffect } from "react";
+import { Skeleton } from "@patternfly/react-core";
+
+import { Page } from "~/components/core";
+import { Center } from "~/components/layout";
+import { PatternSelector } from "~/components/software";
+import { useInstallerClient } from "~/context/installer";
+import { useCancellablePromise } from "~/utils";
+import { BUSY } from "~/client/status";
+import { _ } from "~/i18n";
+
+/**
+ * Software page content depending on the current service state
+ * @component
+ * @param {number} status current backend service status
+ * @returns {JSX.Element}
+ */
+function Content({ status }) {
+  switch (status) {
+    case undefined:
+      return null;
+    case BUSY:
+      return (
+        <Center>
+          <Skeleton width="20%" />
+          <Skeleton width="35%" />
+          <Skeleton width="70%" />
+          <Skeleton width="65%" />
+          <Skeleton width="80%" />
+          <Skeleton width="75%" />
+        </Center>
+      );
+    default:
+      return <PatternSelector />;
+  }
+}
+
+/**
+ * Software page component
+ * @component
+ * @returns {JSX.Element}
+ */
+function SoftwarePage() {
+  const [status, setStatus] = useState();
+  const client = useInstallerClient();
+  const { cancellablePromise } = useCancellablePromise();
+
+  const updateStatus = (status) => {
+    setStatus(status);
+  };
+
+  useEffect(() => {
+    cancellablePromise(client.software.getStatus().then(updateStatus));
+
+    return client.software.onStatusChange(updateStatus);
+  }, [client, cancellablePromise]);
+
+  return (
+    // TRANSLATORS: page title
+    <Page title={_("Software")} icon="apps" actionLabel={_("Back")} actionVariant="secondary">
+      <Content status={status} />
+    </Page>
+  );
+}
+
+export default SoftwarePage;
diff --git a/web/src/components/software/SoftwarePage.test.jsx b/web/src/components/software/SoftwarePage.test.jsx
new file mode 100644
index 0000000000..2f49e4cab7
--- /dev/null
+++ b/web/src/components/software/SoftwarePage.test.jsx
@@ -0,0 +1,69 @@
+/*
+ * Copyright (c) [2023] SUSE LLC
+ *
+ * All Rights Reserved.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of version 2 of the GNU General Public License as published
+ * by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, contact SUSE LLC.
+ *
+ * To contact SUSE LLC about this file by physical or electronic mail, you may
+ * find current contact information at www.suse.com.
+ */
+
+import React from "react";
+
+import { act, screen } from "@testing-library/react";
+import { installerRender } from "~/test-utils";
+import { BUSY, IDLE } from "~/client/status";
+import { createClient } from "~/client";
+
+import SoftwarePage from "./SoftwarePage";
+
+const SkeletonMock = "Skeleton mock";
+jest.mock("@patternfly/react-core", () => {
+  const original = jest.requireActual("@patternfly/react-core");
+
+  return {
+    ...original,
+    Skeleton: () => { return <span>{SkeletonMock}</span> }
+  };
+});
+
+const PatternSelectorMock = "PatternSelector mock";
+jest.mock("~/components/software/PatternSelector", () => () => { return PatternSelectorMock });
+jest.mock("~/client");
+const getStatusFn = jest.fn();
+const onStatusChangeFn = jest.fn();
+beforeEach(() => {
+  createClient.mockImplementation(() => {
+    return {
+      software: {
+        getStatus: getStatusFn,
+        onStatusChange: onStatusChangeFn
+      },
+    };
+  });
+});
+
+describe("SoftwarePage", () => {
+  it("displays a progress when the backend in busy", async () => {
+    getStatusFn.mockResolvedValue(BUSY);
+    await act(async () => installerRender(<SoftwarePage />));
+    screen.getAllByText(SkeletonMock);
+  });
+
+  it("displays the PatternSelector when the backend in ready", async () => {
+    getStatusFn.mockResolvedValue(IDLE);
+    await act(async () => installerRender(<SoftwarePage />));
+    screen.getByText(PatternSelectorMock);
+  });
+});
diff --git a/web/src/components/software/UsedSize.jsx b/web/src/components/software/UsedSize.jsx
new file mode 100644
index 0000000000..6e68738244
--- /dev/null
+++ b/web/src/components/software/UsedSize.jsx
@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) [2023] SUSE LLC
+ *
+ * All Rights Reserved.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of version 2 of the GNU General Public License as published
+ * by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, contact SUSE LLC.
+ *
+ * To contact SUSE LLC about this file by physical or electronic mail, you may
+ * find current contact information at www.suse.com.
+ */
+
+import React from "react";
+
+import { Em } from "~/components/core";
+import { _ } from "~/i18n";
+
+export default function UsedSize({ size }) {
+  if (size === undefined || size === "" || size === "0 B") return null;
+
+  // TRANSLATORS: %s will be replaced by the estimated installation size,
+  // example: "728.8 MiB"
+  const [msg1, msg2] = _("Installation will take %s").split("%s");
+  return (
+    <>{msg1}<Em>{size}</Em>{msg2}</>
+  );
+}
diff --git a/web/src/components/software/UsedSize.test.jsx b/web/src/components/software/UsedSize.test.jsx
new file mode 100644
index 0000000000..173d3c3842
--- /dev/null
+++ b/web/src/components/software/UsedSize.test.jsx
@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) [2023] SUSE LLC
+ *
+ * All Rights Reserved.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of version 2 of the GNU General Public License as published
+ * by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, contact SUSE LLC.
+ *
+ * To contact SUSE LLC about this file by physical or electronic mail, you may
+ * find current contact information at www.suse.com.
+ */
+
+import React from "react";
+import { screen } from "@testing-library/react";
+import { plainRender } from "~/test-utils";
+
+import UsedSize from "./UsedSize";
+
+describe("UsedSize", () => {
+  it("returns empty component when the size is undefined", () => {
+    const { container } = plainRender(<UsedSize />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("returns empty component when the size is empty string", () => {
+    const { container } = plainRender(<UsedSize size="" />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("returns empty component when the size is zero", () => {
+    const { container } = plainRender(<UsedSize size="0 B" />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("returns summary text with the size", () => {
+    const size = "1.4 GiB";
+    plainRender(<UsedSize size={size} />);
+
+    screen.getByText(size);
+  });
+});
diff --git a/web/src/components/software/icons/README.md b/web/src/components/software/icons/README.md
new file mode 100644
index 0000000000..c945854d48
--- /dev/null
+++ b/web/src/components/software/icons/README.md
@@ -0,0 +1,4 @@
+# Status Icons
+
+The package status icons were copied from the [libyui-qt-pkg](
+https://github.com/libyui/libyui/tree/master/libyui-qt-pkg/src/icons) package.
diff --git a/web/src/components/software/icons/package-available.svg b/web/src/components/software/icons/package-available.svg
new file mode 100644
index 0000000000..2b491bf978
--- /dev/null
+++ b/web/src/components/software/icons/package-available.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+<!--
+
+Copyright (C) 2018 Stasiek Michalski <hellcp@opensuse.org>
+
+This image is freely licensed under the terms of Creative
+Commons Attribution-ShareAlike 4.0 International license.
+You can read terms of the license on:
+https://creativecommons.org/licenses/by-sa/4.0/legalcode
+
+-->
+  <path d="M 2 0 C 0.892 0 0 0.892 0 2 L 0 14 C 0 15.108 0.892 16 2 16 L 14 16 C 15.108 16 16 15.108 16 14 L 16 2 C 16 0.892 15.108 0 14 0 L 2 0 z M 2 2 L 14 2 L 14 14 L 2 14 L 2 2 z " fill="#241f31" />
+  <rect y="2" x="2" height="12" width="12" fill="#ffffff" opacity="1" />
+</svg>
diff --git a/web/src/components/software/icons/package-install-auto.svg b/web/src/components/software/icons/package-install-auto.svg
new file mode 100644
index 0000000000..73657e94a5
--- /dev/null
+++ b/web/src/components/software/icons/package-install-auto.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+<!--
+
+Copyright (C) 2018 Stasiek Michalski <hellcp@opensuse.org>
+
+This image is freely licensed under the terms of Creative
+Commons Attribution-ShareAlike 4.0 International license.
+You can read terms of the license on:
+https://creativecommons.org/licenses/by-sa/4.0/legalcode
+
+-->
+  <path opacity="1" fill="#ffffff" d="M 2 2 L 2 14 L 3 14 L 3 16 L 13 16 L 13 14 L 14 14 L 14 2 L 2 2 z " />
+  <path d="M 2 0 C 0.892 0 0 0.892 0 2 L 0 14 C 0 15.108 0.892 16 2 16 L 3 16 L 3 14 L 2 14 L 2 2 L 14 2 L 14 2.8789062 L 8 8.8789062 L 5.0605469 5.9394531 L 2.9394531 8.0605469 L 8 13.121094 L 14 7.1210938 L 14 14 L 13 14 L 13 16 L 14 16 C 15.108 16 16 15.108 16 14 L 16 5.1210938 L 16 3 L 16 2 C 16 0.892 15.108 0 14 0 L 2 0 z M 4 14 L 4 15 L 4 16 L 5 16 L 6 16 L 6 15 L 6 14 L 5 14 L 4 14 z M 7 14 L 7 15 L 7 16 L 8 16 L 9 16 L 9 15 L 9 14 L 8 14 L 7 14 z M 10 14 L 10 15 L 10 16 L 11 16 L 12 16 L 12 15 L 12 14 L 11 14 L 10 14 z " fill="#241f31" />
+  <path d="M 14 2.8789062 L 8 8.8789062 L 5.0605469 5.9394531 L 2.9394531 8.0605469 L 8 13.121094 L 14 7.1210938 L 14 2.8789062 z " class="success" fill="#33d17a" />
+</svg>
diff --git a/web/src/components/software/icons/package-install.svg b/web/src/components/software/icons/package-install.svg
new file mode 100644
index 0000000000..98715df4ff
--- /dev/null
+++ b/web/src/components/software/icons/package-install.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+<!--
+
+Copyright (C) 2018 Stasiek Michalski <hellcp@opensuse.org>
+
+This image is freely licensed under the terms of Creative
+Commons Attribution-ShareAlike 4.0 International license.
+You can read terms of the license on:
+https://creativecommons.org/licenses/by-sa/4.0/legalcode
+
+-->
+  <rect y="2" x="2" height="12" width="12" fill="#ffffff" opacity="1" />
+  <path d="M 2 0 C 0.892 0 0 0.892 0 2 L 0 14 C 0 15.108 0.892 16 2 16 L 14 16 C 15.108 16 16 15.108 16 14 L 16 5.1210938 L 16 3 L 16 2 C 16 0.892 15.108 0 14 0 L 2 0 z M 2 2 L 14 2 L 14 2.8789062 L 8 8.8789062 L 5.0605469 5.9394531 L 2.9394531 8.0605469 L 8 13.121094 L 14 7.1210938 L 14 14 L 2 14 L 2 2 z " fill="#241f31" />
+  <path d="M 14 2.8789062 L 8 8.8789062 L 5.0605469 5.9394531 L 2.9394531 8.0605469 L 8 13.121094 L 14 7.1210938 L 14 2.8789062 z " fill="#33d17a" class="success" />
+</svg>
diff --git a/web/src/components/software/index.js b/web/src/components/software/index.js
index deeecb0918..b2c6fef467 100644
--- a/web/src/components/software/index.js
+++ b/web/src/components/software/index.js
@@ -21,3 +21,6 @@
 
 export { default as ProductSelectionPage } from "./ProductSelectionPage";
 export { default as ChangeProductLink } from "./ChangeProductLink";
+export { default as PatternSelector } from "./PatternSelector";
+export { default as UsedSize } from "./UsedSize";
+export { default as SoftwarePage } from "./SoftwarePage";
diff --git a/web/src/index.js b/web/src/index.js
index 44c1a5570b..5585cbd8c0 100644
--- a/web/src/index.js
+++ b/web/src/index.js
@@ -40,7 +40,7 @@ import App from "~/App";
 import Main from "~/Main";
 import DevServerWrapper from "~/DevServerWrapper";
 import { Overview } from "~/components/overview";
-import { ProductSelectionPage } from "~/components/software";
+import { ProductSelectionPage, SoftwarePage } from "~/components/software";
 import { ProposalPage as StoragePage, ISCSIPage, DASDPage, ZFCPPage } from "~/components/storage";
 import { UsersPage } from "~/components/users";
 import { L10nPage } from "~/components/l10n";
@@ -82,6 +82,7 @@ root.render(
                   <Route index element={<Overview />} />
                   <Route path="/overview" element={<Overview />} />
                   <Route path="/l10n" element={<L10nPage />} />
+                  <Route path="/software" element={<SoftwarePage />} />
                   <Route path="/storage" element={<StoragePage />} />
                   <Route path="/storage/iscsi" element={<ISCSIPage />} />
                   <Route path="/storage/dasd" element={<DASDPage />} />