diff --git a/src/features/auth/components/SignUpForm.tsx b/src/features/auth/components/SignUpForm.tsx
index be09f74f..a06a59be 100644
--- a/src/features/auth/components/SignUpForm.tsx
+++ b/src/features/auth/components/SignUpForm.tsx
@@ -125,7 +125,7 @@ function SignUpForm({ isLoading, onCancel, onSignUp }: Props) {
           <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/google/google-original.svg" style={{ width: 24, height: 24 }} />
           Continue With Google
         </button>
-      </div>
+
     </form>
   );
 }
diff --git a/src/features/climate-feed/components/ClimateDetailsModal.tsx b/src/features/climate-feed/components/ClimateDetailsModal.tsx
index 68507d67..8f3f5969 100644
--- a/src/features/climate-feed/components/ClimateDetailsModal.tsx
+++ b/src/features/climate-feed/components/ClimateDetailsModal.tsx
@@ -51,7 +51,7 @@ function ClimateDetailsModal({ showDetails, effectTitle, effectDescription, effe
       <DialogContent sx={{ padding: 0 }}>
         <CmTypography variant="h3" style={styles.title}>{capitalizeFirstLetter(effectTitle)}</CmTypography>
 
-        <img src={imageUrl} alt={effectTitle} style={styles.image} />
+        {imageUrl && <img src={imageUrl} alt={effectTitle} style={styles.image} />}
 
         <TabbedContent
           details={
@@ -63,8 +63,8 @@ function ClimateDetailsModal({ showDetails, effectTitle, effectDescription, effe
               </div>
 
               {effectSolutions.map((solution) => (
-                <div style={{ marginTop: 20 }}>
-                  <ActionCard {...solution} key={solution.solutionTitle} onLearnMore={learnMoreHandler} />
+                <div style={{ marginTop: 20 }} key={solution.solutionTitle}>
+                  <ActionCard {...solution} onLearnMore={learnMoreHandler} />
                 </div>
               ))}
 
@@ -72,9 +72,9 @@ function ClimateDetailsModal({ showDetails, effectTitle, effectDescription, effe
             </>
           }
           sources={
-            <div style={{ padding: 20 }}>
+            <div style={{ padding: 20, marginBottom: 50 }}>
               {effectSources.map((source, index) => (
-                <CmTypography key={index} variant='body' style={{ ...styles.link, paddingTop: 20 }}>{source}</CmTypography>
+                <CmTypography key={index} variant='body' style={styles.source}>{source}</CmTypography>
               ))}
             </div>
           }
@@ -112,10 +112,13 @@ const styles: { [key: string]: React.CSSProperties } = {
     maxHeight: 360,
     objectFit: 'cover',
   },
-  link: {
+  source: {
+    cursor: 'pointer',
     fontWeight: 600,
+    paddingTop: 20,
     textDecoration: 'underline',
-    cursor: 'pointer',
+    wordBreak: 'break-word',
+    whiteSpace: 'pre-wrap',
   }
 };
 
diff --git a/src/features/myth-feed/components/MythDetailsModal.tsx b/src/features/myth-feed/components/MythDetailsModal.tsx
index b04dd71a..6109517a 100644
--- a/src/features/myth-feed/components/MythDetailsModal.tsx
+++ b/src/features/myth-feed/components/MythDetailsModal.tsx
@@ -36,7 +36,7 @@ function MythDetailsModal({ showDetails, mythTitle, mythRebuttal, faultyLogicDes
           sources={
             <div style={{ marginTop: 20, marginBottom: 50 }}>
               {mythSources.map((source, index) => (
-                <CmTypography key={index} variant='body' style={{ ...styles.link, paddingBottom: 20 }}>{source}</CmTypography>
+                <CmTypography key={index} variant='body' style={styles.source}>{source}</CmTypography>
               ))}
             </div>
           }
@@ -72,10 +72,13 @@ const styles: { [key: string]: React.CSSProperties } = {
     letterSpacing: 1.2,
     lineHeight: 1.5,
   },
-  link: {
+  source: {
+    cursor: 'pointer',
     fontWeight: 600,
+    paddingTop: 20,
     textDecoration: 'underline',
-    cursor: 'pointer',
+    wordBreak: 'break-word',
+    whiteSpace: 'pre-wrap',
   }
 };
 
diff --git a/src/features/quiz/components/PersonalValueCardSmall.tsx b/src/features/quiz/components/PersonalValueCardSmall.tsx
index 7f15389f..40e81b85 100644
--- a/src/features/quiz/components/PersonalValueCardSmall.tsx
+++ b/src/features/quiz/components/PersonalValueCardSmall.tsx
@@ -20,8 +20,8 @@ function PersonalValueCardSmall({ valueName, shortDescription, subTitle }: Props
         <img src={`/personal_values/small/${valueName.split(' ').join('_')}.gif`} alt={`${valueName} icon`} style={styles.image} />
 
         <div style={styles.textContainer}>
-          <CmTypography variant="h3" style={{ margin: 0 }}>{capitalizeFirstLetter(valueName)}</CmTypography>
-          <CmTypography variant="h2" style={{ margin: 0 }}>{subTitle}</CmTypography>
+          <CmTypography variant="h3" style={{ margin: 0, textAlign: 'left' }}>{capitalizeFirstLetter(valueName)}</CmTypography>
+          <CmTypography variant="h2" style={{ margin: 0, textAlign: 'left' }}>{subTitle}</CmTypography>
         </div>
 
         <div onClick={() => setExpanded(!expanded)} style={{ cursor: 'pointer', marginRight: 20, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
@@ -47,8 +47,8 @@ const styles: { [key: string]: React.CSSProperties } = {
     justifyContent: 'space-between',
   },
   image: {
-    width: 80,
-    height: 80,
+    width: 70,
+    height: 70,
     margin: 20,
   },
   textContainer: {
diff --git a/src/features/solution-feed/components/SolutionDetailsModal.tsx b/src/features/solution-feed/components/SolutionDetailsModal.tsx
index 13824b8e..1fd87ccc 100644
--- a/src/features/solution-feed/components/SolutionDetailsModal.tsx
+++ b/src/features/solution-feed/components/SolutionDetailsModal.tsx
@@ -31,7 +31,7 @@ function SolutionDetailsModal({ showDetails, solutionTitle, solutionType, imageU
       <DialogContent sx={{ padding: 0 }}>
         <CmClimateHeader preHeader={solutionType.toUpperCase() + ' ACTION'} header={solutionTitle} headerIcon={solutionType} />
 
-        <img src={imageUrl} alt={solutionTitle} style={styles.image} />
+        {imageUrl && <img src={imageUrl} alt={solutionTitle} style={styles.image} />}
 
         <TabbedContent
           details={
@@ -55,9 +55,9 @@ function SolutionDetailsModal({ showDetails, solutionTitle, solutionType, imageU
             </div>
           }
           sources={
-            <div style={{ padding: 20 }}>
+            <div style={{ padding: 20, marginBottom: 50 }}>
               {solutionSources.map((source, index) => (
-                <CmTypography key={index} variant='body' style={{ ...styles.link, paddingTop: 20 }}>{source}</CmTypography>
+                <CmTypography key={index} variant='body' style={styles.source}>{source}</CmTypography>
               ))}
             </div>
           }
@@ -92,10 +92,13 @@ const styles: { [key: string]: React.CSSProperties } = {
     maxHeight: 360,
     objectFit: 'cover',
   },
-  link: {
+  source: {
+    cursor: 'pointer',
     fontWeight: 600,
+    paddingTop: 20,
     textDecoration: 'underline',
-    cursor: 'pointer',
+    wordBreak: 'break-word',
+    whiteSpace: 'pre-wrap',
   }
 };
 
diff --git a/src/features/userB/components/UserBSharedImpactCard.tsx b/src/features/userB/components/UserBSharedImpactCard.tsx
index ccd5f8cf..7e4df091 100644
--- a/src/features/userB/components/UserBSharedImpactCard.tsx
+++ b/src/features/userB/components/UserBSharedImpactCard.tsx
@@ -25,7 +25,7 @@ function UserBSharedImpactCard({ effectId, effectTitle, effectShortDescription,
 
       <CmTypography variant='body' style={styles.description}>{effectShortDescription}</CmTypography>
 
-      <div style={{ paddingLeft: 20 }}>
+      <div style={{ paddingLeft: 20, textAlign: 'left' }}>
         {relatedPersonalValues.map((value: string) => (
           <PersonalValueTooltip value={value} key={value}>
             <CmChip text={value} style={{ marginRight: 5, marginTop: 10 }} />
@@ -49,6 +49,7 @@ const styles: { [key: string]: React.CSSProperties } = {
   title: {
     textAlign: 'left',
     paddingLeft: 20,
+    paddingRight: 20,
   },
   image: {
     width: '100%',
diff --git a/src/features/userB/components/UserBSharedImpactDetailsModal.tsx b/src/features/userB/components/UserBSharedImpactDetailsModal.tsx
index 2df6c39e..0604e175 100644
--- a/src/features/userB/components/UserBSharedImpactDetailsModal.tsx
+++ b/src/features/userB/components/UserBSharedImpactDetailsModal.tsx
@@ -44,6 +44,7 @@ function UserBSharedImpactDetailsModal({ showDetails, effectId, effectTitle, ima
 
       <DialogContent sx={{ padding: 0 }}>
         <CmTypography variant="h3" style={styles.title}>{capitalizeFirstLetter(effectTitle)}</CmTypography>
+
         {imageUrl && <img src={imageUrl} alt={effectTitle} style={styles.image} />}
 
         <TabbedContent
@@ -55,9 +56,9 @@ function UserBSharedImpactDetailsModal({ showDetails, effectId, effectTitle, ima
             </div>
           }
           sources={
-            <div style={{ padding: 20 }}>
+            <div style={{ padding: 20, marginBottom: 50 }}>
               {sources.map((source, index) => (
-                <CmTypography key={index} variant='body' style={{ ...styles.link, paddingTop: 20 }}>{source}</CmTypography>
+                <CmTypography key={index} variant='body' style={styles.source}>{source}</CmTypography>
               ))}
             </div>
           }
@@ -93,10 +94,13 @@ const styles: { [key: string]: React.CSSProperties } = {
     maxHeight: 360,
     objectFit: 'cover',
   },
-  link: {
+  source: {
+    cursor: 'pointer',
     fontWeight: 600,
+    paddingTop: 20,
     textDecoration: 'underline',
-    cursor: 'pointer',
+    wordBreak: 'break-word',
+    whiteSpace: 'pre-wrap',
   }
 };
 
diff --git a/src/features/userB/components/UserBSharedSolutionCard.tsx b/src/features/userB/components/UserBSharedSolutionCard.tsx
index 09fb91c1..a8a101be 100644
--- a/src/features/userB/components/UserBSharedSolutionCard.tsx
+++ b/src/features/userB/components/UserBSharedSolutionCard.tsx
@@ -50,6 +50,7 @@ const styles: { [key: string]: React.CSSProperties } = {
   title: {
     textAlign: 'left',
     paddingLeft: 20,
+    paddingRight: 20,
   },
   image: {
     width: '100%',
diff --git a/src/features/userB/components/UserBSharedSolutionDetailsModal.tsx b/src/features/userB/components/UserBSharedSolutionDetailsModal.tsx
index 54b2eeb6..918f2d9f 100644
--- a/src/features/userB/components/UserBSharedSolutionDetailsModal.tsx
+++ b/src/features/userB/components/UserBSharedSolutionDetailsModal.tsx
@@ -44,6 +44,7 @@ function UserBSharedSolutionDetailsModal({ showDetails, solutionId, solutionTitl
 
       <DialogContent sx={{ padding: 0 }}>
         <CmClimateHeader preHeader={solutionType.toUpperCase() + ' ACTION'} header={solutionTitle} headerIcon={solutionType} />
+
         {imageUrl && <img src={imageUrl} alt={solutionTitle} style={styles.image} />}
 
         <TabbedContent
@@ -53,9 +54,9 @@ function UserBSharedSolutionDetailsModal({ showDetails, solutionId, solutionTitl
             </div>
           }
           sources={
-            <div style={{ padding: 20 }}>
+            <div style={{ padding: 20, marginBottom: 50 }}>
               {solutionSources.map((source, index) => (
-                <CmTypography key={index} variant='body' style={{ ...styles.link, paddingTop: 20 }}>{source}</CmTypography>
+                <CmTypography key={index} variant='body' style={styles.source}>{source}</CmTypography>
               ))}
             </div>
           }
@@ -90,10 +91,13 @@ const styles: { [key: string]: React.CSSProperties } = {
     maxHeight: 360,
     objectFit: 'cover',
   },
-  link: {
+  source: {
+    cursor: 'pointer',
     fontWeight: 600,
+    paddingTop: 20,
     textDecoration: 'underline',
-    cursor: 'pointer',
+    wordBreak: 'break-word',
+    whiteSpace: 'pre-wrap',
   }
 };
 
diff --git a/src/pages/UserAAuthorizedPages/ConversationsPage.tsx b/src/pages/UserAAuthorizedPages/ConversationsPage.tsx
index 1f5ab14f..4048abcb 100644
--- a/src/pages/UserAAuthorizedPages/ConversationsPage.tsx
+++ b/src/pages/UserAAuthorizedPages/ConversationsPage.tsx
@@ -57,7 +57,6 @@ function ConversationsPage() {
             value={friendsName}
             onChange={(e) => setFriendsName(e.target.value)}
             helperText={friendsName.length > 20 && 'Name must be less than 20 characters'}
-            fullWidth={false}
             style={{ marginTop: 30, marginBottom: 30 }}
           />
 
@@ -84,6 +83,7 @@ const styles: { [key: string]: React.CSSProperties } = {
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
+    width: '100%',
   },
   openDrawerButton: {
     backgroundColor: '#D0EEEB',