diff --git a/packages/react/src/components/SignIn/SignIn.tsx b/packages/react/src/components/SignIn/SignIn.tsx
index 00e432af..71c280b7 100644
--- a/packages/react/src/components/SignIn/SignIn.tsx
+++ b/packages/react/src/components/SignIn/SignIn.tsx
@@ -306,7 +306,7 @@ const SignIn: FC<SignInProps> = (props: SignInProps): ReactElement => {
    */
   if (isComponentLoading || isLoading || authContext.isBrandingLoading) {
     return (
-      <div className="circular-progress-holder">
+      <div className="Box-circularProgressHolder">
         <CircularProgress className="circular-progress" />
       </div>
     );
@@ -322,7 +322,7 @@ const SignIn: FC<SignInProps> = (props: SignInProps): ReactElement => {
 
   return (
     <ThemeProvider theme={generateThemeSignIn(componentBranding?.preference.theme)}>
-      <UISignIn className="asgardeo-sign-in">
+      <UISignIn className="Box-asgardeoSignIn">
         {showLogo && !(isLoading || isComponentLoading) && (
           <UISignIn.Image className="asgardeo-sign-in-logo" src={imgUrl} />
         )}
diff --git a/packages/react/src/components/SignIn/fragments/BasicAuth.tsx b/packages/react/src/components/SignIn/fragments/BasicAuth.tsx
index 78344b39..722eba08 100644
--- a/packages/react/src/components/SignIn/fragments/BasicAuth.tsx
+++ b/packages/react/src/components/SignIn/fragments/BasicAuth.tsx
@@ -71,8 +71,8 @@ const BasicAuth = ({
   }
 
   return (
-    <UISignIn.Paper className="asgardeo-basic-auth-paper">
-      <UISignIn.Typography title className="basic-auth-title">
+    <UISignIn.Paper className="Paper-basicAuth">
+      <UISignIn.Typography title className="Typography-basicAuthTitle">
         {t(keys.login.login.heading)}
       </UISignIn.Typography>
 
diff --git a/packages/react/src/components/SignIn/fragments/LoginOptionsBox.tsx b/packages/react/src/components/SignIn/fragments/LoginOptionsBox.tsx
index b6504e62..537b4246 100644
--- a/packages/react/src/components/SignIn/fragments/LoginOptionsBox.tsx
+++ b/packages/react/src/components/SignIn/fragments/LoginOptionsBox.tsx
@@ -53,6 +53,7 @@ const LoginOptionsBox = ({
   handleOnClick,
 }: LoginOptionsBoxProps): ReactElement => (
   <UISignIn.Button
+    className={`Button-${socialName.toLowerCase()}`}
     social
     startIcon={<img className="social-login-img" src={images[socialName]} alt={socialName} />}
     onClick={handleOnClick}
diff --git a/packages/react/src/components/SignIn/fragments/basic-auth.scss b/packages/react/src/components/SignIn/fragments/basic-auth.scss
index 14ab4008..b4274107 100644
--- a/packages/react/src/components/SignIn/fragments/basic-auth.scss
+++ b/packages/react/src/components/SignIn/fragments/basic-auth.scss
@@ -36,7 +36,7 @@
   }
 }
 
-.asgardeo-basic-auth-paper {
+.Paper-basicAuth {
   opacity: 0.5;
   animation: fade-in 0.9s ease-in-out forwards;
 
diff --git a/packages/react/src/components/SignIn/sign-in.scss b/packages/react/src/components/SignIn/sign-in.scss
index 1da9da17..40f68abb 100644
--- a/packages/react/src/components/SignIn/sign-in.scss
+++ b/packages/react/src/components/SignIn/sign-in.scss
@@ -17,7 +17,7 @@
  */
 $--min-height: 75vh;
 
-.asgardeo-sign-in {
+.Box-asgardeoSignIn {
   min-width: 350px;
   min-height: $--min-height;
 
@@ -38,7 +38,7 @@ $--min-height: 75vh;
   }
 }
 
-.circular-progress-holder {
+.Box-circularProgressHolder {
   display: flex;
   justify-content: center;
   align-items: center;