diff --git a/change/@fluentui-web-components-2020-08-14-14-13-52-users-chhol-fix-badge-styling.json b/change/@fluentui-web-components-2020-08-14-14-13-52-users-chhol-fix-badge-styling.json
new file mode 100644
index 00000000000000..66fb979563d3f2
--- /dev/null
+++ b/change/@fluentui-web-components-2020-08-14-14-13-52-users-chhol-fix-badge-styling.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fix: apply badge appearance styling to control not host element",
+  "packageName": "@fluentui/web-components",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-14T21:13:52.358Z"
+}
diff --git a/packages/web-components/src/badge/badge.styles.ts b/packages/web-components/src/badge/badge.styles.ts
index 422ac55b1f60f8..83d23f1c0dba03 100644
--- a/packages/web-components/src/badge/badge.styles.ts
+++ b/packages/web-components/src/badge/badge.styles.ts
@@ -20,18 +20,18 @@ export const BadgeStyles = css`
     padding: calc(var(--design-unit) * 0.5px) calc(var(--design-unit) * 1px);
   }
 
-  :host(.lightweight) {
+  :host(.lightweight) .control {
     background: transparent;
     color: ${neutralForegroundRestBehavior.var};
     font-weight: 600;
   }
 
-  :host(.accent) {
+  :host(.accent) .control {
     background: ${accentFillRestBehavior.var};
     color: ${accentForegroundCutRestBehavior.var};
   }
 
-  :host(.neutral) {
+  :host(.neutral) .control {
     background: ${neutralFillRestBehavior.var};
     color: ${neutralForegroundRestBehavior.var};
   }