diff --git a/src/features/settings/Settings.jsx b/src/features/settings/Settings.jsx
index 29e6c24..adaa6de 100644
--- a/src/features/settings/Settings.jsx
+++ b/src/features/settings/Settings.jsx
@@ -11,6 +11,7 @@ import ThemesContainer from "./Theming/ThemesContainer";
 import PrideText from "../../themes/PrideText";
 import TurnHeatOnWhenConnectionIsEstablished from "./TurnHeatOnWhenConnectionIsEstablished/TurnHeatOnWhenConnectionIsEstablished";
 import ShowCurrentWorkflowDetails from "./ShowCurrentWorkflowDetails/ShowCurrentWorkflowDetails";
+import SettingsList from "./SettingsList";
 
 export default function Settings() {
   return (
@@ -22,6 +23,7 @@ export default function Settings() {
       <FOrCLoader useSpinnerToShowLoader>
         <FOrC />
       </FOrCLoader>
+      <SettingsList />
       <AdjustLEDbrightnessContainer />
       <AdjustAutoShutoffTimeContainer />
       <VibrationToggleContainer />
diff --git a/src/features/settings/SettingsList.jsx b/src/features/settings/SettingsList.jsx
new file mode 100644
index 0000000..73b13a0
--- /dev/null
+++ b/src/features/settings/SettingsList.jsx
@@ -0,0 +1,20 @@
+import Card from "react-bootstrap/Card";
+import ListGroup from "react-bootstrap/ListGroup";
+import VibrationToggleContainer from "./VibrationToggle/VibrationToggleContainer";
+
+function SettingsList() {
+  return (
+    <Card style={{ width: "fit-content" }}>
+      <Card.Header>Featured</Card.Header>
+      <ListGroup variant="flush">
+        <ListGroup.Item>
+          <VibrationToggleContainer />
+        </ListGroup.Item>
+        <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
+        <ListGroup.Item>Vestibulum at eros</ListGroup.Item>
+      </ListGroup>
+    </Card>
+  );
+}
+
+export default SettingsList;
diff --git a/src/features/settings/Shared/StyledComponents/Div.jsx b/src/features/settings/Shared/StyledComponents/Div.jsx
index 615a28e..ef838dd 100644
--- a/src/features/settings/Shared/StyledComponents/Div.jsx
+++ b/src/features/settings/Shared/StyledComponents/Div.jsx
@@ -5,3 +5,7 @@ const Div = styled.div`
 `;
 
 export default Div;
+
+export const SettingsListDiv = styled(Div)`
+  display: flex;
+`;
diff --git a/src/features/settings/Shared/StyledComponents/StyledToggleDiv.jsx b/src/features/settings/Shared/StyledComponents/StyledToggleDiv.jsx
index 0002617..5fd260c 100644
--- a/src/features/settings/Shared/StyledComponents/StyledToggleDiv.jsx
+++ b/src/features/settings/Shared/StyledComponents/StyledToggleDiv.jsx
@@ -2,8 +2,8 @@ import styled from "styled-components";
 import ToggleSwitch from "../../../shared/styledComponents/Switch";
 
 const StyledToggleDiv = styled.div`
-  min-height: 40px;
-  max-width: 80px;
+  max-height: 40px;
+  min-width: 80px;
   display: flex;
 `;
 
diff --git a/src/features/settings/VibrationToggle/VibrationToggle.jsx b/src/features/settings/VibrationToggle/VibrationToggle.jsx
index 34f8f60..8bce7f0 100644
--- a/src/features/settings/VibrationToggle/VibrationToggle.jsx
+++ b/src/features/settings/VibrationToggle/VibrationToggle.jsx
@@ -1,20 +1,17 @@
 import StyledToggleSwitch from "../Shared/StyledComponents/StyledToggleDiv";
-import Div from "../Shared/StyledComponents/Div";
+import { SettingsListDiv } from "../Shared/StyledComponents/Div";
 import PrideText, { PrideTextWithDiv } from "../../../themes/PrideText";
 
 export default function VibrationToggle(props) {
   return (
-    <Div>
-      <h2>
-        <PrideText text="Vibrate Fan when Volcano reaches temperature" />{" "}
-      </h2>
-      <div onClick={props.onChange}>
-        <StyledToggleSwitch
-          onText="On"
-          offText={<PrideTextWithDiv text="Off" />}
-          isToggleOn={props.isVibrationEnabled}
-        />
-      </div>
-    </Div>
+    <SettingsListDiv>
+      <PrideText text="Vibrate Fan when Volcano reaches temperature" />{" "}
+      <StyledToggleSwitch
+        onText="On"
+        offText={<PrideTextWithDiv text="Off" />}
+        isToggleOn={props.isVibrationEnabled}
+        onChange={props.onChange}
+      />
+    </SettingsListDiv>
   );
 }
diff --git a/src/features/shared/styledComponents/RootNonAppOutletDiv.jsx b/src/features/shared/styledComponents/RootNonAppOutletDiv.jsx
index 9ed53f8..f128aea 100644
--- a/src/features/shared/styledComponents/RootNonAppOutletDiv.jsx
+++ b/src/features/shared/styledComponents/RootNonAppOutletDiv.jsx
@@ -7,6 +7,10 @@ const Div = styled.div`
   flex-direction: column;
   overflow-y: auto;
   overflow-x: hidden;
+
+  h1 {
+    color: ${(props) => props.theme.iconColor};
+  }
 `;
 
 export default function SectionRootDiv(props) {