diff --git a/lib/components/Base/ChangelogListBase.tsx b/lib/components/Base/ChangelogListBase.tsx
new file mode 100644
index 0000000..c19b5c9
--- /dev/null
+++ b/lib/components/Base/ChangelogListBase.tsx
@@ -0,0 +1,111 @@
+import { Box, Card, CardContent, Chip, Divider, Typography } from '@mui/joy';
+import * as React from 'react';
+import { ChangeType } from '../../changelog.types.ts';
+import {
+  ChangelogWithComponents,
+  ChangeTypeMap,
+  getTypeColor,
+} from '../changelog.util.ts';
+
+interface Props {
+  changelogs?: ChangelogWithComponents[];
+  changeTypeMapper?: Record<ChangeType, string>;
+  typeColorResolver?: (type: ChangeType) => string;
+  hideEntryType?: boolean;
+}
+
+export const ChangelogListBase: React.FC<Props> = ({
+  changelogs = [],
+  changeTypeMapper = ChangeTypeMap,
+  typeColorResolver = getTypeColor,
+  hideEntryType = false,
+}) => (
+  <Box
+    sx={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 3,
+    }}
+  >
+    {changelogs.map((changelog, index) => (
+      <Card key={`changelogs-${index}`} variant={'soft'}>
+        <Box sx={() => ({ mb: 1 })}>
+          <Typography level="h1">Version {changelog.version}</Typography>
+          <Typography level="h4" color={'neutral'}>
+            {new Intl.DateTimeFormat('de-DE', {
+              year: 'numeric',
+              month: '2-digit',
+              day: '2-digit',
+            }).format(new Date(changelog.releaseDate))}
+          </Typography>
+          <Divider
+            sx={{
+              mt: 1,
+              mb: 2,
+              mx: -2,
+            }}
+          />
+          {changelog.description && (
+            <Typography color={'neutral'}>{changelog.description}</Typography>
+          )}
+        </Box>
+        <CardContent
+          sx={{
+            gap: 2,
+          }}
+        >
+          {changelog.entries.map((entry) => (
+            <Card
+              key={`changelogs-${index}-components-${entry.component}`}
+              variant={'outlined'}
+            >
+              {entry.component && (
+                <>
+                  <Typography level="title-lg">{entry.component}</Typography>
+                  <Divider
+                    sx={{
+                      mx: -2,
+                    }}
+                  />
+                </>
+              )}
+              <CardContent
+                sx={{
+                  gap: 2,
+                }}
+              >
+                {entry.changelogs.map((entry, entryIndex) => (
+                  <Box
+                    key={`changelogs-${changelog.version}-entry-${entryIndex}`}
+                    sx={{
+                      display: 'flex',
+                      flexDirection: 'row',
+                      gap: 0.5,
+                      alignItems: 'baseline',
+                    }}
+                  >
+                    <Typography level="body-sm" sx={{ flexGrow: 1 }}>
+                      {entry.description}
+                    </Typography>
+                    {!hideEntryType && (
+                      <Chip
+                        sx={{
+                          color: typeColorResolver(entry.changeType),
+                          flexShrink: 0,
+                          width: 'auto',
+                        }}
+                        variant={'outlined'}
+                      >
+                        {changeTypeMapper[entry.changeType]}
+                      </Chip>
+                    )}
+                  </Box>
+                ))}
+              </CardContent>
+            </Card>
+          ))}
+        </CardContent>
+      </Card>
+    ))}
+  </Box>
+);
diff --git a/lib/components/Base/index.ts b/lib/components/Base/index.ts
new file mode 100644
index 0000000..35600c9
--- /dev/null
+++ b/lib/components/Base/index.ts
@@ -0,0 +1 @@
+export * from './ChangelogListBase.tsx';
diff --git a/lib/components/ChangelogList/ChangelogList.tsx b/lib/components/ChangelogList/ChangelogList.tsx
index 132c42c..e2b385a 100644
--- a/lib/components/ChangelogList/ChangelogList.tsx
+++ b/lib/components/ChangelogList/ChangelogList.tsx
@@ -3,12 +3,10 @@ import { useUpdateHiveContext } from '../ChangelogContext';
 import { ChangeType } from '../../changelog.types.ts';
 import {
   ChangelogWithComponents,
-  ChangeTypeMap,
-  getTypeColor,
   groupChangelogsByComponents,
   ungroupedChangelogs,
 } from '../changelog.util.ts';
-import ComponentList from './_internal/ComponentList.tsx';
+import { ChangelogListBase } from '../Base';
 import { GroupBy } from './ChangelogList.types.ts';
 import { useMemo } from 'react';
 
@@ -16,6 +14,7 @@ interface Props {
   groupBy?: GroupBy;
   changeTypeMapper?: Record<ChangeType, string>;
   typeColorResolver?: (type: ChangeType) => string;
+  hideEntryType?: boolean;
 }
 
 /**
@@ -24,12 +23,14 @@ interface Props {
  * @param changeTypeMapper Overridable mapping of change types to displayable representations.
  * @param typeColorResolver Overridable function to resolve the color of a change type.
  * @param groupBy Group changelogs by component or show a simple list.
+ * @param hideEntryType Hide the type of the changelog entry.
  * @constructor
  */
 export const ChangelogList: React.FC<Props> = ({
-  changeTypeMapper = ChangeTypeMap,
-  typeColorResolver = getTypeColor,
+  changeTypeMapper,
+  typeColorResolver,
   groupBy = GroupBy.COMPONENT,
+  hideEntryType = false,
 }) => {
   const { data } = useUpdateHiveContext();
 
@@ -47,14 +48,11 @@ export const ChangelogList: React.FC<Props> = ({
     }, [data, groupBy]);
 
   return (
-    <>
-      {componentChangelogs && (
-        <ComponentList
-          changelogs={componentChangelogs}
-          changeTypeMapper={changeTypeMapper}
-          typeColorResolver={typeColorResolver}
-        />
-      )}
-    </>
+    <ChangelogListBase
+      changelogs={componentChangelogs}
+      changeTypeMapper={changeTypeMapper}
+      typeColorResolver={typeColorResolver}
+      hideEntryType={hideEntryType}
+    />
   );
 };
diff --git a/lib/components/ChangelogList/MinimalChangelogList.tsx b/lib/components/ChangelogList/MinimalChangelogList.tsx
index 57d1886..d0c2736 100644
--- a/lib/components/ChangelogList/MinimalChangelogList.tsx
+++ b/lib/components/ChangelogList/MinimalChangelogList.tsx
@@ -2,28 +2,25 @@ import * as React from 'react';
 import { useUpdateHiveContext } from '../ChangelogContext';
 import {
   ChangelogWithComponents,
-  ChangeTypeMap,
-  getTypeColor,
   ungroupedChangelogs,
 } from '../changelog.util.ts';
 import { ChangeType } from '../../changelog.types.ts';
 import { useMemo } from 'react';
-import ComponentList from './_internal/ComponentList.tsx';
+import { ChangelogListBase } from '../Base';
 
 interface Props {
   changeTypeMapper?: Record<ChangeType, string>;
 }
 
 /**
+ * @deprecated Use `ChangelogList` with groupBy=GroupBy.NONE instead and hideEntryType=true.
  * Component which renders a minimal changelog list.
  *
  * The list is only ordered by creation.
  *
  * @param changeTypeMapper Overridable mapping of change types to displayable representations.
  */
-export const MinimalChangelogList: React.FC<Props> = ({
-  changeTypeMapper = ChangeTypeMap,
-}) => {
+export const MinimalChangelogList: React.FC<Props> = ({ changeTypeMapper }) => {
   const { data } = useUpdateHiveContext();
 
   const componentChangelogs: ChangelogWithComponents[] | undefined =
@@ -36,15 +33,10 @@ export const MinimalChangelogList: React.FC<Props> = ({
     }, [data]);
 
   return (
-    <>
-      {componentChangelogs && (
-        <ComponentList
-          changelogs={componentChangelogs}
-          changeTypeMapper={changeTypeMapper}
-          typeColorResolver={getTypeColor}
-          hideEntryType
-        />
-      )}
-    </>
+    <ChangelogListBase
+      changelogs={componentChangelogs}
+      changeTypeMapper={changeTypeMapper}
+      hideEntryType
+    />
   );
 };
diff --git a/lib/components/ChangelogList/_internal/ComponentList.tsx b/lib/components/ChangelogList/_internal/ComponentList.tsx
deleted file mode 100644
index 27b775a..0000000
--- a/lib/components/ChangelogList/_internal/ComponentList.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import { Box, Card, CardContent, Chip, Divider, Typography } from '@mui/joy';
-import * as React from 'react';
-import { ChangeType } from '../../../changelog.types.ts';
-import { ChangelogWithComponents } from '../../changelog.util.ts';
-
-interface Props {
-  changelogs: ChangelogWithComponents[];
-  changeTypeMapper: Record<ChangeType, string>;
-  typeColorResolver: (type: ChangeType) => string;
-  hideEntryType?: boolean;
-}
-
-const ComponentList: React.FC<Props> = ({
-  changelogs,
-  changeTypeMapper,
-  typeColorResolver,
-  hideEntryType = false,
-}) => {
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 3,
-      }}
-    >
-      {changelogs.map((changelog, index) => (
-        <Card key={`changelogs-${index}`} variant={'soft'}>
-          <Box sx={() => ({ mb: 1 })}>
-            <Typography level="h1">Version {changelog.version}</Typography>
-            <Typography level="h4" color={'neutral'}>
-              {new Intl.DateTimeFormat('de-DE', {
-                year: 'numeric',
-                month: '2-digit',
-                day: '2-digit',
-              }).format(new Date(changelog.releaseDate))}
-            </Typography>
-            <Divider
-              sx={{
-                mt: 1,
-                mb: 2,
-                mx: -2,
-              }}
-            />
-            {changelog.description && (
-              <Typography color={'neutral'}>{changelog.description}</Typography>
-            )}
-          </Box>
-          <CardContent
-            sx={{
-              gap: 2,
-            }}
-          >
-            {changelog.entries.map((entry) => (
-              <Card
-                key={`changelogs-${index}-components-${entry.component}`}
-                variant={'outlined'}
-              >
-                {entry.component && (
-                  <>
-                    <Typography level="title-lg">{entry.component}</Typography>
-                    <Divider
-                      sx={{
-                        mx: -2,
-                      }}
-                    />
-                  </>
-                )}
-                <CardContent
-                  sx={{
-                    gap: 2,
-                  }}
-                >
-                  {entry.changelogs.map((entry, entryIndex) => (
-                    <Box
-                      key={`changelogs-${changelog.version}-entry-${entryIndex}`}
-                      sx={{
-                        display: 'flex',
-                        flexDirection: 'row',
-                        gap: 0.5,
-                        alignItems: 'baseline',
-                      }}
-                    >
-                      <Typography level="body-sm" sx={{ flexGrow: 1 }}>
-                        {entry.description}
-                      </Typography>
-                      {!hideEntryType && (
-                        <Chip
-                          sx={{
-                            color: typeColorResolver(entry.changeType),
-                            flexShrink: 0,
-                            width: 'auto',
-                          }}
-                          variant={'outlined'}
-                        >
-                          {changeTypeMapper[entry.changeType]}
-                        </Chip>
-                      )}
-                    </Box>
-                  ))}
-                </CardContent>
-              </Card>
-            ))}
-          </CardContent>
-        </Card>
-      ))}
-    </Box>
-  );
-};
-
-export default ComponentList;
diff --git a/lib/components/changelog.util.ts b/lib/components/changelog.util.ts
index d805cb2..880f2ad 100644
--- a/lib/components/changelog.util.ts
+++ b/lib/components/changelog.util.ts
@@ -65,7 +65,7 @@ export const groupChangelogsByComponents = (
 };
 
 export interface ComponentEntries {
-  component?: string;
+  component: string;
   changelogs: ChangelogEntryInterface[];
 }
 
@@ -89,5 +89,15 @@ export const groupChangelogByComponents = (
     componentsArray.push({ component, changelogs });
   });
 
+  componentsArray.sort((a, b) => {
+    if (a.component === 'Weitere Neuerungen') {
+      return 1;
+    }
+    if (b.component === 'Weitere Neuerungen') {
+      return -1;
+    }
+    return a.component.localeCompare(b.component);
+  });
+
   return componentsArray;
 };
diff --git a/lib/updatehive-react.ts b/lib/updatehive-react.ts
index fd69700..e0f9b55 100644
--- a/lib/updatehive-react.ts
+++ b/lib/updatehive-react.ts
@@ -8,6 +8,8 @@ export type {
 
 export { useChangelogs } from './changelog.hook';
 
+export * from './components/changelog.util';
+export * from './components/Base';
 export { ChangelogContainer } from './components/ChangelogContainer';
 export { useUpdateHiveContext } from './components/ChangelogContext';
 export {
diff --git a/src/App.tsx b/src/App.tsx
index 52a41fa..49db0cc 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,8 +1,12 @@
 import * as React from 'react';
+import { Box, Tab, TabList, TabPanel, Tabs } from '@mui/joy';
 import {
   ChangelogContainer,
   ChangelogList,
   useChangelogs,
+  ChangelogListBase,
+  groupChangelogsByComponents,
+  GroupBy,
 } from '../dist/updatehive-react';
 
 export const App: React.FC = () => {
@@ -25,35 +29,61 @@ export const App: React.FC = () => {
   }
 
   return (
-    <div>
+    <Box>
       <h1>UpdateHive - React Client Component</h1>
-      <h3>Example using UpdateHive react hook</h3>
-      <div>
-        {loading || error || data === undefined ? (
-          <div>Loading changelogs ...</div>
-        ) : (
+      <h3>Examples using UpdateHive react components</h3>
+      <Tabs>
+        <TabList>
+          <Tab>Hook</Tab>
+          <Tab>Minimal</Tab>
+          <Tab>ChangelogList</Tab>
+          <Tab>Base</Tab>
+        </TabList>
+        <TabPanel value={0}>
+          <h3>Example using UpdateHive react hook</h3>
           <div>
-            <div className="hook table" key={'header'}>
-              <div className="hook div">Version</div>
-              <div className="hook div">Description</div>
-            </div>
-            {data.map((changelog, index) => (
-              <div className="hook table" key={`changelog-${index}`}>
-                <div className="hook div">{changelog.version}</div>
-                <div className="hook div">{changelog.description}</div>
+            {loading || error || data === undefined ? (
+              <div>Loading changelogs ...</div>
+            ) : (
+              <div>
+                <div className="hook table" key={'header'}>
+                  <div className="hook div">Version</div>
+                  <div className="hook div">Description</div>
+                </div>
+                {data.map((changelog, index) => (
+                  <div className="hook table" key={`changelog-${index}`}>
+                    <div className="hook div">{changelog.version}</div>
+                    <div className="hook div">{changelog.description}</div>
+                  </div>
+                ))}
               </div>
-            ))}
+            )}
           </div>
-        )}
-      </div>
-      <h3>Example using UpdateHive react components</h3>
-      <ChangelogContainer
-        API_KEY={API_KEY}
-        product={PRODUCT}
-        config={{ url: serviceURL }}
-      >
-        <ChangelogList />
-      </ChangelogContainer>
-    </div>
+        </TabPanel>
+        <TabPanel value={1}>
+          <ChangelogContainer
+            API_KEY={API_KEY}
+            product={PRODUCT}
+            config={{ url: serviceURL }}
+          >
+            <ChangelogList groupBy={GroupBy.NONE} hideEntryType />
+          </ChangelogContainer>
+        </TabPanel>
+        <TabPanel value={2}>
+          <ChangelogContainer
+            API_KEY={API_KEY}
+            product={PRODUCT}
+            config={{ url: serviceURL }}
+          >
+            <ChangelogList />
+          </ChangelogContainer>
+        </TabPanel>
+        <TabPanel value={3}>
+          <ChangelogListBase
+            changelogs={data && groupChangelogsByComponents(data)}
+          />
+        </TabPanel>
+      </Tabs>
+    </Box>
   );
 };