diff --git a/public/app/containers/AlertRuleList/AlertRuleList.jest.tsx b/public/app/containers/AlertRuleList/AlertRuleList.jest.tsx
index 1025a7991f6..a12340555e9 100644
--- a/public/app/containers/AlertRuleList/AlertRuleList.jest.tsx
+++ b/public/app/containers/AlertRuleList/AlertRuleList.jest.tsx
@@ -45,7 +45,7 @@ describe('AlertRuleList', () => {
 
   it('should render 1 rule', () => {
     page.update();
-    let ruleNode = page.find('.card-item-wrapper');
+    let ruleNode = page.find('.alert-rule-item');
     expect(toJson(ruleNode)).toMatchSnapshot();
   });
 
diff --git a/public/app/containers/AlertRuleList/__snapshots__/AlertRuleList.jest.tsx.snap b/public/app/containers/AlertRuleList/__snapshots__/AlertRuleList.jest.tsx.snap
index b15a8605b7a..ba73331f028 100644
--- a/public/app/containers/AlertRuleList/__snapshots__/AlertRuleList.jest.tsx.snap
+++ b/public/app/containers/AlertRuleList/__snapshots__/AlertRuleList.jest.tsx.snap
@@ -2,71 +2,68 @@
 
 exports[`AlertRuleList should render 1 rule 1`] = `
 <li
-  className="card-item-wrapper"
+  className="alert-rule-item"
 >
   <div
-    className="card-item card-item--alert"
+    className="alert-rule-item__body"
   >
+    <span
+      className="alert-rule-item__icon alert-state-ok"
+    >
+      <i
+        className="icon-gf icon-gf-online"
+      />
+    </span>
     <div
-      className="card-item-header"
+      className="alert-rule-item__header"
     >
       <div
-        className="card-item-type"
+        className="alert-rule-item__name"
       >
         <a
-          className="card-item-cog"
-          onClick={[Function]}
-          title="Pausing an alert rule prevents it from executing"
-        >
-          <i
-            className="fa fa-pause"
-          />
-        </a>
-        <a
-          className="card-item-cog"
           href="dashboard/db/mygool?panelId=3&fullscreen&edit&tab=alert"
-          title="Edit alert rule"
         >
-          <i
-            className="icon-gf icon-gf-settings"
-          />
+          Panel Title alert
         </a>
       </div>
-    </div>
-    <div
-      className="card-item-body"
-    >
       <div
-        className="card-item-details"
+        className="alert-rule-item__text"
       >
-        <div
-          className="card-item-name"
+        <span
+          className="alert-state-ok"
         >
-          <a
-            href="dashboard/db/mygool?panelId=3&fullscreen&edit&tab=alert"
-          >
-            Panel Title alert
-          </a>
-        </div>
-        <div
-          className="card-item-sub-name"
+          OK
+        </span>
+        <span
+          className="alert-rule-item__time"
         >
-          <span
-            className="alert-list-item-state alert-state-ok"
-          >
-            <i
-              className="icon-gf icon-gf-online"
-            />
-             
-            OK
-          </span>
-          <span>
-             for 
-            5 minutes
-          </span>
-        </div>
+           for 
+          5 minutes
+        </span>
       </div>
     </div>
   </div>
+  <div
+    className="alert-rule-item__footer"
+  >
+    <a
+      className="btn btn-small btn-inverse alert-list__btn width-2"
+      onClick={[Function]}
+      title="Pausing an alert rule prevents it from executing"
+    >
+      <i
+        className="fa fa-pause"
+      />
+    </a>
+    <a
+      className="btn btn-small btn-inverse alert-list__btn width-2"
+      href="dashboard/db/mygool?panelId=3&fullscreen&edit&tab=alert"
+      title="Edit alert rule"
+    >
+      <i
+        className="icon-gf icon-gf-settings"
+      />
+    </a>
+  </div>
 </li>
 `;