);
};
diff --git a/src/views/groups/views/shared-tabs/GroupSharedTabs.scss b/src/views/groups/views/shared-tabs/GroupSharedTabs.scss
new file mode 100644
index 00000000..6da2ee1e
--- /dev/null
+++ b/src/views/groups/views/shared-tabs/GroupSharedTabs.scss
@@ -0,0 +1,40 @@
+.nitro-groups {
+ .badge-preview {
+ position: relative;
+ width: 50px;
+ height: 50px;
+ background: $white;
+ border-radius: $border-radius;
+
+ &.active {
+ &:before {
+ position: absolute;
+ content: ' ';
+ width: 0;
+ height: 0;
+ border-top: 10px solid white;
+ border-left: 10px solid transparent;
+ border-right: 10px solid transparent;
+ bottom: -10px;
+ }
+ }
+ }
+
+ .group-color-swatch {
+ width: 30px;
+ height: 40px;
+
+ &:first-child {
+ border-top-left-radius: $border-radius;
+ border-bottom-left-radius: $border-radius;
+ }
+
+ &:last-child {
+ border-top-right-radius: $border-radius;
+ border-bottom-right-radius: $border-radius;
+ }
+ }
+}
+
+@import './tab-badge/GroupSharedTabBadgeView';
+@import './tab-colors/GroupSharedTabColorsView';
diff --git a/src/views/groups/views/shared-tabs/tab-badge/GroupSharedTabBadgeView.scss b/src/views/groups/views/shared-tabs/tab-badge/GroupSharedTabBadgeView.scss
new file mode 100644
index 00000000..1ad61e27
--- /dev/null
+++ b/src/views/groups/views/shared-tabs/tab-badge/GroupSharedTabBadgeView.scss
@@ -0,0 +1,26 @@
+.shared-tab-badge {
+ .position-swatch {
+ position: relative;
+ border-radius: $border-radius;
+ width: 16px;
+ height: 12px;
+ background: $white;
+
+ &.active {
+ background: $primary;
+ }
+ }
+
+ .color-swatch {
+ position: relative;
+ border-radius: $border-radius;
+ width: 16px;
+ height: 12px;
+ }
+
+ .selection-list {
+ height: 160px;
+ min-height: 160px;
+ max-height: 160px;
+ }
+}
diff --git a/src/views/groups/views/shared-tabs/tab-badge/GroupSharedTabBadgeView.tsx b/src/views/groups/views/shared-tabs/tab-badge/GroupSharedTabBadgeView.tsx
new file mode 100644
index 00000000..c4572551
--- /dev/null
+++ b/src/views/groups/views/shared-tabs/tab-badge/GroupSharedTabBadgeView.tsx
@@ -0,0 +1,128 @@
+import classNames from 'classnames';
+import { FC, useCallback, useEffect, useState } from 'react';
+import { BadgeImageView } from '../../../../shared/badge-image/BadgeImageView';
+import { GroupBadgePart } from '../../../common/GroupBadgePart';
+import { useGroupsContext } from '../../../context/GroupsContext';
+import { GroupsActions } from '../../../context/GroupsContext.types';
+
+const POSITIONS: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8];
+
+export const GroupSharedTabBadgeView: FC<{}> = props =>
+{
+ const { groupsState = null, dispatchGroupsState = null } = useGroupsContext();
+ const { badgeBases = null, badgeSymbols = null, badgePartColors = null, groupBadgeParts = null } = groupsState;
+
+ const [ editingIndex, setEditingIndex ] = useState