diff --git a/apps/www/src/content/docs/components/indicator/props.ts b/apps/www/src/content/docs/components/indicator/props.ts
index c2cd153a6..df0df7d98 100644
--- a/apps/www/src/content/docs/components/indicator/props.ts
+++ b/apps/www/src/content/docs/components/indicator/props.ts
@@ -16,4 +16,10 @@ export interface IndicatorProps {
 
   /** Additional CSS class names */
   className?: string;
+
+  /** Map of classNames for internal components */
+  classNames?: {
+    /** Class for the outer container element */
+    container?: string;
+  };
 }
diff --git a/packages/raystack/components/indicator/indicator.tsx b/packages/raystack/components/indicator/indicator.tsx
index d78f82688..5c2bf6195 100644
--- a/packages/raystack/components/indicator/indicator.tsx
+++ b/packages/raystack/components/indicator/indicator.tsx
@@ -1,4 +1,4 @@
-import { cva, VariantProps } from 'class-variance-authority';
+import { cva, cx, VariantProps } from 'class-variance-authority';
 import { ComponentProps, ReactNode } from 'react';
 
 import styles from './indicator.module.css';
@@ -24,10 +24,14 @@ export interface IndicatorProps
   label?: string;
   children?: ReactNode;
   'aria-label'?: string;
+  classNames?: {
+    container?: string;
+  };
 }
 
 export const Indicator = ({
   className,
+  classNames,
   variant,
   label,
   children,
@@ -37,7 +41,7 @@ export const Indicator = ({
   const accessibilityLabel = ariaLabel || label || `${variant} indicator`;
 
   return (
-    <div className={styles.wrapper} {...props}>
+    <div className={cx(styles.wrapper, classNames?.container)} {...props}>
       {children}
       <div
         className={indicator({ variant, className })}
diff --git a/packages/raystack/components/sidebar/sidebar.module.css b/packages/raystack/components/sidebar/sidebar.module.css
index f7336f633..7f631d3aa 100644
--- a/packages/raystack/components/sidebar/sidebar.module.css
+++ b/packages/raystack/components/sidebar/sidebar.module.css
@@ -2,7 +2,7 @@
   display: flex;
   width: 220px;
   height: 100%;
-  padding: var(--rs-space-5) var(--rs-space-4);
+  padding: var(--rs-space-5) 0;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
@@ -42,18 +42,17 @@
 
 .header {
   gap: var(--rs-space-3);
-  padding: var(--rs-space-2);
+  padding: var(--rs-space-2) var(--rs-space-5) var(--rs-space-7);
   align-self: stretch;
-  border-radius: var(--rs-radius-2);
   background: var(--rs-color-background-base-primary);
   overflow: hidden;
-  margin-bottom: var(--rs-space-6);
 }
 
 .main {
   flex: 1;
   overflow-y: auto;
-  width: 100%;
+  align-self: stretch;
+  padding: 0 var(--rs-space-4);
   gap: var(--rs-space-6);
   align-items: flex-start;
 }
@@ -68,6 +67,7 @@
 
 .footer {
   width: 100%;
+  padding: 0 var(--rs-space-4);
   gap: var(--rs-space-2);
 }