diff --git a/packages/components/src/sidebar/sidebar.tsx b/packages/components/src/sidebar/sidebar.tsx
index 899ad794..efc803eb 100644
--- a/packages/components/src/sidebar/sidebar.tsx
+++ b/packages/components/src/sidebar/sidebar.tsx
@@ -198,7 +198,7 @@ const COMMUNITIES_EXPAND_CONTROL = COMMUNITIES.reduce(
   {} as Record<string, boolean>[]
 )
 
-const _Sidebar = (props: Props) => {
+const Sidebar = (props: Props) => {
   const { name, description, membersCount } = props
   const [isExpanded, setIsExpanded] = useState({
     ...COMMUNITIES_EXPAND_CONTROL,
@@ -218,8 +218,8 @@ const _Sidebar = (props: Props) => {
     <Stack backgroundColor="$background">
       <Image
         src="https://images.unsplash.com/photo-1584475784921-d9dbfd9d17ca?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80"
-        width={352}
-        height={136}
+        width="full"
+        aspectRatio={2.6}
       />
       <Stack
         paddingBottom={16}
@@ -275,4 +275,4 @@ const _Sidebar = (props: Props) => {
   )
 }
 
-export const Sidebar = _Sidebar
+export { Sidebar }