diff --git a/src/layout/base/NitroLayoutBase.types.ts b/src/layout/base/NitroLayoutBase.types.ts
index fe2219fa..846ddaf2 100644
--- a/src/layout/base/NitroLayoutBase.types.ts
+++ b/src/layout/base/NitroLayoutBase.types.ts
@@ -1,7 +1,7 @@
-import { ButtonHTMLAttributes, DetailedHTMLProps } from 'react';
+import { DetailedHTMLProps, HTMLAttributes } from 'react';
 import { NitroLayoutOverflow, NitroLayoutPosition, NitroLayoutSpacing } from '../common';
 
-export interface NitroLayoutBaseProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>
+export interface NitroLayoutBaseProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
 {
     overflow?: NitroLayoutOverflow;
     position?: NitroLayoutPosition;
diff --git a/src/layout/button-group/NitroLayoutButtonGroup.tsx b/src/layout/button-group/NitroLayoutButtonGroup.tsx
new file mode 100644
index 00000000..7617d07a
--- /dev/null
+++ b/src/layout/button-group/NitroLayoutButtonGroup.tsx
@@ -0,0 +1,19 @@
+import { FC, useMemo } from 'react';
+import { NitroLayoutBase } from '../base';
+import { NitroLayoutButtonGroupProps } from './NitroLayoutButtonGroup.types';
+
+export const NitroLayoutButtonGroup: FC<NitroLayoutButtonGroupProps> = props =>
+{
+    const { className = '', ...rest } = props;
+
+    const getClassName = useMemo(() =>
+    {
+        let newClassName = 'btn-group';
+
+        if(className && className.length) newClassName += ` ${ className }`;
+
+        return newClassName;
+    }, [ className ]);
+
+    return <NitroLayoutBase className={ getClassName } { ...rest } />;
+}
diff --git a/src/layout/button-group/NitroLayoutButtonGroup.types.ts b/src/layout/button-group/NitroLayoutButtonGroup.types.ts
new file mode 100644
index 00000000..8e428d0e
--- /dev/null
+++ b/src/layout/button-group/NitroLayoutButtonGroup.types.ts
@@ -0,0 +1,6 @@
+import { NitroLayoutBaseProps } from '../base';
+
+export interface NitroLayoutButtonGroupProps extends NitroLayoutBaseProps
+{
+
+}
diff --git a/src/layout/button-group/index.ts b/src/layout/button-group/index.ts
new file mode 100644
index 00000000..23d85cc8
--- /dev/null
+++ b/src/layout/button-group/index.ts
@@ -0,0 +1,2 @@
+export * from './NitroLayoutButtonGroup';
+export * from './NitroLayoutButtonGroup.types';
diff --git a/src/layout/card/grid/NitroCardGridView.tsx b/src/layout/card/grid/NitroCardGridView.tsx
index 97c17237..0eead8f5 100644
--- a/src/layout/card/grid/NitroCardGridView.tsx
+++ b/src/layout/card/grid/NitroCardGridView.tsx
@@ -20,7 +20,7 @@ export const NitroCardGridView: FC<NitroCardGridViewProps> = props =>
 
         if(columns && (columns >= 1))
         {
-            newStyle['grid-template-columns'] = 'unset';
+            newStyle.gridTemplateColumns = 'unset';
             newStyle['--bs-columns'] = columns.toString();
         }
 
diff --git a/src/layout/card/grid/item/NitroCardGridItemView.tsx b/src/layout/card/grid/item/NitroCardGridItemView.tsx
index 3bc431ef..6c1e4886 100644
--- a/src/layout/card/grid/item/NitroCardGridItemView.tsx
+++ b/src/layout/card/grid/item/NitroCardGridItemView.tsx
@@ -4,7 +4,7 @@ import { NitroCardGridItemViewProps } from './NitroCardGridItemView.types';
 
 export const NitroCardGridItemView: FC<NitroCardGridItemViewProps> = props =>
 {
-    const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemUniqueNumber = -2, itemUnseen = false, className = '', style = {}, children = null, ...rest } = props;
+    const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemCountMinimum = 1, itemUniqueNumber = -2, itemUnseen = false, className = '', style = {}, children = null, ...rest } = props;
 
     const getClassName = useMemo(() =>
     {
@@ -38,7 +38,7 @@ export const NitroCardGridItemView: FC<NitroCardGridItemViewProps> = props =>
 
     return (
         <div className={ getClassName } style={ getStyle } { ...rest }>
-            { (itemCount > 1) &&
+            { (itemCount > itemCountMinimum) &&
                 <span className="position-absolute badge border bg-danger px-1 rounded-circle">{ itemCount }</span> }
             { (itemUniqueNumber > 0) && 
                 <div className="position-absolute unique-item-counter">
diff --git a/src/layout/card/grid/item/NitroCardGridItemView.types.ts b/src/layout/card/grid/item/NitroCardGridItemView.types.ts
index 97861569..3aa21515 100644
--- a/src/layout/card/grid/item/NitroCardGridItemView.types.ts
+++ b/src/layout/card/grid/item/NitroCardGridItemView.types.ts
@@ -6,6 +6,7 @@ export interface NitroCardGridItemViewProps extends DetailsHTMLAttributes<HTMLDi
     itemColor?: string;
     itemActive?: boolean;
     itemCount?: number;
+    itemCountMinimum?: number;
     itemUniqueNumber?: number;
     itemUnseen?: boolean;
 }
diff --git a/src/layout/card/header/NitroCardHeaderView.tsx b/src/layout/card/header/NitroCardHeaderView.tsx
index b964fe46..2f314be7 100644
--- a/src/layout/card/header/NitroCardHeaderView.tsx
+++ b/src/layout/card/header/NitroCardHeaderView.tsx
@@ -17,7 +17,7 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
     {
         return (
             <div className="container-fluid bg-light">
-                <div className="row nitro-card-header simple-header">
+                <div className="row nitro-card-header simple-header overflow-hidden">
                     <div className="d-flex justify-content-center align-items-center w-100 position-relative px-0">
                         <div className="h5 text-white text-center text-shadow bg-tertiary-split border-top-0 drag-handler">{ headerText }</div>
                         <div className="position-absolute header-close" onMouseDownCapture={ onMouseDown } onClick={ onCloseClick }>
@@ -31,7 +31,7 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
 
     return (
         <div className="drag-handler container-fluid bg-primary">
-            <div className="row nitro-card-header">
+            <div className="row nitro-card-header overflow-hidden">
                 <div className="d-flex justify-content-center align-items-center w-100 position-relative">
                     <div className="h4 text-white text-shadow header-text">{ headerText }</div>
                     <div className="position-absolute header-close" onMouseDownCapture={ onMouseDown } onClick={ onCloseClick }>
diff --git a/src/layout/card/index.ts b/src/layout/card/index.ts
index 9191b143..c12c5247 100644
--- a/src/layout/card/index.ts
+++ b/src/layout/card/index.ts
@@ -5,4 +5,5 @@ export * from './grid';
 export * from './header';
 export * from './NitroCardView';
 export * from './NitroCardView.types';
+export * from './sub-header';
 export * from './tabs';
diff --git a/src/layout/card/sub-header/NitroCardSubHeaderView.tsx b/src/layout/card/sub-header/NitroCardSubHeaderView.tsx
new file mode 100644
index 00000000..e8e24ea3
--- /dev/null
+++ b/src/layout/card/sub-header/NitroCardSubHeaderView.tsx
@@ -0,0 +1,21 @@
+import { FC, useMemo } from 'react';
+import { NitroLayoutFlex } from '../..';
+import { NitroCardSubHeaderViewProps } from './NitroCardSubHeaderView.types';
+
+export const NitroCardSubHeaderView: FC<NitroCardSubHeaderViewProps> = props =>
+{
+    const { className = '', ...rest } = props;
+
+    const getClassName = useMemo(() =>
+    {
+        let newClassName = 'container-fluid bg-muted justify-content-center py-1';
+
+        if(className && className.length) newClassName += ` ${ className }`;
+
+        return newClassName;
+    }, [ className ]);
+
+    return (
+        <NitroLayoutFlex className={ getClassName } { ...rest } />
+    );
+}
diff --git a/src/layout/card/sub-header/NitroCardSubHeaderView.types.ts b/src/layout/card/sub-header/NitroCardSubHeaderView.types.ts
new file mode 100644
index 00000000..b160cc93
--- /dev/null
+++ b/src/layout/card/sub-header/NitroCardSubHeaderView.types.ts
@@ -0,0 +1,6 @@
+import { NitroLayoutFlexProps } from '../../flex';
+
+export interface NitroCardSubHeaderViewProps extends NitroLayoutFlexProps
+{
+
+}
diff --git a/src/layout/card/sub-header/index.ts b/src/layout/card/sub-header/index.ts
new file mode 100644
index 00000000..3597f89b
--- /dev/null
+++ b/src/layout/card/sub-header/index.ts
@@ -0,0 +1,2 @@
+export * from './NitroCardSubHeaderView';
+export * from './NitroCardSubHeaderView.types';
diff --git a/src/layout/common/NitroLayoutVariant.type.ts b/src/layout/common/NitroLayoutVariant.type.ts
index 69c4699a..cf973357 100644
--- a/src/layout/common/NitroLayoutVariant.type.ts
+++ b/src/layout/common/NitroLayoutVariant.type.ts
@@ -1 +1 @@
-export type NitroLayoutVariant = 'primary' | 'success' | 'danger';
+export type NitroLayoutVariant = 'primary' | 'success' | 'danger' | 'secondary';
diff --git a/src/layout/gift-card/NitroLayoutGiftCardView.types.ts b/src/layout/gift-card/NitroLayoutGiftCardView.types.ts
index c530d65c..def9113b 100644
--- a/src/layout/gift-card/NitroLayoutGiftCardView.types.ts
+++ b/src/layout/gift-card/NitroLayoutGiftCardView.types.ts
@@ -1,6 +1,6 @@
 export interface NitroLayoutGiftCardViewProps
 {
-    figure?:string;
+    figure?: string;
     userName?: string;
     message?: string;
     editable?: boolean;
diff --git a/src/layout/grid/column/NitroLayoutGridColumn.tsx b/src/layout/grid/column/NitroLayoutGridColumn.tsx
index f169ca09..dfa34267 100644
--- a/src/layout/grid/column/NitroLayoutGridColumn.tsx
+++ b/src/layout/grid/column/NitroLayoutGridColumn.tsx
@@ -4,16 +4,16 @@ import { NitroLayoutGridColumnProps } from './NitroLayoutGridColumn.types';
 
 export const NitroLayoutGridColumn: FC<NitroLayoutGridColumnProps> = props =>
 {
-    const { className = '', size = 12, gap = 3, ...rest } = props;
+    const { className = '', size = 12, gap = 2, overflow = 'auto', ...rest } = props;
 
     const getClassName = useMemo(() =>
     {
         let newClassName = `g-col-${ size }`;
 
-        if(className && className.length) newClassName += ' ' + className;
+        if(className && className.length) newClassName += ` ${ className }`;
 
         return newClassName;
     }, [ className, size ]);
 
-    return <NitroLayoutFlexColumn className={ getClassName } gap={ gap } overflow="auto" { ...rest } />
+    return <NitroLayoutFlexColumn className={ getClassName } gap={ gap } overflow={ overflow } { ...rest } />
 }
diff --git a/src/layout/index.ts b/src/layout/index.ts
index 2859e2a3..2d721551 100644
--- a/src/layout/index.ts
+++ b/src/layout/index.ts
@@ -1,4 +1,5 @@
 export * from './button';
+export * from './button-group';
 export * from './card';
 export * from './common';
 export * from './draggable-window';