diff --git a/components/SettingsControls/samples/ContentAlignmentSettingsCardSample.xaml b/components/SettingsControls/samples/ContentAlignmentSettingsCardSample.xaml
new file mode 100644
index 00000000..180f6e08
--- /dev/null
+++ b/components/SettingsControls/samples/ContentAlignmentSettingsCardSample.xaml
@@ -0,0 +1,121 @@
+<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
+<Page x:Class="SettingsControlsExperiment.Samples.ContentAlignmentSettingsCardSample"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:controls="using:CommunityToolkit.WinUI.Controls"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      xmlns:tk="using:CommunityToolkit.WinUI"
+      mc:Ignorable="d">
+
+    <StackPanel Spacing="4">
+
+        <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup x:Name="HorizontalReveredLayout">
+                <VisualState>
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="0" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="Left_Column.Width" Value="*" />
+                        <Setter Target="Right_Column.Width" Value="Auto" />
+                        <Setter Target="AdditionalContent.Margin" Value="0,0,20,0" />
+                        <Setter Target="AdditionalContent.(Grid.Column)" Value="0" />
+                        <Setter Target="PressedContent.(Grid.Column)" Value="1" />
+                    </VisualState.Setters>
+                </VisualState>
+                <VisualState>
+                    <VisualState.StateTriggers>
+                        <!--  The Breakpoint follow by SettingsCardWrapThreshold of ContentAlignment Horizontal  -->
+                        <tk:ControlSizeTrigger MaxWidth="900"
+                                               TargetElement="{Binding ElementName=settingsCard}" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="Left_Column.Width" Value="Auto" />
+                        <Setter Target="Right_Column.Width" Value="*" />
+                        <Setter Target="AdditionalContent.Margin" Value="20,0,0,0" />
+                        <Setter Target="AdditionalContent.(Grid.Column)" Value="1" />
+                        <Setter Target="PressedContent.(Grid.Column)" Value="0" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
+        <controls:SettingsCard Description="When resizing a SettingsCard, the Content will wrap vertically. You can override this breakpoint by setting the SettingsCardWrapThreshold resource. For edge cases, you can also hide the icon by setting SettingsCardWrapNoIconThreshold."
+                               Header="Adaptive layouts"
+                               HeaderIcon="{tk:FontIcon Glyph=&#xE745;}"
+                               IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
+            <controls:SettingsCard.Resources>
+                <x:Double x:Key="SettingsCardWrapThreshold">800</x:Double>
+                <x:Double x:Key="SettingsCardWrapNoIconThreshold">600</x:Double>
+            </controls:SettingsCard.Resources>
+            <Button Content="This control will wrap vertically!"
+                    Style="{StaticResource AccentButtonStyle}" />
+        </controls:SettingsCard>
+
+        <controls:SettingsCard ContentAlignment="Left"
+                               IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
+            <CheckBox Content="Here the ContentAlignment is set to Left. This is great for e.g. CheckBoxes or RadioButtons." />
+        </controls:SettingsCard>
+
+        <controls:SettingsCard HorizontalContentAlignment="Left"
+                               ContentAlignment="Vertical"
+                               Description="You can align your content vertically. Make sure to set the HorizontalContentAlignment to Left when you do!"
+                               Header="Vertically aligned"
+                               IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
+            <GridView SelectedIndex="1">
+                <GridViewItem>
+                    <Border Width="64"
+                            Height="64"
+                            Background="#0078D4"
+                            CornerRadius="{ThemeResource ControlCornerRadius}" />
+                </GridViewItem>
+                <GridViewItem>
+                    <Border Width="64"
+                            Height="64"
+                            Background="#005EB7"
+                            CornerRadius="{ThemeResource ControlCornerRadius}" />
+                </GridViewItem>
+                <GridViewItem>
+                    <Border Width="64"
+                            Height="64"
+                            Background="#003D92"
+                            CornerRadius="{ThemeResource ControlCornerRadius}" />
+                </GridViewItem>
+                <GridViewItem>
+                    <Border Width="64"
+                            Height="64"
+                            Background="#001968"
+                            CornerRadius="{ThemeResource ControlCornerRadius}" />
+                </GridViewItem>
+            </GridView>
+        </controls:SettingsCard>
+
+        <controls:SettingsCard x:Name="settingsCard"
+                               ContentAlignment="Horizontal"
+                               Description="You can also align your content horizontally. Additional image will stretch to middle. You still can override this breakpoint by setting both SettingsCardWrapThreshold and additional SettingsCardHeaderPanelMaxWidth resoure to wrap vertically."
+                               Header="Horizontally aligned"
+                               IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
+            <controls:SettingsCard.Resources>
+                <x:Double x:Key="SettingsCardHeaderPanelMaxWidth">550</x:Double>
+                <x:Double x:Key="SettingsCardContentPresenterMinWidth">0</x:Double>
+
+                <x:Double x:Key="SettingsCardWrapThreshold">900</x:Double>
+            </controls:SettingsCard.Resources>
+            <Grid>
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition x:Name="Left_Column" />
+                    <ColumnDefinition x:Name="Right_Column" />
+                </Grid.ColumnDefinitions>
+                <Grid x:Name="AdditionalContent"
+                      MaxHeight="100"
+                      Background="Pink"
+                      CornerRadius="{ThemeResource ControlCornerRadius}">
+                    <Image VerticalAlignment="Center"
+                           Source="/Assets/SplashScreen.png"
+                           Stretch="UniformToFill" />
+                </Grid>
+                <Button x:Name="PressedContent">Button</Button>
+            </Grid>
+        </controls:SettingsCard>
+    </StackPanel>
+</Page>
diff --git a/components/SettingsControls/samples/ContentAlignmentSettingsCardSample.xaml.cs b/components/SettingsControls/samples/ContentAlignmentSettingsCardSample.xaml.cs
new file mode 100644
index 00000000..4fa3234a
--- /dev/null
+++ b/components/SettingsControls/samples/ContentAlignmentSettingsCardSample.xaml.cs
@@ -0,0 +1,17 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+namespace SettingsControlsExperiment.Samples;
+
+[ToolkitSampleBoolOption("IsCardEnabled", true, Title = "Is Enabled")]
+
+[ToolkitSample(id: nameof(ContentAlignmentSettingsCardSample), "ContentAlignmentSettingsCardSample", description: "A sample for showing how to use the SettingsCard.ContentAlignment attached property")]
+
+public sealed partial class ContentAlignmentSettingsCardSample : Page
+{
+    public ContentAlignmentSettingsCardSample()
+    {
+        this.InitializeComponent();
+    }
+}
diff --git a/components/SettingsControls/samples/SettingsCard.md b/components/SettingsControls/samples/SettingsCard.md
index 667bc703..cab4d336 100644
--- a/components/SettingsControls/samples/SettingsCard.md
+++ b/components/SettingsControls/samples/SettingsCard.md
@@ -12,11 +12,15 @@ issue-id: 0
 icon: Assets/SettingsCard.png
 ---
 
-SettingsCard is a control that can be used to display settings in your experience. It uses the default styling found in Windows 11 and is easy to use, meets all accessibility standards and will make your settings page look great!
+`SettingsCard` is a control that can be used to display settings in your experience. It uses the default styling found in Windows 11 and is easy to use, meets all accessibility standards and will make your settings page look great!
 You can set the `Header`, `Description`, `HeaderIcon` and `Content` properties to create an easy to use experience, like so:
 
 > [!SAMPLE SettingsCardSample]
 
-SettingsCard can also be turned into a button, by setting the `IsClickEnabled` property. This can be useful whenever you want your settings component to navigate to a detail page or open an external link. You can set a custom icon by setting the `ActionIcon`, or hiding it completely by setting the `IsActionIconVisible` to `false`.
+`SettingsCard` can also be turned into a button, by setting the `IsClickEnabled` property. This can be useful whenever you want your settings component to navigate to a detail page or open an external link. You can set a custom icon by setting the `ActionIcon`, or hiding it completely by setting the `IsActionIconVisible` to `false`.
 
 > [!SAMPLE ClickableSettingsCardSample]
+
+You can easily override certain properties to create custom experiences. For instance, you can customize the `ContentAlignment` of a `SettingsCard`, to align your content to the Right (default), Left (hiding the `HeaderIcon`, `Header` and `Description`), Vertically (usually best paired with changing the `HorizontalContentAlignment` to `Stretch`) or Horizontally (attaching additional `VisualState` to reverse the Content layout).
+
+> [!SAMPLE ContentAlignmentSettingsCardSample]
diff --git a/components/SettingsControls/samples/SettingsCardSample.xaml b/components/SettingsControls/samples/SettingsCardSample.xaml
index 6e17962d..583bd122 100644
--- a/components/SettingsControls/samples/SettingsCardSample.xaml
+++ b/components/SettingsControls/samples/SettingsCardSample.xaml
@@ -1,4 +1,4 @@
-<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
+<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
 <Page x:Class="SettingsControlsExperiment.Samples.SettingsCardSample"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
@@ -37,18 +37,6 @@
                     Style="{StaticResource AccentButtonStyle}" />
         </controls:SettingsCard>
 
-        <controls:SettingsCard Description="When resizing a SettingsCard, the Content will wrap vertically. You can override this breakpoint by setting the SettingsCardWrapThreshold resource. For edge cases, you can also hide the icon by setting SettingsCardWrapNoIconThreshold."
-                               Header="Adaptive layouts"
-                               HeaderIcon="{ui:FontIcon Glyph=&#xE745;}"
-                               IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
-            <controls:SettingsCard.Resources>
-                <x:Double x:Key="SettingsCardWrapThreshold">800</x:Double>
-                <x:Double x:Key="SettingsCardWrapNoIconThreshold">600</x:Double>
-            </controls:SettingsCard.Resources>
-            <Button Content="This control will wrap vertically!"
-                    Style="{StaticResource AccentButtonStyle}" />
-        </controls:SettingsCard>
-
         <controls:SettingsCard Header="This is a card with a Header only" />
     </StackPanel>
 </Page>
diff --git a/components/SettingsControls/samples/SettingsControls.Samples.csproj b/components/SettingsControls/samples/SettingsControls.Samples.csproj
index 188a0f4d..503d130e 100644
--- a/components/SettingsControls/samples/SettingsControls.Samples.csproj
+++ b/components/SettingsControls/samples/SettingsControls.Samples.csproj
@@ -7,6 +7,10 @@
 
   <!-- Sets this up as a toolkit component's sample project -->
   <Import Project="$(ToolingDirectory)\ToolkitComponent.SampleProject.props" />
+  <ItemGroup>
+    <Content Remove="ContentAlignmentSettingsCardSample.xaml" />
+    <Content Remove="ContentAlignmentSettingsCardSample.xaml.cs" />
+  </ItemGroup>
 
   <ItemGroup>
     <ProjectReference Include="$(ToolkitExtensionsSourceProject)"></ProjectReference>
@@ -23,4 +27,9 @@
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>
   </ItemGroup>
+  <ItemGroup>
+    <Page Update="ContentAlignmentSettingsCardSample.xaml">
+      <SubType>Designer</SubType>
+    </Page>
+  </ItemGroup>
 </Project>
diff --git a/components/SettingsControls/samples/SettingsExpander.md b/components/SettingsControls/samples/SettingsExpander.md
index 3fd0566d..e021d516 100644
--- a/components/SettingsControls/samples/SettingsExpander.md
+++ b/components/SettingsControls/samples/SettingsExpander.md
@@ -18,8 +18,6 @@ A `SettingsExpander` can have it's own content to display a setting on the right
 
 > [!SAMPLE SettingsExpanderSample]
 
-You can easily override certain properties to create custom experiences. For instance, you can customize the `ContentAlignment` of a `SettingsCard`, to align your content to the Right (default), Left (hiding the `HeaderIcon`, `Header` and `Description`) or Vertically (usually best paired with changing the `HorizontalContentAlignment` to `Stretch`).
-
 `SettingsExpander` is also an `ItemsControl`, so its items can be driven by a collection and the `ItemsSource` property. You can use the `ItemTemplate` to define how your data object is represented as a `SettingsCard`, as shown below. The `ItemsHeader` and `ItemsFooter` property can be used to host custom content at the start or end of the items list.
 
 > [!SAMPLE SettingsExpanderItemsSourceSample]
diff --git a/components/SettingsControls/samples/SettingsExpanderSample.xaml b/components/SettingsControls/samples/SettingsExpanderSample.xaml
index 7c96fb97..db4c4cab 100644
--- a/components/SettingsControls/samples/SettingsExpanderSample.xaml
+++ b/components/SettingsControls/samples/SettingsExpanderSample.xaml
@@ -26,45 +26,18 @@
             <local:SettingsCard Header="A basic SettingsCard within an SettingsExpander">
                 <Button Content="Button" />
             </local:SettingsCard>
+            <local:SettingsCard Header="A ToggleSwitch attach TextBox">
+                <StackPanel Orientation="Horizontal">
+                    <ToggleSwitch x:Name="toggleSwitch" />
+                    <TextBox MinWidth="100"
+                             Margin="30,5,0,5"
+                             IsEnabled="{Binding IsOn, ElementName=toggleSwitch}"
+                             PlaceholderText="TextBox" />
+                </StackPanel>
+            </local:SettingsCard>
             <local:SettingsCard Description="SettingsCard within an Expander can be made clickable too!"
                                 Header="This item can be clicked"
                                 IsClickEnabled="True" />
-
-            <local:SettingsCard ContentAlignment="Left">
-                <CheckBox Content="Here the ContentAlignment is set to Left. This is great for e.g. CheckBoxes or RadioButtons." />
-            </local:SettingsCard>
-
-            <local:SettingsCard HorizontalContentAlignment="Left"
-                                ContentAlignment="Vertical"
-                                Description="You can also align your content vertically. Make sure to set the HorizontalAlignment to Left when you do!"
-                                Header="Vertically aligned">
-                <GridView SelectedIndex="1">
-                    <GridViewItem>
-                        <Border Width="64"
-                                Height="64"
-                                Background="#0078D4"
-                                CornerRadius="4" />
-                    </GridViewItem>
-                    <GridViewItem>
-                        <Border Width="64"
-                                Height="64"
-                                Background="#005EB7"
-                                CornerRadius="4" />
-                    </GridViewItem>
-                    <GridViewItem>
-                        <Border Width="64"
-                                Height="64"
-                                Background="#003D92"
-                                CornerRadius="4" />
-                    </GridViewItem>
-                    <GridViewItem>
-                        <Border Width="64"
-                                Height="64"
-                                Background="#001968"
-                                CornerRadius="4" />
-                    </GridViewItem>
-                </GridView>
-            </local:SettingsCard>
             <local:SettingsCard Description="You can override the Left indention of a SettingsCard by overriding the SettingsCardLeftIndention"
                                 Header="Customization">
                 <local:SettingsCard.Resources>
diff --git a/components/SettingsControls/src/SettingsCard/SettingsCard.Properties.cs b/components/SettingsControls/src/SettingsCard/SettingsCard.Properties.cs
index 6152a04e..8d408a2e 100644
--- a/components/SettingsControls/src/SettingsCard/SettingsCard.Properties.cs
+++ b/components/SettingsControls/src/SettingsCard/SettingsCard.Properties.cs
@@ -190,5 +190,9 @@ public enum ContentAlignment
     /// <summary>
     /// The Content is vertically aligned.
     /// </summary>
-    Vertical
+    Vertical,
+    /// <summary>
+    /// The Content is horizontally aligned.
+    /// </summary>
+    Horizontal
 }
diff --git a/components/SettingsControls/src/SettingsCard/SettingsCard.cs b/components/SettingsControls/src/SettingsCard/SettingsCard.cs
index 6e1e064b..222d8828 100644
--- a/components/SettingsControls/src/SettingsCard/SettingsCard.cs
+++ b/components/SettingsControls/src/SettingsCard/SettingsCard.cs
@@ -26,6 +26,7 @@ namespace CommunityToolkit.WinUI.Controls;
 [TemplateVisualState(Name = RightWrappedNoIconState, GroupName = ContentAlignmentStates)]
 [TemplateVisualState(Name = LeftState, GroupName = ContentAlignmentStates)]
 [TemplateVisualState(Name = VerticalState, GroupName = ContentAlignmentStates)]
+[TemplateVisualState(Name = HorizontalState, GroupName = ContentAlignmentStates)]
 
 [TemplateVisualState(Name = NoContentSpacingState, GroupName = ContentSpacingStates)]
 [TemplateVisualState(Name = ContentSpacingState, GroupName = ContentSpacingStates)]
@@ -44,6 +45,7 @@ public partial class SettingsCard : ButtonBase
     internal const string RightWrappedNoIconState = "RightWrappedNoIcon";
     internal const string LeftState = "Left";
     internal const string VerticalState = "Vertical";
+    internal const string HorizontalState = "Horizontal";
 
     internal const string ContentSpacingStates = "ContentSpacingStates";
     internal const string NoContentSpacingState = "NoContentSpacing";
diff --git a/components/SettingsControls/src/SettingsCard/SettingsCard.xaml b/components/SettingsControls/src/SettingsCard/SettingsCard.xaml
index 3d2e4dd3..33e56bcb 100644
--- a/components/SettingsControls/src/SettingsCard/SettingsCard.xaml
+++ b/components/SettingsControls/src/SettingsCard/SettingsCard.xaml
@@ -102,6 +102,8 @@
     <x:Double x:Key="SettingsCardDescriptionFontSize">12</x:Double>
     <x:Double x:Key="SettingsCardHeaderIconMaxSize">20</x:Double>
     <x:Double x:Key="SettingsCardLeftIndention">0</x:Double>
+    <x:Double x:Key="SettingsCardHeaderPanelMaxWidth">477</x:Double>
+    <x:Double x:Key="SettingsCardContentPresenterMinWidth">375</x:Double>
     <x:Double x:Key="SettingsCardContentMinWidth">120</x:Double>
     <Thickness x:Key="SettingsCardHeaderIconMargin">2,0,20,0</Thickness>
     <Thickness x:Key="SettingsCardActionIconMargin">14,0,0,0</Thickness>
@@ -198,8 +200,10 @@
                             <Grid.ColumnDefinitions>
                                 <ColumnDefinition Width="Auto"
                                                   MinWidth="{ThemeResource SettingsCardLeftIndention}" />
-                                <ColumnDefinition Width="*" />
-                                <ColumnDefinition Width="Auto" />
+                                <ColumnDefinition x:Name="COLUMN_HeaderPanel"
+                                                  Width="*" />
+                                <ColumnDefinition x:Name="COLUMN_ContentPresenter"
+                                                  Width="Auto" />
                                 <ColumnDefinition Width="Auto" />
                             </Grid.ColumnDefinitions>
                             <VisualStateManager.VisualStateGroups>
@@ -359,6 +363,20 @@
                                             <Setter Target="PART_ContentPresenter.HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource TemplatedParent}}" />
                                         </VisualState.Setters>
                                     </VisualState>
+
+                                    <!--  Whenever the control width is more than SettingsCardWrapThreshold, the Content horizontally stretch to middle  -->
+                                    <VisualState x:Name="Horizontal">
+                                        <VisualState.StateTriggers>
+                                            <tk:IsEqualStateTrigger Value="{Binding ContentAlignment, RelativeSource={RelativeSource TemplatedParent}}"
+                                                                    To="Horizontal" />
+                                        </VisualState.StateTriggers>
+                                        <VisualState.Setters>
+                                            <Setter Target="COLUMN_HeaderPanel.Width" Value="Auto" />
+                                            <Setter Target="COLUMN_ContentPresenter.Width" Value="*" />
+                                            <Setter Target="PART_ContentPresenter.MinWidth" Value="{ThemeResource SettingsCardContentPresenterMinWidth}" />
+                                            <Setter Target="HeaderPanel.MaxWidth" Value="{ThemeResource SettingsCardHeaderPanelMaxWidth}" />
+                                        </VisualState.Setters>
+                                    </VisualState>
                                 </VisualStateGroup>
 
                                 <!--  Collapsing the Content presenter whenever it's empty  -->