diff --git a/components/common/SegmentedControl/index.module.scss b/components/common/SegmentedControl/index.module.scss
index 33dbda4b..8f797e93 100644
--- a/components/common/SegmentedControl/index.module.scss
+++ b/components/common/SegmentedControl/index.module.scss
@@ -2,20 +2,24 @@
   display: flex;
   justify-content: center;
 
-  @include breakpoint(phone) {
+  &.raid {
+    width: 100%;
+  }
+
+  @include breakpoint(small-tablet) {
     width: 100%;
   }
 
   .segmentedControl {
-    // border-radius: $unit * 3;
     display: inline-flex;
     padding: 3px;
     position: relative;
+    gap: $unit-half;
     user-select: none;
     overflow: hidden;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
-    @include breakpoint(phone) {
+    @include breakpoint(small-tablet) {
       background: var(--card-bg);
       border-radius: 100px;
     }
@@ -25,6 +29,11 @@
       border-radius: $full-corner;
     }
 
+    &.background {
+      background: var(--input-bg);
+      border-radius: $full-corner;
+    }
+
     &.grow {
       flex-grow: 1;
     }
@@ -33,6 +42,10 @@
       gap: $unit;
     }
 
+    &.raid {
+      width: 100%;
+    }
+
     &.fire {
       .Segment input:checked + label {
         background: var(--fire-bg);
diff --git a/components/common/SegmentedControl/index.tsx b/components/common/SegmentedControl/index.tsx
index c1e00c97..93c61796 100644
--- a/components/common/SegmentedControl/index.tsx
+++ b/components/common/SegmentedControl/index.tsx
@@ -1,9 +1,10 @@
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 import classNames from 'classnames'
 import styles from './index.module.scss'
 
 interface Props {
   className?: string
+  wrapperClassName?: string
   elementClass?: string
   blended?: boolean
   grow?: boolean
@@ -11,15 +12,29 @@ interface Props {
   tabIndex?: number
 }
 
-const SegmentedControl: React.FC<Props> = ({
-  className,
-  elementClass,
-  blended,
-  grow,
-  gap,
-  tabIndex,
-  children,
-}) => {
+const SegmentedControl = React.forwardRef<
+  HTMLDivElement,
+  PropsWithChildren<Props>
+>(function SegmentedControl(
+  {
+    className,
+    wrapperClassName,
+    elementClass,
+    blended,
+    grow,
+    gap,
+    tabIndex,
+    children,
+  },
+  forwardedRef
+) {
+  const wrapperClasses = classNames(
+    {
+      [styles.wrapper]: true,
+    },
+    wrapperClassName?.split(' ').map((className) => styles[className])
+  )
+
   const classes = classNames(
     {
       [styles.segmentedControl]: true,
@@ -28,15 +43,15 @@ const SegmentedControl: React.FC<Props> = ({
       [styles.gap]: gap,
       blended: blended,
     },
-    className,
+    className?.split(' ').map((className) => styles[className]),
     elementClass
   )
   return (
-    <div className={styles.wrapper} tabIndex={tabIndex}>
+    <div className={wrapperClasses} tabIndex={tabIndex} ref={forwardedRef}>
       <div className={classes}>{children}</div>
     </div>
   )
-}
+})
 
 SegmentedControl.defaultProps = {
   blended: false,