diff --git a/src/views/BudgetPeriodCard.jsx b/src/views/BudgetPeriodCard.jsx
index decdd2e..3c1b878 100644
--- a/src/views/BudgetPeriodCard.jsx
+++ b/src/views/BudgetPeriodCard.jsx
@@ -34,7 +34,7 @@ const BudgetPeriodCard = ({periodData}) => {
     return (
         <div className='budget-period-card'>
             <div className='card-header'>
-                <span className={'lock-' + periodData.isLocked ? 'locked' : 'unlocked'}></span>
+                <span className={'lock lock-' + (periodData.locked ? 'locked' : 'unlocked')}>&nbsp;</span>
             </div>
             <div className='card-body'>
                 <div className='dates'>
diff --git a/src/views/BudgetPeriodCard.scss b/src/views/BudgetPeriodCard.scss
index 1f2f829..fb163fd 100644
--- a/src/views/BudgetPeriodCard.scss
+++ b/src/views/BudgetPeriodCard.scss
@@ -7,6 +7,21 @@
     .card-header {
         height: 3em;
         background-color: #ccc;
+        position: relative;
+        .lock {
+            width: 2em;
+            height: 2em;
+            top: .5em;
+            right: .5em;
+            position: absolute;
+            display: inline-block;
+        }
+        .lock-locked {
+            background-color: blue;
+        }
+        .lock-unlocked {
+            background-color: red;
+        }
     }
     .card-body {
         padding: 1em;