diff --git a/themes/nluug/assets/scss/styles.scss b/themes/nluug/assets/scss/styles.scss
index eb47273..93fa9a9 100644
--- a/themes/nluug/assets/scss/styles.scss
+++ b/themes/nluug/assets/scss/styles.scss
@@ -4,8 +4,10 @@ $color-button-hover: #17274d;
 $color-button-call-to-action: #138808;
 $color-button-call-to-action-hover: #0F6D06; // %25 donkerder dan #138808 met encycolorpedia
 $color-header: #6A2060;
-$color-highlight-box-border: #6A2060;
-$color-highlight-box-background: #EBBCE5; // omgezet naar lichtere kleur via https://encycolorpedia.com/6a2060
+$color-highlight-box-other-border: #99AFE2;
+$color-highlight-box-other-background: #E3E9F7;
+$color-highlight-box-nluug-border: #6A2060;
+$color-highlight-box-nluug-background: #EBBCE5; // omgezet naar lichtere kleur via https://encycolorpedia.com/6a2060
 $color-border: #6A2060;
 $color-text-inverse: white;
 
@@ -67,20 +69,30 @@ footer {
 }
 
 h1, h2, h3, h4, h5, strong, b {
-    font-size: inherit;
+    //font-size: inherit;
+    font-size: 1.1em;
     font-weight: 600;
     //text-transform: uppercase;
 }
 
 // Highlight-box om bijvoorbeeld onze evenementen opvallend op homepage te laten zien
 .highlight-box {
-  background-color: $color-highlight-box-background;
-  padding: 10px;
-  margin: 2px;
-  border: 2px solid $color-highlight-box-border;
   border-radius: 4px;
+  margin: 2px;
+  padding: 20px;
 }
 
+// Events voor alleen NLUUG-leden krijgen een andere kleur dan events in samenwerking met of die extra aandacht nodig hebben.
+.highlight-box-nluug {
+  background-color: $color-highlight-box-nluug-background;
+  border: 1px solid $color-highlight-box-nluug-border;
+}
+.highlight-box-other {
+  background-color: $color-highlight-box-other-background;
+  border: 1px solid $color-highlight-box-other-border;
+}
+
+
 .link {
     overflow: hidden;
     text-overflow: ellipsis;
diff --git a/themes/nluug/layouts/index.html b/themes/nluug/layouts/index.html
index c8ae8e6..29b0340 100644
--- a/themes/nluug/layouts/index.html
+++ b/themes/nluug/layouts/index.html
@@ -17,12 +17,13 @@
   {{ end }}
 
   <section>
-    <h2>Aankomende evenementen</h2>
-
     {{ $upcoming_events := sort .Site.Data.evenementen.kalender "date_start" "asc" }}
+
+    <h2>Aankomende evenementen</h2>
+    <div class="three-column-grid">
     {{ range $upcoming_events }}
       {{ if eq .highlight_on_homepage true }}
-        <div class="highlight-box">
+      <div class="highlight-box highlight-box-{{ if .nluug_event }}nluug{{ else }}other{{end }}">
           <h3>{{ .name }}</h3>
           <p><strong>Datum</strong><br><time class="g time" datetime="{{ dateFormat "2006-01-02" .date_start }}">{{ .date_start | time.Format ":date_full" | strings.FirstUpper }}</time></p>
           <!-- <div class="m-b-sm"> -->
@@ -38,7 +39,7 @@
         </div>
       {{ end }}
     {{ end }}
-
+    </div>
     <p>Naast de door ons georganiseerde evenementen staat er meer op de agenda.</p>
     <ul>
       {{ range first 10 (where $upcoming_events "date_start" "gt" (dateFormat "2006-01-02" now)) }}