diff --git a/packages/extension-koni-ui/src/Popup/Home/Events/index.tsx b/packages/extension-koni-ui/src/Popup/Home/Events/index.tsx
index 34b4b8bc61..03c05a9054 100644
--- a/packages/extension-koni-ui/src/Popup/Home/Events/index.tsx
+++ b/packages/extension-koni-ui/src/Popup/Home/Events/index.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { FilterTabItemType, FilterTabs } from '@subwallet/extension-koni-ui/components/FilterTabs';
-import { EventDifficulty, EventItem, EventItemHelper, EventStatus } from '@subwallet/extension-koni-ui/components/Mythical';
+import { EventDifficulty, EventItem, EventStatus } from '@subwallet/extension-koni-ui/components/Mythical';
 import { HomeContext } from '@subwallet/extension-koni-ui/contexts/screen/HomeContext';
 import { useSetCurrentPage } from '@subwallet/extension-koni-ui/hooks';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
@@ -19,8 +19,6 @@ type EventItemType = {
   status: EventStatus;
 };
 
-const eventItemButtonMaskId = 'event-item-button-mask';
-
 const Component = ({ className }: Props): React.ReactElement => {
   useSetCurrentPage('/home/events');
   const { setContainerClass } = useContext(HomeContext);
@@ -86,15 +84,10 @@ const Component = ({ className }: Props): React.ReactElement => {
         selectedItem={selectedFilterTab}
       />
 
-      <EventItemHelper
-        buttonSvgMaskId={eventItemButtonMaskId}
-      />
-
       <div className='event-list-container'>
         {
           eventItems.map((item) => (
             <EventItem
-              buttonSvgMaskId={eventItemButtonMaskId}
               className={'event-item'}
               difficulty={item.difficulty}
               key={item.id}
diff --git a/packages/extension-koni-ui/src/Popup/Home/MissionTemp/TaskItem.tsx b/packages/extension-koni-ui/src/Popup/Home/MissionTemp/TaskItem.tsx
new file mode 100644
index 0000000000..5d90933764
--- /dev/null
+++ b/packages/extension-koni-ui/src/Popup/Home/MissionTemp/TaskItem.tsx
@@ -0,0 +1,241 @@
+// Copyright 2019-2022 @subwallet/extension-ui authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import { MythButton } from '@subwallet/extension-koni-ui/components/Mythical';
+import { ThemeProps } from '@subwallet/extension-koni-ui/types';
+import CN from 'classnames';
+import React from 'react';
+import styled from 'styled-components';
+
+export type TaskItemType = {
+  id: string;
+  title: string;
+  statusText: string;
+  actionContent?: React.ReactNode;
+  doAction?: VoidFunction;
+  type: 'oneTime' | 'achievement';
+  point: number;
+  state: 'UNCOMPLETED' | 'CLAIMABLE' | 'COMPLETED'
+};
+
+type Props = ThemeProps & TaskItemType;
+
+const Component = ({ actionContent, className,
+  doAction,
+  point,
+  state,
+  statusText,
+  title,
+  type }: Props): React.ReactElement => {
+  return (
+    <div className={CN(className, {
+      '-not-completed': state !== 'COMPLETED',
+      '-completed': state === 'COMPLETED'
+    })}
+    >
+      <div className='__item-inner'>
+        <div className='__item-left-part'>
+          <div className='__title'>{title}</div>
+          <div className={CN(
+            '__status-text-wrapper',
+            type === 'oneTime' ? '-style-2' : '-style-1')}
+          >
+            <div className='__status-text'>
+              {statusText}
+            </div>
+
+            {
+              state === 'COMPLETED' && (
+                <div className={'__check-icon'}></div>
+              )
+            }
+          </div>
+        </div>
+        <div className='__item-right-part'>
+          {
+            state !== 'COMPLETED' && !!actionContent && (
+              <MythButton
+                className={'__action-button'}
+                onClick={doAction}
+              >
+                {actionContent}
+              </MythButton>
+            )
+          }
+
+          <div className='__point'>
+            +{point}
+
+            {
+              state === 'CLAIMABLE' && (
+                <div className={'__notice-icon'}></div>
+              )
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const TaskItem = styled(Component)<ThemeProps>(({ theme: { extendToken, token } }: ThemeProps) => {
+  return {
+    minHeight: 78,
+    backgroundImage: 'url(/images/mythical/task-item/background.png)',
+    backgroundPosition: 'center center',
+    backgroundSize: '100% 100%',
+    filter: 'drop-shadow(2px 2px 0px #000)',
+    paddingLeft: 12,
+    paddingTop: 12,
+    paddingRight: 12,
+
+    '.__item-inner': {
+      display: 'flex',
+      alignItems: 'center'
+    },
+
+    '.__item-left-part': {
+      flex: 1,
+      overflow: 'hidden'
+    },
+
+    '.__title': {
+      fontFamily: extendToken.fontBarlowCondensed,
+      fontSize: '16px',
+      fontStyle: 'normal',
+      fontWeight: 400,
+      lineHeight: '18px',
+      letterSpacing: '0.32px',
+      textOverflow: 'ellipsis',
+      color: token.colorWhite,
+      overflow: 'hidden',
+      'white-space': 'nowrap'
+    },
+
+    '.__status-text-wrapper': {
+      display: 'flex',
+      alignItems: 'center',
+      overflow: 'hidden'
+    },
+
+    '.__status-text': {
+      textTransform: 'uppercase',
+      color: token.colorWhite,
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
+      'white-space': 'nowrap',
+      flexShrink: 1,
+      paddingRight: 8
+    },
+
+    '.__check-icon': {
+      minWidth: 20,
+      height: 20,
+      backgroundImage: 'url(/images/mythical/check-icon.png)',
+      backgroundPosition: 'center center',
+      backgroundSize: '100% 100%',
+      filter: 'drop-shadow(1.197px 1.197px 0px #000)'
+    },
+
+    '.__status-text-wrapper.-style-1': {
+      marginTop: 8,
+
+      '.__status-text': {
+        fontFamily: extendToken.fontDruk,
+        fontSize: '20px',
+        fontStyle: 'italic',
+        fontWeight: 500,
+        lineHeight: '22px',
+        letterSpacing: '-0.6px'
+      }
+    },
+
+    '.__status-text-wrapper.-style-2': {
+      '.__status-text': {
+        fontFamily: extendToken.fontPermanentMarker,
+        fontSize: '16px',
+        fontStyle: 'normal',
+        fontWeight: 400,
+        lineHeight: '20px'
+      }
+    },
+
+    '.__item-right-part': {
+      display: 'flex',
+      gap: 8
+    },
+
+    '.__action-button': {
+      minWidth: 57,
+      height: 40,
+      paddingLeft: 4,
+      paddingRight: 2,
+
+      '.__button-content': {
+        color: extendToken.mythColorDark,
+        paddingBottom: 6
+      },
+
+      '.__button-background': {
+        filter: 'drop-shadow(2px 3px 0px #000)'
+      },
+
+      '.__button-background:before': {
+        backgroundColor: token.colorPrimary,
+        maskImage: 'url(/images/mythical/task-item/action-button.png)',
+        maskSize: '100% 100%',
+        maskPosition: 'top left'
+      }
+    },
+
+    '.__point': {
+      position: 'relative',
+      textAlign: 'center',
+      paddingLeft: 5,
+      paddingRight: 3,
+      paddingTop: 5,
+
+      minWidth: 47,
+      height: 39,
+      backgroundPosition: 'center center',
+      backgroundSize: '100% 100%',
+      filter: 'drop-shadow(2px 2px 0px #000)',
+      fontFamily: extendToken.fontDruk,
+      fontSize: '24px',
+      fontStyle: 'italic',
+      fontWeight: 700,
+      lineHeight: '24px',
+      letterSpacing: '-0.48px',
+      textTransform: 'uppercase'
+    },
+
+    '.__notice-icon': {
+      position: 'absolute',
+      minWidth: 17,
+      height: 17,
+      backgroundImage: 'url(/images/mythical/notice-icon.png)',
+      backgroundPosition: 'center center',
+      backgroundSize: '100% 100%',
+      top: -9.5,
+      right: -7
+    },
+
+    '&.-not-completed': {
+      '.__point': {
+        color: extendToken.mythColorDark,
+        backgroundImage: 'url(/images/mythical/task-item/score-uncompleted.png)'
+      }
+    },
+
+    '&.-completed': {
+      '.__point': {
+        color: extendToken.mythColorGray1,
+        backgroundImage: 'url(/images/mythical/task-item/score-completed.png)'
+      },
+
+      '.__item-left-part, .__item-right-part': {
+        opacity: 0.62
+      }
+    }
+  };
+});
diff --git a/packages/extension-koni-ui/src/Popup/Home/MissionTemp/index.tsx b/packages/extension-koni-ui/src/Popup/Home/MissionTemp/index.tsx
new file mode 100644
index 0000000000..652105c17f
--- /dev/null
+++ b/packages/extension-koni-ui/src/Popup/Home/MissionTemp/index.tsx
@@ -0,0 +1,194 @@
+// Copyright 2019-2022 @subwallet/extension-ui authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import { ThemeProps } from '@subwallet/extension-koni-ui/types';
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+
+import { TaskItem, TaskItemType } from './TaskItem';
+
+type Props = ThemeProps;
+type TaskSectionType = {
+  id: string,
+  title: string,
+  items: TaskItemType[],
+}
+
+const Component = ({ className }: Props): React.ReactElement => {
+  const taskSections: TaskSectionType[] = useMemo(() => {
+    return [
+      {
+        id: 'friend-tasks',
+        title: 'Friend Tasks',
+        items: [
+          {
+            id: 'invite-friends',
+            title: 'Invite 5 friends this week',
+            statusText: '5/5 FRIENDS',
+            actionContent: 'INVITE',
+            doAction: () => console.log('Inviting friends...'),
+            type: 'achievement',
+            point: 90,
+            state: 'COMPLETED'
+          },
+          {
+            id: 'follow-twitter',
+            title: 'Follow NFL Rivals on Twitter',
+            statusText: 'TO DO',
+            actionContent: 'X', // Example of using an SVG icon
+            doAction: () => console.log('Following on Twitter...'),
+            type: 'oneTime',
+            point: 50,
+            state: 'UNCOMPLETED'
+          },
+          {
+            id: 'join-discord',
+            title: 'Join NFL Rivals Discord',
+            statusText: 'DONE',
+            point: 40,
+            type: 'oneTime',
+            state: 'COMPLETED'
+          }
+        ]
+      },
+      {
+        id: 'wallet-tasks',
+        title: 'Wallet Tasks',
+        items: [
+          {
+            id: 'create-wallet',
+            title: 'Create a Mythical Wallet',
+            statusText: 'TO DO',
+            actionContent: 'GO',
+            doAction: () => console.log('Creating wallet...'),
+            type: 'oneTime',
+            point: 90,
+            state: 'UNCOMPLETED'
+          },
+          {
+            id: 'hold-myth',
+            title: 'Hold 15 amount of Myth',
+            statusText: 'DONE',
+            point: 30,
+            type: 'oneTime',
+            state: 'COMPLETED'
+          }
+        ]
+      },
+      {
+        id: 'gameplay-tasks',
+        title: 'Gameplay Tasks',
+        items: [
+          {
+            id: 'play-events',
+            title: 'Play 10 of events',
+            statusText: '2/10 EVENTS',
+            actionContent: 'PLAY',
+            doAction: () => console.log('Playing events...'),
+            type: 'achievement',
+            point: 90,
+            state: 'UNCOMPLETED'
+          },
+          {
+            id: 'score-hard-events',
+            title: 'Score 60,000 Points from hard events',
+            statusText: '30,000/60,000',
+            point: 50,
+            type: 'achievement',
+            state: 'UNCOMPLETED'
+          },
+          {
+            id: 'claim-hard-events',
+            title: 'Score 30,000 Points from hard events',
+            statusText: '30,000/30,000',
+            actionContent: 'CLAIM',
+            doAction: () => console.log('Claiming points...'),
+            type: 'achievement',
+            point: 50,
+            state: 'CLAIMABLE'
+          },
+          {
+            id: 'claim-invite-friends',
+            title: 'Invite 5 friends this week',
+            statusText: '5/5 FRIENDS',
+            actionContent: 'CLAIM',
+            doAction: () => console.log('Claiming points...'),
+            type: 'achievement',
+            point: 50,
+            state: 'CLAIMABLE'
+          },
+          {
+            id: 'install-nfl-rivals',
+            title: 'Install NFL Rivals',
+            statusText: 'INSTALLED',
+            point: 50,
+            type: 'oneTime',
+            state: 'COMPLETED'
+          }
+        ]
+      }
+    ] as TaskSectionType[];
+  }, []);
+
+  return (
+    <div className={className}>
+      {
+        taskSections.map((section) => (
+          <div
+            className={'task-section'}
+            key={section.id}
+          >
+            <div className='task-section-title'>{section.title}</div>
+
+            <div className='task-items-block'>
+              {
+                section.items.map((item) => (
+                  <TaskItem
+                    {...item}
+                    className='task-item'
+                    key={item.id}
+                  />
+                ))
+              }
+            </div>
+          </div>
+        ))
+      }
+    </div>
+  );
+};
+
+const MissionTemp = styled(Component)<ThemeProps>(({ theme: { extendToken, token } }: ThemeProps) => {
+  return {
+    backgroundColor: '#0e8a6a',
+
+    '.task-section-title': {
+      fontFamily: extendToken.fontDruk,
+      fontSize: '28px',
+      fontStyle: 'italic',
+      fontWeight: 500,
+      color: token.colorWhite,
+      lineHeight: '32px',
+      letterSpacing: '-0.56px',
+      textTransform: 'uppercase',
+      paddingLeft: 16,
+      paddingRight: 16,
+      marginBottom: 16
+    },
+
+    '.task-items-block': {
+      paddingLeft: 4,
+      paddingRight: 4
+    },
+
+    '.task-section + .task-section': {
+      marginTop: 24
+    },
+
+    '.task-item + .task-item': {
+      marginTop: 6
+    }
+  };
+});
+
+export default MissionTemp;
diff --git a/packages/extension-koni-ui/src/Popup/router.tsx b/packages/extension-koni-ui/src/Popup/router.tsx
index 88fbba9c35..ca3e733a1d 100644
--- a/packages/extension-koni-ui/src/Popup/router.tsx
+++ b/packages/extension-koni-ui/src/Popup/router.tsx
@@ -63,7 +63,8 @@ const BuyTokens = new LazyLoader('BuyTokens', () => import('@subwallet/extension
 // const Games = new LazyLoader('Games', () => import('@subwallet/extension-koni-ui/Popup/Home/Games'));
 const Events = new LazyLoader('Events', () => import('@subwallet/extension-koni-ui/Popup/Home/Events'));
 const Cards = new LazyLoader('Events', () => import('@subwallet/extension-koni-ui/Popup/Home/Cards'));
-const Mission = new LazyLoader('Mission', () => import('@subwallet/extension-koni-ui/Popup/Home/Mission'));
+// const Mission = new LazyLoader('Mission', () => import('@subwallet/extension-koni-ui/Popup/Home/Mission'));
+const Mission = new LazyLoader('Mission', () => import('@subwallet/extension-koni-ui/Popup/Home/MissionTemp'));
 const Leaderboard = new LazyLoader('Leaderboard', () => import('@subwallet/extension-koni-ui/Popup/Home/Leaderboard/LeaderboardTemp'));
 const Invite = new LazyLoader('Games', () => import('@subwallet/extension-koni-ui/Popup/Home/Invite'));
 const Tokens = new LazyLoader('Tokens', () => import('@subwallet/extension-koni-ui/Popup/Home/Tokens'));
diff --git a/packages/extension-koni-ui/src/components/Layout/base/Base.tsx b/packages/extension-koni-ui/src/components/Layout/base/Base.tsx
index 84d48b8028..290de7de71 100644
--- a/packages/extension-koni-ui/src/components/Layout/base/Base.tsx
+++ b/packages/extension-koni-ui/src/components/Layout/base/Base.tsx
@@ -9,7 +9,7 @@ import { LayoutBackgroundImages, LayoutBackgroundStyle, ThemeProps } from '@subw
 import { Icon, SwScreenLayout, SwScreenLayoutProps } from '@subwallet/react-ui';
 import { SwTabBarItem } from '@subwallet/react-ui/es/sw-tab-bar';
 import CN from 'classnames';
-import { ArrowLeft, ChartBar, Parachute, Target, Wallet } from 'phosphor-react';
+import { ArrowLeft, ChartBar, Target, Wallet } from 'phosphor-react';
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
@@ -86,16 +86,16 @@ const Component = ({ backgroundImages, backgroundStyle, children, className, hea
     //   key: 'invite',
     //   url: '/home/invite'
     // },
-    {
-      icon: {
-        type: 'phosphor',
-        phosphorIcon: Parachute,
-        weight: 'fill'
-      },
-      label: t('Airdrop'),
-      key: 'airdrop',
-      url: '/home/airdrop'
-    },
+    // {
+    //   icon: {
+    //     type: 'phosphor',
+    //     phosphorIcon: Parachute,
+    //     weight: 'fill'
+    //   },
+    //   label: t('Airdrop'),
+    //   key: 'airdrop',
+    //   url: '/home/airdrop'
+    // },
     {
       icon: {
         type: 'phosphor',
diff --git a/packages/extension-koni-ui/src/components/Mythical/Event/EventItem.tsx b/packages/extension-koni-ui/src/components/Mythical/Event/EventItem.tsx
index e655764180..e3c4456c4a 100644
--- a/packages/extension-koni-ui/src/components/Mythical/Event/EventItem.tsx
+++ b/packages/extension-koni-ui/src/components/Mythical/Event/EventItem.tsx
@@ -1,6 +1,7 @@
 // Copyright 2019-2022 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import { MythButton } from '@subwallet/extension-koni-ui/components/Mythical';
 import useTranslation from '@subwallet/extension-koni-ui/hooks/common/useTranslation';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
 import CN from 'classnames';
@@ -23,7 +24,6 @@ type EventItemProps = ThemeProps & {
   className?: string;
   difficulty: EventDifficulty;
   status: EventStatus;
-  buttonSvgMaskId: string; // note: must use with EventItemHelper component
 };
 
 function Component ({ className, difficulty, status }: EventItemProps) {
@@ -112,49 +112,50 @@ function Component ({ className, difficulty, status }: EventItemProps) {
         </div>
 
         <div className='__item-footer-area'>
-          <div className='__item-status-text'>
-            {statusText}
-          </div>
+          <div className='__item-footer-area-left-part'>
+            <div className='__item-status-text'>
+              {statusText}
+            </div>
 
-          <div className={'__item-time'}>
-            <svg
-              className={'__item-clock-icon'}
-              fill='none'
-              viewBox='0 0 15 14'
-              xmlns='http://www.w3.org/2000/svg'
-            >
-              <path
-                d='M13.0815 7.00033C13.0815 10.2203 10.4681 12.8337 7.24813 12.8337C4.02813 12.8337 1.41479 10.2203 1.41479 7.00033C1.41479 3.78033 4.02813 1.16699 7.24813 1.16699C10.4681 1.16699 13.0815 3.78033 13.0815 7.00033Z'
-                stroke='white'
-                strokeLinecap='round'
-                strokeLinejoin='round'
-                strokeWidth='1.2'
-              />
-              <path
-                d='M9.41223 8.85503L7.60389 7.77586C7.28889 7.58919 7.03223 7.14003 7.03223 6.77253V4.38086'
-                stroke='white'
-                strokeLinecap='round'
-                strokeLinejoin='round'
-                strokeWidth='1.2'
-              />
-            </svg>
-
-            <div className='__item-time-text'>
-              12day 10hrs
+            <div className={'__item-time'}>
+              <svg
+                className={'__item-clock-icon'}
+                fill='none'
+                viewBox='0 0 15 14'
+                xmlns='http://www.w3.org/2000/svg'
+              >
+                <path
+                  d='M13.0815 7.00033C13.0815 10.2203 10.4681 12.8337 7.24813 12.8337C4.02813 12.8337 1.41479 10.2203 1.41479 7.00033C1.41479 3.78033 4.02813 1.16699 7.24813 1.16699C10.4681 1.16699 13.0815 3.78033 13.0815 7.00033Z'
+                  stroke='white'
+                  strokeLinecap='round'
+                  strokeLinejoin='round'
+                  strokeWidth='1.2'
+                />
+                <path
+                  d='M9.41223 8.85503L7.60389 7.77586C7.28889 7.58919 7.03223 7.14003 7.03223 6.77253V4.38086'
+                  stroke='white'
+                  strokeLinecap='round'
+                  strokeLinejoin='round'
+                  strokeWidth='1.2'
+                />
+              </svg>
+
+              <div className='__item-time-text'>
+                12day 10hrs
+              </div>
             </div>
           </div>
 
-          <div className={CN('__item-button', {
-            '-ready': status === EventStatus.READY,
-            '-coming-soon': status === EventStatus.COMING_SOON,
-            '-completed': status === EventStatus.COMPLETED
-          })}
-          >
-            <div className='__item-button-label'>
+          <div className='__item-footer-area-right-part'>
+            <MythButton
+              className={CN('__item-button', {
+                '-ready': status === EventStatus.READY,
+                '-coming-soon': status === EventStatus.COMING_SOON,
+                '-completed': status === EventStatus.COMPLETED
+              })}
+            >
               {buttonLabel}
-            </div>
-
-            <div className={'__item-button-background'} />
+            </MythButton>
           </div>
         </div>
       </div>
@@ -162,7 +163,8 @@ function Component ({ className, difficulty, status }: EventItemProps) {
   );
 }
 
-export const EventItem = styled(Component)<EventItemProps>(({ buttonSvgMaskId, difficulty, theme: { extendToken, token } }: EventItemProps) => {
+export const EventItem = styled(Component)<EventItemProps>(({ difficulty,
+  theme: { extendToken, token } }: EventItemProps) => {
   const itemBackground = (() => {
     if (difficulty === EventDifficulty.EASY) {
       return '/images/mythical/event-item-easy-background.png';
@@ -188,7 +190,6 @@ export const EventItem = styled(Component)<EventItemProps>(({ buttonSvgMaskId, d
   })();
 
   return ({
-    maxWidth: 352,
     minHeight: 297,
     backgroundImage: `url("${itemBackground}")`,
     backgroundSize: '100% 285px',
@@ -339,7 +340,22 @@ export const EventItem = styled(Component)<EventItemProps>(({ buttonSvgMaskId, d
       left: 16,
       right: 16,
       bottom: 21,
-      height: 57
+      height: 57,
+      display: 'flex',
+      paddingLeft: 19,
+      paddingRight: 14,
+      justifyContent: 'space-between',
+      gap: 8
+    },
+
+    '.__item-footer-area-left-part': {
+      paddingTop: 9
+    },
+
+    '.__item-footer-area-right-part': {
+      paddingTop: 8,
+      flex: 1,
+      maxWidth: 158
     },
 
     // status text
@@ -352,17 +368,13 @@ export const EventItem = styled(Component)<EventItemProps>(({ buttonSvgMaskId, d
       letterSpacing: -0.4,
       color: token.colorSecondary,
       textTransform: 'uppercase',
-      position: 'absolute',
-      top: 7,
-      left: 19
+      position: 'relative',
+      top: -3
     },
 
     // time
 
     '.__item-time': {
-      position: 'absolute',
-      left: 19,
-      bottom: 9,
       display: 'flex',
       gap: 4,
       alignItems: 'center'
@@ -385,77 +397,57 @@ export const EventItem = styled(Component)<EventItemProps>(({ buttonSvgMaskId, d
     // button
 
     '.__item-button': {
-      width: 158,
+      width: '100%',
       height: 40,
-      position: 'absolute',
-      right: 15,
-      bottom: 9,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center'
-    },
 
-    '.__item-button-label': {
-      textTransform: 'uppercase',
-      position: 'relative',
-      textAlign: 'center',
-      fontFamily: extendToken.fontDruk,
-      fontSize: 20,
-      lineHeight: '22px',
-      fontWeight: 500,
-      fontStyle: 'italic',
-      marginTop: -5,
-      zIndex: 1
-    },
+      '.__button-content': {
+        marginTop: -5
+      },
 
-    '.__item-button-background': {
-      filter: 'drop-shadow(2px 3px 0px #000)',
-      inset: 0,
-      position: 'absolute',
+      '.__button-background': {
+        filter: 'drop-shadow(2px 3px 0px #000)'
+      },
 
-      '&:before': {
-        content: '""',
-        display: 'block',
-        background: token.colorPrimary,
-        maskImage: `url(#${buttonSvgMaskId})`,
-        position: 'absolute',
-        inset: 0
+      '.__button-background:before': {
+        maskImage: 'url(/images/mythical/event-item-action-button.png)',
+        maskSize: '100% 100%',
+        maskPosition: 'top left'
       }
     },
 
     '.__item-button.-ready': {
       cursor: 'pointer',
 
-      '.__item-button-label': {
+      '.__button-content': {
         color: extendToken.mythColorDark
       },
 
-      '.__item-button-background:before': {
+      '.__button-background:before': {
         background: token.colorPrimary
       }
     },
 
     '.__item-button.-coming-soon': {
-      '.__item-button-label': {
+      '.__button-content': {
         color: extendToken.mythColorDark
       },
 
-      '.__item-button-background:before': {
-        backgroundColor: '#7E7E7E'
+      '.__button-background:before': {
+        backgroundColor: extendToken.mythColorGray2
       }
     },
 
     '.__item-button.-completed': {
-      '.__item-button-label': {
-        color: '#fff',
+      '.__button-content': {
+        color: token.colorWhite,
 
         span: {
           color: token.colorPrimary
         }
       },
 
-      '.__item-button-background:before': {
-        backgroundColor: '#42423F'
+      '.__button-background:before': {
+        backgroundColor: extendToken.mythColorGray3
       }
     }
   });
diff --git a/packages/extension-koni-ui/src/components/Mythical/Event/EventItemHelper.tsx b/packages/extension-koni-ui/src/components/Mythical/Event/EventItemHelper.tsx
deleted file mode 100644
index 040f7fb60d..0000000000
--- a/packages/extension-koni-ui/src/components/Mythical/Event/EventItemHelper.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-// Copyright 2019-2022 @polkadot/extension-ui authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-import React from 'react';
-
-type Props = {
-  buttonSvgMaskId: string;
-};
-
-export function EventItemHelper ({ buttonSvgMaskId }: Props) {
-  return (
-    <svg
-      fill='none'
-      style={{
-        width: 0,
-        height: 0,
-        overflow: 'hidden',
-        pointerEvents: 'none',
-        opacity: 0
-      }}
-      viewBox='0 0 158 40'
-      xmlns='http://www.w3.org/2000/svg'
-    >
-      <defs>
-        <mask id={buttonSvgMaskId}>
-          <path
-            d='M0 0H158L155.695 32.1387L158 37.9191H111.577L101.804 40L2.93369 36.0694L0 0Z'
-            fill='#FFF'
-          />
-        </mask>
-      </defs>
-    </svg>
-  );
-}
diff --git a/packages/extension-koni-ui/src/components/Mythical/Event/index.ts b/packages/extension-koni-ui/src/components/Mythical/Event/index.ts
index c3dd784d5c..a83fc56758 100644
--- a/packages/extension-koni-ui/src/components/Mythical/Event/index.ts
+++ b/packages/extension-koni-ui/src/components/Mythical/Event/index.ts
@@ -1,5 +1,4 @@
 // Copyright 2019-2022 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-export * from './EventItemHelper';
 export * from './EventItem';
diff --git a/packages/webapp/public/images/mythical/check-icon.png b/packages/webapp/public/images/mythical/check-icon.png
new file mode 100644
index 0000000000..4705c2968e
Binary files /dev/null and b/packages/webapp/public/images/mythical/check-icon.png differ
diff --git a/packages/webapp/public/images/mythical/event-item-action-button.png b/packages/webapp/public/images/mythical/event-item-action-button.png
new file mode 100644
index 0000000000..e94f68a399
Binary files /dev/null and b/packages/webapp/public/images/mythical/event-item-action-button.png differ
diff --git a/packages/webapp/public/images/mythical/notice-icon.png b/packages/webapp/public/images/mythical/notice-icon.png
new file mode 100644
index 0000000000..29a72d6afc
Binary files /dev/null and b/packages/webapp/public/images/mythical/notice-icon.png differ
diff --git a/packages/webapp/public/images/mythical/task-item/action-button.png b/packages/webapp/public/images/mythical/task-item/action-button.png
new file mode 100644
index 0000000000..980774d06c
Binary files /dev/null and b/packages/webapp/public/images/mythical/task-item/action-button.png differ
diff --git a/packages/webapp/public/images/mythical/task-item/background.png b/packages/webapp/public/images/mythical/task-item/background.png
new file mode 100644
index 0000000000..a2eabcdd2e
Binary files /dev/null and b/packages/webapp/public/images/mythical/task-item/background.png differ
diff --git a/packages/webapp/public/images/mythical/task-item/score-completed.png b/packages/webapp/public/images/mythical/task-item/score-completed.png
new file mode 100644
index 0000000000..33013ec6e0
Binary files /dev/null and b/packages/webapp/public/images/mythical/task-item/score-completed.png differ
diff --git a/packages/webapp/public/images/mythical/task-item/score-uncompleted.png b/packages/webapp/public/images/mythical/task-item/score-uncompleted.png
new file mode 100644
index 0000000000..77eee83f16
Binary files /dev/null and b/packages/webapp/public/images/mythical/task-item/score-uncompleted.png differ