diff --git a/src/views/components/common/Chip/Chip.tsx b/src/views/components/common/Chip/Chip.tsx
index 2135cbe45..35dac4a69 100644
--- a/src/views/components/common/Chip/Chip.tsx
+++ b/src/views/components/common/Chip/Chip.tsx
@@ -16,17 +16,11 @@ export function Chip({
     label
 }: React.PropsWithChildren<Props>): JSX.Element {
     return (
-        <Text as = {'div'} variant = 'h4'
-            style = {{
-                display: "inline-flex",
-                minWidth: "21px",
-                padding: "1px 4px",
-                justifyContent: "center",
-                alignItems: "center",
-                gap: "10px",
-                borderRadius: "8px",
-                background: "#FFD600", //Yellow
-            }}>
+        <Text as = 'div' variant = 'h4'
+        className="min-w-5 inline-flex items-center justify-center gap-2.5 rounded-lg px-1 py-0.5" 
+        style={{
+            backgroundColor: "#FFD600"
+        }}>
             {label}
         </Text>
     );
diff --git a/src/views/components/common/ConflictsWithWarning/ConflictsWithWarning.tsx b/src/views/components/common/ConflictsWithWarning/ConflictsWithWarning.tsx
index 6b9646c01..ca1cc9bf0 100644
--- a/src/views/components/common/ConflictsWithWarning/ConflictsWithWarning.tsx
+++ b/src/views/components/common/ConflictsWithWarning/ConflictsWithWarning.tsx
@@ -19,7 +19,7 @@ export default function ConflictsWithWarning( { ConflictingCourse, SectionNumber
     const UniqueCourseConflictText = `${ConflictingCourse} (${SectionNumber})`;
 
     return (
-        <div className="flex w-21 min-w-21 p-2.5 flex-col items-start gap-2.5 rounded bg-[#AF2E2D]">
+        <div className="min-w-21 w-21 flex flex-col items-start gap-2.5 rounded bg-[#AF2E2D] p-2.5">
             <ConflictsWithoutWarningText>
                Conflicts With:
             </ConflictsWithoutWarningText>