diff --git a/.gitignore b/.gitignore
index 02eaabaf4e56d2dc411199f3aeba6045faa5767a..4ffc68a59be12ebc96fbb0c33bb7575e8d190ab3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,7 @@
 
 # dependencies
 /node_modules
+/frontend/node_modules
 /.pnp
 .pnp.js
 
diff --git a/docker-compose.yml b/docker-compose.yml
index 00b2d76d4e3f7f2cf6a5157b97db69ccbd06ef18..de09e23f7bf0e8ae6b8c45ee7cdb638cd274e172 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -5,10 +5,10 @@ services:
       context: ./frontend
     env_file: ./frontend/local.env
     volumes:
-      - ./frontend/src:/home/node/app/src
+      - ./frontend:/home/node/app
     ports:
       - "3000:3000"
-    command: "yarn run start"
+    command: "yarn start --watch --verbose"
   stackspin_proxy:
     image: nginx:1.24.0
     ports:
@@ -62,7 +62,12 @@ services:
       - 8000
     volumes:
       - "$KUBECONFIG:/.kube/config"
-    entrypoint: ["bash", "-c", "kubectl -n stackspin port-forward --address $$(hostname -i) service/kratos-admin 8000:80"]
+    entrypoint:
+      [
+        "bash",
+        "-c",
+        "kubectl -n stackspin port-forward --address $$(hostname -i) service/kratos-admin 8000:80",
+      ]
   kube_port_hydra_admin:
     image: bitnami/kubectl:1.27.2
     user: "${KUBECTL_UID}:${KUBECTL_GID}"
@@ -70,7 +75,12 @@ services:
       - 4445
     volumes:
       - "$KUBECONFIG:/.kube/config"
-    entrypoint: ["bash", "-c", "kubectl -n stackspin port-forward --address $$(hostname -i) service/hydra-admin 4445:4445"]
+    entrypoint:
+      [
+        "bash",
+        "-c",
+        "kubectl -n stackspin port-forward --address $$(hostname -i) service/hydra-admin 4445:4445",
+      ]
   kube_port_kratos_public:
     image: bitnami/kubectl:1.27.2
     user: "${KUBECTL_UID}:${KUBECTL_GID}"
@@ -80,7 +90,12 @@ services:
       - 8080
     volumes:
       - "$KUBECONFIG:/.kube/config"
-    entrypoint: ["bash", "-c", "kubectl -n stackspin port-forward --address 0.0.0.0 service/kratos-public 8080:80"]
+    entrypoint:
+      [
+        "bash",
+        "-c",
+        "kubectl -n stackspin port-forward --address 0.0.0.0 service/kratos-public 8080:80",
+      ]
   kube_port_mysql:
     image: bitnami/kubectl:1.27.2
     user: "${KUBECTL_UID}:${KUBECTL_GID}"
@@ -88,4 +103,9 @@ services:
       - 3306
     volumes:
       - "$KUBECONFIG:/.kube/config"
-    entrypoint: ["bash", "-c", "kubectl -n stackspin port-forward --address $$(hostname -i) service/single-sign-on-database-mariadb 3306:3306"]
+    entrypoint:
+      [
+        "bash",
+        "-c",
+        "kubectl -n stackspin port-forward --address $$(hostname -i) service/single-sign-on-database-mariadb 3306:3306",
+      ]
diff --git a/frontend/package.json b/frontend/package.json
index 356be15cff73232ea2bc2b8aa65d1f1a297c706c..240e1c4585b2fd0fb33214c6cfbc7a3c3bbc31f0 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -18,6 +18,7 @@
     "@types/react-dom": "^17.0.2",
     "axios": "^0.21.1",
     "clsx": "^1.1.1",
+    "gray-matter": "^4.0.3",
     "lint-staged": "^11.1.1",
     "lodash": "^4.17.21",
     "prismjs": "^1.24.1",
diff --git a/frontend/public/markdown/hedgedoc.md b/frontend/public/markdown/hedgedoc.md
new file mode 100644
index 0000000000000000000000000000000000000000..aeef67f2d15023d7703947d1bce3bbb80b6e7eee
--- /dev/null
+++ b/frontend/public/markdown/hedgedoc.md
@@ -0,0 +1,14 @@
+---
+title: 'HedgeDoc'
+tileExcerpt: 'Quick collaborative writing pads, powered by Markdown.'
+---
+
+![HedgeDoc](/assets/hedgedoc.svg 'HedgeDoc')
+
+This is help text for HedgeDoc.
+This is more help text!!!!!!!!
+
+yo
+yo
+
+yo
diff --git a/frontend/public/markdown/nextcloud.md b/frontend/public/markdown/nextcloud.md
index 58a8e2c8a6e19ae02e3ad57a861367a33181393f..19f97540f5775b8c3ad54ee81ee0e42d7b0e9b2c 100644
--- a/frontend/public/markdown/nextcloud.md
+++ b/frontend/public/markdown/nextcloud.md
@@ -1,4 +1,7 @@
-# Nextcloud
+---
+title: 'Nextcloud'
+tileExcerpt: 'Shared online file storage with local sync, in-browser file editing, password manager and more.'
+---
 
 ![Nextcloud](/assets/nextcloud.svg 'Nextcloud')
 
diff --git a/frontend/public/markdown/wekan.md b/frontend/public/markdown/wekan.md
index b8734302a06bdb7e2f96115ce529be3d8508fa9c..feaa7d51dcefb5df2a0bcee2ebe86034fa9d90dd 100644
--- a/frontend/public/markdown/wekan.md
+++ b/frontend/public/markdown/wekan.md
@@ -1,7 +1,12 @@
-# Wekan
+---
+title: 'Wekan'
+tileExcerpt: 'Kanban-style project and task management, from the simplest to-do board to multi-user boards with sub-tasks and swimlanes.'
+---
 
 ![Wekan](/assets/wekan.svg 'Wekan')
 
+CHNGE IN TEXT
+
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel felis rutrum, congue orci non, dictum
 augue. In hac habitasse platea dictumst. Donec enim neque, vehicula vel consequat non, facilisis sed mauris.
 Quisque a ligula sed velit gravida tristique. Mauris id nisi convallis, porttitor ante sed, blandit odio. In
diff --git a/frontend/public/markdown/wordpress.md b/frontend/public/markdown/wordpress.md
index bff1dc545dce2b21da79ab26476b3e54fcd8c5a9..ddb6647fca3432f6cf59b2ccb2e5bd3e0566ef73 100644
--- a/frontend/public/markdown/wordpress.md
+++ b/frontend/public/markdown/wordpress.md
@@ -1,4 +1,7 @@
-# Wordpress
+---
+title: 'Wordpress'
+tileExcerpt: 'The most used website platform in the world.'
+---
 
 ![Wordpress](/assets/wordpress.svg 'Wordpress')
 
diff --git a/frontend/public/markdown/zulip.md b/frontend/public/markdown/zulip.md
index ca37acd63d51640d1ad82ec279102061f077b64b..ad16e75358cb8f52a8e703099ef05b4eee9c24f8 100644
--- a/frontend/public/markdown/zulip.md
+++ b/frontend/public/markdown/zulip.md
@@ -1,4 +1,7 @@
-# Zulip
+---
+title: 'Zulip'
+tileExcerpt: 'Team chat organized in topics and streams, with mobile and desktop apps. Unlimited channels and users.'
+---
 
 ![Zulip](/assets/zulip.svg 'Zulip')
 
diff --git a/frontend/src/modules/dashboard/components/DashboardCard/DashboardCard.tsx b/frontend/src/modules/dashboard/components/DashboardCard/DashboardCard.tsx
index 1b9b820090d41765ab6ba4bb21181eb0776aee6c..e675a1d68dfcd25ec46c35e1db424de907235ad2 100644
--- a/frontend/src/modules/dashboard/components/DashboardCard/DashboardCard.tsx
+++ b/frontend/src/modules/dashboard/components/DashboardCard/DashboardCard.tsx
@@ -1,12 +1,14 @@
 import React, { useState, useEffect } from 'react';
 import { Modal } from 'src/components';
 import ReactMarkdown from 'react-markdown';
+import matter from 'gray-matter';
+import { QuestionMarkCircleIcon } from '@heroicons/react/outline';
 
 export const DashboardCard: React.FC<any> = ({ app }: { app: any }) => {
   const [readMoreVisible, setReadMoreVisible] = useState(false);
-  const [content, setContent] = useState('');
+  const [rawMarkdown, setContent] = useState('');
 
-  const onReadMoreCloseClick = () => setReadMoreVisible(false);
+  const onReadMoreToggleClick = () => setReadMoreVisible((current) => !current);
 
   useEffect(() => {
     fetch(app.markdownSrc)
@@ -17,9 +19,19 @@ export const DashboardCard: React.FC<any> = ({ app }: { app: any }) => {
       .catch(() => {});
   }, [app.markdownSrc]);
 
+  const appDescription = matter(rawMarkdown);
+
   return (
     <>
-      <div className="bg-white overflow-hidden shadow rounded-lg divide-y divide-gray-100 mb-4 md:mb-0" key={app.name}>
+      <div
+        className="bg-white relative overflow-hidden shadow rounded-lg divide-y divide-gray-100 mb-4 md:mb-0"
+        key={app.name}
+      >
+        <div className="flex items-end justify-end absolute top-2 right-2">
+          <a href="#" onClick={onReadMoreToggleClick} className="flex items-center justify-center">
+            <QuestionMarkCircleIcon className="h-4 w-4 text-primary-600 hover:text-primary-800" />
+          </a>
+        </div>
         <div className="px-4 py-5 sm:p-6">
           <div className="mr-4 flex items-center">
             <img
@@ -32,6 +44,7 @@ export const DashboardCard: React.FC<any> = ({ app }: { app: any }) => {
               <h2 className="text-xl leading-8 font-bold">{app.name}</h2>
             </div>
           </div>
+          <p className="text-gray-500 mt-2 text-sm leading-5 font-normal">{appDescription.data.tileExcerpt}</p>
         </div>
         <div className="px-2.5 py-2.5 sm:px-4 flex justify-end">
           <a
@@ -45,8 +58,15 @@ export const DashboardCard: React.FC<any> = ({ app }: { app: any }) => {
         </div>
       </div>
 
-      <Modal open={readMoreVisible} onClose={onReadMoreCloseClick} title={app.name}>
-        <ReactMarkdown className="prose">{content}</ReactMarkdown>
+      <Modal open={readMoreVisible} onClose={onReadMoreToggleClick} title={app.name}>
+        <ReactMarkdown
+          className="prose"
+          components={{
+            img: ({ node, ...props }) => <img alt="" width={250} {...props} />,
+          }}
+        >
+          {appDescription.content}
+        </ReactMarkdown>
       </Modal>
     </>
   );
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 2b8dfae196c8b4e3a4ffabd52fd1beffa9b0dbc1..216ff4f0e42f34dfe0a01b97b286e026c3a424e2 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,6 +1,5 @@
 module.exports = {
   purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
-  darkMode: false, // or 'media' or 'class'
   theme: {
     extend: {
       colors: {
@@ -27,5 +26,6 @@ module.exports = {
       tableLayout: ['hover', 'focus'],
     },
   },
+  // eslint-disable-next-line
   plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
 };
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 8d610539847dd0a10a86529a0060897eb17f8758..8a4c7bc72e9215736097d0dee640b542c55a9539 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -5904,6 +5904,16 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
   integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
 
+gray-matter@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/gray-matter/-/gray-matter-4.0.3.tgz#e893c064825de73ea1f5f7d88c7a9f7274288798"
+  integrity sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==
+  dependencies:
+    js-yaml "^3.13.1"
+    kind-of "^6.0.2"
+    section-matter "^1.0.0"
+    strip-bom-string "^1.0.0"
+
 growly@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
@@ -10951,6 +10961,14 @@ schema-utils@^3.0.0, schema-utils@^3.1.1:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
+section-matter@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/section-matter/-/section-matter-1.0.0.tgz#e9041953506780ec01d59f292a19c7b850b84167"
+  integrity sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==
+  dependencies:
+    extend-shallow "^2.0.1"
+    kind-of "^6.0.0"
+
 select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
@@ -11557,6 +11575,11 @@ strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   dependencies:
     ansi-regex "^5.0.1"
 
+strip-bom-string@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom-string/-/strip-bom-string-1.0.0.tgz#e5211e9224369fbb81d633a2f00044dc8cedad92"
+  integrity sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==
+
 strip-bom@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"