diff --git a/web/src/components/blocks/OpeningHoursSectionBlock.tsx b/web/src/components/blocks/OpeningHoursSectionBlock.tsx
index 3401069..3c2d50c 100644
--- a/web/src/components/blocks/OpeningHoursSectionBlock.tsx
+++ b/web/src/components/blocks/OpeningHoursSectionBlock.tsx
@@ -4,6 +4,7 @@ import {
   PrettyOpeningHours,
 } from "@/lib/openinghours";
 import styles from "./openingHoursSectionBlock.module.scss";
+import { Fragment } from "react";
 
 function OpeningHoursSubsection({
   title,
@@ -15,16 +16,20 @@ function OpeningHoursSubsection({
   return (
     <section className={styles.openingHoursSubsection}>
       <h3>{title}</h3>
-      <ul>
-        {prettyHours.map(({ range, time, custom }) => (
-          <li key={range}>
-            <span className={styles.dayRange}>{range}</span>:&nbsp;
-            {time && <span className={styles.timeRange}>{time}</span>}
-            {custom && <span className={styles.timeRange}>{custom}</span>}
-            {!time && !custom && <span className={styles.closed}>Stengt</span>}
-          </li>
-        ))}
-      </ul>
+      <table className="openingHours">
+        <tbody>
+          {prettyHours.map(({ range, time, custom }) => (
+            <tr key={range}>
+              <td className={styles.dayRange}>{range}</td>
+              <td>
+                {time && <span className={styles.timeRange}>{time}</span>}
+                {custom && <span className={styles.timeRange}>{custom}</span>}
+                {!time && !custom && <span className={styles.closed}>Stengt</span>}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
     </section>
   );
 }
diff --git a/web/src/components/blocks/openingHoursSectionBlock.module.scss b/web/src/components/blocks/openingHoursSectionBlock.module.scss
index e69de29..0001fa7 100644
--- a/web/src/components/blocks/openingHoursSectionBlock.module.scss
+++ b/web/src/components/blocks/openingHoursSectionBlock.module.scss
@@ -0,0 +1,41 @@
+.openingHoursSection {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  column-gap: var(--spacing-gap-column);
+  row-gap: var(--spacing-gap-row);
+
+  p {
+      grid-column: 2 / span 10;
+  }
+}
+
+.openingHoursSubsection {
+  grid-column: span 5;
+  margin: 1rem 0 0;
+
+  &:nth-of-type(odd) {
+    grid-column: 2 / span 5;
+  }
+
+  h3 {
+    margin-bottom: .5rem;
+  }
+}
+
+.dayRange {
+  &:first-letter {
+    text-transform: capitalize;
+  }
+}
+
+@media (max-width: 1000px) {
+  .openingHoursSection {
+    p {
+      grid-column: 1 / -1;
+    }
+  }
+  .openingHoursSubsection,
+  .openingHoursSubsection:nth-of-type(odd) {
+    grid-column: 1 / -1;
+  }
+}
\ No newline at end of file
diff --git a/web/src/css/base.scss b/web/src/css/base.scss
index 740f871..fa282fa 100644
--- a/web/src/css/base.scss
+++ b/web/src/css/base.scss
@@ -271,7 +271,7 @@ select {
     width: 50%;
     vertical-align: top;
     line-height: 1.2;
-    padding: .25em 0;
+    padding: .2rem 0;
 
     &:first-child {
       padding-right: var(--spacing-s);