diff --git a/public/css/kursinfo-admin-web.scss b/public/css/kursinfo-admin-web.scss
index db9dcaa9..9cf49bef 100644
--- a/public/css/kursinfo-admin-web.scss
+++ b/public/css/kursinfo-admin-web.scss
@@ -24,13 +24,6 @@
 @import 'shared';
 
 //====Common style for both pages====
-.kursinfo-main-page {
-  &.start-page {
-    nav > a {
-      padding-left: 5px;
-    }
-  }
-}
 
 h2 {
   margin-bottom: 16px;
@@ -57,80 +50,68 @@ h2 {
 }
 
 //====START ADMIN PAGE WITH CARDS====
-// TODO: karl: update start-page in own commit
 
-.AdminPage--Alert {
-  margin-left: 1rem;
-  margin-right: 1rem;
-  .alert {
-    width: auto;
+.AdminStartPage {
+  .introduction {
+    @include prose.prose;
     p {
-      margin-bottom: 1.25rem;
+      max-width: unset;
     }
   }
-  & + .AdminPage--Alert > .alert {
-    margin-top: -40px;
-  }
 }
 
-// 4. Start page and cards style
-.AdminPage--ShowDescription {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  gap: 1rem;
+.AdminStartPage__cardContainer {
+  margin-top: 32px;
+  display: grid;
+  gap: 20px;
 
-  .card {
-    width: 100%;
-    margin: 15px 0.5em 1em 0;
-    .btn {
-      margin: 1em 0;
-    }
-    .btn:last-of-type {
-      margin-top: 1em;
-      margin-left: 1em;
-    }
-    &:last-of-type {
-      margin-right: 0;
-    }
+  grid-auto-flow: row;
+  grid-template-columns: auto;
+  grid-template-rows: auto;
+
+  @media (min-width: 1024px) {
+    grid-auto-flow: column;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr auto;
   }
-  .card-footer.text-right {
-    min-height: 8.2em;
-    text-align: right;
-    span {
-      display: block;
-    }
+
+  .AdminStartPage__card {
+    padding: 20px;
+    border: 1px solid var(--color-border);
   }
-  @media (min-width: 768px) {
-    flex-direction: row;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    .card {
-      width: 65em;
-      min-width: 18em;
-      max-width: 30em;
-      align-content: flex-start;
-      margin-right: 1.2em;
-    }
-    .KursInfo--SellingText.card {
-      width: 65em;
+
+  .AdminStartPage__cardTitle {
+    @include typography.font-heading-s;
+    margin-bottom: 20px;
+  }
+
+  .AdminStartPage__cardBody {
+    @include prose.prose;
+    > :first-child {
+      margin-block-start: 0;
     }
-    .card-footer {
-      padding: 0.75rem 1rem 0.75rem 0.75rem;
-      .btn.btn-primary {
-        padding: 0.5rem 1rem;
-      }
+    > :last-child {
+      margin-block-end: 0;
     }
   }
-  @media (min-width: 1024px) {
-    flex-wrap: nowrap;
+
+  .AdminStartPage__cardFooter {
+    display: flex;
+    align-items: baseline;
+    justify-content: end;
+    flex-wrap: wrap;
+    gap: 10px;
+    .AdminStartPage__uploadMemoLink {
+      width: 100%;
+      text-align: right;
+    }
   }
 }
 
 // === CourseEditStartPage ===
 
-.edit-start-page {
-  .edit-start-page__intro {
+.CourseEditStartPage {
+  .CourseEditStartPage__intro {
     margin-bottom: 40px;
   }
 }
diff --git a/public/js/app/components/LinkAndInstruction.jsx b/public/js/app/components/LinkAndInstruction.jsx
index 7d9a74ac..b8876772 100644
--- a/public/js/app/components/LinkAndInstruction.jsx
+++ b/public/js/app/components/LinkAndInstruction.jsx
@@ -1,26 +1,20 @@
 import React from 'react'
 import { COURSE_INFO_URL, USER_MANUAL_URL } from '../util/constants'
 
-const LinkToAboutCourseInformation = ({ courseCode, translate, lang, publicPagesHref }) => {
+export const LinkToAboutCourseInformation = ({ courseCode, translate, lang, publicPagesHref }) => {
   const aboutCourseLink = `${publicPagesHref}${COURSE_INFO_URL}${courseCode}?l=${lang}`
 
   return (
-    <div className="navigation row">
-      <nav
-        className="main col"
-        aria-label={`${lang === 'en' ? 'Go to About course information ' : 'Gå till Om kursen SF1624 '}${courseCode}`}
-        lang={lang}
-      >
-        <a href={aboutCourseLink} className="kth-button back">
-          {translate.about_course}
-        </a>
-      </nav>
-    </div>
+    <nav>
+      <a href={aboutCourseLink} className="kth-button back">
+        {translate.about_course}
+      </a>
+    </nav>
   )
 }
 
 export const TextAboutRights = ({ lang, translate }) => (
-  <div className="introduction col">
+  <div className="introduction">
     <p>{translate.instruction_p1}</p>
     <p>{translate.instruction_p2}</p>
     <p>
@@ -32,5 +26,3 @@ export const TextAboutRights = ({ lang, translate }) => (
     </p>
   </div>
 )
-
-export default LinkToAboutCourseInformation
diff --git a/public/js/app/pages/AdminStartPage.jsx b/public/js/app/pages/AdminStartPage.jsx
index e4337d1d..95671fb0 100644
--- a/public/js/app/pages/AdminStartPage.jsx
+++ b/public/js/app/pages/AdminStartPage.jsx
@@ -1,10 +1,10 @@
 import React from 'react'
 import { useSearchParams } from 'react-router-dom'
-import { Card, CardBody, CardLink, CardTitle, CardText, CardFooter } from 'reactstrap'
 import i18n from '../../../../i18n'
+import Button from '../components-shared/Button'
 import PageTitle from '../components/PageTitle'
 import KoppsErrorPage from '../components/KoppsErrorPage'
-import LinkToAboutCourseInformation, { TextAboutRights } from '../components/LinkAndInstruction'
+import { LinkToAboutCourseInformation, TextAboutRights } from '../components/LinkAndInstruction'
 import AlertMsg from '../components/AlertMsg'
 import AlertReminderMsg from '../components/AlertReminderMsg'
 import AlertReminderMsgNewPubMemo from '../components/AlertReminderMsgNewPubMemo'
@@ -33,7 +33,7 @@ function AdminStartPage() {
   }
 
   return (
-    <div className="kursinfo-main-page start-page">
+    <div className="kursinfo-main-page AdminStartPage">
       <LinkToAboutCourseInformation
         courseCode={courseCode}
         lang={lang}
@@ -41,115 +41,83 @@ function AdminStartPage() {
         publicPagesHref={publicPagesHref}
       />
 
-      {/* ---COURSE TITEL--- */}
       <PageTitle {...pageTitleProps} />
 
       <TextAboutRights lang={lang} translate={pageTitles} />
 
-      <div className="AdminPage--Alert">
-        <AlertMsg
-          courseCode={courseCode}
-          querySearchParams={fetchParameters(querySearchParams)}
-          lang={lang}
-          translate={pageTitles}
-          publicPagesHref={publicPagesHref}
-        />
-      </div>
-      <div className="AdminPage--Alert">
-        <AlertReminderMsg querySearchParams={fetchParameters(querySearchParams)} lang={lang} />
-      </div>
-      <div className="AdminPage--Alert">
-        <AlertReminderMsgNewPubMemo querySearchParams={fetchParameters(querySearchParams)} lang={lang} />
-      </div>
-      <div className="col">
-        <span className="AdminPage--ShowDescription">
-          {visibilityLevel === 'all' && (
-            <Card className="KursInfo--SellingText">
-              <CardBody>
-                <CardTitle>
-                  <h4>{startCards.sellingText_hd}</h4>
-                </CardTitle>
-                <CardText tag="span">
-                  <p>{startCards.sellingText_desc_p1}</p>
-                  <p>{startCards.sellingText_desc_p2}</p>
-                </CardText>
-              </CardBody>
-              <CardFooter className="text-right">
-                <a
-                  href={`${ADMIN_ABOUT_COURSE}edit/${courseCode}?l=${lang}`}
-                  aria-label={startCards.sellingText_btn}
-                  className="btn btn-primary"
-                >
-                  {startCards.sellingText_btn}
-                </a>
-              </CardFooter>
-            </Card>
-          )}
-          <Card className="Skapa--Kurs-PM">
-            <CardBody>
-              <CardTitle>
-                <h4>{startCards.coursePM_hd}</h4>
-              </CardTitle>
-              <CardText tag="span">
-                <p>{startCards.coursePM_create_desc_p1}</p>
-                <p>{startCards.coursePM_create_desc_p2}</p>
-                <p>{startCards.coursePM_create_desc_p3}</p>
-              </CardText>
-            </CardBody>
-            <CardFooter className="text-right">
-              <span>
-                <CardLink
-                  href={`${ADMIN_COURSE_PM_DATA}${courseCode}?l=${lang}`}
-                  className="btn btn-primary"
-                  aria-label={startCards.coursePM_btn_new}
-                >
-                  {startCards.coursePM_btn_new}
-                </CardLink>
-                <CardLink
-                  href={`${ADMIN_COURSE_PM_DATA}published/${courseCode}?l=${lang}`}
-                  className="btn btn-primary"
-                  aria-label={startCards.coursePM_btn_edit}
-                >
-                  {startCards.coursePM_btn_edit}
-                </CardLink>
-              </span>
-              <span>
-                <CardLink href={`${ADMIN_COURSE_PM}${courseCode}?l=${lang}`}>
-                  {startCards.coursePM_link_upload_memo}
-                </CardLink>
-              </span>
-            </CardFooter>
-          </Card>
-          {visibilityLevel === 'all' && (
-            <Card className="course-development">
-              <CardBody>
-                <CardTitle>
-                  <h4>{startCards.courseDev_hd}</h4>
-                </CardTitle>
-                <CardText tag="span">
-                  <p>{startCards.courseDev_decs_p1}</p>
-                  <p>{startCards.courseDev_decs_p2}</p>
-                </CardText>
-              </CardBody>
-              <CardFooter className="text-right">
-                <a
-                  href={`${ADMIN_COURSE_UTV}${courseCode}?l=${lang}&status=n&serv=admin&title=${courseTitleData.courseTitle}_${courseTitleData.courseCredits}`}
-                  className="btn btn-primary"
-                  aria-label={startCards.courseDev_btn_new}
-                >
-                  {startCards.courseDev_btn_new}
-                </a>
-                <a
-                  href={`${ADMIN_COURSE_UTV}${courseCode}?l=${lang}&status=p&serv=admin&title=${courseTitleData.courseTitle}_${courseTitleData.courseCredits}`}
-                  className="btn btn-primary"
-                  aria-label={startCards.courseDev_btn_edit}
-                >
-                  {startCards.courseDev_btn_edit}
-                </a>
-              </CardFooter>
-            </Card>
-          )}
-        </span>
+      <AlertMsg
+        courseCode={courseCode}
+        querySearchParams={fetchParameters(querySearchParams)}
+        lang={lang}
+        translate={pageTitles}
+        publicPagesHref={publicPagesHref}
+      />
+      <AlertReminderMsg querySearchParams={fetchParameters(querySearchParams)} lang={lang} />
+      <AlertReminderMsgNewPubMemo querySearchParams={fetchParameters(querySearchParams)} lang={lang} />
+
+      <div className="AdminStartPage__cardContainer">
+        {visibilityLevel === 'all' && (
+          <>
+            <div className="AdminStartPage__card">
+              <h4 className="AdminStartPage__cardTitle">{startCards.sellingText_hd}</h4>
+              <div className="AdminStartPage__cardBody">
+                <p>{startCards.sellingText_desc_p1}</p>
+                <p>{startCards.sellingText_desc_p2}</p>
+              </div>
+            </div>
+            <div className="AdminStartPage__cardFooter">
+              <Button variant="primary" href={`${ADMIN_ABOUT_COURSE}edit/${courseCode}?l=${lang}`}>
+                {startCards.sellingText_btn}
+              </Button>
+            </div>
+          </>
+        )}
+
+        <div className="AdminStartPage__card">
+          <h4 className="AdminStartPage__cardTitle">{startCards.coursePM_hd}</h4>
+          <div className="AdminStartPage__cardBody">
+            <p>{startCards.coursePM_create_desc_p1}</p>
+            <p>{startCards.coursePM_create_desc_p2}</p>
+            <p>{startCards.coursePM_create_desc_p3}</p>
+          </div>
+        </div>
+        <div className="AdminStartPage__cardFooter">
+          <Button variant="primary" href={`${ADMIN_COURSE_PM_DATA}${courseCode}?l=${lang}`}>
+            {startCards.coursePM_btn_new}
+          </Button>
+          <Button variant="primary" href={`${ADMIN_COURSE_PM_DATA}published/${courseCode}?l=${lang}`}>
+            {startCards.coursePM_btn_edit}
+          </Button>
+          <a className="AdminStartPage__uploadMemoLink" href={`${ADMIN_COURSE_PM}${courseCode}?l=${lang}`}>
+            {startCards.coursePM_link_upload_memo}
+          </a>
+        </div>
+
+        {visibilityLevel === 'all' && (
+          <>
+            <div className="AdminStartPage__card">
+              <h4 className="AdminStartPage__cardTitle">{startCards.courseDev_hd}</h4>
+              <div className="AdminStartPage__cardBody">
+                <p>{startCards.courseDev_decs_p1}</p>
+                <p>{startCards.courseDev_decs_p2}</p>
+              </div>
+            </div>
+            <div className="AdminStartPage__cardFooter">
+              <Button
+                variant="primary"
+                href={`${ADMIN_COURSE_UTV}${courseCode}?l=${lang}&status=n&serv=admin&title=${courseTitleData.courseTitle}_${courseTitleData.courseCredits}`}
+              >
+                {startCards.courseDev_btn_new}
+              </Button>
+              <Button
+                variant="primary"
+                href={`${ADMIN_COURSE_UTV}${courseCode}?l=${lang}&status=p&serv=admin&title=${courseTitleData.courseTitle}_${courseTitleData.courseCredits}`}
+              >
+                {startCards.courseDev_btn_edit}
+              </Button>
+            </div>
+          </>
+        )}
       </div>
     </div>
   )
diff --git a/public/js/app/pages/CourseEditStartPage.jsx b/public/js/app/pages/CourseEditStartPage.jsx
index 05c8c5b5..aa31f516 100644
--- a/public/js/app/pages/CourseEditStartPage.jsx
+++ b/public/js/app/pages/CourseEditStartPage.jsx
@@ -22,9 +22,9 @@ function CourseEditStartPage() {
   const targetLink = editOptions[selectedOption]
 
   return (
-    <div className="kursinfo-main-page edit-start-page">
+    <div className="kursinfo-main-page CourseEditStartPage">
       <PageTitle {...pageTitleProps} />
-      <div className="edit-start-page__intro">
+      <div className="CourseEditStartPage__intro">
         <p>{labels.intro}</p>
       </div>