diff --git a/package.json b/package.json
index a1236ca00..2928709cb 100644
--- a/package.json
+++ b/package.json
@@ -15,8 +15,7 @@
     "@hello-pangea/dnd": "^16.2.0",
     "@juggle/resize-observer": "^3.3.1",
     "@lezer/highlight": "^1.0.0",
-    "@raspberrypifoundation/design-system-core": "^1.6.0",
-    "@raspberrypifoundation/design-system-react": "^1.6.0",
+    "@raspberrypifoundation/design-system-react": "2.6.2",
     "@react-three/drei": "9.114.3",
     "@react-three/fiber": "^8.0.13",
     "@reduxjs/toolkit": "^1.6.2",
diff --git a/src/assets/stylesheets/App.scss b/src/assets/stylesheets/App.scss
index 914b45073..31a54f481 100644
--- a/src/assets/stylesheets/App.scss
+++ b/src/assets/stylesheets/App.scss
@@ -1,7 +1,7 @@
-@use './rpf_design_system/font-size' as *;
-@use './rpf_design_system/colours' as *;
+@use "./rpf_design_system/font-size" as *;
+@use "./rpf_design_system/colours" as *;
 
-@use './Tabs' as *;
+@use "./Tabs" as *;
 
 a {
   border: 3px solid transparent;
@@ -12,17 +12,9 @@ a {
   }
 }
 
-button {
-  all: initial;
-  border: 3px solid transparent;
-  cursor: pointer;
-
-  @extend a;
-}
-
 input {
-  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
 }
 
@@ -32,7 +24,6 @@ input {
   caret-color: $rpf-black;
   color-scheme: light;
 
-
   .pythonrunner-input {
     color: rgb(36, 103, 236);
   }
@@ -60,8 +51,8 @@ input {
 #app {
   display: flex;
   flex-flow: column;
-  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   @include font-size-1(regular);
 }
diff --git a/src/assets/stylesheets/Button.scss b/src/assets/stylesheets/Button.scss
deleted file mode 100644
index 541ec8fb0..000000000
--- a/src/assets/stylesheets/Button.scss
+++ /dev/null
@@ -1,265 +0,0 @@
-@use "./rpf_design_system/spacing" as *;
-@use "./rpf_design_system/font-weight" as *;
-@use "./rpf_design_system/colours" as *;
-
-.btn {
-  align-items: center;
-  border-radius: $space-0-5;
-  border: 3px solid transparent;
-  box-sizing: border-box;
-  color: inherit;
-  cursor: pointer;
-  display: inline-flex;
-  font-family: sans-serif;
-  font-size: inherit;
-  font-weight: $font-weight-bold;
-  gap: $space-0-5;
-  justify-content: center;
-  min-block-size: 44px;
-  min-inline-size: 44px;
-  padding: 10px;
-  position: relative;
-  text-align: center;
-  text-decoration: none;
-
-  &:disabled {
-    background-color: $rpf-grey-600;
-    color: $rpf-white;
-    cursor: default;
-  }
-
-  &:focus-visible {
-    border: 3px solid $rpf-brand-raspberry;
-    outline: none;
-  }
-
-  &--primary {
-    background-color: var(--rpf-button-primary-background-color);
-    border-radius: $space-0-5;
-
-    color: var(--rpf-button-primary-text-color);
-
-    svg {
-      fill: var(--rpf-button-primary-text-color);
-    }
-
-    &:active,
-    .btn-outer:active & {
-      background-color: var(--rpf-button-primary-background-color-active);
-    }
-
-    &:focus-visible,
-    .btn-outer:focus-visible & {
-      background-color: var(--rpf-button-primary-background-color-focus);
-    }
-
-    &:hover,
-    .btn-outer:hover & {
-      background-color: var(--rpf-button-primary-background-color-hover);
-      border-radius: $space-0-5;
-    }
-
-    &:disabled {
-      background-color: var(--rpf-button-primary-background-color-disabled);
-      color: var(--rpf-button-primary-color-disabled);
-
-      svg {
-        fill: var(--rpf-button-primary-color-disabled);
-      }
-
-      &:hover,
-      .btn-outer:hover & {
-        background-color: var(--rpf-button-primary-background-color-disabled);
-      }
-    }
-  }
-
-  &--secondary {
-    background-color: inherit;
-
-    color: var(--rpf-button-secondary-text-color);
-
-    svg {
-      fill: var(--rpf-button-secondary-text-color);
-    }
-
-    &:active,
-    .btn-outer:active & {
-      background-color: inherit;
-    }
-
-    &:focus-visible,
-    .btn-outer:focus-visible & {
-      background-color: inherit;
-    }
-
-    &:hover,
-    .btn-outer:hover & {
-      background-color: inherit;
-    }
-
-    &:disabled {
-      background-color: var(--rpf-button-secondary-background-color-disabled);
-      color: var(--rpf-button-secondary-background-color-active);
-
-      svg {
-        fill: var(--rpf-button-secondary-background-color-active);
-      }
-
-      &:hover,
-      .btn-outer:hover & {
-        background-color: var(--rpf-button-secondary-background-color-disabled);
-      }
-    }
-
-    border: 2px solid var(--rpf-button-primary-background-color);
-
-    &:active {
-      border: 2px solid var(--rpf-button-secondary-background-color-active);
-    }
-
-    &:hover {
-      background-color: var(--rpf-button-secondary-background-color-hover);
-      color: var(--rpf-button-secondary-text-color-hover);
-      border-color: var(--rpf-button-secondary-border-color-hover) !important;
-
-      svg {
-        fill: var(--rpf-button-secondary-text-color-hover);
-      }
-    }
-
-    &:focus-visible {
-      outline: 3px solid var(--rpf-button-secondary-background-color-focus);
-    }
-  }
-
-  &--tertiary {
-    background-color: inherit;
-
-    color: inherit;
-
-    &:active,
-    .btn-outer:active & {
-      background-color: inherit;
-    }
-
-    &:focus-visible,
-    .btn-outer:focus-visible & {
-      background-color: inherit;
-    }
-
-    &:hover,
-    .btn-outer:hover & {
-      background-color: inherit;
-    }
-
-    &:disabled {
-      background-color: inherit;
-      color: $rpf-grey-600;
-
-      svg {
-        fill: $rpf-grey-600;
-      }
-
-      &:hover,
-      .btn-outer:hover & {
-        background-color: inherit;
-      }
-    }
-
-    &:active {
-      color: $rpf-teal-900;
-
-      svg {
-        fill: $rpf-teal-900;
-      }
-    }
-
-    &:hover {
-      color: var(--rpf-button-tertiary-text-color-hover);
-
-      svg {
-        fill: var(--rpf-button-tertiary-text-color-hover);
-      }
-    }
-  }
-
-  &--danger {
-    background-color: $rpf-alert-error;
-
-    color: $rpf-white;
-
-    svg {
-      fill: $rpf-white;
-    }
-
-    &:active,
-    .btn-outer:active & {
-      background-color: $rpf-alert-error;
-    }
-
-    &:focus-visible,
-    .btn-outer:focus-visible & {
-      background-color: $rpf-alert-error;
-    }
-
-    &:hover,
-    .btn-outer:hover & {
-      background-color: $rpf-alerts-error-tint;
-    }
-
-    &:disabled {
-      background-color: $rpf-alert-error;
-      color: $rpf-white;
-
-      svg {
-        fill: $rpf-white;
-      }
-
-      &:hover,
-      .btn-outer:hover & {
-        background-color: $rpf-alert-error;
-      }
-    }
-
-    &:focus-visible {
-      background-clip: padding-box;
-      border: 2px solid transparent;
-      outline: 3px solid $rpf-brand-raspberry;
-    }
-  }
-
-  &--small {
-    min-block-size: unset;
-    min-inline-size: unset;
-    padding: $space-0-25;
-  }
-
-  &--svg-only {
-    svg {
-      margin: 0;
-    }
-  }
-}
-
-.btn-outer {
-  background: transparent;
-  border-radius: $space-0-5;
-  cursor: pointer;
-  padding: $space-0-5 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  &:focus-visible {
-    outline: none;
-
-    .btn {
-      border: 3px solid $rpf-brand-raspberry;
-    }
-  }
-
-  &:has(.btn:disabled) {
-    cursor: default;
-  }
-}
diff --git a/src/assets/stylesheets/DesignSystemButton.scss b/src/assets/stylesheets/DesignSystemButton.scss
deleted file mode 100644
index c66fe1f08..000000000
--- a/src/assets/stylesheets/DesignSystemButton.scss
+++ /dev/null
@@ -1,188 +0,0 @@
-@use "./rpf_design_system/colours" as *;
-
-.rpf-button--primary * {
-  svg {
-    fill: var(--rpf-button-primary-text-color);
-  }
-}
-
-.rpf-button--tertiary * {
-  svg {
-    fill: var(--rpf-button-secondary-text-color) !important;
-  }
-}
-
-.rpf-button {
-  flex-direction: row-reverse;
-}
-
-.rpf-button--fit {
-  inline-size: fit-content;
-}
-
-.rpf-button.rpf-button--fill {
-  justify-content: center;
-  inline-size: 100%;
-  box-sizing: border-box;
-}
-
-.rpf-button--secondary {
-  justify-content: center;
-  align-items: center;
-}
-
-.rpf-button--secondary * {
-  svg {
-    fill: $rpf-text-secondary;
-  }
-}
-
-.--dark * {
-  .rpf-button--secondary {
-    border-color: $rpf-teal-400;
-
-    span {
-      color: $rpf-white;
-    }
-
-    svg {
-      fill: $rpf-white;
-    }
-
-    &::before {
-      background-color: rgba($rpf-grey-700, 1);
-    }
-
-    &:hover {
-      &::before {
-        background-color: rgba($rpf-white, 0.1);
-      }
-
-      border-color: $rpf-teal-400;
-    }
-
-    &:active {
-      &::before {
-        background-color: rgba($rpf-white, 0.15);
-      }
-    }
-
-    &:disabled {
-      &::before {
-        background-color: inherit;
-      }
-
-      span {
-        color: $rpf-grey-150;
-      }
-
-      border-color: $rpf-grey-150;
-      background-color: inherit;
-    }
-  }
-
-  .rpf-button--tertiary {
-    color: $rpf-white;
-    border: none;
-
-    &:hover {
-      &::before {
-        background-color: rgba($rpf-white, 0.1);
-      }
-    }
-
-    &:active {
-      &::before {
-        background-color: rgba($rpf-white, 0.15);
-      }
-    }
-
-    &:disabled {
-      &::before {
-        background-color: inherit;
-      }
-
-      span {
-        color: $rpf-grey-150;
-      }
-
-      background-color: inherit;
-    }
-  }
-}
-
-.--light * {
-  .rpf-button--secondary {
-    span {
-      color: $rpf-text-primary;
-    }
-
-    &::before {
-      background-color: rgba($rpf-white, 1);
-    }
-
-    &:hover {
-      &::before {
-        background-color: rgba(231, 248, 247, 1);
-      }
-
-      border-color: $rpf-teal-400;
-    }
-
-    &:active {
-      &::before {
-        background-color: rgba(220, 245, 243, 1);
-      }
-    }
-
-    &:disabled {
-      &::before {
-        background-color: inherit;
-      }
-
-      span {
-        color: rgba(213, 215, 220, 1);
-      }
-
-      border-color: rgba(213, 215, 220, 1);
-      background-color: inherit;
-    }
-  }
-
-  .rpf-button--tertiary {
-    color: $rpf-text-primary;
-    border: none;
-
-    &::before {
-      background-color: rgba($rpf-white, 1);
-    }
-
-    &:hover {
-      &::before {
-        background-color: rgba(231, 248, 247, 1);
-      }
-    }
-
-    &:active {
-      &::before {
-        background-color: rgba(220, 245, 243, 1);
-      }
-    }
-
-    &:disabled {
-      &::before {
-        background-color: inherit;
-      }
-
-      span {
-        color: rgba(213, 215, 220, 1);
-      }
-
-      background-color: inherit;
-    }
-  }
-}
-
-.rpf-button__icon {
-  display: flex;
-}
diff --git a/src/assets/stylesheets/ExternalStyles.scss b/src/assets/stylesheets/ExternalStyles.scss
index 923ebe18d..d41a856af 100644
--- a/src/assets/stylesheets/ExternalStyles.scss
+++ b/src/assets/stylesheets/ExternalStyles.scss
@@ -2,6 +2,6 @@
 @use "../../../node_modules/react-toggle/style.css";
 @use "../../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css";
 @use "../../../node_modules/prismjs/plugins/line-highlight/prism-line-highlight.css";
-@use "../../../node_modules/@raspberrypifoundation/design-system-core/scss/components/alert.scss";
 @use "../../../node_modules/material-symbols/sharp.scss";
 @use "../../../node_modules/plotly.js/src/css/style.scss" as plotlyStyle;
+@forward "@raspberrypifoundation/design-system-react/scss/design-system-core";
diff --git a/src/assets/stylesheets/InternalStyles.scss b/src/assets/stylesheets/InternalStyles.scss
index 42167d9b3..7829a28aa 100644
--- a/src/assets/stylesheets/InternalStyles.scss
+++ b/src/assets/stylesheets/InternalStyles.scss
@@ -36,8 +36,6 @@
 @use "./AstroPiModel" as *;
 @use "./MobileProjectBar" as *;
 @use "./ProjectBar" as *;
-@use "./Button" as *;
-@use "./DesignSystemButton" as *;
 @use "./SaveStatus" as *;
 @use "./ContextMenu" as *;
 @use "./FilePanel" as *; // needs to be below Button
@@ -87,11 +85,6 @@ code {
     monospace;
 }
 
-button {
-  all: initial;
-  font-size: inherit;
-}
-
 svg {
   min-inline-size: fit-content;
 }
diff --git a/src/assets/stylesheets/ProjectBar.scss b/src/assets/stylesheets/ProjectBar.scss
index 6041e50cb..06bf157f3 100644
--- a/src/assets/stylesheets/ProjectBar.scss
+++ b/src/assets/stylesheets/ProjectBar.scss
@@ -28,18 +28,9 @@
     }
   }
 
-  .btn--save {
-    border-radius: $space-0-5;
-    @container (min-width: 560px) {
-      .icon {
-        display: none;
-      }
-    }
-  }
-
   .project-bar__btn-wrapper {
     display: flex;
-    block-size:  100%;
+    block-size: 100%;
   }
 
   .project-bar__btn-wrapper:not(:last-child) {
@@ -70,26 +61,3 @@
     }
   }
 }
-
-.project-bar__btn {
-  border-radius: $space-0-5;
-  justify-content: center;
-
-  margin: $space-0-5;
-  gap: $space-0-5;
-
-  .text {
-    display: none;
-  }
-
-  &:hover & {
-    border-radius: inherit;
-  }
-
-  @container (min-width: 560px) {
-    .text {
-      min-inline-size: auto;
-      display: block;
-    }
-  }
-}
diff --git a/src/assets/stylesheets/ProjectInfo.scss b/src/assets/stylesheets/ProjectInfo.scss
index 3406b9cbf..cc649d537 100644
--- a/src/assets/stylesheets/ProjectInfo.scss
+++ b/src/assets/stylesheets/ProjectInfo.scss
@@ -11,10 +11,6 @@
   border-radius: $space-0-5;
   border: none;
   background-color: inherit;
-
-  .btn--primary {
-    margin: 0 $space-0-5;
-  }
 }
 
 .project-type__label {
diff --git a/src/assets/stylesheets/ProjectName.scss b/src/assets/stylesheets/ProjectName.scss
index a8873be56..f14f4e15f 100644
--- a/src/assets/stylesheets/ProjectName.scss
+++ b/src/assets/stylesheets/ProjectName.scss
@@ -8,10 +8,6 @@
   display: flex;
   block-size: 100%;
   padding-inline-start: $space-0-5;
-
-  .btn--primary {
-    margin: 0 $space-0-5;
-  }
 }
 
 .project-name__title {
diff --git a/src/assets/stylesheets/Sidebar.scss b/src/assets/stylesheets/Sidebar.scss
index d853f49b9..447884b68 100644
--- a/src/assets/stylesheets/Sidebar.scss
+++ b/src/assets/stylesheets/Sidebar.scss
@@ -71,6 +71,11 @@
   box-sizing: border-box;
   margin: 0;
   border: 2px solid transparent;
+  inline-size: $space-3;
+  block-size: $space-3;
+  border-radius: $space-0-5;
+  background-color: transparent;
+  cursor: pointer;
 
   svg {
     margin: 0;
diff --git a/src/components/DesignSystemButton/DesignSystemButton.jsx b/src/components/DesignSystemButton/DesignSystemButton.jsx
deleted file mode 100644
index 2050f0ded..000000000
--- a/src/components/DesignSystemButton/DesignSystemButton.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-import { Button } from "@raspberrypifoundation/design-system-react";
-import classNames from "classnames";
-import "../../assets/stylesheets/DesignSystemButton.scss";
-
-const DesignSystemButton = ({ className, fill = false, ...props }) => (
-  <Button
-    className={classNames("btn", className, {
-      "rpf-button--fill": fill,
-      "rpf-button--fit": !fill,
-    })}
-    {...props}
-  />
-);
-
-export default DesignSystemButton;
diff --git a/src/components/DownloadButton/DownloadButton.jsx b/src/components/DownloadButton/DownloadButton.jsx
index b37342633..2f24a5be5 100644
--- a/src/components/DownloadButton/DownloadButton.jsx
+++ b/src/components/DownloadButton/DownloadButton.jsx
@@ -7,16 +7,10 @@ import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
 import PropTypes from "prop-types";
 
-import DesignSystemButton from "../DesignSystemButton/DesignSystemButton";
+import { Button } from "@raspberrypifoundation/design-system-react";
 
 const DownloadButton = (props) => {
-  const {
-    buttonText,
-    className,
-    Icon,
-    type = "secondary",
-    ...otherProps
-  } = props;
+  const { text, className, type = "secondary", ...otherProps } = props;
   const { t } = useTranslation();
   const project = useSelector((state) => state.editor.project);
 
@@ -58,18 +52,18 @@ const DownloadButton = (props) => {
         project.name ||
           t("header.downloadFileNameDefault", {
             project_type: project.project_type,
-          }),
-      )}`,
+          })
+      )}`
     );
   };
 
   return (
-    <DesignSystemButton
+    <Button
       className={className}
       onClick={onClickDownload}
-      text={buttonText}
-      textAlways
-      icon={Icon ? <Icon /> : null}
+      icon="download"
+      text={text}
+      fullWidth
       type={type}
       {...otherProps}
     />
diff --git a/src/components/Editor/EditorInput/EditorInput.jsx b/src/components/Editor/EditorInput/EditorInput.jsx
index ece8db7ff..ac8c17625 100644
--- a/src/components/Editor/EditorInput/EditorInput.jsx
+++ b/src/components/Editor/EditorInput/EditorInput.jsx
@@ -10,7 +10,7 @@ import {
   setFocussedFileIndex,
   setOpenFiles,
 } from "../../../redux/EditorSlice";
-import Button from "../../Button/Button";
+import { Button } from "@raspberrypifoundation/design-system-react";
 import EditorPanel from "../EditorPanel/EditorPanel";
 import DraggableTab from "../DraggableTabs/DraggableTab";
 import DroppableTabList from "../DraggableTabs/DroppableTabList";
@@ -19,7 +19,6 @@ import RunBar from "../../RunButton/RunBar";
 import "../../../assets/stylesheets/EditorInput.scss";
 import RunnerControls from "../../RunButton/RunnerControls";
 import { MOBILE_MEDIA_QUERY } from "../../../utils/mediaQueryBreakpoints";
-import CloseIcon from "../../../utils/CloseIcon";
 import { useTranslation } from "react-i18next";
 
 const EditorInput = () => {
@@ -162,10 +161,12 @@ const EditorInput = () => {
                     </span>
                     {!["main.py", "index.html"].includes(fileName) ? (
                       <Button
-                        className="btn--tertiary react-tabs__tab-close-btn"
                         label={t("editorPanel.close")}
-                        onClickHandler={(e) => closeFileTab(e, fileName)}
-                        ButtonIcon={() => <CloseIcon scaleFactor={0.85} />}
+                        onClick={(e) => closeFileTab(e, fileName)}
+                        icon="close"
+                        iconOnly
+                        size="small"
+                        type="tertiary"
                       />
                     ) : null}
                   </DraggableTab>
diff --git a/src/components/Editor/ImageUploadButton/ImageUploadButton.jsx b/src/components/Editor/ImageUploadButton/ImageUploadButton.jsx
index 49d571338..8ad973a2e 100644
--- a/src/components/Editor/ImageUploadButton/ImageUploadButton.jsx
+++ b/src/components/Editor/ImageUploadButton/ImageUploadButton.jsx
@@ -6,7 +6,7 @@ import Dropzone from "react-dropzone";
 import Modal from "react-modal";
 
 import { updateImages, setNameError } from "../../../redux/EditorSlice";
-import Button from "../../Button/Button";
+import { Button } from "@raspberrypifoundation/design-system-react";
 import NameErrorMessage from "../ErrorMessage/NameErrorMessage";
 import store from "../../../app/store";
 import ApiCallHandler from "../../../utils/apiCallHandler";
@@ -115,8 +115,8 @@ const ImageUploadButton = ({ reactAppApiEndpoint }) => {
   return (
     <>
       <Button
-        buttonText={t("imageUploadButton.uploadImage")}
-        onClickHandler={showModal}
+        text={t("imageUploadButton.uploadImage")}
+        onClick={showModal}
         className="proj-image-upload-button"
       />
 
@@ -148,14 +148,8 @@ const ImageUploadButton = ({ reactAppApiEndpoint }) => {
           )}
         </Dropzone>
         <div className="modal-footer">
-          <Button
-            buttonText={t("imageUploadButton.cancel")}
-            onClickHandler={closeModal}
-          />
-          <Button
-            buttonText={t("imageUploadButton.save")}
-            onClickHandler={saveImages}
-          />
+          <Button text={t("imageUploadButton.cancel")} onClick={closeModal} />
+          <Button text={t("imageUploadButton.save")} onClick={saveImages} />
         </div>
       </Modal>
     </>
diff --git a/src/components/Editor/NewComponentButton/NewComponentButton.jsx b/src/components/Editor/NewComponentButton/NewComponentButton.jsx
index b4fc45255..a1e11df03 100644
--- a/src/components/Editor/NewComponentButton/NewComponentButton.jsx
+++ b/src/components/Editor/NewComponentButton/NewComponentButton.jsx
@@ -1,10 +1,9 @@
 import React from "react";
 import { useDispatch } from "react-redux";
+import { useTranslation } from "react-i18next";
 
 import { showNewFileModal } from "../../../redux/EditorSlice";
-import DesignSystemButton from "../../DesignSystemButton/DesignSystemButton";
-import PlusIcon from "../../../assets/icons/plus.svg";
-import { useTranslation } from "react-i18next";
+import { Button } from "@raspberrypifoundation/design-system-react";
 
 const NewComponentButton = () => {
   const { t } = useTranslation();
@@ -15,13 +14,12 @@ const NewComponentButton = () => {
   };
 
   return (
-    <DesignSystemButton
-      text={t("filePanel.newFileButton")}
-      textAlways
-      icon={<PlusIcon />}
+    <Button
+      icon="add"
+      linkComponent={null}
       onClick={openNewFileModal}
-      className="btn--primary"
-      fill
+      text={t("filePanel.newFileButton")}
+      fullWidth
     />
   );
 };
diff --git a/src/components/Editor/NewInputPanelButton/NewInputPanelButton.jsx b/src/components/Editor/NewInputPanelButton/NewInputPanelButton.jsx
index 47af89ea8..440e6279b 100644
--- a/src/components/Editor/NewInputPanelButton/NewInputPanelButton.jsx
+++ b/src/components/Editor/NewInputPanelButton/NewInputPanelButton.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import Button from "../../Button/Button";
+import { Button } from "@raspberrypifoundation/design-system-react";
 import { useDispatch } from "react-redux";
 import { addFilePanel } from "../EditorSlice";
 import { useTranslation } from "react-i18next";
@@ -14,8 +14,8 @@ const NewInputPanelButton = () => {
   return (
     <Button
       className={"btn--primary"}
-      buttonText={t("newInputPanelButton.buttonText")}
-      onClickHandler={openNewPanel}
+      text={t("newInputPanelButton.buttonText")}
+      onClick={openNewPanel}
     />
   );
 };
diff --git a/src/components/Menus/Sidebar/DownloadPanel/DownloadPanel.jsx b/src/components/Menus/Sidebar/DownloadPanel/DownloadPanel.jsx
index 749e71726..2b825dcba 100644
--- a/src/components/Menus/Sidebar/DownloadPanel/DownloadPanel.jsx
+++ b/src/components/Menus/Sidebar/DownloadPanel/DownloadPanel.jsx
@@ -4,8 +4,7 @@ import { useSelector } from "react-redux";
 import SidebarPanel from "../SidebarPanel";
 import DownloadButton from "../../../DownloadButton/DownloadButton";
 import SaveButton from "../../../SaveButton/SaveButton";
-import DesignSystemButton from "../../../DesignSystemButton/DesignSystemButton";
-import DownloadIcon from "../../../../assets/icons/download.svg";
+import { Button } from "@raspberrypifoundation/design-system-react";
 import { isOwner } from "../../../../utils/projectHelpers";
 
 import {
@@ -40,19 +39,19 @@ export const DownloadPanel = () => {
           </div>
           <p className="download-panel__hint">{t("downloadPanel.logInHint")}</p>
           <div className="download-panel__button-container">
-            <DesignSystemButton
+            <Button
               className="btn btn--primary download-panel__button"
               text={t("downloadPanel.logInButton")}
               type="primary"
               onClick={handleLogIn}
-              fill
+              fullWidth
             />
-            <DesignSystemButton
+            <Button
               className="btn btn--secondary download-panel__button"
               text={t("downloadPanel.signUpButton")}
               type="secondary"
               onClick={handleSignUp}
-              fill
+              fullWidth
             />
           </div>
         </div>
@@ -62,10 +61,8 @@ export const DownloadPanel = () => {
           {t("downloadPanel.downloadHint")}
         </p>
         <DownloadButton
-          buttonText={t("downloadPanel.downloadButton")}
+          text={t("downloadPanel.downloadButton")}
           className="btn btn--secondary download-panel__button"
-          Icon={DownloadIcon}
-          fill
         />
       </div>
       {user && !projectOwner && <SaveButton fill />}
diff --git a/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx b/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx
index 9db70ab7e..fa8ba16c8 100644
--- a/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx
+++ b/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx
@@ -10,7 +10,7 @@ import ProgressBar from "./ProgressBar/ProgressBar";
 import "../../../../assets/stylesheets/Instructions.scss";
 import { quizReadyEvent } from "../../../../events/WebComponentCustomEvents";
 import { setCurrentStepPosition } from "../../../../redux/InstructionsSlice";
-import DesignSystemButton from "../../../DesignSystemButton/DesignSystemButton";
+import { Button } from "@raspberrypifoundation/design-system-react";
 import { setProjectInstructions } from "../../../../redux/EditorSlice";
 import demoInstructions from "../../../../assets/markdown/demoInstructions.md";
 import RemoveInstructionsModal from "../../../Modals/RemoveInstructionsModal";
@@ -131,12 +131,12 @@ const InstructionsPanel = () => {
 
   const AddInstructionsButton = () => {
     return (
-      <DesignSystemButton
+      <Button
         className="btn--primary"
         icon="add"
         text={t("instructionsPanel.emptyState.addInstructions")}
         onClick={addInstructions}
-        fill
+        fullWidth
         textAlways
         small
       />
@@ -145,13 +145,13 @@ const InstructionsPanel = () => {
 
   const RemoveInstructionsButton = () => {
     return (
-      <DesignSystemButton
+      <Button
         className="btn--secondary"
         text={t("instructionsPanel.removeInstructions")}
         onClick={() => {
           setShowModal(true);
         }}
-        fill
+        fullWidth
         textAlways
         small
       />
@@ -239,7 +239,7 @@ const InstructionsPanel = () => {
       {showModal && (
         <RemoveInstructionsModal
           buttons={[
-            <DesignSystemButton
+            <Button
               type="primary"
               key="remove"
               variant="danger"
@@ -248,7 +248,7 @@ const InstructionsPanel = () => {
               )}
               onClick={removeInstructions}
             />,
-            <DesignSystemButton
+            <Button
               type="secondary"
               key="close"
               text={t("instructionsPanel.removeInstructionsModal.close")}
diff --git a/src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.jsx b/src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.jsx
index 27d4993ed..5a3857ddb 100644
--- a/src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.jsx
+++ b/src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.jsx
@@ -1,9 +1,7 @@
 import React from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { setCurrentStepPosition } from "../../../../../redux/InstructionsSlice";
-import ChevronLeft from "../../../../../assets/icons/chevron_left.svg";
-import ChevronRight from "../../../../../assets/icons/chevron_right.svg";
-import Button from "../../../../Button/Button";
+import { Button } from "@raspberrypifoundation/design-system-react";
 
 import "../../../../../assets/stylesheets/ProgressBar.scss";
 import { useTranslation } from "react-i18next";
@@ -34,21 +32,19 @@ const ProgressBar = () => {
   return (
     <div className="progress-bar">
       <Button
-        className={"btn--primary btn--small"}
-        buttonOuter
-        onClickHandler={goToPreviousStep}
-        ButtonIcon={ChevronLeft}
+        onClick={goToPreviousStep}
+        icon="chevron_right"
         disabled={currentStepPosition === 0}
         title={t("instructionsPanel.previousStep")}
+        size="small"
       />
       <progress max={numberOfSteps - 1} value={currentStepPosition}></progress>
       <Button
-        className={"btn--primary btn--small"}
-        buttonOuter
-        onClickHandler={goToNextStep}
-        ButtonIcon={ChevronRight}
+        onClick={goToNextStep}
+        icon="chevron_right"
         disabled={currentStepPosition === numberOfSteps - 1}
         title={t("instructionsPanel.nextStep")}
+        size="small"
       />
     </div>
   );
diff --git a/src/components/Menus/Sidebar/ProjectsPanel/ProjectsPanel.jsx b/src/components/Menus/Sidebar/ProjectsPanel/ProjectsPanel.jsx
index 4f07eecb2..f2d9ed766 100644
--- a/src/components/Menus/Sidebar/ProjectsPanel/ProjectsPanel.jsx
+++ b/src/components/Menus/Sidebar/ProjectsPanel/ProjectsPanel.jsx
@@ -5,14 +5,13 @@ import { useTranslation } from "react-i18next";
 import "../../../../assets/stylesheets/ProjectsPanel.scss";
 import ProjectName from "../../../ProjectName/ProjectName";
 import ProjectInfo from "./ProjectInfo/ProjectInfo";
-import DownloadIcon from "../../../../assets/icons/download.svg";
 import DownloadButton from "../../../DownloadButton/DownloadButton";
 import SaveButton from "../../../SaveButton/SaveButton";
 import { useSelector } from "react-redux";
 import { MOBILE_MEDIA_QUERY } from "../../../../utils/mediaQueryBreakpoints";
 import { useMediaQuery } from "react-responsive";
 import SaveStatus from "../../../SaveStatus/SaveStatus";
-import DesignSystemButton from "../../../DesignSystemButton/DesignSystemButton";
+import { Button } from "@raspberrypifoundation/design-system-react";
 import { navigateToProjectsPageEvent } from "../../../../events/WebComponentCustomEvents";
 
 const ProjectsPanel = () => {
@@ -42,7 +41,7 @@ const ProjectsPanel = () => {
       heading={t("projectsPanel.projects")}
       Button={() =>
         isLoggedIn && (
-          <DesignSystemButton
+          <Button
             className="btn--primary projects-panel__your-projects-button"
             onClick={navigateToProjectsPage}
             text={t("projectsPanel.yourProjectsButton")}
@@ -59,9 +58,8 @@ const ProjectsPanel = () => {
       <ProjectInfo className="projects-panel__item" />
       <div className="projects-panel__button">
         <DownloadButton
-          buttonText={t("header.download")}
+          text={t("header.download")}
           className="projects-panel__download-button"
-          Icon={DownloadIcon}
         />
       </div>
       {isMobile && saveOptions}
diff --git a/src/components/Menus/Sidebar/SidebarBar.jsx b/src/components/Menus/Sidebar/SidebarBar.jsx
index 4bcda60b6..637fa0867 100644
--- a/src/components/Menus/Sidebar/SidebarBar.jsx
+++ b/src/components/Menus/Sidebar/SidebarBar.jsx
@@ -6,7 +6,7 @@ import classNames from "classnames";
 
 import DoubleArrowLeft from "../../../assets/icons/double_arrow_left.svg";
 import DoubleArrowRight from "../../../assets/icons/double_arrow_right.svg";
-import Button from "../../Button/Button";
+
 import SidebarBarOption from "./SidebarBarOption";
 import htmlLogo from "../../../assets/html_icon.svg";
 import pythonLogo from "../../../assets/python_icon.svg";
@@ -77,21 +77,23 @@ const SidebarBar = (props) => {
         {!isMobile &&
           (option ? (
             <div className="sidebar__bar-option-wrapper">
-              <Button
+              <button
                 className="sidebar__bar-option"
-                ButtonIcon={DoubleArrowLeft}
                 title={t("sidebar.collapse")}
-                onClickHandler={collapsePopOut}
-              />
+                onClick={collapsePopOut}
+              >
+                <DoubleArrowLeft />
+              </button>
             </div>
           ) : (
             <div className="sidebar__bar-option-wrapper">
-              <Button
+              <button
                 className="sidebar__bar-option"
-                ButtonIcon={DoubleArrowRight}
                 title={t("sidebar.expand")}
-                onClickHandler={expandPopOut}
-              />
+                onClick={expandPopOut}
+              >
+                <DoubleArrowRight />
+              </button>
             </div>
           ))}
       </div>
diff --git a/src/components/Menus/Sidebar/SidebarBarOption.jsx b/src/components/Menus/Sidebar/SidebarBarOption.jsx
index ca303adb6..0324230d8 100644
--- a/src/components/Menus/Sidebar/SidebarBarOption.jsx
+++ b/src/components/Menus/Sidebar/SidebarBarOption.jsx
@@ -1,5 +1,4 @@
 import React from "react";
-import Button from "../../Button/Button";
 import classNames from "classnames";
 
 const SidebarBarOption = (props) => {
@@ -18,14 +17,15 @@ const SidebarBarOption = (props) => {
         "sidebar__bar-option-wrapper--selected": isActive,
       })}
     >
-      <Button
+      <button
         className={classNames("sidebar__bar-option", {
           "sidebar__bar-option--selected": isActive,
         })}
-        ButtonIcon={Icon}
         title={title}
-        onClickHandler={onClickHandler}
-      />
+        onClick={onClickHandler}
+      >
+        <Icon />
+      </button>
     </div>
   );
 };
diff --git a/src/components/Modals/ErrorModal.jsx b/src/components/Modals/ErrorModal.jsx
index 9a3918b97..65eda6e22 100644
--- a/src/components/Modals/ErrorModal.jsx
+++ b/src/components/Modals/ErrorModal.jsx
@@ -4,7 +4,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { useTranslation } from "react-i18next";
 import PropTypes from "prop-types";
 
-import Button from "../Button/Button";
+import { Button } from "@raspberrypifoundation/design-system-react";
 import { closeErrorModal, setError } from "../../redux/EditorSlice";
 import "../../assets/stylesheets/Modal.scss";
 
@@ -57,9 +57,9 @@ const ErrorModal = ({ errorType, additionalOnClose }) => {
 
         <div className="modal-content__buttons">
           <Button
-            className="btn--primary"
-            buttonText={t("modal.close")}
-            onClickHandler={closeModal}
+            type="tertiary"
+            text={t("modal.close")}
+            onClick={closeModal}
           />
         </div>
       </Modal>
diff --git a/src/components/Modals/GeneralModal.jsx b/src/components/Modals/GeneralModal.jsx
index 6bd91efd6..8138b2d41 100644
--- a/src/components/Modals/GeneralModal.jsx
+++ b/src/components/Modals/GeneralModal.jsx
@@ -1,10 +1,9 @@
 import React from "react";
 import Modal from "react-modal";
 
-import Button from "../Button/Button";
+import { Button } from "@raspberrypifoundation/design-system-react";
 import "../../assets/stylesheets/Modal.scss";
 import { useTranslation } from "react-i18next";
-import CloseIcon from "../../utils/CloseIcon";
 
 const GeneralModal = ({
   buttons = [],
@@ -47,10 +46,10 @@ const GeneralModal = ({
           <h2 className="modal-content__heading">{heading}</h2>
           {withCloseButton ? (
             <Button
-              className="btn--tertiary"
-              onClickHandler={closeModal}
-              ButtonIcon={CloseIcon}
-              label={t("modals.close")}
+              type="tertiary"
+              onClick={closeModal}
+              icon="close"
+              aria-label={t("modals.close")}
               title={t("modals.close")}
             />
           ) : null}
diff --git a/src/components/Modals/NewFileModal.jsx b/src/components/Modals/NewFileModal.jsx
index 773969873..497d3cada 100644
--- a/src/components/Modals/NewFileModal.jsx
+++ b/src/components/Modals/NewFileModal.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 
-import Button from "../Button/Button";
+import { Button } from "@raspberrypifoundation/design-system-react";
 import {
   addProjectComponent,
   closeNewFileModal,
@@ -60,15 +60,15 @@ const NewFileModal = () => {
       buttons={[
         <Button
           key="create"
-          className="btn--primary"
-          buttonText={t("filePanel.newFileModal.addFile")}
-          onClickHandler={createComponent}
+          type="primary"
+          text={t("filePanel.newFileModal.addFile")}
+          onClick={createComponent}
         />,
         <Button
           key="close"
-          className="btn--secondary"
-          buttonText={t("filePanel.newFileModal.cancel")}
-          onClickHandler={closeModal}
+          type="tertiary"
+          text={t("filePanel.newFileModal.cancel")}
+          onClick={closeModal}
         />,
       ]}
     />
diff --git a/src/components/Modals/RenameFileModal.jsx b/src/components/Modals/RenameFileModal.jsx
index f371ec5b4..2ab7d307d 100644
--- a/src/components/Modals/RenameFileModal.jsx
+++ b/src/components/Modals/RenameFileModal.jsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useTranslation } from "react-i18next";
 import { validateFileName } from "../../utils/componentNameValidation";
-import Button from "../Button/Button";
+import { Button } from "@raspberrypifoundation/design-system-react";
 import {
   closeRenameFileModal,
   updateComponentName,
@@ -76,15 +76,15 @@ const RenameFileModal = () => {
       buttons={[
         <Button
           key="rename"
-          className="btn--primary"
-          buttonText={t("filePanel.renameFileModal.save")}
-          onClickHandler={renameComponent}
+          type="primary"
+          text={t("filePanel.renameFileModal.save")}
+          onClick={renameComponent}
         />,
         <Button
           key="close"
-          className="btn--secondary"
-          buttonText={t("filePanel.renameFileModal.cancel")}
-          onClickHandler={closeModal}
+          type="tertiary"
+          text={t("filePanel.renameFileModal.cancel")}
+          onClick={closeModal}
         />,
       ]}
     />
diff --git a/src/components/ProjectBar/ProjectBar.jsx b/src/components/ProjectBar/ProjectBar.jsx
index 037e2aa6f..3398c6de7 100644
--- a/src/components/ProjectBar/ProjectBar.jsx
+++ b/src/components/ProjectBar/ProjectBar.jsx
@@ -2,7 +2,6 @@ import React from "react";
 import { useSelector } from "react-redux";
 import { useTranslation } from "react-i18next";
 import SaveStatus from "../SaveStatus/SaveStatus";
-import DownloadIcon from "../../assets/icons/download.svg";
 import ProjectName from "../ProjectName/ProjectName";
 import DownloadButton from "../DownloadButton/DownloadButton";
 import SaveButton from "../SaveButton/SaveButton";
@@ -31,9 +30,8 @@ const ProjectBar = ({ nameEditable = true }) => {
           {loading === "success" && (
             <div className="project-bar__btn-wrapper">
               <DownloadButton
-                buttonText={t("header.download")}
+                text={t("header.download")}
                 className="btn btn--tertiary project-bar__btn"
-                Icon={DownloadIcon}
                 type="tertiary"
               />
             </div>
diff --git a/src/components/ProjectName/ProjectName.jsx b/src/components/ProjectName/ProjectName.jsx
index 60da2abc1..6326c762b 100644
--- a/src/components/ProjectName/ProjectName.jsx
+++ b/src/components/ProjectName/ProjectName.jsx
@@ -1,10 +1,8 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useDispatch, useSelector, shallowEqual } from "react-redux";
-import PencilIcon from "../../assets/icons/pencil.svg";
-import TickIcon from "../../assets/icons/tick.svg";
 
-import DesignSystemButton from "../DesignSystemButton/DesignSystemButton";
+import { Button } from "@raspberrypifoundation/design-system-react";
 import { updateProjectName } from "../../redux/EditorSlice";
 
 import "../../assets/stylesheets/ProjectName.scss";
@@ -120,7 +118,7 @@ const ProjectName = ({
         )}
         {editable && (
           <div ref={tickButton}>
-            <DesignSystemButton
+            <Button
               className="project-name__button"
               aria-label={t(
                 isEditing ? "header.renameSave" : "header.renameProject",
@@ -128,7 +126,7 @@ const ProjectName = ({
               title={t(
                 isEditing ? "header.renameSave" : "header.renameProject",
               )}
-              icon={isEditing ? <TickIcon /> : <PencilIcon />}
+              icon={isEditing ? "check" : "edit"}
               onClick={isEditing ? updateName : onEditNameButtonClick}
               type={isEditing ? "primary" : "tertiary"}
             />
diff --git a/src/components/RunButton/RunButton.jsx b/src/components/RunButton/RunButton.jsx
index 4034284f0..c7ac40114 100644
--- a/src/components/RunButton/RunButton.jsx
+++ b/src/components/RunButton/RunButton.jsx
@@ -1,10 +1,9 @@
-import Button from "../Button/Button";
-
 import React from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { triggerCodeRun } from "../../redux/EditorSlice";
+import { Button } from "@raspberrypifoundation/design-system-react";
 
-const RunButton = ({ embedded = false, className, ...props }) => {
+const RunButton = ({ embedded = false, ...props }) => {
   const codeRunLoading = useSelector((state) => state.editor.codeRunLoading);
   const activeRunner = useSelector((state) => state.editor.activeRunner);
   const loadedRunner = useSelector((state) => state.editor.loadedRunner);
@@ -22,8 +21,7 @@ const RunButton = ({ embedded = false, className, ...props }) => {
       disabled={
         !activeRunner || activeRunner !== loadedRunner || codeRunLoading
       }
-      className={`btn--primary btn--run${className ? ` ${className}` : ""}`}
-      onClickHandler={onClickRun}
+      onClick={onClickRun}
       {...props}
     />
   );
diff --git a/src/components/RunButton/RunnerControls.jsx b/src/components/RunButton/RunnerControls.jsx
index 814464c67..ebcfd9e6a 100644
--- a/src/components/RunButton/RunnerControls.jsx
+++ b/src/components/RunButton/RunnerControls.jsx
@@ -2,8 +2,7 @@ import React from "react";
 import RunButton from "./RunButton";
 import StopButton from "./StopButton";
 import { useSelector } from "react-redux";
-import RunIcon from "../../assets/icons/run.svg";
-import StopIcon from "../../assets/icons/stop.svg";
+
 import { useTranslation } from "react-i18next";
 import "../../assets/stylesheets/RunnerControls.scss";
 
@@ -19,20 +18,20 @@ const RunnerControls = ({ embedded = false, skinny = false }) => {
       {codeRunTriggered || drawTriggered ? (
         <StopButton
           embedded={embedded}
-          buttonText={t("runButton.stop")}
-          ButtonIcon={StopIcon}
-          buttonIconPosition="right"
-          buttonOuter={skinny}
-          className={`btn--stop btn--primary${skinny ? " btn--small" : ""}`}
+          text={t("runButton.stop")}
+          icon="stop"
+          iconPosition="right"
+          // buttonOuter={skinny}
+          // className={`btn--stop btn--primary${skinny ? " btn--small" : ""}`}
         />
       ) : (
         <RunButton
           embedded={embedded}
-          buttonText={t("runButton.run")}
-          ButtonIcon={RunIcon}
-          buttonIconPosition="right"
-          buttonOuter={skinny}
-          className={skinny ? "btn--small" : ""}
+          text={t("runButton.run")}
+          icon="play_arrow"
+          iconPosition="right"
+          // buttonOuter={skinny}
+          // className={skinny ? "btn--small" : ""}
         />
       )}
     </div>
diff --git a/src/components/RunButton/StopButton.jsx b/src/components/RunButton/StopButton.jsx
index 0f2b84951..d11867f7b 100644
--- a/src/components/RunButton/StopButton.jsx
+++ b/src/components/RunButton/StopButton.jsx
@@ -1,10 +1,10 @@
-import Button from "../Button/Button";
+import { Button } from "@raspberrypifoundation/design-system-react";
 import React, { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { stopCodeRun, stopDraw } from "../../redux/EditorSlice";
 import { useTranslation } from "react-i18next";
 
-const StopButton = ({ embedded = false, className, ...props }) => {
+const StopButton = ({ embedded = false, ...props }) => {
   const codeRunStopped = useSelector((state) => state.editor.codeRunStopped);
   const codeRunTriggered = useSelector(
     (state) => state.editor.codeRunTriggered,
@@ -22,29 +22,17 @@ const StopButton = ({ embedded = false, className, ...props }) => {
     dispatch(stopDraw());
   };
 
-  const stop = (
-    <Button
-      className={`btn--primary btn--stop${className ? ` ${className}` : ""}`}
-      onClickHandler={onClickStop}
-      {...props}
-    />
-  );
+  const stop = <Button onClick={onClickStop} {...props} />;
   const [button, setButton] = useState(stop);
 
   useEffect(() => {
     if (codeRunStopped) {
-      const stopping = (
-        <Button
-          className={`${className ? ` ${className}` : ""}`}
-          buttonText={t("runButton.stopping")}
-          disabled
-        />
-      );
+      const stopping = <Button text={t("runButton.stopping")} disabled />;
       setTimeout(() => {
         setButton(stopping);
       }, 100);
     }
-  }, [className, codeRunStopped, t]);
+  }, [codeRunStopped, t]);
 
   return button;
 };
diff --git a/src/components/SaveButton/SaveButton.jsx b/src/components/SaveButton/SaveButton.jsx
index 3b47ecd5c..af020eca3 100644
--- a/src/components/SaveButton/SaveButton.jsx
+++ b/src/components/SaveButton/SaveButton.jsx
@@ -1,16 +1,14 @@
 import React, { useEffect, useState, useCallback } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { useTranslation } from "react-i18next";
-import classNames from "classnames";
 
 import { logInEvent } from "../../events/WebComponentCustomEvents";
 import { isOwner } from "../../utils/projectHelpers";
 
-import DesignSystemButton from "../DesignSystemButton/DesignSystemButton";
-import SaveIcon from "../../assets/icons/save.svg";
+import { Button } from "@raspberrypifoundation/design-system-react";
 import { triggerSave } from "../../redux/EditorSlice";
 
-const SaveButton = ({ className, type, fill = false }) => {
+const SaveButton = ({ type, fill = false }) => {
   const dispatch = useDispatch();
   const { t } = useTranslation();
 
@@ -40,18 +38,12 @@ const SaveButton = ({ className, type, fill = false }) => {
     loading === "success" &&
     !projectOwner &&
     buttonType && (
-      <DesignSystemButton
-        className={classNames(className, {
-          "btn--primary": buttonType === "primary",
-          "btn--secondary": buttonType === "secondary",
-          "btn--tertiary": buttonType === "tertiary",
-        })}
+      <Button
         onClick={onClickSave}
         text={t(user ? "header.save" : "header.loginToSave")}
-        textAlways
-        icon={<SaveIcon />}
+        icon="save"
         type={buttonType}
-        fill={fill}
+        fullWidth={fill}
       />
     )
   );
diff --git a/src/utils/Notifications.js b/src/utils/Notifications.js
index 589b30750..d0851b207 100644
--- a/src/utils/Notifications.js
+++ b/src/utils/Notifications.js
@@ -3,16 +3,15 @@ import { toast } from "react-toastify";
 import InfoIcon from "../assets/icons/info.svg";
 import TickIcon from "../assets/icons/tick.svg";
 import i18n from "./i18n";
-import Button from "../components/Button/Button";
-import CloseIcon from "./CloseIcon";
+import { Button } from "@raspberrypifoundation/design-system-react";
 
 const CloseButton = ({ closeToast }) => {
   return (
     <Button
-      ButtonIcon={CloseIcon}
-      onClickHandler={closeToast}
+      icon="close"
+      onClick={closeToast}
       title={i18n.t("notifications.close")}
-      label={i18n.t("notifications.close")}
+      aria-label={i18n.t("notifications.close")}
     />
   );
 };
diff --git a/src/utils/ToastCloseButton.jsx b/src/utils/ToastCloseButton.jsx
index 166a10c0e..cb904846d 100644
--- a/src/utils/ToastCloseButton.jsx
+++ b/src/utils/ToastCloseButton.jsx
@@ -1,14 +1,9 @@
 import React from "react";
-import Button from "../components/Button/Button";
-import CloseIcon from "./CloseIcon";
+import { Button } from "@raspberrypifoundation/design-system-react";
 
 const ToastCloseButton = ({ closeToast }) => {
   return (
-    <Button
-      className="btn btn--tertiary"
-      onClickHandler={closeToast}
-      ButtonIcon={() => <CloseIcon scaleFactor={0.75} />}
-    />
+    <Button type="tertiary" onClick={closeToast} icon="close" size="small" />
   );
 };
 
diff --git a/src/utils/setupTests.js b/src/utils/setupTests.js
index 201443727..0d001b4d4 100644
--- a/src/utils/setupTests.js
+++ b/src/utils/setupTests.js
@@ -6,6 +6,11 @@ import "@testing-library/jest-dom";
 import "jest-canvas-mock";
 import PyodideWorker from "../components/Editor/Runners/PythonRunner/PyodideRunner/PyodideWorker.mock.js";
 
+// Polyfill TextEncoder/TextDecoder for Jest environment
+// Required by @raspberrypifoundation/design-system-react components
+import { TextEncoder, TextDecoder } from "util";
+Object.assign(global, { TextDecoder, TextEncoder });
+
 /* global globalThis */
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 
diff --git a/src/web-component.html b/src/web-component.html
index 178c7c623..899e5999c 100644
--- a/src/web-component.html
+++ b/src/web-component.html
@@ -29,6 +29,10 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width" />
     <title>Editor Web component</title>
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
+    />
   </head>
   <body>
     <p id="results"></p>
@@ -52,7 +56,7 @@
           "download",
           "settings",
           "info",
-        ]),
+        ])
       );
 
       // Pre-set the code attribute with an empty string.
@@ -89,7 +93,7 @@
       runButton.appendChild(runButtonText);
       runButton.onclick = (event) => {
         webComp.rerunCode();
-      }
+      };
       body.append(runButton);
     });
   </script>
diff --git a/yarn.lock b/yarn.lock
index ce20e60f2..3c3b89fbd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2916,28 +2916,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@raspberrypifoundation/design-system-core@npm:^1.6.0":
-  version: 1.6.0
-  resolution: "@raspberrypifoundation/design-system-core@npm:1.6.0"
+"@raspberrypifoundation/design-system-core@npm:^2.4.0":
+  version: 2.4.0
+  resolution: "@raspberrypifoundation/design-system-core@npm:2.4.0"
   dependencies:
     classnames: ^2.3.2
-  checksum: 3eda17c4068e752daf070b6cbce9630b1b51997b911a4753b73f2c3726a40ec6bfba1b751380a4ad6f51e3e2e8e9cac66a7709343a7de9c5c8b074b409742a26
+  checksum: 8db6b71f0675849617ad18e70a35b8faa99a3cb3d4b7dbde15a250de1ca971f09ffeb0d7e4fe6d6cf1645890d6ffe0ca795967e0371e665775de9ff27e5bc4c6
   languageName: node
   linkType: hard
 
-"@raspberrypifoundation/design-system-react@npm:^1.6.0":
-  version: 1.6.0
-  resolution: "@raspberrypifoundation/design-system-react@npm:1.6.0"
+"@raspberrypifoundation/design-system-react@npm:2.6.2":
+  version: 2.6.2
+  resolution: "@raspberrypifoundation/design-system-react@npm:2.6.2"
   dependencies:
-    classnames: ^2.3.2
-    material-symbols: ^0.14.5
-    prop-types: ^15.8.1
-    react: ^18.2.0
-    react-dom: ^18.2.0
-    react-router-dom: ^6.24.0
+    "@raspberrypifoundation/design-system-core": ^2.4.0
+    classnames: ^2.5.1
   peerDependencies:
+    react: ^18.3.1
+    react-dom: ^18.3.1
     react-router-dom: ^6.24.0
-  checksum: 6bb6341f90d3c4fa569817813de7a1a9e69a23c12ca2cf0f20d47b9d0954771e237bda27eedba93b91a0d1d81fca32e155415ddc902947630711b38583f97ac5
+  checksum: a2b1bf4780ec84ce369dbd456d118d68a5cd72018709fcb19558d873b883aef2505037c8d4929c04c8064108e009a57a749d7a88fa83265472c3f554e7efdb65
   languageName: node
   linkType: hard
 
@@ -2959,8 +2957,7 @@ __metadata:
     "@juggle/resize-observer": ^3.3.1
     "@lezer/highlight": ^1.0.0
     "@pmmmwh/react-refresh-webpack-plugin": 0.4.3
-    "@raspberrypifoundation/design-system-core": ^1.6.0
-    "@raspberrypifoundation/design-system-react": ^1.6.0
+    "@raspberrypifoundation/design-system-react": 2.6.2
     "@react-three/drei": 9.114.3
     "@react-three/fiber": ^8.0.13
     "@react-three/test-renderer": 8.2.1
@@ -3301,13 +3298,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@remix-run/router@npm:1.21.0":
-  version: 1.21.0
-  resolution: "@remix-run/router@npm:1.21.0"
-  checksum: d9477a7772053ad0ffcf03385cfb1a54e56f8a56d1f9f5062de3b1dfcbd019dd73282a00a5a72aa55c120771110982448c165c1405d64540aaef13051a8e45cc
-  languageName: node
-  linkType: hard
-
 "@replit/codemirror-indentation-markers@npm:^6.1.0":
   version: 6.5.3
   resolution: "@replit/codemirror-indentation-markers@npm:6.5.3"
@@ -6598,7 +6588,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"classnames@npm:^2.2.1, classnames@npm:^2.2.5, classnames@npm:^2.3.2":
+"classnames@npm:^2.2.1, classnames@npm:^2.2.5, classnames@npm:^2.3.2, classnames@npm:^2.5.1":
   version: 2.5.1
   resolution: "classnames@npm:2.5.1"
   checksum: da424a8a6f3a96a2e87d01a432ba19315503294ac7e025f9fece656db6b6a0f7b5003bb1fbb51cbb0d9624d964f1b9bb35a51c73af9b2434c7b292c42231c1e5
@@ -14033,13 +14023,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"material-symbols@npm:^0.14.5":
-  version: 0.14.7
-  resolution: "material-symbols@npm:0.14.7"
-  checksum: 191dea0145eadabd3122b891b965d8568793c3f53a540186a30b459948a8a0c00938642dcca3c4fcca483b08d7480d02722c6de10caeeeae30437306a79f64b6
-  languageName: node
-  linkType: hard
-
 "material-symbols@npm:^0.27.0":
   version: 0.27.0
   resolution: "material-symbols@npm:0.27.0"
@@ -16987,7 +16970,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:^18.1.0, react-dom@npm:^18.2.0":
+"react-dom@npm:^18.1.0":
   version: 18.3.1
   resolution: "react-dom@npm:18.3.1"
   dependencies:
@@ -17186,19 +17169,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-router-dom@npm:^6.24.0":
-  version: 6.28.0
-  resolution: "react-router-dom@npm:6.28.0"
-  dependencies:
-    "@remix-run/router": 1.21.0
-    react-router: 6.28.0
-  peerDependencies:
-    react: ">=16.8"
-    react-dom: ">=16.8"
-  checksum: 0cf4658a92bc66f50ec9d8518c36aa5a402bcadce71fb624ed6f900d73a29ea87ff904a4f2c42279107e75e80cc08c6192563fadcc5d4e642e6d476e38e83b21
-  languageName: node
-  linkType: hard
-
 "react-router-dom@npm:^6.7.0":
   version: 6.27.0
   resolution: "react-router-dom@npm:6.27.0"
@@ -17223,17 +17193,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-router@npm:6.28.0":
-  version: 6.28.0
-  resolution: "react-router@npm:6.28.0"
-  dependencies:
-    "@remix-run/router": 1.21.0
-  peerDependencies:
-    react: ">=16.8"
-  checksum: 23246ca957b5c2bc8d6f9a81fee2df2ce4fc3feca3ec27c2fd85999568fc1299a4e8273e4ab70b6f3acd43a1fb45e0c93cb01ef77e68c9f9e1f7e4f42a1419ea
-  languageName: node
-  linkType: hard
-
 "react-shallow-renderer@npm:^16.13.1":
   version: 16.15.0
   resolution: "react-shallow-renderer@npm:16.15.0"
@@ -17316,7 +17275,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:^18.1.0, react@npm:^18.2.0":
+"react@npm:^18.1.0":
   version: 18.3.1
   resolution: "react@npm:18.3.1"
   dependencies: