diff --git a/src/discussions/posts/post-editor/PostTypeCard.jsx b/src/discussions/posts/post-editor/PostTypeCard.jsx
index b0a280946..4db1968c9 100644
--- a/src/discussions/posts/post-editor/PostTypeCard.jsx
+++ b/src/discussions/posts/post-editor/PostTypeCard.jsx
@@ -19,9 +19,9 @@ const PostTypeCard = ({
     <label htmlFor={`post-type-${value}`} className="d-flex p-0 my-0 mr-3">
       <Form.Radio value={value} id={`post-type-${value}`} className="sr-only">{type}</Form.Radio>
       <Card
-        className={classNames('border-2 shadow-none', {
-          'border-primary': selected,
-          'border-light-400': !selected,
+        className={classNames('shadow-none', {
+          'border-primary-500-2': selected,
+          'border-light-400-2': !selected,
         })}
         style={{ cursor: 'pointer', width: `${enableInContextSidebar ? '10.021rem' : '14.25rem'}` }}
       >
diff --git a/src/index.scss b/src/index.scss
index f7d1181f6..aa03caad4 100755
--- a/src/index.scss
+++ b/src/index.scss
@@ -246,8 +246,13 @@ header {
   background-color: #e9e6e4 !important;
 }
 
-.border-2 {
-  border: 2px solid #cccccc !important;
+.border-light-400-2 {
+  border: 2px solid $light-400 !important;
+  border-width: 2px !important;
+}
+
+.border-primary-500-2 {
+  border: 2px solid $primary-500 !important;
   border-width: 2px !important;
 }