diff --git a/packages/react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx b/packages/react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx
index 726e995a..c79aa6db 100644
--- a/packages/react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx
+++ b/packages/react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx
@@ -18,26 +18,68 @@
 
 import {Box, BoxProps} from '@oxygen-ui/react';
 import clsx from 'clsx';
-import {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement, forwardRef} from 'react';
+import {
+  ElementType,
+  ForwardRefExoticComponent,
+  MutableRefObject,
+  ReactElement,
+  forwardRef,
+  isValidElement,
+} from 'react';
 import {WithWrapperProps} from '../models/component';
 import SignInAlert from '../SignInAlert/SignInAlert';
-import SignInButton from '../SignInButton/SignInButton';
+import SignInButton, {SignInButtonProps} from '../SignInButton/SignInButton';
 import SignInDivider from '../SignInDivider/SignInDivider';
-import SignInLink from '../SignInLink/SignInLink';
+import SignInFooter from '../SignInFooter/SignInFooter';
+import SignInImage from '../SignInImage/SignInImage';
+import SignInLink, {SignInLinkProps} from '../SignInLink/SignInLink';
 import SignInPaper from '../SignInPaper/SignInPaper';
-import SignInTextField from '../SignInTextField/SignInTextField';
-import SignInTypography from '../SignInTypography/SignInTypography';
+import SignInPinInput from '../SignInPinInput/SignInPinInput';
+import SignInTextField, {SignInTextFieldProps} from '../SignInTextField/SignInTextField';
+import SignInTypography, {SignInTypographyProps} from '../SignInTypography/SignInTypography';
+import './sign-in.scss';
+
+type Footer =
+  | ReactElement
+  | {
+      copyrights?: {
+        link?: string;
+        text: string;
+      };
+      locale?: {
+        text: string;
+      };
+      privacyPolicy?: {
+        link?: string;
+        text: string;
+      };
+      termsOfUse?: {
+        link?: string;
+        text: string;
+      };
+    };
 
 export type SignInProps<C extends ElementType = ElementType> = {
   component?: C;
+  footer?: Footer;
+  links?: SignInLinkProps[];
+  loginOptions?: SignInButtonProps[];
+  logo?: string;
+  submitButton?: {text: string} & SignInButtonProps;
+  subtitle?: {text: string} & SignInTypographyProps;
+  textFields?: SignInTextFieldProps[];
+  title?: {text: string} & SignInTypographyProps;
 } & Omit<BoxProps, 'component'>;
 
 type SignInCompoundProps = {
   Alert: typeof SignInAlert;
   Button: typeof SignInButton;
   Divider: typeof SignInDivider;
+  Footer: typeof SignInFooter;
+  Image: typeof SignInImage;
   Link: typeof SignInLink;
   Paper: typeof SignInPaper;
+  PinInput: typeof SignInPinInput;
   TextField: typeof SignInTextField;
   Typography: typeof SignInTypography;
 };
@@ -46,11 +88,117 @@ const COMPONENT_NAME: string = 'SignIn';
 
 const SignIn: ForwardRefExoticComponent<SignInProps> & WithWrapperProps & SignInCompoundProps = forwardRef(
   <C extends ElementType>(props: SignInProps<C>, ref: MutableRefObject<HTMLHRElement>): ReactElement => {
-    const {className, ...rest} = props;
+    const {
+      className,
+      title,
+      subtitle,
+      textFields = [
+        {
+          label: 'username',
+          name: 'text',
+          placeholder: 'Enter your username',
+        },
+        {
+          label: 'Password',
+          name: 'password',
+          placeholder: 'Enter your password',
+          type: 'password',
+        },
+      ],
+      links,
+      loginOptions,
+      logo,
+      submitButton,
+      footer,
+      ...rest
+    } = props;
 
     const classes: string = clsx(`Oxygen${COMPONENT_NAME}`, className);
 
-    return <Box ref={ref} className={classes} {...rest} />;
+    /**
+     * Destructure the title and subtitle props to extract the title and subtitle as both cannot be passed.
+     */
+    const {
+      children: titleChildren,
+      text: titleText,
+      title: titleTitle,
+      subtitle: titleSubtitle,
+      ...restTitleProps
+    } = title ?? {};
+
+    const {
+      children: subtitleChildren,
+      text: subtitleText,
+      title: subtitleTitle,
+      subtitle: subtitleSubtitle,
+      ...restSubtitleProps
+    } = subtitle ?? {};
+
+    const {children: submitButtonChildren, text: submitButtonText, ...restSubmitButtonTextProps} = submitButton ?? {};
+
+    /**
+     * If SignIn component contains any children render only the outer box.
+     * Otherwise render the default SignIn component.
+     */
+    if (props?.['children']) {
+      return <Box ref={ref} className={classes} {...rest} />;
+    }
+
+    return (
+      <Box ref={ref} className={classes} {...rest}>
+        {logo && <SignInImage src={logo} />}
+
+        <SignInPaper>
+          <SignInTypography title {...restTitleProps}>
+            {titleChildren ?? titleText ?? 'Sign In'}
+          </SignInTypography>
+
+          {subtitle && (
+            <SignInTypography subtitle {...restSubtitleProps}>
+              {subtitleChildren ?? subtitleText}
+            </SignInTypography>
+          )}
+
+          {textFields.map((textFieldProps: SignInTextFieldProps, index: number) => (
+            <SignInTextField key={`sign-in-text-field${index + 1}`} {...textFieldProps} />
+          ))}
+
+          <SignInButton {...restSubmitButtonTextProps}>
+            {submitButtonChildren ?? submitButtonText ?? 'Sign In'}
+          </SignInButton>
+
+          {links &&
+            links.map((linkProps: SignInLinkProps, index: number) => (
+              <div key={`sign-in-link-holder${index + 1}`}>
+                <SignInLink {...linkProps} />
+                <br />
+              </div>
+            ))}
+
+          {loginOptions && (
+            <>
+              <SignInDivider>OR</SignInDivider>
+              {loginOptions.map((loginOptionProps: SignInButtonProps, index: number) => (
+                <SignInButton key={`sign-in-button-social${index + 1}`} social {...loginOptionProps} />
+              ))}
+            </>
+          )}
+        </SignInPaper>
+
+        {footer && isValidElement(footer) ? (
+          footer
+        ) : (
+          <SignInFooter
+            copyrights={{children: <SignInLink href={footer?.copyrights?.link}>{footer?.copyrights?.text}</SignInLink>}}
+            items={[
+              {children: <SignInLink href={footer?.termsOfUse?.link}>{footer?.termsOfUse?.text}</SignInLink>},
+              {children: <SignInLink href={footer?.privacyPolicy?.link}>{footer?.privacyPolicy?.text}</SignInLink>},
+              {children: <SignInTypography>{footer?.locale?.text}</SignInTypography>},
+            ]}
+          />
+        )}
+      </Box>
+    );
   },
 ) as ForwardRefExoticComponent<SignInProps> & WithWrapperProps & SignInCompoundProps;
 
@@ -64,5 +212,8 @@ SignIn.Divider = SignInDivider;
 SignIn.Link = SignInLink;
 SignIn.Button = SignInButton;
 SignIn.TextField = SignInTextField;
+SignIn.PinInput = SignInPinInput;
+SignIn.Image = SignInImage;
+SignIn.Footer = SignInFooter;
 
 export default SignIn;
diff --git a/packages/react/src/oxygen-ui-react-auth-components/SignIn/sign-in.scss b/packages/react/src/oxygen-ui-react-auth-components/SignIn/sign-in.scss
new file mode 100644
index 00000000..0db727a4
--- /dev/null
+++ b/packages/react/src/oxygen-ui-react-auth-components/SignIn/sign-in.scss
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.OxygenSignIn {
+  display: flex;
+  flex-flow: column nowrap;
+  align-content: center;
+  justify-content: center;
+  align-items: center;
+  text-align: left;
+  padding: 20px;
+}
diff --git a/packages/react/src/oxygen-ui-react-auth-components/SignInButton/SignInButton.tsx b/packages/react/src/oxygen-ui-react-auth-components/SignInButton/SignInButton.tsx
index acfe8b4a..51a8fb98 100644
--- a/packages/react/src/oxygen-ui-react-auth-components/SignInButton/SignInButton.tsx
+++ b/packages/react/src/oxygen-ui-react-auth-components/SignInButton/SignInButton.tsx
@@ -35,7 +35,7 @@ const SignInButton: ForwardRefExoticComponent<SignInButtonProps> & WithWrapperPr
 
     let classes: string = clsx(`Oxygen${COMPONENT_NAME}`, className);
     if (social) {
-      classes = clsx(classes, `Oxygen${COMPONENT_NAME}Social`);
+      classes = clsx(classes, `Oxygen${COMPONENT_NAME}-social`);
     }
 
     return <Button ref={ref} className={classes} fullWidth variant="contained" {...rest} />;
diff --git a/packages/react/src/oxygen-ui-react-auth-components/SignInButton/sign-in-button.scss b/packages/react/src/oxygen-ui-react-auth-components/SignInButton/sign-in-button.scss
index eee4a6c0..6498e7ab 100644
--- a/packages/react/src/oxygen-ui-react-auth-components/SignInButton/sign-in-button.scss
+++ b/packages/react/src/oxygen-ui-react-auth-components/SignInButton/sign-in-button.scss
@@ -20,7 +20,7 @@
   margin: 16px 0;
 }
 
-.OxygenSignInButtonSocial {
+.OxygenSignInButton-social {
   background: white;
   color: black;
   margin: 0;
diff --git a/packages/react/src/oxygen-ui-react-auth-components/SignInFooter/SignInFooter.tsx b/packages/react/src/oxygen-ui-react-auth-components/SignInFooter/SignInFooter.tsx
new file mode 100644
index 00000000..31294fe0
--- /dev/null
+++ b/packages/react/src/oxygen-ui-react-auth-components/SignInFooter/SignInFooter.tsx
@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {Grid, GridProps} from '@oxygen-ui/react';
+import clsx from 'clsx';
+import {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement, forwardRef} from 'react';
+import {WithWrapperProps} from '../models/component';
+import SignInTypography, {SignInTypographyProps} from '../SignInTypography/SignInTypography';
+import './sign-in-footer.scss';
+
+const COMPONENT_NAME: string = 'SignInFooter';
+
+export type SignInFooterProps<C extends ElementType = ElementType> = {
+  component?: C;
+  copyrights?: SignInTypographyProps;
+  items?: GridProps[];
+} & Omit<GridProps, 'component'>;
+
+const SignInFooter: ForwardRefExoticComponent<SignInFooterProps> & WithWrapperProps = forwardRef(
+  <C extends ElementType>(props: SignInFooterProps<C>, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
+    const {className, copyrights, items, ...rest} = props;
+
+    const classes: string = clsx(`Oxygen${COMPONENT_NAME}`, className);
+
+    return (
+      <Grid className={classes} container direction="column" alignItems="center" ref={ref} {...rest}>
+        <Grid>
+          <SignInTypography {...copyrights} />
+        </Grid>
+        <Grid container justifyContent="space-between" xs={12}>
+          {items && items.map((item: GridProps, index: number) => <Grid key={`gride-item-${index + 1}`} {...item} />)}
+        </Grid>
+      </Grid>
+    );
+  },
+) as ForwardRefExoticComponent<SignInFooterProps> & WithWrapperProps;
+
+export default SignInFooter;
diff --git a/packages/react/src/oxygen-ui-react-auth-components/SignInFooter/sign-in-footer.scss b/packages/react/src/oxygen-ui-react-auth-components/SignInFooter/sign-in-footer.scss
new file mode 100644
index 00000000..2800c95c
--- /dev/null
+++ b/packages/react/src/oxygen-ui-react-auth-components/SignInFooter/sign-in-footer.scss
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.OxygenSignInFooter {
+  width: 100%;
+  margin: 16px 0;
+  color: var(--oxygen-palette-text-secondary);
+
+  .OxygenSignInLink {
+    color: var(--oxygen-palette-text-secondary);
+
+    &:hover {
+      color: var(--oxygen-palette-primary-main);
+      cursor: pointer;
+    }
+  }
+}
diff --git a/packages/react/src/oxygen-ui-react-auth-components/SignInImage/SignInImage.tsx b/packages/react/src/oxygen-ui-react-auth-components/SignInImage/SignInImage.tsx
new file mode 100644
index 00000000..117e0c27
--- /dev/null
+++ b/packages/react/src/oxygen-ui-react-auth-components/SignInImage/SignInImage.tsx
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import clsx from 'clsx';
+import {ForwardRefExoticComponent, ImgHTMLAttributes, MutableRefObject, ReactElement, forwardRef} from 'react';
+import {WithWrapperProps} from '../models/component';
+import './sign-in-image.scss';
+
+export type SignInImageProps = ImgHTMLAttributes<HTMLImageElement>;
+
+const COMPONENT_NAME: string = 'SignInImage';
+
+const SignInImage: ForwardRefExoticComponent<SignInImageProps> & WithWrapperProps = forwardRef(
+  (props: SignInImageProps, ref: MutableRefObject<HTMLImageElement>): ReactElement => {
+    const {className, alt, ...rest} = props;
+
+    const classes: string = clsx(`Oxygen${COMPONENT_NAME}`, className);
+
+    return <img alt={alt} ref={ref} className={classes} {...rest} />;
+  },
+) as ForwardRefExoticComponent<SignInImageProps> & WithWrapperProps;
+
+SignInImage.displayName = COMPONENT_NAME;
+SignInImage.muiName = COMPONENT_NAME;
+
+export default SignInImage;
diff --git a/packages/react/src/oxygen-ui-react-auth-components/SignInImage/sign-in-image.scss b/packages/react/src/oxygen-ui-react-auth-components/SignInImage/sign-in-image.scss
new file mode 100644
index 00000000..49eda1de
--- /dev/null
+++ b/packages/react/src/oxygen-ui-react-auth-components/SignInImage/sign-in-image.scss
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.OxygenSignInImage {
+  margin: 16px 0;
+  width: 65px;
+}
diff --git a/packages/react/src/oxygen-ui-react-auth-components/SignInPinInput/SignInPinInput.tsx b/packages/react/src/oxygen-ui-react-auth-components/SignInPinInput/SignInPinInput.tsx
new file mode 100644
index 00000000..d6b3940f
--- /dev/null
+++ b/packages/react/src/oxygen-ui-react-auth-components/SignInPinInput/SignInPinInput.tsx
@@ -0,0 +1,126 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {Box, BoxProps, TextField, TextFieldProps} from '@oxygen-ui/react';
+import clsx from 'clsx';
+import React, {
+  useState,
+  useRef,
+  useEffect,
+  MutableRefObject,
+  ForwardRefExoticComponent,
+  forwardRef,
+  ElementType,
+  ReactElement,
+} from 'react';
+import {WithWrapperProps} from '../models/component';
+import './sign-in-pin-input.scss';
+
+const COMPONENT_NAME: string = 'SignInPinInput';
+
+export type SignInPinInputProps<C extends ElementType = ElementType> = {
+  component?: C;
+  itemProps?: TextFieldProps;
+  length: number;
+  onPinChange?: (pin: string) => void;
+} & Omit<BoxProps, 'component'>;
+
+const SignInPinInput: ForwardRefExoticComponent<SignInPinInputProps> & WithWrapperProps = forwardRef(
+  <C extends ElementType>(props: SignInPinInputProps<C>, ref: MutableRefObject<HTMLHRElement>): ReactElement => {
+    const {length, onPinChange, className, itemProps, ...rest} = props;
+
+    const classes: string = clsx(`Oxygen${COMPONENT_NAME}`, className);
+
+    const [totp, setTotp] = useState(Array(length).fill('')); // Initialize a state variable for the TOTP
+
+    const refs: MutableRefObject<React.RefObject<HTMLInputElement>[]> = useRef(
+      totp.map(() => React.createRef<HTMLInputElement>()),
+    );
+
+    useEffect(() => {
+      /**
+       * If all fields are filled, call onPinChange
+       */
+      if (onPinChange && totp.every((value: string) => value !== '')) {
+        onPinChange(totp.join(''));
+      }
+    }, [totp, onPinChange]);
+
+    const handleChange = (index: number) => (event: React.ChangeEvent<HTMLInputElement>) => {
+      const newTotp: string[] = [...totp];
+      newTotp[index] = event.target.value;
+      setTotp(newTotp);
+
+      /**
+       * If a character is entered and there's a next TextField, focus it
+       */
+      if (event.target.value && index < totp.length - 1) {
+        refs.current[index + 1].current?.focus();
+      }
+    };
+
+    const handleKeyDown = (index: number) => (event: React.KeyboardEvent<HTMLInputElement>) => {
+      /**
+       * If the backspace key is pressed and the current field is empty
+       */
+      if (event.key === 'Backspace' && totp[index] === '') {
+        /**
+         * Prevent the default action to stop deleting characters in the previous field
+         */
+        event.preventDefault();
+
+        /**
+         * If there's a previous field, focus it
+         */
+        if (index > 0) {
+          refs.current[index - 1].current?.focus();
+
+          /**
+           * Clear the value of the previous field
+           */
+          const newTotp: string[] = [...totp];
+          newTotp[index - 1] = '';
+          setTotp(newTotp);
+        }
+      }
+    };
+
+    return (
+      <Box className={classes} ref={ref} {...rest}>
+        {[...Array(length)].map((_: number, index: number) => (
+          <TextField
+            key={`pincode-${index + 1}`}
+            id={`pincode-${index + 1}`}
+            name="number"
+            placeholder="."
+            className="input"
+            value={totp[index]}
+            onChange={handleChange(index)}
+            inputRef={refs.current[index]}
+            inputProps={{maxLength: 1}}
+            onKeyDown={handleKeyDown(index)}
+            {...itemProps}
+          />
+        ))}
+      </Box>
+    );
+  },
+) as ForwardRefExoticComponent<SignInPinInputProps> & WithWrapperProps;
+
+SignInPinInput.muiName = COMPONENT_NAME;
+export default SignInPinInput;
diff --git a/packages/react/src/oxygen-ui-react-auth-components/SignInPinInput/sign-in-pin-input.scss b/packages/react/src/oxygen-ui-react-auth-components/SignInPinInput/sign-in-pin-input.scss
new file mode 100644
index 00000000..121aae46
--- /dev/null
+++ b/packages/react/src/oxygen-ui-react-auth-components/SignInPinInput/sign-in-pin-input.scss
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.OxygenSignInPinInput {
+  display: flex;
+  flex-flow: row nowrap;
+  align-content: center;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  text-align: center;
+  margin: 16px 0;
+
+  .MuiInputBase-input {
+    text-align: center;
+  }
+
+  input {
+    padding: 16px 0;
+    width: 45px;
+  }
+}
diff --git a/packages/react/src/oxygen-ui-react-auth-components/SignInTypography/SignInTypography.tsx b/packages/react/src/oxygen-ui-react-auth-components/SignInTypography/SignInTypography.tsx
index 7e951f8b..c974f759 100644
--- a/packages/react/src/oxygen-ui-react-auth-components/SignInTypography/SignInTypography.tsx
+++ b/packages/react/src/oxygen-ui-react-auth-components/SignInTypography/SignInTypography.tsx
@@ -20,6 +20,7 @@ import {Typography, TypographyProps} from '@oxygen-ui/react';
 import clsx from 'clsx';
 import {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement, forwardRef} from 'react';
 import {WithWrapperProps} from '../models/component';
+import './sign-in-typography.scss';
 
 export type SignInTypographyProps<C extends ElementType = ElementType> = {
   component?: C;
@@ -32,7 +33,7 @@ const SignInTypography: ForwardRefExoticComponent<SignInTypographyProps> & WithW
   <C extends ElementType>(props: SignInTypographyProps<C>, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
     const {className, title, subtitle, variant, align, ...rest} = props;
 
-    const classes: string = clsx(`Oxygen${COMPONENT_NAME}`, className);
+    let classes: string = clsx(`Oxygen${COMPONENT_NAME}`, className);
 
     let extendedVariant: string = variant || 'body1';
     let extendedAlign: string = align || 'left';
@@ -42,6 +43,7 @@ const SignInTypography: ForwardRefExoticComponent<SignInTypographyProps> & WithW
         extendedVariant = 'h5';
       } else if (subtitle) {
         extendedVariant = 'body1';
+        classes = clsx(classes, `Oxygen${COMPONENT_NAME}-subtitle`);
       }
     }
 
diff --git a/packages/react/src/oxygen-ui-react-auth-components/SignInTypography/sign-in-typography.scss b/packages/react/src/oxygen-ui-react-auth-components/SignInTypography/sign-in-typography.scss
new file mode 100644
index 00000000..ae3a72de
--- /dev/null
+++ b/packages/react/src/oxygen-ui-react-auth-components/SignInTypography/sign-in-typography.scss
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.OxygenSignInTypography-subtitle {
+  color: grey;
+}