diff --git a/src/Components/NextOpenCloseMini/Component.css b/src/Components/NextOpenCloseMini/Component.css
index 251a8af..d140e4b 100644
--- a/src/Components/NextOpenCloseMini/Component.css
+++ b/src/Components/NextOpenCloseMini/Component.css
@@ -4,7 +4,6 @@
     height: 100%;
     font-size: 1em;
     background-color: rgba(0, 0, 0, 0.75);
-    
     color: rgba(255, 255, 255, 0.60);
     font-size: 2em;
     position: relative;
@@ -23,4 +22,12 @@
     top: 50%;
     width: 80%;
     transform: translate(-50%, -50%);
+}
+
+.NextOpenCloseMini .green-text {
+    color: rgba(46, 204, 64, 0.75);
+}
+
+.NextOpenCloseMini .red-text {
+    color: rgba(255, 64, 54, 0.75);
 }
\ No newline at end of file
diff --git a/src/Components/NextOpenCloseMini/Component.tsx b/src/Components/NextOpenCloseMini/Component.tsx
index de0baca..b3ebdb1 100644
--- a/src/Components/NextOpenCloseMini/Component.tsx
+++ b/src/Components/NextOpenCloseMini/Component.tsx
@@ -31,13 +31,17 @@ export class NextOpenCloseMini extends React.Component<NextOpenCloseMiniProps, {
         return this.openOrClose === OpenOrClose.Open ? "opening" : "closing";
     }
 
+    getOpeningClosingClassName() {
+        return this.openOrClose === OpenOrClose.Open ? "green-text" : "red-text";
+    }
+
     renderDate(): JSX.Element[] {
         const tmpNextDate = this.nextOpenOrCloseDate as moment.Moment;
         var nextDateString = tmpNextDate.from(this.xDay);
         return [
             (
                 <div className="openCloseDecription" key="title">
-                    Next {this.getOpeningClosingString()}
+                    Next <span className={this.getOpeningClosingClassName()}>{this.getOpeningClosingString()}</span>
                 </div>
             ),
             (