diff --git a/src/apps/profiles/src/components/BannersIconsDetailsModal/BannersIconsDetailsModal.module.scss b/src/apps/profiles/src/components/BannersIconsDetailsModal/BannersIconsDetailsModal.module.scss
new file mode 100644
index 000000000..47e811dd7
--- /dev/null
+++ b/src/apps/profiles/src/components/BannersIconsDetailsModal/BannersIconsDetailsModal.module.scss
@@ -0,0 +1,36 @@
+@import "@libs/ui/styles/includes";
+
+.container {
+    display: flex;
+    flex-direction: column;
+
+    .content {
+        .contentHeader {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid $black-10;
+            margin: $sp-4 0;
+            padding-bottom: $sp-2;
+
+            .contentHeaderActions {
+                button {
+                    margin-right: $sp-2;
+
+                    &:last-child {
+                        margin-right: 0;
+                    }
+                }
+            }
+        }
+
+        .contentBody {
+            height: 385px;
+            overflow: auto;
+
+            @include ltelg {
+                height: auto;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/apps/profiles/src/components/BannersIconsDetailsModal/BannersIconsDetailsModal.tsx b/src/apps/profiles/src/components/BannersIconsDetailsModal/BannersIconsDetailsModal.tsx
new file mode 100644
index 000000000..28649ceeb
--- /dev/null
+++ b/src/apps/profiles/src/components/BannersIconsDetailsModal/BannersIconsDetailsModal.tsx
@@ -0,0 +1,83 @@
+/* eslint-disable complexity */
+import { Dispatch, FC, SetStateAction, useState } from 'react'
+
+import { BaseModal } from '~/libs/ui'
+import {
+    MemberStats,
+} from '~/libs/core'
+
+import { numberToFixed } from '../../lib'
+
+import styles from './BannersIconsDetailsModal.module.scss'
+
+type WebDesignViewTypes = 'CHALLENGES DETAILS'
+
+interface BannersIconsDetailsModalProps {
+    onClose: () => void
+    bannersIconsStats: MemberStats | undefined
+}
+
+const BannersIconsDetailsModal: FC<BannersIconsDetailsModalProps> = (props: BannersIconsDetailsModalProps) => {
+    const [viewType]: [WebDesignViewTypes, Dispatch<SetStateAction<WebDesignViewTypes>>]
+        = useState<WebDesignViewTypes>('CHALLENGES DETAILS')
+
+    return (
+        <BaseModal
+            onClose={props.onClose}
+            open
+            size='body'
+            title='Banners Or Icons'
+        >
+
+            <div className={styles.container}>
+                <div className='member-stat-header'>
+                    <div>
+                        <span className='member-stat-value'>{props.bannersIconsStats?.wins}</span>
+                        Wins
+                    </div>
+                    <div>
+                        <span className='member-stat-value'>{props.bannersIconsStats?.challenges}</span>
+                        Challenges
+                    </div>
+                    <div>
+                        <span className='member-stat-value'>
+                            {numberToFixed(props.bannersIconsStats?.rank?.overallPercentile || 0)}
+                            %
+                        </span>
+                        Percentile
+                    </div>
+                    <div>
+                        <span className='member-stat-value'>
+                            {numberToFixed(props.bannersIconsStats?.screeningSuccessRate || 0)}
+                            %
+                        </span>
+                        Screening Success Rate
+                    </div>
+                    <div>
+                        <span className='member-stat-value'>
+                            {numberToFixed(props.bannersIconsStats?.avgPlacement || 0)}
+                        </span>
+                        Average Placement
+                    </div>
+                </div>
+
+                <div className={styles.content}>
+                    <div className={styles.contentHeader}>
+                        <h4>{viewType}</h4>
+                    </div>
+
+                    <div className={styles.contentBody}>
+                        {
+                            viewType === 'CHALLENGES DETAILS' && (
+                                <div />
+                            )
+
+                        }
+                    </div>
+                </div>
+            </div>
+        </BaseModal>
+    )
+}
+
+export default BannersIconsDetailsModal
diff --git a/src/apps/profiles/src/components/BannersIconsDetailsModal/index.ts b/src/apps/profiles/src/components/BannersIconsDetailsModal/index.ts
new file mode 100644
index 000000000..a010789d1
--- /dev/null
+++ b/src/apps/profiles/src/components/BannersIconsDetailsModal/index.ts
@@ -0,0 +1 @@
+export { default as BannersIconsDetailsModal } from './BannersIconsDetailsModal'
diff --git a/src/apps/profiles/src/components/DesignF2FDetailsModal/DesignF2FDetailsModal.tsx b/src/apps/profiles/src/components/DesignF2FDetailsModal/DesignF2FDetailsModal.tsx
index eebf052ea..a651a4302 100644
--- a/src/apps/profiles/src/components/DesignF2FDetailsModal/DesignF2FDetailsModal.tsx
+++ b/src/apps/profiles/src/components/DesignF2FDetailsModal/DesignF2FDetailsModal.tsx
@@ -55,7 +55,9 @@ const DesignF2FDetailsModal: FC<DesignF2FDetailsModalProps> = (props: DesignF2FD
                         Screening Success Rate
                     </div>
                     <div>
-                        <span className='member-stat-value'>{props.designF2FStats?.avgPlacement}</span>
+                        <span className='member-stat-value'>
+                            {numberToFixed(props.designF2FStats?.avgPlacement || 0)}
+                        </span>
                         Average Placement
                     </div>
                 </div>
diff --git a/src/apps/profiles/src/components/FEDesignDetailsModal/FEDesignDetailsModal.module.scss b/src/apps/profiles/src/components/FEDesignDetailsModal/FEDesignDetailsModal.module.scss
new file mode 100644
index 000000000..47e811dd7
--- /dev/null
+++ b/src/apps/profiles/src/components/FEDesignDetailsModal/FEDesignDetailsModal.module.scss
@@ -0,0 +1,36 @@
+@import "@libs/ui/styles/includes";
+
+.container {
+    display: flex;
+    flex-direction: column;
+
+    .content {
+        .contentHeader {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid $black-10;
+            margin: $sp-4 0;
+            padding-bottom: $sp-2;
+
+            .contentHeaderActions {
+                button {
+                    margin-right: $sp-2;
+
+                    &:last-child {
+                        margin-right: 0;
+                    }
+                }
+            }
+        }
+
+        .contentBody {
+            height: 385px;
+            overflow: auto;
+
+            @include ltelg {
+                height: auto;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/apps/profiles/src/components/FEDesignDetailsModal/FEDesignDetailsModal.tsx b/src/apps/profiles/src/components/FEDesignDetailsModal/FEDesignDetailsModal.tsx
new file mode 100644
index 000000000..b32b0d07a
--- /dev/null
+++ b/src/apps/profiles/src/components/FEDesignDetailsModal/FEDesignDetailsModal.tsx
@@ -0,0 +1,84 @@
+/* eslint-disable complexity */
+import { Dispatch, FC, SetStateAction, useState } from 'react'
+
+import { BaseModal } from '~/libs/ui'
+import {
+    MemberStats,
+} from '~/libs/core'
+
+import { numberToFixed } from '../../lib'
+
+import styles from './FEDesignDetailsModal.module.scss'
+
+type WebDesignViewTypes = 'CHALLENGES DETAILS'
+
+interface FEDesignDetailsModalProps {
+    onClose: () => void
+    feDesignStats: MemberStats | undefined
+}
+
+const FEDesignDetailsModal: FC<FEDesignDetailsModalProps>
+    = (props: FEDesignDetailsModalProps) => {
+        const [viewType]: [WebDesignViewTypes, Dispatch<SetStateAction<WebDesignViewTypes>>]
+            = useState<WebDesignViewTypes>('CHALLENGES DETAILS')
+
+        return (
+            <BaseModal
+                onClose={props.onClose}
+                open
+                size='body'
+                title='Application Front End Design'
+            >
+
+                <div className={styles.container}>
+                    <div className='member-stat-header'>
+                        <div>
+                            <span className='member-stat-value'>{props.feDesignStats?.wins}</span>
+                            Wins
+                        </div>
+                        <div>
+                            <span className='member-stat-value'>{props.feDesignStats?.challenges}</span>
+                            Challenges
+                        </div>
+                        <div>
+                            <span className='member-stat-value'>
+                                {numberToFixed(props.feDesignStats?.rank?.overallPercentile || 0)}
+                                %
+                            </span>
+                            Percentile
+                        </div>
+                        <div>
+                            <span className='member-stat-value'>
+                                {numberToFixed(props.feDesignStats?.screeningSuccessRate || 0)}
+                                %
+                            </span>
+                            Screening Success Rate
+                        </div>
+                        <div>
+                            <span className='member-stat-value'>
+                                {numberToFixed(props.feDesignStats?.avgPlacement || 0)}
+                            </span>
+                            Average Placement
+                        </div>
+                    </div>
+
+                    <div className={styles.content}>
+                        <div className={styles.contentHeader}>
+                            <h4>{viewType}</h4>
+                        </div>
+
+                        <div className={styles.contentBody}>
+                            {
+                                viewType === 'CHALLENGES DETAILS' && (
+                                    <div />
+                                )
+
+                            }
+                        </div>
+                    </div>
+                </div>
+            </BaseModal>
+        )
+    }
+
+export default FEDesignDetailsModal
diff --git a/src/apps/profiles/src/components/FEDesignDetailsModal/index.ts b/src/apps/profiles/src/components/FEDesignDetailsModal/index.ts
new file mode 100644
index 000000000..6a0dad3d9
--- /dev/null
+++ b/src/apps/profiles/src/components/FEDesignDetailsModal/index.ts
@@ -0,0 +1 @@
+export { default as FEDesignDetailsModal } from './FEDesignDetailsModal'
diff --git a/src/apps/profiles/src/components/FrontEndFlashDetailsModal/FrontEndFlashDetailsModal.module.scss b/src/apps/profiles/src/components/FrontEndFlashDetailsModal/FrontEndFlashDetailsModal.module.scss
new file mode 100644
index 000000000..47e811dd7
--- /dev/null
+++ b/src/apps/profiles/src/components/FrontEndFlashDetailsModal/FrontEndFlashDetailsModal.module.scss
@@ -0,0 +1,36 @@
+@import "@libs/ui/styles/includes";
+
+.container {
+    display: flex;
+    flex-direction: column;
+
+    .content {
+        .contentHeader {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid $black-10;
+            margin: $sp-4 0;
+            padding-bottom: $sp-2;
+
+            .contentHeaderActions {
+                button {
+                    margin-right: $sp-2;
+
+                    &:last-child {
+                        margin-right: 0;
+                    }
+                }
+            }
+        }
+
+        .contentBody {
+            height: 385px;
+            overflow: auto;
+
+            @include ltelg {
+                height: auto;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/apps/profiles/src/components/FrontEndFlashDetailsModal/FrontEndFlashDetailsModal.tsx b/src/apps/profiles/src/components/FrontEndFlashDetailsModal/FrontEndFlashDetailsModal.tsx
new file mode 100644
index 000000000..8a2a8254c
--- /dev/null
+++ b/src/apps/profiles/src/components/FrontEndFlashDetailsModal/FrontEndFlashDetailsModal.tsx
@@ -0,0 +1,83 @@
+/* eslint-disable complexity */
+import { Dispatch, FC, SetStateAction, useState } from 'react'
+
+import { BaseModal } from '~/libs/ui'
+import {
+    MemberStats,
+} from '~/libs/core'
+
+import { numberToFixed } from '../../lib'
+
+import styles from './FrontEndFlashDetailsModal.module.scss'
+
+type WebDesignViewTypes = 'CHALLENGES DETAILS'
+
+interface FrontEndFlashDetailsModalProps {
+    onClose: () => void
+    froneEndFlashStats: MemberStats | undefined
+}
+
+const FrontEndFlashDetailsModal: FC<FrontEndFlashDetailsModalProps> = (props: FrontEndFlashDetailsModalProps) => {
+    const [viewType]: [WebDesignViewTypes, Dispatch<SetStateAction<WebDesignViewTypes>>]
+        = useState<WebDesignViewTypes>('CHALLENGES DETAILS')
+
+    return (
+        <BaseModal
+            onClose={props.onClose}
+            open
+            size='body'
+            title='Front End Flash'
+        >
+
+            <div className={styles.container}>
+                <div className='member-stat-header'>
+                    <div>
+                        <span className='member-stat-value'>{props.froneEndFlashStats?.wins}</span>
+                        Wins
+                    </div>
+                    <div>
+                        <span className='member-stat-value'>{props.froneEndFlashStats?.challenges}</span>
+                        Challenges
+                    </div>
+                    <div>
+                        <span className='member-stat-value'>
+                            {numberToFixed(props.froneEndFlashStats?.rank?.overallPercentile || 0)}
+                            %
+                        </span>
+                        Percentile
+                    </div>
+                    <div>
+                        <span className='member-stat-value'>
+                            {numberToFixed(props.froneEndFlashStats?.screeningSuccessRate || 0)}
+                            %
+                        </span>
+                        Screening Success Rate
+                    </div>
+                    <div>
+                        <span className='member-stat-value'>
+                            {numberToFixed(props.froneEndFlashStats?.avgPlacement || 0)}
+                        </span>
+                        Average Placement
+                    </div>
+                </div>
+
+                <div className={styles.content}>
+                    <div className={styles.contentHeader}>
+                        <h4>{viewType}</h4>
+                    </div>
+
+                    <div className={styles.contentBody}>
+                        {
+                            viewType === 'CHALLENGES DETAILS' && (
+                                <div />
+                            )
+
+                        }
+                    </div>
+                </div>
+            </div>
+        </BaseModal>
+    )
+}
+
+export default FrontEndFlashDetailsModal
diff --git a/src/apps/profiles/src/components/FrontEndFlashDetailsModal/index.ts b/src/apps/profiles/src/components/FrontEndFlashDetailsModal/index.ts
new file mode 100644
index 000000000..b2d570d30
--- /dev/null
+++ b/src/apps/profiles/src/components/FrontEndFlashDetailsModal/index.ts
@@ -0,0 +1 @@
+export { default as FrontEndFlashDetailsModal } from './FrontEndFlashDetailsModal'
diff --git a/src/apps/profiles/src/components/LogoDesignDetailsModal/LogoDesignDetailsModal.tsx b/src/apps/profiles/src/components/LogoDesignDetailsModal/LogoDesignDetailsModal.tsx
index b6e2c6308..c425bf83a 100644
--- a/src/apps/profiles/src/components/LogoDesignDetailsModal/LogoDesignDetailsModal.tsx
+++ b/src/apps/profiles/src/components/LogoDesignDetailsModal/LogoDesignDetailsModal.tsx
@@ -55,7 +55,9 @@ const LogoDesignDetailsModal: FC<LogoDesignDetailsModalProps> = (props: LogoDesi
                         Screening Success Rate
                     </div>
                     <div>
-                        <span className='member-stat-value'>{props.logoDesignStats?.avgPlacement}</span>
+                        <span className='member-stat-value'>
+                            {numberToFixed(props.logoDesignStats?.avgPlacement || 0)}
+                        </span>
                         Average Placement
                     </div>
                 </div>
diff --git a/src/apps/profiles/src/components/PrintPresentationDetailsModal/PrintPresentationDetailsModal.module.scss b/src/apps/profiles/src/components/PrintPresentationDetailsModal/PrintPresentationDetailsModal.module.scss
new file mode 100644
index 000000000..47e811dd7
--- /dev/null
+++ b/src/apps/profiles/src/components/PrintPresentationDetailsModal/PrintPresentationDetailsModal.module.scss
@@ -0,0 +1,36 @@
+@import "@libs/ui/styles/includes";
+
+.container {
+    display: flex;
+    flex-direction: column;
+
+    .content {
+        .contentHeader {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid $black-10;
+            margin: $sp-4 0;
+            padding-bottom: $sp-2;
+
+            .contentHeaderActions {
+                button {
+                    margin-right: $sp-2;
+
+                    &:last-child {
+                        margin-right: 0;
+                    }
+                }
+            }
+        }
+
+        .contentBody {
+            height: 385px;
+            overflow: auto;
+
+            @include ltelg {
+                height: auto;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/apps/profiles/src/components/PrintPresentationDetailsModal/PrintPresentationDetailsModal.tsx b/src/apps/profiles/src/components/PrintPresentationDetailsModal/PrintPresentationDetailsModal.tsx
new file mode 100644
index 000000000..90a5c2b09
--- /dev/null
+++ b/src/apps/profiles/src/components/PrintPresentationDetailsModal/PrintPresentationDetailsModal.tsx
@@ -0,0 +1,84 @@
+/* eslint-disable complexity */
+import { Dispatch, FC, SetStateAction, useState } from 'react'
+
+import { BaseModal } from '~/libs/ui'
+import {
+    MemberStats,
+} from '~/libs/core'
+
+import { numberToFixed } from '../../lib'
+
+import styles from './PrintPresentationDetailsModal.module.scss'
+
+type WebDesignViewTypes = 'CHALLENGES DETAILS'
+
+interface PrintPresentationDetailsModalProps {
+    onClose: () => void
+    printPresentationStats: MemberStats | undefined
+}
+
+const PrintPresentationDetailsModal: FC<PrintPresentationDetailsModalProps>
+    = (props: PrintPresentationDetailsModalProps) => {
+        const [viewType]: [WebDesignViewTypes, Dispatch<SetStateAction<WebDesignViewTypes>>]
+            = useState<WebDesignViewTypes>('CHALLENGES DETAILS')
+
+        return (
+            <BaseModal
+                onClose={props.onClose}
+                open
+                size='body'
+                title='Print Or Presentation'
+            >
+
+                <div className={styles.container}>
+                    <div className='member-stat-header'>
+                        <div>
+                            <span className='member-stat-value'>{props.printPresentationStats?.wins}</span>
+                            Wins
+                        </div>
+                        <div>
+                            <span className='member-stat-value'>{props.printPresentationStats?.challenges}</span>
+                            Challenges
+                        </div>
+                        <div>
+                            <span className='member-stat-value'>
+                                {numberToFixed(props.printPresentationStats?.rank?.overallPercentile || 0)}
+                                %
+                            </span>
+                            Percentile
+                        </div>
+                        <div>
+                            <span className='member-stat-value'>
+                                {numberToFixed(props.printPresentationStats?.screeningSuccessRate || 0)}
+                                %
+                            </span>
+                            Screening Success Rate
+                        </div>
+                        <div>
+                            <span className='member-stat-value'>
+                                {numberToFixed(props.printPresentationStats?.avgPlacement || 0)}
+                            </span>
+                            Average Placement
+                        </div>
+                    </div>
+
+                    <div className={styles.content}>
+                        <div className={styles.contentHeader}>
+                            <h4>{viewType}</h4>
+                        </div>
+
+                        <div className={styles.contentBody}>
+                            {
+                                viewType === 'CHALLENGES DETAILS' && (
+                                    <div />
+                                )
+
+                            }
+                        </div>
+                    </div>
+                </div>
+            </BaseModal>
+        )
+    }
+
+export default PrintPresentationDetailsModal
diff --git a/src/apps/profiles/src/components/PrintPresentationDetailsModal/index.ts b/src/apps/profiles/src/components/PrintPresentationDetailsModal/index.ts
new file mode 100644
index 000000000..7ab690aa6
--- /dev/null
+++ b/src/apps/profiles/src/components/PrintPresentationDetailsModal/index.ts
@@ -0,0 +1 @@
+export { default as PrintPresentationDetailsModal } from './PrintPresentationDetailsModal'
diff --git a/src/apps/profiles/src/components/SpecificationDetailsModal/SpecificationDetailsModal.module.scss b/src/apps/profiles/src/components/SpecificationDetailsModal/SpecificationDetailsModal.module.scss
new file mode 100644
index 000000000..47e811dd7
--- /dev/null
+++ b/src/apps/profiles/src/components/SpecificationDetailsModal/SpecificationDetailsModal.module.scss
@@ -0,0 +1,36 @@
+@import "@libs/ui/styles/includes";
+
+.container {
+    display: flex;
+    flex-direction: column;
+
+    .content {
+        .contentHeader {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid $black-10;
+            margin: $sp-4 0;
+            padding-bottom: $sp-2;
+
+            .contentHeaderActions {
+                button {
+                    margin-right: $sp-2;
+
+                    &:last-child {
+                        margin-right: 0;
+                    }
+                }
+            }
+        }
+
+        .contentBody {
+            height: 385px;
+            overflow: auto;
+
+            @include ltelg {
+                height: auto;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/apps/profiles/src/components/SpecificationDetailsModal/SpecificationDetailsModal.tsx b/src/apps/profiles/src/components/SpecificationDetailsModal/SpecificationDetailsModal.tsx
new file mode 100644
index 000000000..1c3f6f547
--- /dev/null
+++ b/src/apps/profiles/src/components/SpecificationDetailsModal/SpecificationDetailsModal.tsx
@@ -0,0 +1,83 @@
+/* eslint-disable complexity */
+import { Dispatch, FC, SetStateAction, useState } from 'react'
+
+import { BaseModal } from '~/libs/ui'
+import {
+    MemberStats,
+} from '~/libs/core'
+
+import { numberToFixed } from '../../lib'
+
+import styles from './SpecificationDetailsModal.module.scss'
+
+type WebDesignViewTypes = 'CHALLENGES DETAILS'
+
+interface SpecificationDetailsModalProps {
+    onClose: () => void
+    specStats: MemberStats | undefined
+}
+
+const SpecificationDetailsModal: FC<SpecificationDetailsModalProps> = (props: SpecificationDetailsModalProps) => {
+    const [viewType]: [WebDesignViewTypes, Dispatch<SetStateAction<WebDesignViewTypes>>]
+        = useState<WebDesignViewTypes>('CHALLENGES DETAILS')
+
+    return (
+        <BaseModal
+            onClose={props.onClose}
+            open
+            size='body'
+            title='Specification'
+        >
+
+            <div className={styles.container}>
+                <div className='member-stat-header'>
+                    <div>
+                        <span className='member-stat-value'>{props.specStats?.wins}</span>
+                        Wins
+                    </div>
+                    <div>
+                        <span className='member-stat-value'>{props.specStats?.challenges}</span>
+                        Challenges
+                    </div>
+                    <div>
+                        <span className='member-stat-value'>
+                            {numberToFixed(props.specStats?.rank?.overallPercentile || 0)}
+                            %
+                        </span>
+                        Percentile
+                    </div>
+                    <div>
+                        <span className='member-stat-value'>
+                            {numberToFixed(props.specStats?.screeningSuccessRate || 0)}
+                            %
+                        </span>
+                        Screening Success Rate
+                    </div>
+                    <div>
+                        <span className='member-stat-value'>
+                            {numberToFixed(props.specStats?.avgPlacement || 0)}
+                        </span>
+                        Average Placement
+                    </div>
+                </div>
+
+                <div className={styles.content}>
+                    <div className={styles.contentHeader}>
+                        <h4>{viewType}</h4>
+                    </div>
+
+                    <div className={styles.contentBody}>
+                        {
+                            viewType === 'CHALLENGES DETAILS' && (
+                                <div />
+                            )
+
+                        }
+                    </div>
+                </div>
+            </div>
+        </BaseModal>
+    )
+}
+
+export default SpecificationDetailsModal
diff --git a/src/apps/profiles/src/components/SpecificationDetailsModal/index.ts b/src/apps/profiles/src/components/SpecificationDetailsModal/index.ts
new file mode 100644
index 000000000..07f51201c
--- /dev/null
+++ b/src/apps/profiles/src/components/SpecificationDetailsModal/index.ts
@@ -0,0 +1 @@
+export { default as SpecificationDetailsModal } from './SpecificationDetailsModal'
diff --git a/src/apps/profiles/src/components/StudioOtherDetailsModal/StudioOtherDetailsModal.module.scss b/src/apps/profiles/src/components/StudioOtherDetailsModal/StudioOtherDetailsModal.module.scss
new file mode 100644
index 000000000..47e811dd7
--- /dev/null
+++ b/src/apps/profiles/src/components/StudioOtherDetailsModal/StudioOtherDetailsModal.module.scss
@@ -0,0 +1,36 @@
+@import "@libs/ui/styles/includes";
+
+.container {
+    display: flex;
+    flex-direction: column;
+
+    .content {
+        .contentHeader {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid $black-10;
+            margin: $sp-4 0;
+            padding-bottom: $sp-2;
+
+            .contentHeaderActions {
+                button {
+                    margin-right: $sp-2;
+
+                    &:last-child {
+                        margin-right: 0;
+                    }
+                }
+            }
+        }
+
+        .contentBody {
+            height: 385px;
+            overflow: auto;
+
+            @include ltelg {
+                height: auto;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/apps/profiles/src/components/StudioOtherDetailsModal/StudioOtherDetailsModal.tsx b/src/apps/profiles/src/components/StudioOtherDetailsModal/StudioOtherDetailsModal.tsx
new file mode 100644
index 000000000..6f6d75fd4
--- /dev/null
+++ b/src/apps/profiles/src/components/StudioOtherDetailsModal/StudioOtherDetailsModal.tsx
@@ -0,0 +1,84 @@
+/* eslint-disable complexity */
+import { Dispatch, FC, SetStateAction, useState } from 'react'
+
+import { BaseModal } from '~/libs/ui'
+import {
+    MemberStats,
+} from '~/libs/core'
+
+import { numberToFixed } from '../../lib'
+
+import styles from './StudioOtherDetailsModal.module.scss'
+
+type WebDesignViewTypes = 'CHALLENGES DETAILS'
+
+interface StudioOtherDetailsModalProps {
+    onClose: () => void
+    studioOtherStats: MemberStats | undefined
+}
+
+const StudioOtherDetailsModal: FC<StudioOtherDetailsModalProps>
+    = (props: StudioOtherDetailsModalProps) => {
+        const [viewType]: [WebDesignViewTypes, Dispatch<SetStateAction<WebDesignViewTypes>>]
+            = useState<WebDesignViewTypes>('CHALLENGES DETAILS')
+
+        return (
+            <BaseModal
+                onClose={props.onClose}
+                open
+                size='body'
+                title='Studio Other'
+            >
+
+                <div className={styles.container}>
+                    <div className='member-stat-header'>
+                        <div>
+                            <span className='member-stat-value'>{props.studioOtherStats?.wins}</span>
+                            Wins
+                        </div>
+                        <div>
+                            <span className='member-stat-value'>{props.studioOtherStats?.challenges}</span>
+                            Challenges
+                        </div>
+                        <div>
+                            <span className='member-stat-value'>
+                                {numberToFixed(props.studioOtherStats?.rank?.overallPercentile || 0)}
+                                %
+                            </span>
+                            Percentile
+                        </div>
+                        <div>
+                            <span className='member-stat-value'>
+                                {numberToFixed(props.studioOtherStats?.screeningSuccessRate || 0)}
+                                %
+                            </span>
+                            Screening Success Rate
+                        </div>
+                        <div>
+                            <span className='member-stat-value'>
+                                {numberToFixed(props.studioOtherStats?.avgPlacement || 0)}
+                            </span>
+                            Average Placement
+                        </div>
+                    </div>
+
+                    <div className={styles.content}>
+                        <div className={styles.contentHeader}>
+                            <h4>{viewType}</h4>
+                        </div>
+
+                        <div className={styles.contentBody}>
+                            {
+                                viewType === 'CHALLENGES DETAILS' && (
+                                    <div />
+                                )
+
+                            }
+                        </div>
+                    </div>
+                </div>
+            </BaseModal>
+        )
+    }
+
+export default StudioOtherDetailsModal
diff --git a/src/apps/profiles/src/components/StudioOtherDetailsModal/index.ts b/src/apps/profiles/src/components/StudioOtherDetailsModal/index.ts
new file mode 100644
index 000000000..aa5597408
--- /dev/null
+++ b/src/apps/profiles/src/components/StudioOtherDetailsModal/index.ts
@@ -0,0 +1 @@
+export { default as StudioOtherDetailsModal } from './StudioOtherDetailsModal'
diff --git a/src/apps/profiles/src/components/TestSuitesDetailsModal/TestSuitesDetailsModal.module.scss b/src/apps/profiles/src/components/TestSuitesDetailsModal/TestSuitesDetailsModal.module.scss
new file mode 100644
index 000000000..47e811dd7
--- /dev/null
+++ b/src/apps/profiles/src/components/TestSuitesDetailsModal/TestSuitesDetailsModal.module.scss
@@ -0,0 +1,36 @@
+@import "@libs/ui/styles/includes";
+
+.container {
+    display: flex;
+    flex-direction: column;
+
+    .content {
+        .contentHeader {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid $black-10;
+            margin: $sp-4 0;
+            padding-bottom: $sp-2;
+
+            .contentHeaderActions {
+                button {
+                    margin-right: $sp-2;
+
+                    &:last-child {
+                        margin-right: 0;
+                    }
+                }
+            }
+        }
+
+        .contentBody {
+            height: 385px;
+            overflow: auto;
+
+            @include ltelg {
+                height: auto;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/apps/profiles/src/components/TestSuitesDetailsModal/TestSuitesDetailsModal.tsx b/src/apps/profiles/src/components/TestSuitesDetailsModal/TestSuitesDetailsModal.tsx
new file mode 100644
index 000000000..4ff50be2d
--- /dev/null
+++ b/src/apps/profiles/src/components/TestSuitesDetailsModal/TestSuitesDetailsModal.tsx
@@ -0,0 +1,83 @@
+/* eslint-disable complexity */
+import { Dispatch, FC, SetStateAction, useState } from 'react'
+
+import { BaseModal } from '~/libs/ui'
+import {
+    MemberStats,
+} from '~/libs/core'
+
+import { numberToFixed } from '../../lib'
+
+import styles from './TestSuitesDetailsModal.module.scss'
+
+type WebDesignViewTypes = 'CHALLENGES DETAILS'
+
+interface TestSuitesDetailsModalProps {
+    onClose: () => void
+    testSuitesStats: MemberStats | undefined
+}
+
+const TestSuitesDetailsModal: FC<TestSuitesDetailsModalProps> = (props: TestSuitesDetailsModalProps) => {
+    const [viewType]: [WebDesignViewTypes, Dispatch<SetStateAction<WebDesignViewTypes>>]
+        = useState<WebDesignViewTypes>('CHALLENGES DETAILS')
+
+    return (
+        <BaseModal
+            onClose={props.onClose}
+            open
+            size='body'
+            title='Test Suites'
+        >
+
+            <div className={styles.container}>
+                <div className='member-stat-header'>
+                    <div>
+                        <span className='member-stat-value'>{props.testSuitesStats?.wins}</span>
+                        Wins
+                    </div>
+                    <div>
+                        <span className='member-stat-value'>{props.testSuitesStats?.challenges}</span>
+                        Challenges
+                    </div>
+                    <div>
+                        <span className='member-stat-value'>
+                            {numberToFixed(props.testSuitesStats?.rank?.overallPercentile || 0)}
+                            %
+                        </span>
+                        Percentile
+                    </div>
+                    <div>
+                        <span className='member-stat-value'>
+                            {numberToFixed(props.testSuitesStats?.screeningSuccessRate || 0)}
+                            %
+                        </span>
+                        Screening Success Rate
+                    </div>
+                    <div>
+                        <span className='member-stat-value'>
+                            {numberToFixed(props.testSuitesStats?.avgPlacement || 0)}
+                        </span>
+                        Average Placement
+                    </div>
+                </div>
+
+                <div className={styles.content}>
+                    <div className={styles.contentHeader}>
+                        <h4>{viewType}</h4>
+                    </div>
+
+                    <div className={styles.contentBody}>
+                        {
+                            viewType === 'CHALLENGES DETAILS' && (
+                                <div />
+                            )
+
+                        }
+                    </div>
+                </div>
+            </div>
+        </BaseModal>
+    )
+}
+
+export default TestSuitesDetailsModal
diff --git a/src/apps/profiles/src/components/TestSuitesDetailsModal/index.ts b/src/apps/profiles/src/components/TestSuitesDetailsModal/index.ts
new file mode 100644
index 000000000..cc6d425f9
--- /dev/null
+++ b/src/apps/profiles/src/components/TestSuitesDetailsModal/index.ts
@@ -0,0 +1 @@
+export { default as TestSuitesDetailsModal } from './TestSuitesDetailsModal'
diff --git a/src/apps/profiles/src/components/WebDesignDetailsModal/WebDesignDetailsModal.tsx b/src/apps/profiles/src/components/WebDesignDetailsModal/WebDesignDetailsModal.tsx
index 80d1fd742..d5ce39432 100644
--- a/src/apps/profiles/src/components/WebDesignDetailsModal/WebDesignDetailsModal.tsx
+++ b/src/apps/profiles/src/components/WebDesignDetailsModal/WebDesignDetailsModal.tsx
@@ -55,7 +55,9 @@ const WebDesignDetailsModal: FC<WebDesignDetailsModalProps> = (props: WebDesignD
                         Screening Success Rate
                     </div>
                     <div>
-                        <span className='member-stat-value'>{props.webDesignStats?.avgPlacement}</span>
+                        <span className='member-stat-value'>
+                            {numberToFixed(props.webDesignStats?.avgPlacement || 0)}
+                        </span>
                         Average Placement
                     </div>
                 </div>
diff --git a/src/apps/profiles/src/components/WidgetMobileScreenDetailsModal/WidgetMobileScreenDetailsModal.module.scss b/src/apps/profiles/src/components/WidgetMobileScreenDetailsModal/WidgetMobileScreenDetailsModal.module.scss
new file mode 100644
index 000000000..47e811dd7
--- /dev/null
+++ b/src/apps/profiles/src/components/WidgetMobileScreenDetailsModal/WidgetMobileScreenDetailsModal.module.scss
@@ -0,0 +1,36 @@
+@import "@libs/ui/styles/includes";
+
+.container {
+    display: flex;
+    flex-direction: column;
+
+    .content {
+        .contentHeader {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid $black-10;
+            margin: $sp-4 0;
+            padding-bottom: $sp-2;
+
+            .contentHeaderActions {
+                button {
+                    margin-right: $sp-2;
+
+                    &:last-child {
+                        margin-right: 0;
+                    }
+                }
+            }
+        }
+
+        .contentBody {
+            height: 385px;
+            overflow: auto;
+
+            @include ltelg {
+                height: auto;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/apps/profiles/src/components/WidgetMobileScreenDetailsModal/WidgetMobileScreenDetailsModal.tsx b/src/apps/profiles/src/components/WidgetMobileScreenDetailsModal/WidgetMobileScreenDetailsModal.tsx
new file mode 100644
index 000000000..32040dccd
--- /dev/null
+++ b/src/apps/profiles/src/components/WidgetMobileScreenDetailsModal/WidgetMobileScreenDetailsModal.tsx
@@ -0,0 +1,84 @@
+/* eslint-disable complexity */
+import { Dispatch, FC, SetStateAction, useState } from 'react'
+
+import { BaseModal } from '~/libs/ui'
+import {
+    MemberStats,
+} from '~/libs/core'
+
+import { numberToFixed } from '../../lib'
+
+import styles from './WidgetMobileScreenDetailsModal.module.scss'
+
+type WebDesignViewTypes = 'CHALLENGES DETAILS'
+
+interface WidgetMobileScreenDetailsModalProps {
+    onClose: () => void
+    widgetMobileStats: MemberStats | undefined
+}
+
+const WidgetMobileScreenDetailsModal: FC<WidgetMobileScreenDetailsModalProps>
+    = (props: WidgetMobileScreenDetailsModalProps) => {
+        const [viewType]: [WebDesignViewTypes, Dispatch<SetStateAction<WebDesignViewTypes>>]
+            = useState<WebDesignViewTypes>('CHALLENGES DETAILS')
+
+        return (
+            <BaseModal
+                onClose={props.onClose}
+                open
+                size='body'
+                title='Widget or Mobile Screen Design'
+            >
+
+                <div className={styles.container}>
+                    <div className='member-stat-header'>
+                        <div>
+                            <span className='member-stat-value'>{props.widgetMobileStats?.wins}</span>
+                            Wins
+                        </div>
+                        <div>
+                            <span className='member-stat-value'>{props.widgetMobileStats?.challenges}</span>
+                            Challenges
+                        </div>
+                        <div>
+                            <span className='member-stat-value'>
+                                {numberToFixed(props.widgetMobileStats?.rank?.overallPercentile || 0)}
+                                %
+                            </span>
+                            Percentile
+                        </div>
+                        <div>
+                            <span className='member-stat-value'>
+                                {numberToFixed(props.widgetMobileStats?.screeningSuccessRate || 0)}
+                                %
+                            </span>
+                            Screening Success Rate
+                        </div>
+                        <div>
+                            <span className='member-stat-value'>
+                                {numberToFixed(props.widgetMobileStats?.avgPlacement || 0)}
+                            </span>
+                            Average Placement
+                        </div>
+                    </div>
+
+                    <div className={styles.content}>
+                        <div className={styles.contentHeader}>
+                            <h4>{viewType}</h4>
+                        </div>
+
+                        <div className={styles.contentBody}>
+                            {
+                                viewType === 'CHALLENGES DETAILS' && (
+                                    <div />
+                                )
+
+                            }
+                        </div>
+                    </div>
+                </div>
+            </BaseModal>
+        )
+    }
+
+export default WidgetMobileScreenDetailsModal
diff --git a/src/apps/profiles/src/components/WidgetMobileScreenDetailsModal/index.ts b/src/apps/profiles/src/components/WidgetMobileScreenDetailsModal/index.ts
new file mode 100644
index 000000000..eda7e47ef
--- /dev/null
+++ b/src/apps/profiles/src/components/WidgetMobileScreenDetailsModal/index.ts
@@ -0,0 +1 @@
+export { default as WidgetMobileScreenDetailsModal } from './WidgetMobileScreenDetailsModal'
diff --git a/src/apps/profiles/src/components/WireframesDetailsModal/WireframesDetailsModal.module.scss b/src/apps/profiles/src/components/WireframesDetailsModal/WireframesDetailsModal.module.scss
new file mode 100644
index 000000000..47e811dd7
--- /dev/null
+++ b/src/apps/profiles/src/components/WireframesDetailsModal/WireframesDetailsModal.module.scss
@@ -0,0 +1,36 @@
+@import "@libs/ui/styles/includes";
+
+.container {
+    display: flex;
+    flex-direction: column;
+
+    .content {
+        .contentHeader {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid $black-10;
+            margin: $sp-4 0;
+            padding-bottom: $sp-2;
+
+            .contentHeaderActions {
+                button {
+                    margin-right: $sp-2;
+
+                    &:last-child {
+                        margin-right: 0;
+                    }
+                }
+            }
+        }
+
+        .contentBody {
+            height: 385px;
+            overflow: auto;
+
+            @include ltelg {
+                height: auto;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/apps/profiles/src/components/WireframesDetailsModal/WireframesDetailsModal.tsx b/src/apps/profiles/src/components/WireframesDetailsModal/WireframesDetailsModal.tsx
new file mode 100644
index 000000000..3ed32af6b
--- /dev/null
+++ b/src/apps/profiles/src/components/WireframesDetailsModal/WireframesDetailsModal.tsx
@@ -0,0 +1,83 @@
+/* eslint-disable complexity */
+import { Dispatch, FC, SetStateAction, useState } from 'react'
+
+import { BaseModal } from '~/libs/ui'
+import {
+    MemberStats,
+} from '~/libs/core'
+
+import { numberToFixed } from '../../lib'
+
+import styles from './WireframesDetailsModal.module.scss'
+
+type WebDesignViewTypes = 'CHALLENGES DETAILS'
+
+interface WireframesDetailsModalProps {
+    onClose: () => void
+    wireframesStats: MemberStats | undefined
+}
+
+const WireframesDetailsModal: FC<WireframesDetailsModalProps> = (props: WireframesDetailsModalProps) => {
+    const [viewType]: [WebDesignViewTypes, Dispatch<SetStateAction<WebDesignViewTypes>>]
+        = useState<WebDesignViewTypes>('CHALLENGES DETAILS')
+
+    return (
+        <BaseModal
+            onClose={props.onClose}
+            open
+            size='body'
+            title='Wireframes'
+        >
+
+            <div className={styles.container}>
+                <div className='member-stat-header'>
+                    <div>
+                        <span className='member-stat-value'>{props.wireframesStats?.wins}</span>
+                        Wins
+                    </div>
+                    <div>
+                        <span className='member-stat-value'>{props.wireframesStats?.challenges}</span>
+                        Challenges
+                    </div>
+                    <div>
+                        <span className='member-stat-value'>
+                            {numberToFixed(props.wireframesStats?.rank?.overallPercentile || 0)}
+                            %
+                        </span>
+                        Percentile
+                    </div>
+                    <div>
+                        <span className='member-stat-value'>
+                            {numberToFixed(props.wireframesStats?.screeningSuccessRate || 0)}
+                            %
+                        </span>
+                        Screening Success Rate
+                    </div>
+                    <div>
+                        <span className='member-stat-value'>
+                            {numberToFixed(props.wireframesStats?.avgPlacement || 0)}
+                        </span>
+                        Average Placement
+                    </div>
+                </div>
+
+                <div className={styles.content}>
+                    <div className={styles.contentHeader}>
+                        <h4>{viewType}</h4>
+                    </div>
+
+                    <div className={styles.contentBody}>
+                        {
+                            viewType === 'CHALLENGES DETAILS' && (
+                                <div />
+                            )
+
+                        }
+                    </div>
+                </div>
+            </div>
+        </BaseModal>
+    )
+}
+
+export default WireframesDetailsModal
diff --git a/src/apps/profiles/src/components/WireframesDetailsModal/index.ts b/src/apps/profiles/src/components/WireframesDetailsModal/index.ts
new file mode 100644
index 000000000..7e4304e31
--- /dev/null
+++ b/src/apps/profiles/src/components/WireframesDetailsModal/index.ts
@@ -0,0 +1 @@
+export { default as WireframesDetailsModal } from './WireframesDetailsModal'
diff --git a/src/apps/profiles/src/components/index.ts b/src/apps/profiles/src/components/index.ts
index 2b9cf8c4c..8bd07995b 100644
--- a/src/apps/profiles/src/components/index.ts
+++ b/src/apps/profiles/src/components/index.ts
@@ -17,3 +17,12 @@ export * from './DesignF2FDetailsModal'
 export * from './EditMemberPropertyBtn'
 export * from './AddButton'
 export * from './EmptySection'
+export * from './WireframesDetailsModal'
+export * from './FrontEndFlashDetailsModal'
+export * from './PrintPresentationDetailsModal'
+export * from './StudioOtherDetailsModal'
+export * from './FEDesignDetailsModal'
+export * from './BannersIconsDetailsModal'
+export * from './WidgetMobileScreenDetailsModal'
+export * from './TestSuitesDetailsModal'
+export * from './SpecificationDetailsModal'
diff --git a/src/apps/profiles/src/lib/helpers.ts b/src/apps/profiles/src/lib/helpers.ts
index 43837d44c..3307adbbb 100644
--- a/src/apps/profiles/src/lib/helpers.ts
+++ b/src/apps/profiles/src/lib/helpers.ts
@@ -1,3 +1,4 @@
+/* eslint-disable complexity */
 import { UserProfile } from '~/libs/core'
 
 declare global {
@@ -44,6 +45,28 @@ export function subTrackLabelToHumanName(label: string): string {
             return 'Content Creation'
         case 'COPILOT_POSTING':
             return 'Copilot Posting'
+        case 'DESIGN':
+            return 'Design'
+        case 'WEB_DESIGNS':
+            return 'Web Design'
+        case 'WIREFRAMES':
+            return 'Wireframes'
+        case 'FRONT_END_FLASH':
+            return 'Front End Flash'
+        case 'PRINT_OR_PRESENTATION':
+            return 'Print or Presentation'
+        case 'STUDIO_OTHER':
+            return 'Studio Other'
+        case 'APPLICATION_FRONT_END_DESIGN':
+            return 'Application Front End Design'
+        case 'BANNERS_OR_ICONS':
+            return 'Banners or Icons'
+        case 'WIDGET_OR_MOBILE_SCREEN_DESIGN':
+            return 'Widget or Mobile Screen Design'
+        case 'LOGO_DESIGN':
+            return 'Logo Design'
+        case 'DESIGN_FIRST_2_FINISH':
+            return 'Design First2Finish'
         default: return label
     }
 
diff --git a/src/apps/profiles/src/member-profile/community-awards/CommunityAwards.module.scss b/src/apps/profiles/src/member-profile/community-awards/CommunityAwards.module.scss
index 6d756d636..ac42b61b8 100644
--- a/src/apps/profiles/src/member-profile/community-awards/CommunityAwards.module.scss
+++ b/src/apps/profiles/src/member-profile/community-awards/CommunityAwards.module.scss
@@ -3,9 +3,12 @@
 .container {
     display: flex;
     flex-direction: column;
-    margin-top: $sp-8;
     padding-bottom: $sp-4;
 
+    @include ltelg {
+        margin-top: $sp-4;
+    }
+
     .title {
         display: flex;
         justify-content: flex-end;
diff --git a/src/apps/profiles/src/member-profile/tc-achievements/ChallengeWinsBanner/ChallengeWinsBanner.tsx b/src/apps/profiles/src/member-profile/tc-achievements/ChallengeWinsBanner/ChallengeWinsBanner.tsx
index 1a54c636c..14a67ce99 100644
--- a/src/apps/profiles/src/member-profile/tc-achievements/ChallengeWinsBanner/ChallengeWinsBanner.tsx
+++ b/src/apps/profiles/src/member-profile/tc-achievements/ChallengeWinsBanner/ChallengeWinsBanner.tsx
@@ -7,18 +7,27 @@ import { MemberStats, UserProfile, UserStats } from '~/libs/core'
 import { subTrackLabelToHumanName } from '../../../lib/helpers'
 import {
     AssemblyDetailsModal,
+    BannersIconsDetailsModal,
     BugHuntDetailsModal,
     CodeDetailsModal,
     ContentCreationDetailsModal,
     CopilotDetailsModal,
     DesignF2FDetailsModal,
     F2FDetailsModal,
+    FEDesignDetailsModal,
+    FrontEndFlashDetailsModal,
     LogoDesignDetailsModal,
     MMDetailsModal,
+    PrintPresentationDetailsModal,
+    SpecificationDetailsModal,
     SRMDetailsModal,
+    StudioOtherDetailsModal,
     TestScenariosDetailsModal,
+    TestSuitesDetailsModal,
     UIPrototypeDetailsModal,
     WebDesignDetailsModal,
+    WidgetMobileScreenDetailsModal,
+    WireframesDetailsModal,
 } from '../../../components'
 
 import { ChallengeWin } from './ChallengeWin'
@@ -50,6 +59,24 @@ const ChallengeWinsBanner: FC<ChallengeWinsBannerProps> = (props: ChallengeWinsB
         = props.memberStats?.DEVELOP?.subTracks?.find(subTrack => subTrack.name === 'BUG_HUNT')
     const testScenStats: MemberStats | undefined
         = props.memberStats?.DEVELOP?.subTracks?.find(subTrack => subTrack.name === 'TEST_SCENARIOS')
+    const wireframesStats: MemberStats | undefined
+        = props.memberStats?.DESIGN?.subTracks.find(subTrack => subTrack.name === 'WIREFRAMES')
+    const frontEndFlashStats: MemberStats | undefined
+        = props.memberStats?.DESIGN?.subTracks.find(subTrack => subTrack.name === 'FRONT_END_FLASH')
+    const printPresentationStats: MemberStats | undefined
+        = props.memberStats?.DESIGN?.subTracks.find(subTrack => subTrack.name === 'PRINT_OR_PRESENTATION')
+    const studioOtherStats: MemberStats | undefined
+        = props.memberStats?.DESIGN?.subTracks.find(subTrack => subTrack.name === 'STUDIO_OTHER')
+    const feDesignStats: MemberStats | undefined
+        = props.memberStats?.DESIGN?.subTracks.find(subTrack => subTrack.name === 'APPLICATION_FRONT_END_DESIGN')
+    const bannersIconsStats: MemberStats | undefined
+        = props.memberStats?.DESIGN?.subTracks.find(subTrack => subTrack.name === 'BANNERS_OR_ICONS')
+    const widgetMobileStats: MemberStats | undefined
+        = props.memberStats?.DESIGN?.subTracks.find(subTrack => subTrack.name === 'WIDGET_OR_MOBILE_SCREEN_DESIGN')
+    const testSuitesStats: MemberStats | undefined
+        = props.memberStats?.DEVELOP?.subTracks.find(subTrack => subTrack.name === 'TEST_SUITES')
+    const specStats: MemberStats | undefined
+        = props.memberStats?.DEVELOP?.subTracks.find(subTrack => subTrack.name === 'SPECIFICATION')
 
     const [isDesignF2FsDetailsOpen, setIsDesignF2FsDetailsOpen]: [boolean, Dispatch<SetStateAction<boolean>>]
         = useState<boolean>(false)
@@ -76,6 +103,25 @@ const ChallengeWinsBanner: FC<ChallengeWinsBannerProps> = (props: ChallengeWinsB
         = useState<boolean>(false)
     const [isCopilotDetailsOpen, setIsCopilotDetailsOpen]: [boolean, Dispatch<SetStateAction<boolean>>]
         = useState<boolean>(false)
+    const [isWireframesDetailsOpen, setIsWireframesDetailsOpen]: [boolean, Dispatch<SetStateAction<boolean>>]
+        = useState<boolean>(false)
+    const [isFrontEndFlashDetailsOpen, setIsFrontEndFlashDetailsOpen]: [boolean, Dispatch<SetStateAction<boolean>>]
+        = useState<boolean>(false)
+    const [isPrintPresentationDetailsOpen, setIsPrintPresentationDetailsOpen]: [
+        boolean, Dispatch<SetStateAction<boolean>>
+    ] = useState<boolean>(false)
+    const [isStudioOtherDetailsOpen, setIsStudioOtherDetailsOpen]: [boolean, Dispatch<SetStateAction<boolean>>]
+        = useState<boolean>(false)
+    const [isFEDesignDetailsOpen, setIsFEDesignDetailsOpen]: [boolean, Dispatch<SetStateAction<boolean>>]
+        = useState<boolean>(false)
+    const [isBannersIconsDetailsOpen, setisBannersIconsDetailsOpen]: [boolean, Dispatch<SetStateAction<boolean>>]
+        = useState<boolean>(false)
+    const [isWidgetMobileDetailsOpen, setIsWidgetMobileDetailsOpen]: [boolean, Dispatch<SetStateAction<boolean>>]
+        = useState<boolean>(false)
+    const [isTestSuitesDetailsOpen, setIsTestSuitesDetailsOpen]: [boolean, Dispatch<SetStateAction<boolean>>]
+        = useState<boolean>(false)
+    const [isSpecificationDetailsOpen, setIsSpecificationDetailsOpen]: [boolean, Dispatch<SetStateAction<boolean>>]
+        = useState<boolean>(false)
 
     function handleShowDSModal(): void {
         setIsDSDetailsOpen(!isDSDetailsOpen)
@@ -120,14 +166,37 @@ const ChallengeWinsBanner: FC<ChallengeWinsBannerProps> = (props: ChallengeWinsB
             case 'COPILOT':
                 setIsCopilotDetailsOpen(!isCopilotDetailsOpen)
                 break
+            case 'WIREFRAMES':
+                setIsWireframesDetailsOpen(!isWireframesDetailsOpen)
+                break
+            case 'FRONT_END_FLASH':
+                setIsFrontEndFlashDetailsOpen(!isFrontEndFlashDetailsOpen)
+                break
+            case 'PRINT_OR_PRESENTATION':
+                setIsPrintPresentationDetailsOpen(!isPrintPresentationDetailsOpen)
+                break
+            case 'STUDIO_OTHER':
+                setIsStudioOtherDetailsOpen(!isStudioOtherDetailsOpen)
+                break
+            case 'APPLICATION_FRONT_END_DESIGN':
+                setIsFEDesignDetailsOpen(!isFEDesignDetailsOpen)
+                break
+            case 'BANNERS_OR_ICONS':
+                setisBannersIconsDetailsOpen(!isBannersIconsDetailsOpen)
+                break
+            case 'WIDGET_OR_MOBILE_SCREEN_DESIGN':
+                setIsWidgetMobileDetailsOpen(!isWidgetMobileDetailsOpen)
+                break
+            case 'TEST_SUITES':
+                setIsTestSuitesDetailsOpen(!isTestSuitesDetailsOpen)
+                break
+            case 'SPECIFICATION':
+                setIsSpecificationDetailsOpen(!isSpecificationDetailsOpen)
+                break
             // TODO: modal views for the following subtracks
             // are those all the subtracks?
             // case 'CONCEPTUALIZATION':
             //     return 'Conceptualization'
-            // case 'SPECIFICATION':
-            //     return 'Specification'
-            // case 'TEST_SUITES':
-            //     return 'Test Suites'
             // case 'COPILOT_POSTING':
             //     return 'Copilot Posting'
             default: break
@@ -307,6 +376,69 @@ const ChallengeWinsBanner: FC<ChallengeWinsBannerProps> = (props: ChallengeWinsB
                 />
             )}
 
+            {isWireframesDetailsOpen && (
+                <WireframesDetailsModal
+                    onClose={bind(handleChallengeWinModalToggle, this, 'WIREFRAMES')}
+                    wireframesStats={wireframesStats}
+                />
+            )}
+
+            {isFrontEndFlashDetailsOpen && (
+                <FrontEndFlashDetailsModal
+                    onClose={bind(handleChallengeWinModalToggle, this, 'FRONT_END_FLASH')}
+                    froneEndFlashStats={frontEndFlashStats}
+                />
+            )}
+
+            {isPrintPresentationDetailsOpen && (
+                <PrintPresentationDetailsModal
+                    onClose={bind(handleChallengeWinModalToggle, this, 'PRINT_OR_PRESENTATION')}
+                    printPresentationStats={printPresentationStats}
+                />
+            )}
+
+            {isStudioOtherDetailsOpen && (
+                <StudioOtherDetailsModal
+                    onClose={bind(handleChallengeWinModalToggle, this, 'STUDIO_OTHER')}
+                    studioOtherStats={studioOtherStats}
+                />
+            )}
+
+            {isFEDesignDetailsOpen && (
+                <FEDesignDetailsModal
+                    onClose={bind(handleChallengeWinModalToggle, this, 'APPLICATION_FRONT_END_DESIGN')}
+                    feDesignStats={feDesignStats}
+                />
+            )}
+
+            {isBannersIconsDetailsOpen && (
+                <BannersIconsDetailsModal
+                    onClose={bind(handleChallengeWinModalToggle, this, 'BANNERS_OR_ICONS')}
+                    bannersIconsStats={bannersIconsStats}
+                />
+            )}
+
+            {isWidgetMobileDetailsOpen && (
+                <WidgetMobileScreenDetailsModal
+                    onClose={bind(handleChallengeWinModalToggle, this, 'WIDGET_OR_MOBILE_SCREEN_DESIGN')}
+                    widgetMobileStats={widgetMobileStats}
+                />
+            )}
+
+            {isTestSuitesDetailsOpen && (
+                <TestSuitesDetailsModal
+                    onClose={bind(handleChallengeWinModalToggle, this, 'TEST_SUITES')}
+                    testSuitesStats={testSuitesStats}
+                />
+            )}
+
+            {isSpecificationDetailsOpen && (
+                <SpecificationDetailsModal
+                    onClose={bind(handleChallengeWinModalToggle, this, 'SPECIFICATION')}
+                    specStats={specStats}
+                />
+            )}
+
         </div>
     )
 }