diff --git a/extensions/apps/antenna/project.json b/extensions/apps/antenna/project.json
index 3bc94e8330..0c8cc303e0 100644
--- a/extensions/apps/antenna/project.json
+++ b/extensions/apps/antenna/project.json
@@ -6,6 +6,7 @@
   "targets": {
     "prepare": {
       "dependsOn": [
+        "@akashaorg/ui:prepare",
         "@akashaorg/ui-core-hooks:build",
         "@akashaorg/design-system-core:prepare",
         "@akashaorg/design-system-components:prepare",
@@ -30,10 +31,7 @@
         "cwd": "extensions/apps/antenna",
         "command": "webpack --config webpack.config.cjs"
       },
-      "outputs": [
-        "{projectRoot}/lib",
-        "{workspaceRoot}/dist/apps/antenna"
-      ]
+      "outputs": ["{projectRoot}/lib", "{workspaceRoot}/dist/apps/antenna"]
     },
     "translations": {
       "executor": "./tools/executors/i18n:extract",
diff --git a/extensions/apps/antenna/src/components/app-routes/error-component.tsx b/extensions/apps/antenna/src/components/app-routes/error-component.tsx
index 69698074bf..9ec66e3ec1 100644
--- a/extensions/apps/antenna/src/components/app-routes/error-component.tsx
+++ b/extensions/apps/antenna/src/components/app-routes/error-component.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader from '@akashaorg/ui/lib/akasha-components/error-loader';
 import { useTranslation } from 'react-i18next';
 
 type ErrorComponentProps = {
diff --git a/extensions/apps/antenna/src/components/app-routes/not-found-component.tsx b/extensions/apps/antenna/src/components/app-routes/not-found-component.tsx
index 8da87ae4f6..9e1b105c98 100644
--- a/extensions/apps/antenna/src/components/app-routes/not-found-component.tsx
+++ b/extensions/apps/antenna/src/components/app-routes/not-found-component.tsx
@@ -1,8 +1,7 @@
 import React, { useEffect } from 'react';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader, { ErrorLoaderButton } from '@akashaorg/ui/lib/akasha-components/error-loader';
 import { useTranslation } from 'react-i18next';
 import { useRootComponentProps } from '@akashaorg/ui-core-hooks';
-import Button from '@akashaorg/design-system-core/lib/components/Button';
 
 export const NotFoundComponent = (props: { error?: Error; reset?: (key: string) => void }) => {
   const { t } = useTranslation();
@@ -30,7 +29,9 @@ export const NotFoundComponent = (props: { error?: Error; reset?: (key: string)
         { worldTitle: worldConfig.title },
       )}
     >
-      <Button label={t('Home')} variant="primary" size="md" onClick={navigateHome} />
+      <ErrorLoaderButton variant="default" onClick={navigateHome}>
+        {t('Home')}
+      </ErrorLoaderButton>
     </ErrorLoader>
   );
 };
diff --git a/extensions/apps/antenna/src/components/pages/editor-page/editor-page.tsx b/extensions/apps/antenna/src/components/pages/editor-page/editor-page.tsx
index 4735938e56..eef96425c3 100644
--- a/extensions/apps/antenna/src/components/pages/editor-page/editor-page.tsx
+++ b/extensions/apps/antenna/src/components/pages/editor-page/editor-page.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import Stack from '@akashaorg/design-system-core/lib/components/Stack';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
-import Button from '@akashaorg/design-system-core/lib/components/Button';
+import ErrorLoader, { ErrorLoaderButton } from '@akashaorg/ui/lib/akasha-components/error-loader';
 import { useTranslation } from 'react-i18next';
 import { Extension } from '@akashaorg/ui-lib-extensions/lib/react/extension';
 import { useAkashaStore, useRootComponentProps } from '@akashaorg/ui-core-hooks';
@@ -28,10 +27,8 @@ const EditorPage: React.FC<unknown> = () => {
               title={t('Uh-oh! You are not connected!')}
               details={t('To create Beams you must be connected ⚡️')}
             >
-              <Button
-                label={t('Connect')}
-                size="md"
-                variant="primary"
+              <ErrorLoaderButton
+                variant="default"
                 onClick={() =>
                   navigateTo.current({
                     appName: '@akashaorg/app-auth-ewa',
@@ -39,7 +36,9 @@ const EditorPage: React.FC<unknown> = () => {
                       `${navRoutes.Connect}?redirectTo=${encodeURIComponent(location.pathname)}`,
                   })
                 }
-              />
+              >
+                {t('Connect')}
+              </ErrorLoaderButton>
             </ErrorLoader>
           </Stack>
         )}
diff --git a/extensions/apps/antenna/src/components/pages/tag-feed-page/tag-feed-page.tsx b/extensions/apps/antenna/src/components/pages/tag-feed-page/tag-feed-page.tsx
index a49b5b5472..26820c539b 100644
--- a/extensions/apps/antenna/src/components/pages/tag-feed-page/tag-feed-page.tsx
+++ b/extensions/apps/antenna/src/components/pages/tag-feed-page/tag-feed-page.tsx
@@ -16,7 +16,7 @@ import {
 import { BeamContentResolver, TagFeed } from '@akashaorg/ui-lib-feed';
 import { Helmet, HelmetProvider } from 'react-helmet-async';
 import getSDK from '@akashaorg/core-sdk';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader from '@akashaorg/ui/lib/akasha-components/error-loader';
 import Stack from '@akashaorg/design-system-core/lib/components/Stack';
 import TagProfileCard from '@akashaorg/design-system-components/lib/components/TagProfileCard';
 import TagFeedHeaderLoader from './tag-feed-header-loader';
diff --git a/extensions/apps/auth-app/project.json b/extensions/apps/auth-app/project.json
index 62aaa985ee..c9d639b2d9 100644
--- a/extensions/apps/auth-app/project.json
+++ b/extensions/apps/auth-app/project.json
@@ -6,6 +6,7 @@
   "targets": {
     "prepare": {
       "dependsOn": [
+        "@akashaorg/ui:prepare",
         "@akashaorg/ui-core-hooks:build",
         "@akashaorg/design-system-core:prepare",
         "@akashaorg/design-system-components:prepare",
diff --git a/extensions/apps/auth-app/src/components/app-routes/error-component.tsx b/extensions/apps/auth-app/src/components/app-routes/error-component.tsx
index 4ed1f1e8fd..0833962b9c 100644
--- a/extensions/apps/auth-app/src/components/app-routes/error-component.tsx
+++ b/extensions/apps/auth-app/src/components/app-routes/error-component.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader from '@akashaorg/ui/lib/akasha-components/error-loader';
 import { useTranslation } from 'react-i18next';
 
 type ErrorComponentProps = {
diff --git a/extensions/apps/auth-app/src/components/app-routes/not-found-component.tsx b/extensions/apps/auth-app/src/components/app-routes/not-found-component.tsx
index d133c8c023..a498f56fc0 100644
--- a/extensions/apps/auth-app/src/components/app-routes/not-found-component.tsx
+++ b/extensions/apps/auth-app/src/components/app-routes/not-found-component.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader, { ErrorLoaderButton } from '@akashaorg/ui/lib/akasha-components/error-loader';
 import { useTranslation } from 'react-i18next';
 import { useRootComponentProps } from '@akashaorg/ui-core-hooks';
 import Button from '@akashaorg/design-system-core/lib/components/Button';
@@ -30,7 +30,9 @@ export const NotFoundComponent = (props: { error?: Error; reset?: (key: string)
         { worldTitle: worldConfig.title },
       )}
     >
-      <Button label={t('Home')} variant="primary" size="md" onClick={navigateHome} />
+      <ErrorLoaderButton variant="default" onClick={navigateHome}>
+        {t('Home')}
+      </ErrorLoaderButton>
     </ErrorLoader>
   );
 };
diff --git a/extensions/apps/extensions/project.json b/extensions/apps/extensions/project.json
index 30b4edab48..e91715073d 100644
--- a/extensions/apps/extensions/project.json
+++ b/extensions/apps/extensions/project.json
@@ -6,6 +6,7 @@
   "targets": {
     "prepare": {
       "dependsOn": [
+        "@akashaorg/ui:prepare",
         "@akashaorg/ui-core-hooks:build",
         "@akashaorg/design-system-core:prepare",
         "@akashaorg/design-system-components:prepare",
diff --git a/extensions/apps/extensions/src/components/app-routes/error-component.tsx b/extensions/apps/extensions/src/components/app-routes/error-component.tsx
index 81985a44b3..96c208f334 100644
--- a/extensions/apps/extensions/src/components/app-routes/error-component.tsx
+++ b/extensions/apps/extensions/src/components/app-routes/error-component.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader from '@akashaorg/ui/lib/akasha-components/error-loader';
 import { useTranslation } from 'react-i18next';
 
 type ErrorComponentProps = {
diff --git a/extensions/apps/extensions/src/components/app-routes/not-found-component.tsx b/extensions/apps/extensions/src/components/app-routes/not-found-component.tsx
index 51cf1385ec..594f267537 100644
--- a/extensions/apps/extensions/src/components/app-routes/not-found-component.tsx
+++ b/extensions/apps/extensions/src/components/app-routes/not-found-component.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader from '@akashaorg/ui/lib/akasha-components/error-loader';
 import { useTranslation } from 'react-i18next';
 import { useRootComponentProps } from '@akashaorg/ui-core-hooks';
-import Button from '@akashaorg/design-system-core/lib/components/Button';
+import { ErrorLoaderButton } from '@akashaorg/ui/lib/akasha-components/error-loader';
 
 export const NotFoundComponent = (props: { error?: Error; reset?: (key: string) => void }) => {
   const { t } = useTranslation();
@@ -15,7 +15,7 @@ export const NotFoundComponent = (props: { error?: Error; reset?: (key: string)
   }, [logger, props.error]);
 
   const navigateHome = () => {
-        getCorePlugins().routing.navigateTo({
+    getCorePlugins().routing.navigateTo({
       appName: worldConfig.homepageApp,
       getNavigationUrl: () => '/',
     });
@@ -30,7 +30,9 @@ export const NotFoundComponent = (props: { error?: Error; reset?: (key: string)
         { worldTitle: worldConfig.title },
       )}
     >
-      <Button label={t('Home')} variant="primary" onClick={navigateHome} />
+      <ErrorLoaderButton variant="default" onClick={navigateHome}>
+        {t('Home')}
+      </ErrorLoaderButton>
     </ErrorLoader>
   );
 };
diff --git a/extensions/apps/extensions/src/components/pages/developer-mode.tsx b/extensions/apps/extensions/src/components/pages/developer-mode.tsx
index f07aa99d02..3dca914d6b 100644
--- a/extensions/apps/extensions/src/components/pages/developer-mode.tsx
+++ b/extensions/apps/extensions/src/components/pages/developer-mode.tsx
@@ -4,7 +4,7 @@ import { useNavigate } from '@tanstack/react-router';
 import { useAkashaStore, useRootComponentProps } from '@akashaorg/ui-core-hooks';
 import { NotificationEvents, NotificationTypes } from '@akashaorg/typings/lib/ui';
 import Button from '@akashaorg/design-system-core/lib/components/Button';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader, { ErrorLoaderButton } from '@akashaorg/ui/lib/akasha-components/error-loader';
 import Link from '@akashaorg/design-system-core/lib/components/Link';
 import Text from '@akashaorg/design-system-core/lib/components/Text';
 import Toggle from '@akashaorg/design-system-core/lib/components/Toggle';
@@ -77,12 +77,9 @@ export const DeveloperModePage: React.FC<unknown> = () => {
         title={`${t('Uh-oh')}! ${t('You are not connected')}!`}
         details={`${t('To toggle developer mode you must be connected')} ⚡️`}
       >
-        <Button
-          variant="primary"
-          size="md"
-          label={t('Connect')}
-          onClick={handleConnectButtonClick}
-        />
+        <ErrorLoaderButton variant="default" onClick={handleConnectButtonClick}>
+          {t('Connect')}
+        </ErrorLoaderButton>
       </ErrorLoader>
     );
   }
diff --git a/extensions/apps/extensions/src/components/pages/extension-creation-page/extension-creation-page.tsx b/extensions/apps/extensions/src/components/pages/extension-creation-page/extension-creation-page.tsx
index 209466eafa..5ac1c76a7d 100644
--- a/extensions/apps/extensions/src/components/pages/extension-creation-page/extension-creation-page.tsx
+++ b/extensions/apps/extensions/src/components/pages/extension-creation-page/extension-creation-page.tsx
@@ -13,7 +13,7 @@ import Text from '@akashaorg/design-system-core/lib/components/Text';
 import Divider from '@akashaorg/design-system-core/lib/components/Divider';
 import ExtensionCreationForm from '@akashaorg/design-system-components/lib/components/ExtensionCreationForm';
 import { DRAFT_EXTENSIONS } from '../../../constants';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader, { ErrorLoaderButton } from '@akashaorg/ui/lib/akasha-components/error-loader';
 import Button from '@akashaorg/design-system-core/lib/components/Button';
 import { Extension, NotificationEvents, NotificationTypes } from '@akashaorg/typings/lib/ui';
 
@@ -78,12 +78,9 @@ export const ExtensionCreationPage: React.FC<unknown> = () => {
         title={`${t('Uh-oh')}! ${t('You are not connected')}!`}
         details={`${t('To create an extension you must be connected')} ⚡️`}
       >
-        <Button
-          variant="primary"
-          size="md"
-          label={t('Connect')}
-          onClick={handleConnectButtonClick}
-        />
+        <ErrorLoaderButton variant="default" onClick={handleConnectButtonClick}>
+          {t('Connect')}
+        </ErrorLoaderButton>
       </ErrorLoader>
     );
   }
diff --git a/extensions/apps/extensions/src/components/pages/extension-creation-page/post-extension-creation-page.tsx b/extensions/apps/extensions/src/components/pages/extension-creation-page/post-extension-creation-page.tsx
index dc89003b30..4dfe89cf76 100644
--- a/extensions/apps/extensions/src/components/pages/extension-creation-page/post-extension-creation-page.tsx
+++ b/extensions/apps/extensions/src/components/pages/extension-creation-page/post-extension-creation-page.tsx
@@ -8,7 +8,7 @@ import Stack from '@akashaorg/design-system-core/lib/components/Stack';
 import DidField from '@akashaorg/design-system-core/lib/components/DidField';
 import Text from '@akashaorg/design-system-core/lib/components/Text';
 import { DRAFT_EXTENSIONS } from '../../../constants';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader, { ErrorLoaderButton } from '@akashaorg/ui/lib/akasha-components/error-loader';
 import Button from '@akashaorg/design-system-core/lib/components/Button';
 import AppAvatar from '@akashaorg/design-system-core/lib/components/AppAvatar';
 import Icon from '@akashaorg/design-system-core/lib/components/Icon';
@@ -56,12 +56,9 @@ export const PostExtensionCreationPage: React.FC<{ extensionId: string }> = ({ e
         title={`${t('Uh-oh')}! ${t('You are not connected')}!`}
         details={`${t('To view this page you must be connected')} ⚡️`}
       >
-        <Button
-          variant="primary"
-          size="md"
-          label={t('Connect')}
-          onClick={handleConnectButtonClick}
-        />
+        <ErrorLoaderButton variant="default" onClick={handleConnectButtonClick}>
+          {t('Connect')}
+        </ErrorLoaderButton>
       </ErrorLoader>
     );
   }
diff --git a/extensions/apps/extensions/src/components/pages/extension-edit-page/contributors-page.tsx b/extensions/apps/extensions/src/components/pages/extension-edit-page/contributors-page.tsx
index 5c8be487ee..593df930ea 100644
--- a/extensions/apps/extensions/src/components/pages/extension-edit-page/contributors-page.tsx
+++ b/extensions/apps/extensions/src/components/pages/extension-edit-page/contributors-page.tsx
@@ -28,7 +28,7 @@ import { useNavigate } from '@tanstack/react-router';
 import { AtomContext } from './main-page';
 import { useAtom } from 'jotai';
 import { DRAFT_EXTENSIONS, MAX_CONTRIBUTORS } from '../../../constants';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader from '@akashaorg/ui/lib/akasha-components/error-loader';
 
 export type ExtensionEditContributorsPageProps = {
   extensionId: string;
diff --git a/extensions/apps/extensions/src/components/pages/extension-edit-page/main-page.tsx b/extensions/apps/extensions/src/components/pages/extension-edit-page/main-page.tsx
index ad35c0c481..09f73dc12a 100644
--- a/extensions/apps/extensions/src/components/pages/extension-edit-page/main-page.tsx
+++ b/extensions/apps/extensions/src/components/pages/extension-edit-page/main-page.tsx
@@ -7,8 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { useAkashaStore, useRootComponentProps } from '@akashaorg/ui-core-hooks';
 import { AppImageSource } from '@akashaorg/typings/lib/sdk/graphql-types-new';
 import { ExtensionEditStep2FormValues } from '@akashaorg/design-system-components/lib/components/ExtensionEditStep2Form';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
-import Button from '@akashaorg/design-system-core/lib/components/Button';
+import ErrorLoader, { ErrorLoaderButton } from '@akashaorg/ui/lib/akasha-components/error-loader';
 
 export const AtomContext = createContext(null);
 
@@ -82,12 +81,9 @@ export const ExtensionEditMainPage: React.FC<ExtensionEditMainPageProps> = ({ ex
         title={`${t('Uh-oh')}! ${t('You are not connected')}!`}
         details={`${t('To check your extensions you must be connected')} ⚡️`}
       >
-        <Button
-          variant="primary"
-          size="md"
-          label={t('Connect')}
-          onClick={handleConnectButtonClick}
-        />
+        <ErrorLoaderButton variant="default" onClick={handleConnectButtonClick}>
+          {t('Connect')}
+        </ErrorLoaderButton>
       </ErrorLoader>
     );
   }
diff --git a/extensions/apps/extensions/src/components/pages/extension-edit-published-page/edit-published-extension-page.tsx b/extensions/apps/extensions/src/components/pages/extension-edit-published-page/edit-published-extension-page.tsx
index 5bfe17e292..88c39bacb8 100644
--- a/extensions/apps/extensions/src/components/pages/extension-edit-published-page/edit-published-extension-page.tsx
+++ b/extensions/apps/extensions/src/components/pages/extension-edit-published-page/edit-published-extension-page.tsx
@@ -6,7 +6,7 @@ import { useGetAppsByIdQuery, useUpdateAppMutation } from '@akashaorg/ui-core-ho
 import Stack from '@akashaorg/design-system-core/lib/components/Stack';
 import Text from '@akashaorg/design-system-core/lib/components/Text';
 import Icon from '@akashaorg/design-system-core/lib/components/Icon';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader from '@akashaorg/ui/lib/akasha-components/error-loader';
 import { ArrowPathIcon } from '@heroicons/react/24/outline';
 import ExtensionEditPublishedForm, {
   ExtensionEditPublishedFormValues,
diff --git a/extensions/apps/extensions/src/components/pages/extension-edit-published-page/main-page.tsx b/extensions/apps/extensions/src/components/pages/extension-edit-published-page/main-page.tsx
index 310b116570..4e50afa592 100644
--- a/extensions/apps/extensions/src/components/pages/extension-edit-published-page/main-page.tsx
+++ b/extensions/apps/extensions/src/components/pages/extension-edit-published-page/main-page.tsx
@@ -6,8 +6,7 @@ import appRoutes, { EDIT_PUBLISHED_EXTENSION } from '../../../routes';
 import { useTranslation } from 'react-i18next';
 import { useAkashaStore, useRootComponentProps } from '@akashaorg/ui-core-hooks';
 import { AppImageSource, AppLinkSource } from '@akashaorg/typings/lib/sdk/graphql-types-new';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
-import Button from '@akashaorg/design-system-core/lib/components/Button';
+import ErrorLoader, { ErrorLoaderButton } from '@akashaorg/ui/lib/akasha-components/error-loader';
 
 export const AtomContext = createContext(null);
 
@@ -71,12 +70,9 @@ export const ExtensionEditPublishedMainPage: React.FC<ExtensionEditPublishedMain
         title={`${t('Uh-oh')}! ${t('You are not connected')}!`}
         details={`${t('To check your extensions you must be connected')} ⚡️`}
       >
-        <Button
-          variant="primary"
-          size="md"
-          label={t('Connect')}
-          onClick={handleConnectButtonClick}
-        />
+        <ErrorLoaderButton variant="default" onClick={handleConnectButtonClick}>
+          {t('Connect')}
+        </ErrorLoaderButton>
       </ErrorLoader>
     );
   }
diff --git a/extensions/apps/extensions/src/components/pages/extension-publish-page/index.tsx b/extensions/apps/extensions/src/components/pages/extension-publish-page/index.tsx
index e691e838f8..1352a50ffd 100644
--- a/extensions/apps/extensions/src/components/pages/extension-publish-page/index.tsx
+++ b/extensions/apps/extensions/src/components/pages/extension-publish-page/index.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate } from '@tanstack/react-router';
 import Stack from '@akashaorg/design-system-core/lib/components/Stack';
 import Text from '@akashaorg/design-system-core/lib/components/Text';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader, { ErrorLoaderButton } from '@akashaorg/ui/lib/akasha-components/error-loader';
 import Button from '@akashaorg/design-system-core/lib/components/Button';
 import Card from '@akashaorg/design-system-core/lib/components/Card';
 import Spinner from '@akashaorg/design-system-core/lib/components/Spinner';
@@ -220,12 +220,9 @@ export const ExtensionPublishPage: React.FC<ExtensionPublishPageProps> = ({ exte
         title={`${t('Uh-oh')}! ${t('You are not connected')}!`}
         details={`${t('To check your extensions you must be connected')} ⚡️`}
       >
-        <Button
-          variant="primary"
-          size="md"
-          label={t('Connect')}
-          onClick={handleConnectButtonClick}
-        />
+        <ErrorLoaderButton variant="default" onClick={handleConnectButtonClick}>
+          {t('Connect')}
+        </ErrorLoaderButton>
       </ErrorLoader>
     );
   }
diff --git a/extensions/apps/extensions/src/components/pages/extension-release-manager/edit-test-release-page.tsx b/extensions/apps/extensions/src/components/pages/extension-release-manager/edit-test-release-page.tsx
index 9a92ac7d00..a328f694f6 100644
--- a/extensions/apps/extensions/src/components/pages/extension-release-manager/edit-test-release-page.tsx
+++ b/extensions/apps/extensions/src/components/pages/extension-release-manager/edit-test-release-page.tsx
@@ -4,8 +4,7 @@ import { useNavigate } from '@tanstack/react-router';
 import Stack from '@akashaorg/design-system-core/lib/components/Stack';
 import Card from '@akashaorg/design-system-core/lib/components/Card';
 import Text from '@akashaorg/design-system-core/lib/components/Text';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
-import Button from '@akashaorg/design-system-core/lib/components/Button';
+import ErrorLoader, { ErrorLoaderButton } from '@akashaorg/ui/lib/akasha-components/error-loader';
 import { useAkashaStore, useRootComponentProps } from '@akashaorg/ui-core-hooks';
 import { NotificationEvents, NotificationTypes } from '@akashaorg/typings/lib/ui';
 import ExtensionReleasePublishForm from '@akashaorg/design-system-components/lib/components/ExtensionReleasePublishForm';
@@ -188,12 +187,9 @@ export const EditTestReleasePage: React.FC<EditTestReleasePageProps> = ({
         title={`${t('Uh-oh')}! ${t('You are not connected')}!`}
         details={`${t('To check your extensions you must be connected')} ⚡️`}
       >
-        <Button
-          variant="primary"
-          size="md"
-          label={t('Connect')}
-          onClick={handleConnectButtonClick}
-        />
+        <ErrorLoaderButton variant="default" onClick={handleConnectButtonClick}>
+          {t('Connect')}
+        </ErrorLoaderButton>
       </ErrorLoader>
     );
   }
diff --git a/extensions/apps/extensions/src/components/pages/extension-release-manager/extension-release-manager-page.tsx b/extensions/apps/extensions/src/components/pages/extension-release-manager/extension-release-manager-page.tsx
index 59660b9c35..5223460c4f 100644
--- a/extensions/apps/extensions/src/components/pages/extension-release-manager/extension-release-manager-page.tsx
+++ b/extensions/apps/extensions/src/components/pages/extension-release-manager/extension-release-manager-page.tsx
@@ -4,7 +4,7 @@ import { useNavigate } from '@tanstack/react-router';
 import Stack from '@akashaorg/design-system-core/lib/components/Stack';
 import Card from '@akashaorg/design-system-core/lib/components/Card';
 import Text from '@akashaorg/design-system-core/lib/components/Text';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader, { ErrorLoaderButton } from '@akashaorg/ui/lib/akasha-components/error-loader';
 import Button from '@akashaorg/design-system-core/lib/components/Button';
 import InfoCard from '@akashaorg/design-system-core/lib/components/InfoCard';
 import Pill from '@akashaorg/design-system-core/lib/components/Pill';
@@ -249,12 +249,9 @@ export const ExtensionReleaseManagerPage: React.FC<ExtensionReleaseManagerPagePr
         title={`${t('Uh-oh')}! ${t('You are not connected')}!`}
         details={`${t('To check your extensions you must be connected')} ⚡️`}
       >
-        <Button
-          variant="primary"
-          size="md"
-          label={t('Connect')}
-          onClick={handleConnectButtonClick}
-        />
+        <ErrorLoaderButton variant="default" onClick={handleConnectButtonClick}>
+          {t('Connect')}
+        </ErrorLoaderButton>
       </ErrorLoader>
     );
   }
diff --git a/extensions/apps/extensions/src/components/pages/extension-release-manager/release-info-page.tsx b/extensions/apps/extensions/src/components/pages/extension-release-manager/release-info-page.tsx
index 383093729f..f178b08045 100644
--- a/extensions/apps/extensions/src/components/pages/extension-release-manager/release-info-page.tsx
+++ b/extensions/apps/extensions/src/components/pages/extension-release-manager/release-info-page.tsx
@@ -3,15 +3,13 @@ import { useTranslation } from 'react-i18next';
 import Stack from '@akashaorg/design-system-core/lib/components/Stack';
 import Card from '@akashaorg/design-system-core/lib/components/Card';
 import Text from '@akashaorg/design-system-core/lib/components/Text';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
-import Button from '@akashaorg/design-system-core/lib/components/Button';
+import ErrorLoader, { ErrorLoaderButton } from '@akashaorg/ui/lib/akasha-components/error-loader';
 import Spinner from '@akashaorg/design-system-core/lib/components/Spinner';
 import { useAkashaStore, useRootComponentProps } from '@akashaorg/ui-core-hooks';
 import { Extension, NotificationEvents, NotificationTypes } from '@akashaorg/typings/lib/ui';
 import { ExtensionElement } from '../my-extensions/extension-element';
 import { DRAFT_EXTENSIONS, PROPERTY, PROVIDER } from '../../../constants';
 import { useGetAppReleaseByIdQuery } from '@akashaorg/ui-core-hooks/lib/generated';
-import Pill from '@akashaorg/design-system-core/lib/components/Pill';
 import Divider from '@akashaorg/design-system-core/lib/components/Divider';
 import { formatDate } from '@akashaorg/design-system-core/lib/utils';
 import {
@@ -141,12 +139,9 @@ export const ExtensionReleaseInfoPage: React.FC<ExtensionReleaseInfoPageProps> =
         title={`${t('Uh-oh')}! ${t('You are not connected')}!`}
         details={`${t('To check your extensions you must be connected')} ⚡️`}
       >
-        <Button
-          variant="primary"
-          size="md"
-          label={t('Connect')}
-          onClick={handleConnectButtonClick}
-        />
+        <ErrorLoaderButton variant="default" onClick={handleConnectButtonClick}>
+          {t('Connect')}
+        </ErrorLoaderButton>
       </ErrorLoader>
     );
   }
diff --git a/extensions/apps/extensions/src/components/pages/extension-release-manager/release-publish-page.tsx b/extensions/apps/extensions/src/components/pages/extension-release-manager/release-publish-page.tsx
index b600d0346f..c54669a72f 100644
--- a/extensions/apps/extensions/src/components/pages/extension-release-manager/release-publish-page.tsx
+++ b/extensions/apps/extensions/src/components/pages/extension-release-manager/release-publish-page.tsx
@@ -4,8 +4,7 @@ import { useNavigate } from '@tanstack/react-router';
 import Stack from '@akashaorg/design-system-core/lib/components/Stack';
 import Card from '@akashaorg/design-system-core/lib/components/Card';
 import Text from '@akashaorg/design-system-core/lib/components/Text';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
-import Button from '@akashaorg/design-system-core/lib/components/Button';
+import ErrorLoader, { ErrorLoaderButton } from '@akashaorg/ui/lib/akasha-components/error-loader';
 import { useAkashaStore, useRootComponentProps } from '@akashaorg/ui-core-hooks';
 import { NotificationEvents, NotificationTypes } from '@akashaorg/typings/lib/ui';
 import ExtensionReleasePublishForm from '@akashaorg/design-system-components/lib/components/ExtensionReleasePublishForm';
@@ -120,12 +119,9 @@ export const ExtensionReleasePublishPage: React.FC<ExtensionReleasePublishPagePr
         title={`${t('Uh-oh')}! ${t('You are not connected')}!`}
         details={`${t('To check your extensions you must be connected')} ⚡️`}
       >
-        <Button
-          variant="primary"
-          size="md"
-          label={t('Connect')}
-          onClick={handleConnectButtonClick}
-        />
+        <ErrorLoaderButton variant="default" onClick={handleConnectButtonClick}>
+          {t('Connect')}
+        </ErrorLoaderButton>
       </ErrorLoader>
     );
   }
diff --git a/extensions/apps/extensions/src/components/pages/info-page/info-page.tsx b/extensions/apps/extensions/src/components/pages/info-page/info-page.tsx
index 791e77d786..7f34675c2b 100644
--- a/extensions/apps/extensions/src/components/pages/info-page/info-page.tsx
+++ b/extensions/apps/extensions/src/components/pages/info-page/info-page.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useMemo, useRef, useState } from 'react';
 import { useNavigate } from '@tanstack/react-router';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader from '@akashaorg/ui/lib/akasha-components/error-loader';
 import {
   ChevronRightIcon,
   FlagIcon,
diff --git a/extensions/apps/extensions/src/components/pages/info-page/sub-pages/contributors-page/index.tsx b/extensions/apps/extensions/src/components/pages/info-page/sub-pages/contributors-page/index.tsx
index b4fc96ff3f..77e129fb67 100644
--- a/extensions/apps/extensions/src/components/pages/info-page/sub-pages/contributors-page/index.tsx
+++ b/extensions/apps/extensions/src/components/pages/info-page/sub-pages/contributors-page/index.tsx
@@ -5,7 +5,7 @@ import Stack from '@akashaorg/design-system-core/lib/components/Stack';
 import ProfileAvatarButton from '@akashaorg/design-system-core/lib/components/ProfileAvatarButton';
 import Icon from '@akashaorg/design-system-core/lib/components/Icon';
 import Spinner from '@akashaorg/design-system-core/lib/components/Spinner';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader from '@akashaorg/ui/lib/akasha-components/error-loader';
 import ExtensionSubRouteHeader from '../../InfoSubroutePageHeader';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from '@tanstack/react-router';
diff --git a/extensions/apps/extensions/src/components/pages/info-page/sub-pages/dev-info-page.tsx b/extensions/apps/extensions/src/components/pages/info-page/sub-pages/dev-info-page.tsx
index 85d4faa40a..c90f9652fa 100644
--- a/extensions/apps/extensions/src/components/pages/info-page/sub-pages/dev-info-page.tsx
+++ b/extensions/apps/extensions/src/components/pages/info-page/sub-pages/dev-info-page.tsx
@@ -18,7 +18,7 @@ import {
 import Button from '@akashaorg/design-system-core/lib/components/Button';
 import Spinner from '@akashaorg/design-system-core/lib/components/Spinner';
 import { NetworkStatus } from '@apollo/client';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader from '@akashaorg/ui/lib/akasha-components/error-loader';
 import DefaultEmptyCard from '@akashaorg/design-system-components/lib/components/DefaultEmptyCard';
 import { getExtensionTypeLabel } from '../../../../utils/extension-utils';
 
@@ -145,7 +145,7 @@ export const DevInfoPage = (props: DevInfoPageProps) => {
             <>
               <Divider />
               <ErrorLoader
-                noWrapperCard={true}
+                className="border-none bg-transparent"
                 type="list-not-available"
                 title={`${t('Uh-oh')}!${t("We couldn't load the extension list")}!`}
                 details={`${t('It seems there is a problem retreving the list of extensions')}. ${t('Please try again later')}!`}
diff --git a/extensions/apps/extensions/src/components/pages/info-page/sub-pages/releases-page.tsx b/extensions/apps/extensions/src/components/pages/info-page/sub-pages/releases-page.tsx
index 33ca8e1553..9366e6de9a 100644
--- a/extensions/apps/extensions/src/components/pages/info-page/sub-pages/releases-page.tsx
+++ b/extensions/apps/extensions/src/components/pages/info-page/sub-pages/releases-page.tsx
@@ -15,7 +15,7 @@ import { useGetAppsReleasesQuery } from '@akashaorg/ui-core-hooks/lib/generated'
 import { formatDate } from '@akashaorg/design-system-core/lib/utils';
 import { NetworkStatus } from '@apollo/client';
 import Button from '@akashaorg/design-system-core/lib/components/Button';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader from '@akashaorg/ui/lib/akasha-components/error-loader';
 import Spinner from '@akashaorg/design-system-core/lib/components/Spinner';
 import {
   selectAppsReleases,
@@ -101,7 +101,7 @@ export const ReleasesPage = (props: ReleasesPageProps) => {
             <>
               <Divider />
               <ErrorLoader
-                noWrapperCard={true}
+                className="border-none bg-transparent"
                 type="list-not-available"
                 title={t('Loading error')}
                 details={t('There was an error loading the releases')}
diff --git a/extensions/apps/extensions/src/components/pages/install-extension/install-extension-page.tsx b/extensions/apps/extensions/src/components/pages/install-extension/install-extension-page.tsx
index 88de1c923f..87ae895942 100644
--- a/extensions/apps/extensions/src/components/pages/install-extension/install-extension-page.tsx
+++ b/extensions/apps/extensions/src/components/pages/install-extension/install-extension-page.tsx
@@ -4,7 +4,7 @@ import InstallApp, {
 } from '@akashaorg/design-system-components/lib/components/InstallApp';
 import { useTranslation } from 'react-i18next';
 import { useAkashaStore, useRootComponentProps } from '@akashaorg/ui-core-hooks';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader from '@akashaorg/ui/lib/akasha-components/error-loader';
 import Button from '@akashaorg/design-system-core/lib/components/Button';
 import { useGetAppsByPublisherDidQuery } from '@akashaorg/ui-core-hooks/lib/generated';
 import {
diff --git a/extensions/apps/extensions/src/components/pages/install-extension/install-terms-conditions.tsx b/extensions/apps/extensions/src/components/pages/install-extension/install-terms-conditions.tsx
index 2934094128..cd7c3bc64e 100644
--- a/extensions/apps/extensions/src/components/pages/install-extension/install-terms-conditions.tsx
+++ b/extensions/apps/extensions/src/components/pages/install-extension/install-terms-conditions.tsx
@@ -21,7 +21,7 @@ import Divider from '@akashaorg/design-system-core/lib/components/Divider';
 import { useGetAppsByPublisherDidQuery } from '@akashaorg/ui-core-hooks/lib/generated';
 import getSDK from '@akashaorg/core-sdk';
 import { useAkashaStore, useRootComponentProps } from '@akashaorg/ui-core-hooks';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader from '@akashaorg/ui/lib/akasha-components/error-loader';
 import {
   selectAkashaApp,
   selectAppDisplayName,
diff --git a/extensions/apps/extensions/src/components/pages/installed-extensions/default-extensions-list.tsx b/extensions/apps/extensions/src/components/pages/installed-extensions/default-extensions-list.tsx
index 20665cbae6..a945025a18 100644
--- a/extensions/apps/extensions/src/components/pages/installed-extensions/default-extensions-list.tsx
+++ b/extensions/apps/extensions/src/components/pages/installed-extensions/default-extensions-list.tsx
@@ -5,7 +5,7 @@ import Stack from '@akashaorg/design-system-core/lib/components/Stack';
 import Text from '@akashaorg/design-system-core/lib/components/Text';
 import Spinner from '@akashaorg/design-system-core/lib/components/Spinner';
 import Button from '@akashaorg/design-system-core/lib/components/Button';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader from '@akashaorg/ui/lib/akasha-components/error-loader';
 import { transformSource, useRootComponentProps } from '@akashaorg/ui-core-hooks';
 import { useGetAppsByPublisherDidQuery } from '@akashaorg/ui-core-hooks/lib/generated';
 import { selectApps } from '@akashaorg/ui-core-hooks/lib/selectors/get-apps-by-publisher-did-query';
@@ -90,19 +90,10 @@ export const DefaultExtensionsList = () => {
       )}
       {error && (
         <ErrorLoader
-          title={
-            <Text variant="h5" align="center" selectable={false}>
-              {t(`Uh-oh! We couldn't load`)} <br />
-              {t(`the extensions list!`)}
-            </Text>
-          }
-          details={
-            <Text variant="body2" align="center" selectable={false} customStyle="w-60 sm:w-auto">
-              {t(`It seems there's a problem with the server. Please try again later!`)}
-            </Text>
-          }
+          title={t(`Uh-oh! We couldn't load the extensions list!`)}
+          details={t(`It seems there's a problem with the server. Please try again later!`)}
           type="list-not-available"
-          noWrapperCard={true}
+          className="border-none bg-transparent"
         />
       )}
       {defaultExtensions?.length > 0 && (
diff --git a/extensions/apps/extensions/src/components/pages/installed-extensions/installed-extensions-list.tsx b/extensions/apps/extensions/src/components/pages/installed-extensions/installed-extensions-list.tsx
index d08a75911d..f22e09c037 100644
--- a/extensions/apps/extensions/src/components/pages/installed-extensions/installed-extensions-list.tsx
+++ b/extensions/apps/extensions/src/components/pages/installed-extensions/installed-extensions-list.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import AppList from '@akashaorg/design-system-components/lib/components/AppList';
 import Button from '@akashaorg/design-system-core/lib/components/Button';
 import Card from '@akashaorg/design-system-core/lib/components/Card';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader, { ErrorLoaderButton } from '@akashaorg/ui/lib/akasha-components/error-loader';
 import Image from '@akashaorg/design-system-core/lib/components/Image';
 import Stack from '@akashaorg/design-system-core/lib/components/Stack';
 import Text from '@akashaorg/design-system-core/lib/components/Text';
@@ -89,12 +89,9 @@ export const InstalledExtensionsList = () => {
         title={`${t('Uh-oh')}! ${t('You are not connected')}!`}
         details={`${t('To check installed extensions you must be connected')} ⚡️`}
       >
-        <Button
-          variant="primary"
-          size="md"
-          label={t('Connect')}
-          onClick={handleConnectButtonClick}
-        />
+        <ErrorLoaderButton variant="default" onClick={handleConnectButtonClick}>
+          {t('Connect')}
+        </ErrorLoaderButton>
       </ErrorLoader>
     );
 
@@ -115,17 +112,8 @@ export const InstalledExtensionsList = () => {
     <>
       {error && (
         <ErrorLoader
-          title={
-            <Text variant="h5" align="center" selectable={false}>
-              {t(`Uh-oh! We couldn't load`)} <br />
-              {t(`the extensions list!`)}
-            </Text>
-          }
-          details={
-            <Text variant="body2" align="center" selectable={false} customStyle="w-60 sm:w-auto">
-              {t('There might be an issue with the database. Please try again later!')}
-            </Text>
-          }
+          title={t(`Uh-oh! We couldn't load the extensions list!`)}
+          details={t('There might be an issue with the database. Please try again later!')}
           type="list-not-available"
         />
       )}
diff --git a/extensions/apps/extensions/src/components/pages/my-extensions/my-extensions.tsx b/extensions/apps/extensions/src/components/pages/my-extensions/my-extensions.tsx
index 5d58381125..2900d53abf 100644
--- a/extensions/apps/extensions/src/components/pages/my-extensions/my-extensions.tsx
+++ b/extensions/apps/extensions/src/components/pages/my-extensions/my-extensions.tsx
@@ -23,7 +23,7 @@ import Card from '@akashaorg/design-system-core/lib/components/Card';
 import Dropdown from '@akashaorg/design-system-core/lib/components/Dropdown';
 import DefaultEmptyCard from '@akashaorg/design-system-components/lib/components/DefaultEmptyCard';
 import DynamicInfiniteScroll from '@akashaorg/design-system-components/lib/components/DynamicInfiniteScroll';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader, { ErrorLoaderButton } from '@akashaorg/ui/lib/akasha-components/error-loader';
 import Icon from '@akashaorg/design-system-core/lib/components/Icon';
 import Link from '@akashaorg/design-system-core/lib/components/Link';
 import Stack from '@akashaorg/design-system-core/lib/components/Stack';
@@ -183,12 +183,9 @@ export const MyExtensionsPage: React.FC<unknown> = () => {
         title={`${t('Uh-oh')}! ${t('You are not connected')}!`}
         details={`${t('To check your extensions you must be connected')} ⚡️`}
       >
-        <Button
-          variant="primary"
-          size="md"
-          label={t('Connect')}
-          onClick={handleConnectButtonClick}
-        />
+        <ErrorLoaderButton variant="default" onClick={handleConnectButtonClick}>
+          {t('Connect')}
+        </ErrorLoaderButton>
       </ErrorLoader>
     );
   }
diff --git a/extensions/apps/extensions/src/components/pages/post-publish-page.tsx b/extensions/apps/extensions/src/components/pages/post-publish-page.tsx
index 9f019ccaaf..be83694ad5 100644
--- a/extensions/apps/extensions/src/components/pages/post-publish-page.tsx
+++ b/extensions/apps/extensions/src/components/pages/post-publish-page.tsx
@@ -7,7 +7,7 @@ import Card from '@akashaorg/design-system-core/lib/components/Card';
 import Stack from '@akashaorg/design-system-core/lib/components/Stack';
 import InfoCard from '@akashaorg/design-system-core/lib/components/InfoCard';
 import Text from '@akashaorg/design-system-core/lib/components/Text';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader, { ErrorLoaderButton } from '@akashaorg/ui/lib/akasha-components/error-loader';
 import Button from '@akashaorg/design-system-core/lib/components/Button';
 
 export const PostPublishPage: React.FC = () => {
@@ -44,12 +44,9 @@ export const PostPublishPage: React.FC = () => {
         title={`${t('Uh-oh')}! ${t('You are not connected')}!`}
         details={`${t('To view this page you must be connected')} ⚡️`}
       >
-        <Button
-          variant="primary"
-          size="md"
-          label={t('Connect')}
-          onClick={handleConnectButtonClick}
-        />
+        <ErrorLoaderButton variant="default" onClick={handleConnectButtonClick}>
+          {t('Connect')}
+        </ErrorLoaderButton>
       </ErrorLoader>
     );
   }
diff --git a/extensions/apps/legal/project.json b/extensions/apps/legal/project.json
index 17f16e0703..bf4405fbe3 100644
--- a/extensions/apps/legal/project.json
+++ b/extensions/apps/legal/project.json
@@ -6,6 +6,7 @@
   "targets": {
     "prepare": {
       "dependsOn": [
+        "@akashaorg/ui:prepare",
         "@akashaorg/ui-core-hooks:build",
         "@akashaorg/design-system-core:prepare",
         "@akashaorg/design-system-components:prepare",
diff --git a/extensions/apps/legal/src/components/app-routes/error-component.tsx b/extensions/apps/legal/src/components/app-routes/error-component.tsx
index e3fb8e4859..c006c46a4e 100644
--- a/extensions/apps/legal/src/components/app-routes/error-component.tsx
+++ b/extensions/apps/legal/src/components/app-routes/error-component.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader from '@akashaorg/ui/lib/akasha-components/error-loader';
 import { useTranslation } from 'react-i18next';
 
 type ErrorComponentProps = {
diff --git a/extensions/apps/legal/src/components/app-routes/not-found-component.tsx b/extensions/apps/legal/src/components/app-routes/not-found-component.tsx
index 269b24a7e5..5031294521 100644
--- a/extensions/apps/legal/src/components/app-routes/not-found-component.tsx
+++ b/extensions/apps/legal/src/components/app-routes/not-found-component.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader from '@akashaorg/ui/lib/akasha-components/error-loader';
 import { useTranslation } from 'react-i18next';
 import { useRootComponentProps } from '@akashaorg/ui-core-hooks';
-import Button from '@akashaorg/design-system-core/lib/components/Button';
+import { ErrorLoaderButton } from '@akashaorg/ui/lib/akasha-components/error-loader';
 
 export const NotFoundComponent = (props: { error?: Error; reset?: (key: string) => void }) => {
   const { t } = useTranslation();
@@ -30,7 +30,9 @@ export const NotFoundComponent = (props: { error?: Error; reset?: (key: string)
         { worldTitle: worldConfig.title },
       )}
     >
-      <Button label={t('Home')} variant="primary" onClick={navigateHome} />
+      <ErrorLoaderButton variant="default" onClick={navigateHome}>
+        {t('Home')}
+      </ErrorLoaderButton>
     </ErrorLoader>
   );
 };
diff --git a/extensions/apps/legal/src/components/pages/page-renderer.tsx b/extensions/apps/legal/src/components/pages/page-renderer.tsx
index 272144f199..68597ad3f2 100644
--- a/extensions/apps/legal/src/components/pages/page-renderer.tsx
+++ b/extensions/apps/legal/src/components/pages/page-renderer.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader from '@akashaorg/ui/lib/akasha-components/error-loader';
 import MarkdownCard from '@akashaorg/design-system-core/lib/components/MarkdownCard';
 import Spinner from '@akashaorg/design-system-core/lib/components/Spinner';
 import Stack from '@akashaorg/design-system-core/lib/components/Stack';
diff --git a/extensions/apps/notifications/project.json b/extensions/apps/notifications/project.json
index 60bd7321ef..47c88136cd 100644
--- a/extensions/apps/notifications/project.json
+++ b/extensions/apps/notifications/project.json
@@ -6,6 +6,7 @@
   "targets": {
     "prepare": {
       "dependsOn": [
+        "@akashaorg/ui:prepare",
         "@akashaorg/ui-core-hooks:build",
         "@akashaorg/design-system-core:prepare",
         "@akashaorg/design-system-components:prepare",
diff --git a/extensions/apps/notifications/src/components/app-routes/error-component.tsx b/extensions/apps/notifications/src/components/app-routes/error-component.tsx
index 751fb85d03..faad2d55e6 100644
--- a/extensions/apps/notifications/src/components/app-routes/error-component.tsx
+++ b/extensions/apps/notifications/src/components/app-routes/error-component.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader from '@akashaorg/ui/lib/akasha-components/error-loader';
 import { useTranslation } from 'react-i18next';
 
 type ErrorComponentProps = {
diff --git a/extensions/apps/notifications/src/components/app-routes/not-found-component.tsx b/extensions/apps/notifications/src/components/app-routes/not-found-component.tsx
index a6c6f8b77e..030b59db4d 100644
--- a/extensions/apps/notifications/src/components/app-routes/not-found-component.tsx
+++ b/extensions/apps/notifications/src/components/app-routes/not-found-component.tsx
@@ -1,8 +1,7 @@
 import React, { useEffect } from 'react';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader, { ErrorLoaderButton } from '@akashaorg/ui/lib/akasha-components/error-loader';
 import { useTranslation } from 'react-i18next';
 import { useRootComponentProps } from '@akashaorg/ui-core-hooks';
-import Button from '@akashaorg/design-system-core/lib/components/Button';
 
 export const NotFoundComponent = (props: { error?: Error; reset?: (key: string) => void }) => {
   const { t } = useTranslation();
@@ -30,7 +29,9 @@ export const NotFoundComponent = (props: { error?: Error; reset?: (key: string)
         { worldTitle: worldConfig.title },
       )}
     >
-      <Button label={t('Home')} variant="primary" onClick={navigateHome} />
+      <ErrorLoaderButton variant="default" onClick={navigateHome}>
+        {t('Home')}
+      </ErrorLoaderButton>
     </ErrorLoader>
   );
 };
diff --git a/extensions/apps/notifications/src/components/pages/notifications-page.tsx b/extensions/apps/notifications/src/components/pages/notifications-page.tsx
index fff8be54af..50c91fc372 100644
--- a/extensions/apps/notifications/src/components/pages/notifications-page.tsx
+++ b/extensions/apps/notifications/src/components/pages/notifications-page.tsx
@@ -22,7 +22,7 @@ import { UserSettingType } from '@akashaorg/typings/lib/sdk';
 
 import { useGetAppsByPublisherDidQuery } from '@akashaorg/ui-core-hooks/lib/generated/apollo';
 import { selectApps } from '@akashaorg/ui-core-hooks/lib/selectors/get-apps-by-publisher-did-query';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader from '@akashaorg/ui/lib/akasha-components/error-loader';
 
 const NotificationsPage: React.FC = () => {
   const sdk = getSDK();
diff --git a/extensions/apps/notifications/src/components/pages/welcome-page.tsx b/extensions/apps/notifications/src/components/pages/welcome-page.tsx
index c8bf437c3d..e1f7f0c568 100644
--- a/extensions/apps/notifications/src/components/pages/welcome-page.tsx
+++ b/extensions/apps/notifications/src/components/pages/welcome-page.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useRootComponentProps, useAkashaStore, useNotifications } from '@akashaorg/ui-core-hooks';
-import Button from '@akashaorg/design-system-core/lib/components/Button';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader, { ErrorLoaderButton } from '@akashaorg/ui/lib/akasha-components/error-loader';
 import NotificationSettingsCard from '@akashaorg/design-system-components/lib/components/NotificationSettingsCard';
 import Stack from '@akashaorg/design-system-core/lib/components/Stack';
 import Text from '@akashaorg/design-system-core/lib/components/Text';
@@ -44,14 +43,11 @@ const WelcomePage: React.FC<WelcomePageProps> = () => {
         type="not-authenticated"
         title={`${t('Uh-oh')}! ${t('You are not connected')}!`}
         details={`${t('To check your notifications you must be connected')} ⚡️`}
-        dataTestId="notifications"
+        //dataTestId="notifications"
       >
-        <Button
-          variant="primary"
-          label={t('Connect')}
-          size="md"
-          onClick={handleConnectButtonClick}
-        />
+        <ErrorLoaderButton variant="default" onClick={handleConnectButtonClick}>
+          {t('Connect')}
+        </ErrorLoaderButton>
       </ErrorLoader>
     );
 
diff --git a/extensions/apps/notifications/src/extensions/snack-bar-notification.tsx b/extensions/apps/notifications/src/extensions/snack-bar-notification.tsx
index ff7d78773f..97cc885f82 100644
--- a/extensions/apps/notifications/src/extensions/snack-bar-notification.tsx
+++ b/extensions/apps/notifications/src/extensions/snack-bar-notification.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useMemo, useSyncExternalStore, ReactElement } from 'react';
 import ReactDOMClient from 'react-dom/client';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader from '@akashaorg/ui/lib/akasha-components/error-loader';
 import singleSpaReact from 'single-spa-react';
 import {
   withProviders,
diff --git a/extensions/apps/profile/project.json b/extensions/apps/profile/project.json
index b10f684662..7f9b7b8780 100644
--- a/extensions/apps/profile/project.json
+++ b/extensions/apps/profile/project.json
@@ -6,6 +6,7 @@
   "targets": {
     "prepare": {
       "dependsOn": [
+        "@akashaorg/ui:prepare",
         "@akashaorg/ui-core-hooks:build",
         "@akashaorg/design-system-core:prepare",
         "@akashaorg/design-system-components:prepare",
diff --git a/extensions/apps/profile/src/components/app-routes/error-component.tsx b/extensions/apps/profile/src/components/app-routes/error-component.tsx
index a852e2c580..1b83223be3 100644
--- a/extensions/apps/profile/src/components/app-routes/error-component.tsx
+++ b/extensions/apps/profile/src/components/app-routes/error-component.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader from '@akashaorg/ui/lib/akasha-components/error-loader';
 import { useTranslation } from 'react-i18next';
 
 type ErrorComponentProps = {
diff --git a/extensions/apps/profile/src/components/app-routes/not-found-component.tsx b/extensions/apps/profile/src/components/app-routes/not-found-component.tsx
index 7878c63a36..0f1af53bf9 100644
--- a/extensions/apps/profile/src/components/app-routes/not-found-component.tsx
+++ b/extensions/apps/profile/src/components/app-routes/not-found-component.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader from '@akashaorg/ui/lib/akasha-components/error-loader';
 import Button from '@akashaorg/design-system-core/lib/components/Button';
 import { useTranslation } from 'react-i18next';
 import { useRootComponentProps } from '@akashaorg/ui-core-hooks';
diff --git a/extensions/apps/profile/src/components/pages/edit-profile/index.tsx b/extensions/apps/profile/src/components/pages/edit-profile/index.tsx
index e7698c6d64..482d57725e 100644
--- a/extensions/apps/profile/src/components/pages/edit-profile/index.tsx
+++ b/extensions/apps/profile/src/components/pages/edit-profile/index.tsx
@@ -3,7 +3,7 @@ import Stack from '@akashaorg/design-system-core/lib/components/Stack';
 import Card from '@akashaorg/design-system-core/lib/components/Card';
 import Modal from '@akashaorg/design-system-core/lib/components/Modal';
 import Text from '@akashaorg/design-system-core/lib/components/Text';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader from '@akashaorg/ui/lib/akasha-components/error-loader';
 import getSDK from '@akashaorg/core-sdk';
 import { useTranslation } from 'react-i18next';
 import {
diff --git a/extensions/apps/profile/src/components/pages/profile-info/index.tsx b/extensions/apps/profile/src/components/pages/profile-info/index.tsx
index bc9337f2ac..57d38ec7b3 100644
--- a/extensions/apps/profile/src/components/pages/profile-info/index.tsx
+++ b/extensions/apps/profile/src/components/pages/profile-info/index.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import DefaultEmptyCard from '@akashaorg/design-system-components/lib/components/DefaultEmptyCard';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader from '@akashaorg/ui/lib/akasha-components/error-loader';
 import Stack from '@akashaorg/design-system-core/lib/components/Stack';
 import ProfileStatsView from '../../profile-stats';
 import ProfileNotFound from '@akashaorg/design-system-components/lib/components/ProfileNotFound';
diff --git a/extensions/apps/profile/src/components/profile-header/index.tsx b/extensions/apps/profile/src/components/profile-header/index.tsx
index a34f0964a4..049a7201d7 100644
--- a/extensions/apps/profile/src/components/profile-header/index.tsx
+++ b/extensions/apps/profile/src/components/profile-header/index.tsx
@@ -1,6 +1,6 @@
 import React, { Suspense, useCallback, useMemo } from 'react';
 import routes, { EDIT } from '../../routes';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader from '@akashaorg/ui/lib/akasha-components/error-loader';
 import FollowProfileButton from '../follow-profile-button';
 import {
   FlagIcon,
diff --git a/extensions/apps/search/project.json b/extensions/apps/search/project.json
index 83e8f0574f..cda03a42e6 100644
--- a/extensions/apps/search/project.json
+++ b/extensions/apps/search/project.json
@@ -6,6 +6,7 @@
   "targets": {
     "prepare": {
       "dependsOn": [
+        "@akashaorg/ui:prepare",
         "@akashaorg/ui-core-hooks:build",
         "@akashaorg/design-system-core:prepare",
         "@akashaorg/design-system-components:prepare",
diff --git a/extensions/apps/search/src/components/app-routes/error-component.tsx b/extensions/apps/search/src/components/app-routes/error-component.tsx
index be47577980..581928ce27 100644
--- a/extensions/apps/search/src/components/app-routes/error-component.tsx
+++ b/extensions/apps/search/src/components/app-routes/error-component.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader from '@akashaorg/ui/lib/akasha-components/error-loader';
 import { useTranslation } from 'react-i18next';
 
 type ErrorComponentProps = {
diff --git a/extensions/apps/search/src/components/app-routes/not-found-component.tsx b/extensions/apps/search/src/components/app-routes/not-found-component.tsx
index 7cedae9b87..81e4866f25 100644
--- a/extensions/apps/search/src/components/app-routes/not-found-component.tsx
+++ b/extensions/apps/search/src/components/app-routes/not-found-component.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader from '@akashaorg/ui/lib/akasha-components/error-loader';
 import { useTranslation } from 'react-i18next';
 import { useRootComponentProps } from '@akashaorg/ui-core-hooks';
 import Button from '@akashaorg/design-system-core/lib/components/Button';
diff --git a/extensions/apps/settings/project.json b/extensions/apps/settings/project.json
index 3b5bcf7bef..f1a9d7412c 100644
--- a/extensions/apps/settings/project.json
+++ b/extensions/apps/settings/project.json
@@ -6,6 +6,7 @@
   "targets": {
     "prepare": {
       "dependsOn": [
+        "@akashaorg/ui:prepare",
         "@akashaorg/ui-core-hooks:build",
         "@akashaorg/design-system-core:prepare",
         "@akashaorg/design-system-components:prepare",
diff --git a/extensions/apps/settings/src/components/app-routes/error-component.tsx b/extensions/apps/settings/src/components/app-routes/error-component.tsx
index 47bbf0f586..df13030bcd 100644
--- a/extensions/apps/settings/src/components/app-routes/error-component.tsx
+++ b/extensions/apps/settings/src/components/app-routes/error-component.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader from '@akashaorg/ui/lib/akasha-components/error-loader';
 import { useTranslation } from 'react-i18next';
 
 type ErrorComponentProps = {
diff --git a/extensions/apps/settings/src/components/app-routes/not-found-component.tsx b/extensions/apps/settings/src/components/app-routes/not-found-component.tsx
index e9ad4d03ef..87f7f8e6e7 100644
--- a/extensions/apps/settings/src/components/app-routes/not-found-component.tsx
+++ b/extensions/apps/settings/src/components/app-routes/not-found-component.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader from '@akashaorg/ui/lib/akasha-components/error-loader';
+
 import { useTranslation } from 'react-i18next';
 import { useRootComponentProps } from '@akashaorg/ui-core-hooks';
 import Button from '@akashaorg/design-system-core/lib/components/Button';
diff --git a/extensions/apps/settings/src/components/pages/notifications-browser-option.tsx b/extensions/apps/settings/src/components/pages/notifications-browser-option.tsx
index e6585c6098..fed043cab8 100644
--- a/extensions/apps/settings/src/components/pages/notifications-browser-option.tsx
+++ b/extensions/apps/settings/src/components/pages/notifications-browser-option.tsx
@@ -3,8 +3,7 @@ import { useTranslation } from 'react-i18next';
 import PageLayout from './base-layout';
 import { useAkashaStore, useRootComponentProps } from '@akashaorg/ui-core-hooks';
 import Stack from '@akashaorg/design-system-core/lib/components/Stack';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
-import Button from '@akashaorg/design-system-core/lib/components/Button';
+import ErrorLoader, { ErrorLoaderButton } from '@akashaorg/ui/lib/akasha-components/error-loader';
 import appRoutes, { BROWSER_NOTIFICATIONS } from '../../routes';
 import NotificationSettingsCard, {
   NotificationsImageSrc,
@@ -71,12 +70,9 @@ const BrowserNotificationsOption: React.FC = () => {
           title={t('Uh-oh! You are not connected!')}
           details={t('To check browser notifications options you must be connected ⚡️')}
         >
-          <Button
-            label={t('Connect')}
-            size="md"
-            variant="primary"
-            onClick={handleConnectButtonClick}
-          />
+          <ErrorLoaderButton variant="default" onClick={handleConnectButtonClick}>
+            {t('Connect')}
+          </ErrorLoaderButton>
         </ErrorLoader>
       </Stack>
     );
diff --git a/extensions/apps/settings/src/components/pages/notifications-option.tsx b/extensions/apps/settings/src/components/pages/notifications-option.tsx
index b589acb6f2..ba3295b6d7 100644
--- a/extensions/apps/settings/src/components/pages/notifications-option.tsx
+++ b/extensions/apps/settings/src/components/pages/notifications-option.tsx
@@ -8,7 +8,7 @@ import Button from '@akashaorg/design-system-core/lib/components/Button';
 import Icon from '@akashaorg/design-system-core/lib/components/Icon';
 import { ChevronRightIcon } from '@heroicons/react/24/outline';
 import { ISettingsItem, SettingsOption } from '../../utils/settings-items';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader, { ErrorLoaderButton } from '@akashaorg/ui/lib/akasha-components/error-loader';
 import NotificationSettingsCard from '@akashaorg/design-system-components/lib/components/NotificationSettingsCard';
 import appRoutes, { NOTIFICATIONS } from '../../routes';
 import { NotificationEvents, NotificationTypes } from '@akashaorg/typings/lib/ui';
@@ -73,12 +73,9 @@ const NotificationsOption: React.FC = () => {
           title={t('Uh-oh! You are not connected!')}
           details={t('To check notifications options you must be connected ⚡️')}
         >
-          <Button
-            label={t('Connect')}
-            size="md"
-            variant="primary"
-            onClick={handleConnectButtonClick}
-          />
+          <ErrorLoaderButton variant="default" onClick={handleConnectButtonClick}>
+            {t('Connect')}
+          </ErrorLoaderButton>
         </ErrorLoader>
       </Stack>
     );
diff --git a/extensions/apps/settings/src/components/pages/notifications-preferences-option/index.tsx b/extensions/apps/settings/src/components/pages/notifications-preferences-option/index.tsx
index 4b3016040b..c3a661df03 100644
--- a/extensions/apps/settings/src/components/pages/notifications-preferences-option/index.tsx
+++ b/extensions/apps/settings/src/components/pages/notifications-preferences-option/index.tsx
@@ -4,7 +4,7 @@ import { tw } from '@twind/core';
 import Text from '@akashaorg/design-system-core/lib/components/Text';
 import { useAkashaStore, useNotifications, useRootComponentProps } from '@akashaorg/ui-core-hooks';
 import Stack from '@akashaorg/design-system-core/lib/components/Stack';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader from '@akashaorg/ui/lib/akasha-components/error-loader';
 import Button from '@akashaorg/design-system-core/lib/components/Button';
 import appRoutes, { PREFERENCES } from '../../../routes';
 import Card from '@akashaorg/design-system-core/lib/components/Card';
diff --git a/extensions/apps/vibes-console/project.json b/extensions/apps/vibes-console/project.json
index 7bb313d34f..01a8fb242a 100644
--- a/extensions/apps/vibes-console/project.json
+++ b/extensions/apps/vibes-console/project.json
@@ -6,6 +6,7 @@
   "targets": {
     "prepare": {
       "dependsOn": [
+        "@akashaorg/ui:prepare",
         "@akashaorg/ui-core-hooks:build",
         "@akashaorg/design-system-core:prepare",
         "@akashaorg/design-system-components:prepare",
diff --git a/extensions/apps/vibes-console/src/components/app-routes/error-component.tsx b/extensions/apps/vibes-console/src/components/app-routes/error-component.tsx
index a44eec1c77..35a2e7a4e1 100644
--- a/extensions/apps/vibes-console/src/components/app-routes/error-component.tsx
+++ b/extensions/apps/vibes-console/src/components/app-routes/error-component.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader from '@akashaorg/ui/lib/akasha-components/error-loader';
 
 type ErrorComponentProps = {
   error: string;
diff --git a/extensions/apps/vibes-console/src/components/app-routes/not-found-component.tsx b/extensions/apps/vibes-console/src/components/app-routes/not-found-component.tsx
index bed5445c7d..77ec14273d 100644
--- a/extensions/apps/vibes-console/src/components/app-routes/not-found-component.tsx
+++ b/extensions/apps/vibes-console/src/components/app-routes/not-found-component.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader from '@akashaorg/ui/lib/akasha-components/error-loader';
 import { useTranslation } from 'react-i18next';
 import { useRootComponentProps } from '@akashaorg/ui-core-hooks';
 import Button from '@akashaorg/design-system-core/lib/components/Button';
diff --git a/extensions/apps/vibes/project.json b/extensions/apps/vibes/project.json
index 3d7086c91c..f76618cfca 100644
--- a/extensions/apps/vibes/project.json
+++ b/extensions/apps/vibes/project.json
@@ -6,6 +6,7 @@
   "targets": {
     "prepare": {
       "dependsOn": [
+        "@akashaorg/ui:prepare",
         "@akashaorg/ui-core-hooks:build",
         "@akashaorg/design-system-core:prepare",
         "@akashaorg/design-system-components:prepare",
diff --git a/extensions/apps/vibes/src/components/app-routes/error-component.tsx b/extensions/apps/vibes/src/components/app-routes/error-component.tsx
index cab538b6ad..f9f0ac3d97 100644
--- a/extensions/apps/vibes/src/components/app-routes/error-component.tsx
+++ b/extensions/apps/vibes/src/components/app-routes/error-component.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader from '@akashaorg/ui/lib/akasha-components/error-loader';
 
 type ErrorComponentProps = {
   error: string;
diff --git a/extensions/apps/vibes/src/components/app-routes/not-found-component.tsx b/extensions/apps/vibes/src/components/app-routes/not-found-component.tsx
index 4019d6b6d5..c9963ac9d0 100644
--- a/extensions/apps/vibes/src/components/app-routes/not-found-component.tsx
+++ b/extensions/apps/vibes/src/components/app-routes/not-found-component.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader from '@akashaorg/ui/lib/akasha-components/error-loader';
 import { useTranslation } from 'react-i18next';
 import { useRootComponentProps } from '@akashaorg/ui-core-hooks';
 import Button from '@akashaorg/design-system-core/lib/components/Button';
diff --git a/extensions/apps/world-builder/src/components/app-routes/error-component.tsx b/extensions/apps/world-builder/src/components/app-routes/error-component.tsx
index cc90e5ef1e..c3f34caf68 100644
--- a/extensions/apps/world-builder/src/components/app-routes/error-component.tsx
+++ b/extensions/apps/world-builder/src/components/app-routes/error-component.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader from '@akashaorg/ui/lib/akasha-components/error-loader';
 
 type ErrorComponentProps = {
   error: string;
diff --git a/extensions/apps/world-builder/src/components/app-routes/not-found-component.tsx b/extensions/apps/world-builder/src/components/app-routes/not-found-component.tsx
index 071319bd65..dde65ef363 100644
--- a/extensions/apps/world-builder/src/components/app-routes/not-found-component.tsx
+++ b/extensions/apps/world-builder/src/components/app-routes/not-found-component.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader from '@akashaorg/ui/lib/akasha-components/error-loader';
 import { useTranslation } from 'react-i18next';
 import { useRootComponentProps } from '@akashaorg/ui-core-hooks';
 import Button from '@akashaorg/design-system-core/lib/components/Button';
diff --git a/extensions/widgets/top-bar/project.json b/extensions/widgets/top-bar/project.json
index f23801ccc8..915c2e0aec 100644
--- a/extensions/widgets/top-bar/project.json
+++ b/extensions/widgets/top-bar/project.json
@@ -6,6 +6,7 @@
   "targets": {
     "prepare": {
       "dependsOn": [
+        "@akashaorg/ui:prepare",
         "@akashaorg/ui-core-hooks:build",
         "@akashaorg/design-system-components:prepare",
         "@akashaorg/core-sdk:build",
diff --git a/extensions/widgets/top-bar/src/components/widget-routes/error-component.tsx b/extensions/widgets/top-bar/src/components/widget-routes/error-component.tsx
index 888b0306c7..52f4337d2a 100644
--- a/extensions/widgets/top-bar/src/components/widget-routes/error-component.tsx
+++ b/extensions/widgets/top-bar/src/components/widget-routes/error-component.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader from '@akashaorg/ui/lib/akasha-components/error-loader';
 import { useTranslation } from 'react-i18next';
 
 type ErrorComponentProps = {
diff --git a/extensions/widgets/trending/project.json b/extensions/widgets/trending/project.json
index 2701a99942..c4cdb6ba54 100644
--- a/extensions/widgets/trending/project.json
+++ b/extensions/widgets/trending/project.json
@@ -6,6 +6,7 @@
   "targets": {
     "prepare": {
       "dependsOn": [
+        "@akashaorg/ui:prepare",
         "@akashaorg/ui-core-hooks:build",
         "@akashaorg/design-system-components:prepare",
         "@akashaorg/core-sdk:build",
diff --git a/extensions/widgets/trending/src/components/trending-widget-component.tsx b/extensions/widgets/trending/src/components/trending-widget-component.tsx
index ae66c28730..a4f29a2d58 100644
--- a/extensions/widgets/trending/src/components/trending-widget-component.tsx
+++ b/extensions/widgets/trending/src/components/trending-widget-component.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import Stack from '@akashaorg/design-system-core/lib/components/Stack';
 import ErrorBoundary from '@akashaorg/design-system-core/lib/components/ErrorBoundary';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader from '@akashaorg/ui/lib/akasha-components/error-loader';
 import TrendingWidgetLoadingCard from '@akashaorg/design-system-components/lib/components/TrendingWidgetLoadingCard';
 import Text from '@akashaorg/design-system-core/lib/components/Text';
 import Card from '@akashaorg/design-system-core/lib/components/Card';
diff --git a/libs/design-system-components/src/components/ExtensionEditStep3Form/index.tsx b/libs/design-system-components/src/components/ExtensionEditStep3Form/index.tsx
index 8f54477982..b425884925 100644
--- a/libs/design-system-components/src/components/ExtensionEditStep3Form/index.tsx
+++ b/libs/design-system-components/src/components/ExtensionEditStep3Form/index.tsx
@@ -20,7 +20,7 @@ import { AkashaProfile, Image } from '@akashaorg/typings/lib/ui';
 import { ExclamationTriangleIcon } from '@heroicons/react/24/solid';
 import { PlusIcon } from '@heroicons/react/24/outline';
 import { ApolloError } from '@apollo/client';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader from '@akashaorg/ui/lib/akasha-components/error-loader';
 import Label from '@akashaorg/design-system-core/lib/components/Label';
 
 const MAX_TAGS = 4;
diff --git a/libs/design-system-components/src/components/ExtensionGalleryManager/index.tsx b/libs/design-system-components/src/components/ExtensionGalleryManager/index.tsx
index ad06f736c1..1085e8d982 100644
--- a/libs/design-system-components/src/components/ExtensionGalleryManager/index.tsx
+++ b/libs/design-system-components/src/components/ExtensionGalleryManager/index.tsx
@@ -3,7 +3,7 @@ import Stack from '@akashaorg/design-system-core/lib/components/Stack';
 import Text from '@akashaorg/design-system-core/lib/components/Text';
 import Button from '@akashaorg/design-system-core/lib/components/Button';
 import Divider from '@akashaorg/design-system-core/lib/components/Divider';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader, { ErrorLoaderButton } from '@akashaorg/ui/lib/akasha-components/error-loader';
 import { GalleryImage, GalleryImageProps } from './gallery-image';
 import { getGalleryState } from './get-gallery-state';
 import { AppImageSource } from '@akashaorg/typings/lib/sdk/graphql-types-new';
@@ -97,21 +97,18 @@ export const ExtensionGalleryManager: React.FC<ExtensionGalleryManagerProps> = p
           </Stack>
         ) : (
           <ErrorLoader
-            title={<Text variant="h6">{emptyGalleryLabel}</Text>}
-            details={
-              <Button
-                variant="primary"
-                size="md"
-                label={startUploadingLabel}
-                onClick={() => {
-                  uploadInputRef.current.click();
-                }}
-                customStyle="mt-4"
-              />
-            }
+            title={emptyGalleryLabel}
             type="list-not-available"
-            noWrapperCard
-          />
+            className="border-none bg-transparent"
+          >
+            <ErrorLoaderButton
+              onClick={() => {
+                uploadInputRef.current.click();
+              }}
+            >
+              {startUploadingLabel}
+            </ErrorLoaderButton>
+          </ErrorLoader>
         )}
         <input
           ref={uploadInputRef}
diff --git a/libs/design-system-components/src/stories/dscore/error-loader.stories.tsx b/libs/design-system-components/src/stories/dscore/error-loader.stories.tsx
index a1fbba5abf..3d510d6e1e 100644
--- a/libs/design-system-components/src/stories/dscore/error-loader.stories.tsx
+++ b/libs/design-system-components/src/stories/dscore/error-loader.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Button from '@akashaorg/design-system-core/lib/components/Button';
 import ErrorLoader, {
   ErrorLoaderProps,
-} from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+} from '@akashaorg/ui/lib/akasha-components/error-loader';
 
 ErrorLoader.displayName = 'ErrorLoader';
 
diff --git a/libs/design-system-core/project.json b/libs/design-system-core/project.json
index aa0cdb5758..c4931e135c 100644
--- a/libs/design-system-core/project.json
+++ b/libs/design-system-core/project.json
@@ -5,7 +5,7 @@
   "projectType": "application",
   "targets": {
     "prepare": {
-      "dependsOn": ["@akashaorg/typings:prepare"],
+      "dependsOn": ["@akashaorg/typings:prepare", "@akashaorg/ui:prepare"],
       "executor": "nx:run-commands",
       "options": {
         "cwd": "libs/design-system-core",
@@ -22,10 +22,7 @@
         "cwd": "libs/design-system-core",
         "command": "copyfiles -f ./src/static/img/* ../../dist/images && tsc --build"
       },
-      "outputs": [
-        "{projectRoot}/lib",
-        "{workspaceRoot}/dist/images"
-      ]
+      "outputs": ["{projectRoot}/lib", "{workspaceRoot}/dist/images"]
     }
   },
   "tags": ["scope:extension", "type:lib"]
diff --git a/libs/design-system-core/src/components/ErrorBoundary/index.tsx b/libs/design-system-core/src/components/ErrorBoundary/index.tsx
index 645450b188..a07567430c 100644
--- a/libs/design-system-core/src/components/ErrorBoundary/index.tsx
+++ b/libs/design-system-core/src/components/ErrorBoundary/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import ErrorLoader, { ErrorLoaderProps } from '../ErrorLoader';
+import ErrorLoader, { ErrorLoaderProps } from '@akashaorg/ui/lib/akasha-components/error-loader';
 import { ILogger } from '@akashaorg/typings/lib/sdk/log';
 
 export type ErrorBoundaryProps = {
diff --git a/libs/design-system-core/src/components/ErrorLoader/__tests__/index.test.tsx b/libs/design-system-core/src/components/ErrorLoader/__tests__/index.test.tsx
deleted file mode 100644
index a075e7fe87..0000000000
--- a/libs/design-system-core/src/components/ErrorLoader/__tests__/index.test.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import * as React from 'react';
-import { act } from '@testing-library/react';
-import ErrorLoader from '..';
-import { customRender } from '../../../test-utils';
-
-describe('<ErrorLoader /> Component', () => {
-  let componentWrapper = customRender(<></>, {});
-
-  const titleLabel = 'No Ethereum address detected';
-  const details =
-    'You need to login or allow access to your current Ethereum address in your Web3 Ethereum client like MetaMask, and then reload, please.';
-
-  beforeEach(() => {
-    act(() => {
-      componentWrapper = customRender(
-        <ErrorLoader type="script-error" title={titleLabel} details={details} />,
-        {},
-      );
-    });
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('renders correctly', () => {
-    expect(componentWrapper).toBeDefined();
-  });
-
-  it('has image with correct src', () => {
-    const { getByRole } = componentWrapper;
-
-    const image = getByRole('img');
-
-    expect(image).toHaveAttribute('src', expect.stringMatching(/general-error.webp/));
-  });
-
-  it('has correct title and subtitle', () => {
-    const { getByText } = componentWrapper;
-
-    const title = getByText(titleLabel);
-    const detailsLabel = getByText(details);
-
-    expect(title).toBeDefined();
-    expect(detailsLabel).toBeDefined();
-  });
-});
diff --git a/libs/design-system-core/src/components/ErrorLoader/error-card.tsx b/libs/design-system-core/src/components/ErrorLoader/error-card.tsx
deleted file mode 100644
index 8f53d98e2c..0000000000
--- a/libs/design-system-core/src/components/ErrorLoader/error-card.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from 'react';
-import { tw } from '@twind/core';
-import Image from '../Image';
-import Stack from '../Stack';
-import Text from '../Text';
-import { ErrorLoaderProps } from '.';
-
-const ErrorCard: React.FC<
-  React.PropsWithChildren<ErrorLoaderProps & { imageSrc: string }>
-> = props => {
-  const { children, imageSrc, title, details, imageBoxStyle = 'w-48 h-48' } = props;
-
-  return (
-    <Stack spacing="gap-y-4" align="center">
-      <Image
-        src={imageSrc}
-        loading="lazy"
-        decoding="async"
-        alt="error-card"
-        className={tw(imageBoxStyle)}
-      />
-
-      <Stack spacing="gap-y-1" align="center">
-        {typeof title === 'object' ? (
-          <>{title}</>
-        ) : (
-          <Text variant="h5" align="center" selectable={false}>
-            {title}
-          </Text>
-        )}
-        {details && (
-          <>
-            {typeof details === 'object' ? (
-              <>{details}</>
-            ) : (
-              <Text variant="body2" selectable={false}>
-                {details}
-              </Text>
-            )}
-          </>
-        )}
-      </Stack>
-      {children}
-    </Stack>
-  );
-};
-
-export default ErrorCard;
diff --git a/libs/design-system-core/src/components/ErrorLoader/index.tsx b/libs/design-system-core/src/components/ErrorLoader/index.tsx
deleted file mode 100644
index f6f718a504..0000000000
--- a/libs/design-system-core/src/components/ErrorLoader/index.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import * as React from 'react';
-import ErrorCard from './error-card';
-import Card from '../Card';
-
-export type ErrorLoaderProps = React.PropsWithChildren<{
-  /**
-   * Error type
-   */
-  type: 'no-apps' | 'not-authenticated' | 'script-error' | 'page-not-found' | 'list-not-available';
-  /* Path to public folder */
-  publicImgPath?: string;
-  /**
-   * The error title
-   */
-  title: React.ReactNode;
-  /**
-   * Additional details about the error
-   */
-  details?: React.ReactNode;
-  dataTestId?: string;
-  noWrapperCard?: boolean;
-  imageBoxStyle?: string; // use valid twind classes
-  customStyle?: string; // use valid twind classes
-}>;
-
-/**
- * An ErrorLoader serves the purpose of displaying an error card with an image and a messagge
- * explaining to the user the error in detail. It can also have an optional call to action button
- * @param type -  error type
- * @param publicImgPath - (optional) path of the image to be displayed
- * @param title - error title
- * @param details - additional details about the error
- * @param noWrapperCard - flag to determine whether to wrap the ErrorLoader with Card component or not
- * @param imageBoxStyle - provide custom twind classes for image container, if needed
- * @param customStyle - provide custom twind classes for general Card wrapper, if needed
- * @example
- * ```tsx
- *  <ErrorLoader type="script-error" title="Error in akasha app" details={error.message} />
- * ```
- **/
-const ErrorLoader: React.FC<ErrorLoaderProps> = ({ children, ...props }) => {
-  const {
-    type,
-    publicImgPath = '/images',
-    title,
-    details,
-    noWrapperCard,
-    imageBoxStyle,
-    dataTestId,
-    customStyle,
-  } = props;
-
-  let imagesrc: string;
-
-  switch (type) {
-    case 'no-apps':
-      imagesrc = `${publicImgPath}/no-apps-error.webp`;
-      break;
-    case 'not-authenticated':
-      imagesrc = `${publicImgPath}/not-authenticated.webp`;
-      break;
-    case 'page-not-found':
-      imagesrc = `${publicImgPath}/new404.webp`;
-      break;
-    case 'list-not-available':
-      imagesrc = `${publicImgPath}/list-not-available.webp`;
-      break;
-    default:
-      imagesrc = `${publicImgPath}/general-error.webp`;
-      break;
-  }
-
-  const errorCardUi = (
-    <ErrorCard
-      type={type}
-      title={title}
-      details={details}
-      imageSrc={imagesrc}
-      imageBoxStyle={imageBoxStyle}
-    >
-      {children}
-    </ErrorCard>
-  );
-
-  return noWrapperCard ? (
-    <> {errorCardUi}</>
-  ) : (
-    <Card padding="p-6" dataTestId={dataTestId} customStyle={customStyle}>
-      {errorCardUi}
-    </Card>
-  );
-};
-
-export default ErrorLoader;
diff --git a/libs/feed/project.json b/libs/feed/project.json
index 4e21e19d23..84a0709bce 100644
--- a/libs/feed/project.json
+++ b/libs/feed/project.json
@@ -6,6 +6,7 @@
   "targets": {
     "prepare": {
       "dependsOn": [
+        "@akashaorg/ui:prepare",
         "@akashaorg/ui-core-hooks:build",
         "@akashaorg/design-system-components:prepare",
         "@akashaorg/core-sdk:build",
diff --git a/libs/feed/src/components/beam-feed-by-author.tsx b/libs/feed/src/components/beam-feed-by-author.tsx
index b351c1a540..224d7f1571 100644
--- a/libs/feed/src/components/beam-feed-by-author.tsx
+++ b/libs/feed/src/components/beam-feed-by-author.tsx
@@ -6,7 +6,7 @@ import React, {
   useMemo,
   useRef,
 } from 'react';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader from '@akashaorg/ui/lib/akasha-components/error-loader';
 import Spinner from '@akashaorg/design-system-core/lib/components/Spinner';
 import Stack from '@akashaorg/design-system-core/lib/components/Stack';
 import DynamicInfiniteScroll from '@akashaorg/design-system-components/lib/components/DynamicInfiniteScroll';
diff --git a/libs/feed/src/components/beam-feed.tsx b/libs/feed/src/components/beam-feed.tsx
index 4e482f660e..a04635b9f2 100644
--- a/libs/feed/src/components/beam-feed.tsx
+++ b/libs/feed/src/components/beam-feed.tsx
@@ -6,7 +6,7 @@ import React, {
   useMemo,
   useRef,
 } from 'react';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader from '@akashaorg/ui/lib/akasha-components/error-loader';
 import Spinner from '@akashaorg/design-system-core/lib/components/Spinner';
 import Stack from '@akashaorg/design-system-core/lib/components/Stack';
 import DynamicInfiniteScroll from '@akashaorg/design-system-components/lib/components/DynamicInfiniteScroll';
diff --git a/libs/feed/src/components/reflect-feed.tsx b/libs/feed/src/components/reflect-feed.tsx
index 1d7d00bc7f..165d8bdbe1 100644
--- a/libs/feed/src/components/reflect-feed.tsx
+++ b/libs/feed/src/components/reflect-feed.tsx
@@ -1,5 +1,5 @@
 import React, { ReactElement, useEffect, useMemo } from 'react';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader from '@akashaorg/ui/lib/akasha-components/error-loader';
 import Spinner from '@akashaorg/design-system-core/lib/components/Spinner';
 import Stack from '@akashaorg/design-system-core/lib/components/Stack';
 import DynamicInfiniteScroll from '@akashaorg/design-system-components/lib/components/DynamicInfiniteScroll';
diff --git a/libs/feed/src/components/tag-feed.tsx b/libs/feed/src/components/tag-feed.tsx
index d5ffb76e71..033cfe6c81 100644
--- a/libs/feed/src/components/tag-feed.tsx
+++ b/libs/feed/src/components/tag-feed.tsx
@@ -1,5 +1,5 @@
 import React, { ReactElement, useEffect, useRef } from 'react';
-import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import ErrorLoader from '@akashaorg/ui/lib/akasha-components/error-loader';
 import Spinner from '@akashaorg/design-system-core/lib/components/Spinner';
 import Stack from '@akashaorg/design-system-core/lib/components/Stack';
 import DynamicInfiniteScroll from '@akashaorg/design-system-components/lib/components/DynamicInfiniteScroll';
diff --git a/libs/ui/components.json b/libs/ui/components.json
index e209b2748e..3a0b189747 100644
--- a/libs/ui/components.json
+++ b/libs/ui/components.json
@@ -12,6 +12,7 @@
   "iconLibrary": "lucide",
   "aliases": {
     "components": "@/components",
+    "akasha-components": "@/akasha-components",
     "utils": "@/library/utils",
     "hooks": "@/hooks",
     "lib": "@/library",
diff --git a/libs/ui/src/akasha-components/error-loader.tsx b/libs/ui/src/akasha-components/error-loader.tsx
new file mode 100644
index 0000000000..27bb6e34c0
--- /dev/null
+++ b/libs/ui/src/akasha-components/error-loader.tsx
@@ -0,0 +1,117 @@
+import * as React from 'react';
+
+import { Image, ImageFallback, ImageRoot } from '@/akasha-components/image';
+import { Button, ButtonProps } from '@/akasha-components/button';
+import { Card, CardTitle, CardContent, CardFooter } from '@/components/card';
+import { Typography } from '@/akasha-components/typography';
+import { cn } from '@/library/utils';
+interface ErrorLoaderProps extends React.PropsWithChildren {
+  /**
+   * Error type
+   */
+  type: 'no-apps' | 'not-authenticated' | 'script-error' | 'page-not-found' | 'list-not-available';
+  /* Path to public folder */
+  publicImgPath?: string;
+  title: string;
+  details?: string;
+  className?: string;
+}
+
+/**
+ * An ErrorLoader serves the purpose of displaying an error card with an image and a messagge
+ * explaining to the user the error in detail. It can also have an optional call to action button
+ * @param type -  error type
+ * @param publicImgPath - (optional) path of the image to be displayed
+ * @param title - error title
+ * @param details - additional details about the error
+ * @param children - optional call to action button
+ * @example
+ * ```tsx
+ *  <ErrorLoader type="script-error" title="Error in akasha app" message={error.message}>
+ *    <ErrorLoaderButton>Action</ErrorLoaderButton>
+ *  </ErrorLoader>
+ * ```
+ **/
+const ErrorLoader = ({
+  title,
+  details,
+  children,
+  publicImgPath = '/images',
+  type,
+  className,
+}: ErrorLoaderProps) => {
+  let imagesrc: string;
+
+  switch (type) {
+    case 'no-apps':
+      imagesrc = `${publicImgPath}/no-apps-error.webp`;
+      break;
+    case 'not-authenticated':
+      imagesrc = `${publicImgPath}/not-authenticated.webp`;
+      break;
+    case 'page-not-found':
+      imagesrc = `${publicImgPath}/new404.webp`;
+      break;
+    case 'list-not-available':
+      imagesrc = `${publicImgPath}/list-not-available.webp`;
+      break;
+    default:
+      imagesrc = `${publicImgPath}/general-error.webp`;
+      break;
+  }
+
+  let cardButton: React.ReactNode | null = null;
+
+  React.Children.forEach(children, child => {
+    if (React.isValidElement(child)) {
+      if (child.type === ErrorLoaderButton) {
+        if (cardButton) {
+          throw new Error('Only one CardButton is allowed');
+        }
+        cardButton = child;
+      } else {
+        throw new Error('Invalid child type');
+      }
+    }
+  });
+
+  return (
+    <Card
+      className={cn('w-full py-5 flex flex-col items-center justify-center rounded-3xl', className)}
+    >
+      <ImageRoot>
+        <Image
+          src={imagesrc}
+          alt="Error Image"
+          className="h-[200px] w-[200px] object-contain rounded-lg"
+        />
+        <ImageFallback>Failed to load image</ImageFallback>
+      </ImageRoot>
+
+      <CardTitle className="flex flex-col items-center justify-center mt-4 mb-2">
+        <Typography variant="h5">{title}</Typography>
+      </CardTitle>
+
+      {details && (
+        <CardContent className="flex flex-col items-center justify-center pb-0">
+          <Typography variant="xs" className="text-muted-foreground text-center">
+            {details}
+          </Typography>
+        </CardContent>
+      )}
+
+      {cardButton && (
+        <CardFooter className="flex flex-col items-center justify-center pt-10 pb-0">
+          {cardButton}
+        </CardFooter>
+      )}
+    </Card>
+  );
+};
+
+const ErrorLoaderButton = ({ ...props }: ButtonProps) => {
+  return <Button {...props} />;
+};
+
+export { ErrorLoader, ErrorLoaderButton, ErrorLoaderProps };
+export default ErrorLoader;