diff --git a/src/open_inwoner/scss/components/MyServices/_MyServiceDetail.scss b/src/open_inwoner/scss/components/MyServices/_MyServiceDetail.scss
new file mode 100644
index 0000000000..e332aced35
--- /dev/null
+++ b/src/open_inwoner/scss/components/MyServices/_MyServiceDetail.scss
@@ -0,0 +1,3 @@
+.servicedetail {
+  display: grid;
+}
diff --git a/src/open_inwoner/scss/components/MyServices/_MyServicesList.scss b/src/open_inwoner/scss/components/MyServices/_MyServicesList.scss
new file mode 100644
index 0000000000..37a570aafc
--- /dev/null
+++ b/src/open_inwoner/scss/components/MyServices/_MyServicesList.scss
@@ -0,0 +1,3 @@
+.serviceslist {
+  display: grid;
+}
diff --git a/src/open_inwoner/scss/components/_index.scss b/src/open_inwoner/scss/components/_index.scss
index aaf940dec5..7cef4911aa 100644
--- a/src/open_inwoner/scss/components/_index.scss
+++ b/src/open_inwoner/scss/components/_index.scss
@@ -70,6 +70,8 @@
 @import './MessageFile/MessageFile.scss';
 @import './Messages/Message.scss';
 @import './Messages/Messages.scss';
+@import './MyServices/MyServiceDetail.scss';
+@import './MyServices/MyServicesList.scss';
 @import './Notification/Notification.scss';
 @import './Notification/Notifications.scss';
 @import './Pagination/Pagination.scss';
diff --git a/src/open_inwoner/templates/pages/myservices/myservices-list.html b/src/open_inwoner/templates/pages/myservices/myservices-list.html
new file mode 100644
index 0000000000..b578ddcd63
--- /dev/null
+++ b/src/open_inwoner/templates/pages/myservices/myservices-list.html
@@ -0,0 +1,118 @@
+{% extends 'master.html' %}
+{% load i18n button_tags card_tags map_tags utils icon_tags file_tags action_tags dropdown_tags anchor_menu_tags %}
+
+{% block content %}
+    {# needs breadcrums #}
+    <nav class="breadcrumbs" aria-label="broodkruimels">
+        <ul class="breadcrumbs__list">
+            <li class="breadcrumbs__list-item">
+                <a class="link link--secondary" href="/" title="Home" aria-label="Home">
+                    <span aria-hidden="true" class="material-icons-outlined ">home</span>
+                </a>
+            </li>
+            <li class="breadcrumbs__list-item">
+                <span aria-hidden="true" class="material-icons ">chevron_right</span>
+                <a class="link " href="/myservices/">
+                    Mijn berichten
+                </a>
+            </li>
+        </ul>
+    </nav>
+
+    <div class="serviceslist">
+        <h1 class="utrecht-heading-1" id="title">
+            Mijn berichten
+        </h1>
+        <p class="utrecht-paragraph">Lorem ipsum</p>
+
+        <div class="servicelist">
+            <table class="table plans-extended">
+                <thead class="table__heading">
+                <tr>
+                    <td class="table__item" colspan="2">Onderwerp</td>
+                    <td class="table__item">Einddatum</td>
+                    <td class="table__item">Status</td>
+                    <td class="table__item" colspan="2">Openstaande acties&nbsp;</td>
+                    <td class="table__item">&nbsp;</td>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <th class="table__header">
+                        <a href="/samenwerken/181294c7-b40e-4fb0-a5a4-557eee44938a/" class="link" aria-label="Samenwerking voorbeeld" title="Samenwerking voorbeeld">
+                            <span class="link__text">Samenwerking voorbeeld</span>
+                        </a>
+                    </th>
+                    <td class="table__item table__item--no-lb">01 mei 2025</td>
+                    <td class="table__item">Open</td>
+                    <td class="table__item">0</td>
+                    <td class="table__item">
+                    </td>
+                    <td class="table__item">
+                        <a class="button button--textless button--icon button--transparent" href="/myservices/detail-1/" title="Samenwerking voorbeeld" aria-label="Samenwerking voorbeeld">
+                            <span aria-hidden="true" class="material-icons-outlined ">arrow_forward</span>
+                        </a>
+                    </td>
+                </tr>
+                <tr>
+                    <th class="table__header">
+                        <a href="/samenwerken/f2db5565-9b80-466b-8365-72359652160e/" class="link" aria-label="Test" title="Test">
+                            <span class="link__text">Test</span>
+                        </a>
+                    </th>
+                    <td class="table__item table__item--no-lb">01 juni 2025</td>
+                    <td class="table__item">Open</td>
+                    <td class="table__item">2</td>
+                    <td class="table__item">
+                        <div class="table__item--notification-danger">Actie vereist</div>
+                    </td>
+                    <td class="table__item">
+                        <a class="button button--textless button--icon button--transparent" href="/myservices/detail-1/" title="Test" aria-label="Test">
+                            <span aria-hidden="true" class="material-icons-outlined ">arrow_forward</span>
+                        </a>
+                    </td>
+                </tr>
+                <tr>
+                    <th class="table__header">
+                        <a href="/samenwerken/67185d74-6f3b-451c-b056-79eebb069a22/" class="link" aria-label="Sjabloon samenwerk voorbeeld" title="Sjabloon samenwerk voorbeeld">
+                            <span class="link__text">Sjabloon samenwerk voorbeeld</span>
+                        </a>
+                    </th>
+                    <td class="table__item table__item--no-lb">01 juli 2024</td>
+                    <td class="table__item">Afgerond</td>
+                    <td class="table__item">3</td>
+                    <td class="table__item">
+                        <div class="table__item--notification-danger">Actie vereist</div>
+                    </td>
+                    <td class="table__item">
+                        <a class="button button--textless button--icon button--transparent" href="/myservices/detail-1/" title="Sjabloon samenwerk voorbeeld" aria-label="Sjabloon samenwerk voorbeeld">
+                            <span aria-hidden="true" class="material-icons-outlined ">arrow_forward</span>
+                        </a>
+                    </td>
+                </tr>
+                <tr>
+                    <th class="table__header">
+                        <a href="/samenwerken/bff2d7a0-acd5-4d48-a5fc-5347e76a4186/" class="link" aria-label="Voorbeeld" title="Voorbeeld">
+                            <span class="link__text">Voorbeeld</span>
+                        </a>
+                    </th>
+                    <td class="table__item table__item--no-lb">28 juni 2024</td>
+                    <td class="table__item">Afgerond</td>
+                    <td class="table__item">3</td>
+                    <td class="table__item">
+                        <div class="table__item--notification-danger">Actie vereist</div>
+                    </td>
+                    <td class="table__item">
+                        <a class="button button--textless button--icon button--transparent" href="/myservices/detail-1/" title="Voorbeeld" aria-label="Voorbeeld">
+                            <span aria-hidden="true" class="material-icons-outlined ">arrow_forward</span>
+                        </a>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+
+            {#        end service list#}
+        </div>
+
+    </div>
+{% endblock %}
diff --git a/src/open_inwoner/templates/pages/myservices/service-detail.html b/src/open_inwoner/templates/pages/myservices/service-detail.html
new file mode 100644
index 0000000000..3668ebcced
--- /dev/null
+++ b/src/open_inwoner/templates/pages/myservices/service-detail.html
@@ -0,0 +1,77 @@
+{% extends 'master.html' %}
+{% load i18n button_tags utils icon_tags anchor_menu_tags %}
+
+{#{% block sidebar_content %}#}
+{#&nbsp;#}
+{#{% endblock sidebar_content %}#}
+
+{% block content %}
+    {# needs breadcrums #}
+    <nav class="breadcrumbs" aria-label="broodkruimels">
+        <ul class="breadcrumbs__list">
+            <li class="breadcrumbs__list-item">
+                <a class="link link--secondary" href="/" title="Home" aria-label="Home">
+                    <span aria-hidden="true" class="material-icons-outlined ">home</span>
+                </a>
+            </li>
+            <li class="breadcrumbs__list-item">
+                <span aria-hidden="true" class="material-icons ">chevron_right</span>
+                <a class="link " href="/myservices/detail-1">
+                    Bericht detail
+                </a>
+            </li>
+        </ul>
+    </nav>
+
+    <div class="servicedetail column column--start-0 column--span-8">
+        <h1 class="utrecht-heading-1" id="title">
+            Mijn berichten
+        </h1>
+
+        <div class="denhaag-page-content__header">
+            <h2 class="utrecht-heading-2">Betalen van uw parkeerbon</h2>
+            <p class="utrecht-paragraph"> Bericht ontvangen op 15 januari 2023 om 15.24 uur</p>
+        </div>
+        <div class="denhaag-action denhaag-action--multi denhaag-page-content__task">
+            <div class="denhaag-action__content">Betaal uw parkeerbon van € 74,90 voor het parkeren bij Valeriusplein</div>
+            <div class="denhaag-action__details">
+                <div class="denhaag-action__date denhaag-action__date--warning">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 20 21" class="denhaag-action__warning-icon" focusable="false" aria-hidden="true" shape-rendering="auto">
+                        <g stroke-linecap="round" stroke-linejoin="round" stroke-width="2" clip-path="url(#alert-triangle-filled_svg__a)">
+                            <path fill="#E15601" stroke="#E15601" d="M8.575 3.717 1.516 15.5A1.667 1.667 0 0 0 2.941 18h14.117a1.665 1.665 0 0 0 1.425-2.5L11.425 3.717a1.667 1.667 0 0 0-2.85 0"></path>
+                            <path stroke="#fff" d="M10 14.667h.008M10 8v3.333"></path>
+                        </g>
+                        <defs>
+                            <clipPath id="alert-triangle-filled_svg__a">
+                                <path fill="#fff" d="M0 .5h20v20H0z"></path>
+                            </clipPath>
+                        </defs>
+                    </svg>
+                    <time datetime="2023-09-30T19:47:36.593Z">nog 1 dag</time>
+                </div>
+                <div class="denhaag-action__actions"><a href="#example" class="utrecht-button-link utrecht-button-link--html-a utrecht-button-link--external" rel="external noopener noreferrer">Betalen</a></div>
+            </div>
+        </div>
+        <p class="utrecht-paragraph denhaag-page-content__message"> Beste mevrouw Klap,<br><br>U heeft te weinig of geen parkeerkosten betaald voor het parkeren bij Valeriusplein. Daarom heeft u een parkeerbon gekregen.<br><br>Betaal vóór 1 maart 2023 uw parkeerbon van € 74.90.<br><br>Bent u het niet eens met deze parkeerbon? Dan kunt u bezwaar maken. Vul het formulier Bezwaar maken tegen een parkeerbon in.<br><br>Met vriendelijke groet,<br>Gemeente Den Haag</p>
+        <div class="denhaag-action denhaag-action--multi denhaag-page-content__task">
+            <div class="denhaag-action__content">Betaal uw parkeerbon van € 74,90 voor het parkeren bij Valeriusplein</div>
+            <div class="denhaag-action__details">
+                <div class="denhaag-action__date denhaag-action__date--warning">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 20 21" class="denhaag-action__warning-icon" focusable="false" aria-hidden="true" shape-rendering="auto">
+                        <g stroke-linecap="round" stroke-linejoin="round" stroke-width="2" clip-path="url(#alert-triangle-filled_svg__a)">
+                            <path fill="#E15601" stroke="#E15601" d="M8.575 3.717 1.516 15.5A1.667 1.667 0 0 0 2.941 18h14.117a1.665 1.665 0 0 0 1.425-2.5L11.425 3.717a1.667 1.667 0 0 0-2.85 0"></path>
+                            <path stroke="#fff" d="M10 14.667h.008M10 8v3.333"></path>
+                        </g>
+                        <defs>
+                            <clipPath id="alert-triangle-filled_svg__a">
+                                <path fill="#fff" d="M0 .5h20v20H0z"></path>
+                            </clipPath>
+                        </defs>
+                    </svg>
+                    <time datetime="2023-09-30T19:47:36.593Z">nog 1 dag</time>
+                </div>
+                <div class="denhaag-action__actions"><a href="#example" class="utrecht-button-link utrecht-button-link--html-a utrecht-button-link--external" rel="external noopener noreferrer">Betalen</a></div>
+            </div>
+        </div>
+    </div>
+{% endblock %}
diff --git a/src/open_inwoner/urls.py b/src/open_inwoner/urls.py
index 0f7c034905..d510b8d70d 100644
--- a/src/open_inwoner/urls.py
+++ b/src/open_inwoner/urls.py
@@ -191,6 +191,15 @@
             "style-demo/",
             TemplateView.as_view(template_name="components/Typography/StyleDemo.html"),
         ),
+        # Temorary URLs to view front-end for Hackathon
+        path(
+          "myservices/",
+          TemplateView.as_view(template_name="pages/myservices/myservices-list.html"),
+        ),
+        path(
+          "myservices/detail-1/",
+          TemplateView.as_view(template_name="pages/myservices/service-detail.html"),
+        ),
         # fix annoying favicon http error
         path("favicon.ico", RedirectView.as_view(url="/static/ico/favicon.png")),
     ] + urlpatterns