diff --git a/public/assets/common/icons/arrow-right.svg b/public/assets/common/icons/arrow-right.svg
new file mode 100644
index 0000000000..923e82bb1a
--- /dev/null
+++ b/public/assets/common/icons/arrow-right.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="4 4 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.4 18L8 16.6L12.6 12L8 7.4L9.4 6L15.4 12L9.4 18Z" fill="#333333"/>
+</svg>
diff --git a/public/assets/common/icons/download.svg b/public/assets/common/icons/download.svg
new file mode 100644
index 0000000000..896b5c8414
--- /dev/null
+++ b/public/assets/common/icons/download.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="4 4 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 16L7 11L8.4 9.55L11 12.15V4H13V12.15L15.6 9.55L17 11L12 16ZM4 20V15H6V18H18V15H20V20H4Z" fill="#A3106D"/>
+</svg>
diff --git a/src/app/components/elements/SearchInputs.tsx b/src/app/components/elements/SearchInputs.tsx
index 96361418d3..ab7f268e22 100644
--- a/src/app/components/elements/SearchInputs.tsx
+++ b/src/app/components/elements/SearchInputs.tsx
@@ -1,6 +1,60 @@
-import React, {ChangeEvent} from "react";
-import {Button, Input, InputGroup, Label} from "reactstrap";
-import {siteSpecific, withSearch} from "../../services";
+import React, {ChangeEvent, FormEvent, useEffect, useRef, useState} from "react";
+import {Button, Form, Input, InputGroup, InputProps, Label} from "reactstrap";
+import {ifKeyIsEnter, pushSearchToHistory, SEARCH_CHAR_LENGTH_LIMIT, siteSpecific} from "../../services";
+import classNames from "classnames";
+import { useHistory, useLocation } from "react-router";
+
+interface SearchInputProps {
+    setSearchText: (s: string) => void;
+    searchText: string;
+    inputProps: {
+        innerRef: React.RefObject<HTMLInputElement>;
+        "aria-label": "Search";
+        type: "search";
+        name: "query";
+        maxLength: typeof SEARCH_CHAR_LENGTH_LIMIT;
+        placeholder: "Search";
+    };
+}
+
+// HOC pattern for making different flavour search bars
+function withSearch(Component: React.FC<SearchInputProps>) {
+    const SearchComponent = ({className, inline, onSearch, initialValue}: {className?: string; inline?: boolean; onSearch?: (searchText: string) => void; initialValue?: string}) => {
+        const [searchText, setSearchText] = useState(initialValue ?? "");
+        const searchInputRef = useRef<HTMLInputElement>(null);
+
+        const history = useHistory();
+        function doSearch(e: FormEvent<HTMLFormElement>) {
+            e.preventDefault();
+            if (searchText === "") {
+                if (searchInputRef.current) searchInputRef.current.focus();
+            } else {
+                onSearch?.(searchText);
+                pushSearchToHistory(history, searchText, []);
+            }
+        }
+
+        // Clear this search field on location (i.e. search query) change - user should use the main search bar
+        const location = useLocation();
+        useEffect(() => { if (location.pathname === "/search") { setSearchText(initialValue ?? ""); }}, [location]);
+
+        return <Form onSubmit={doSearch} className={classNames(className, {"form-inline" : inline})}>
+            <div className='form-group search--main-group'>
+                <Component inputProps={{
+                    maxLength: SEARCH_CHAR_LENGTH_LIMIT,
+                    type: "search",
+                    name: "query",
+                    "aria-label": "Search",
+                    innerRef: searchInputRef,
+                    placeholder: "Search"
+                }} setSearchText={setSearchText} searchText={searchText} />
+                <input type="hidden" name="types" value="isaacQuestionPage,isaacConceptPage" />
+            </div>
+        </Form>;
+    };
+    SearchComponent.displayName = "SearchComponent";
+    return SearchComponent;
+}
 
 const PhysicsSearchButton = () => (
     <Button color='link' aria-label='search' className='search-button'>
@@ -108,3 +162,23 @@ export const AdaHeaderSearch = withSearch(({inputProps, setSearchText, searchTex
 
 export const SearchPageSearch = siteSpecific(PhySimpleSearch, AdaHeaderSearch);
 export const MainSearchInput = siteSpecific(PhySearchInput, AdaSearchInput);
+
+
+interface SearchButtonWithIconProps extends InputProps {
+    onSearch?: () => void;
+}
+
+export const SearchInputWithIcon = (props: SearchButtonWithIconProps) => {
+    const {onSearch, ...rest} = props;
+    return <InputGroup className="search-input-icon">
+        <Input {...rest}
+            id="question-search-title"
+            type="text"
+            maxLength={SEARCH_CHAR_LENGTH_LIMIT}
+            {...(onSearch ? {"onKeyDown": ifKeyIsEnter(onSearch)} : {})}
+        />
+        <button className="d-flex align-items-center justify-content-center" onClick={onSearch} aria-label="Search">
+            <i className="icon icon-search" color="tertiary"/>
+        </button>
+    </InputGroup>;
+};
diff --git a/src/app/components/pages/QuestionFinder.tsx b/src/app/components/pages/QuestionFinder.tsx
index bfa9c58010..49317915c9 100644
--- a/src/app/components/pages/QuestionFinder.tsx
+++ b/src/app/components/pages/QuestionFinder.tsx
@@ -42,7 +42,7 @@ import {MetaDescription} from "../elements/MetaDescription";
 import {CanonicalHrefElement} from "../navigation/CanonicalHrefElement";
 import classNames from "classnames";
 import queryString from "query-string";
-import {Button, Card, CardBody, CardHeader, Col, Container, Input, InputGroup, Label, Row} from "reactstrap";
+import {Button, Card, CardBody, CardHeader, Col, Container, Label, Row} from "reactstrap";
 import {ChoiceTree, getChoiceTreeLeaves, QuestionFinderFilterPanel} from "../elements/panels/QuestionFinderFilterPanel";
 import {TierID} from "../elements/svg/HierarchyFilter";
 import { MainContent, QuestionFinderSidebar, SidebarLayout } from "../elements/layout/SidebarLayout";
@@ -51,6 +51,7 @@ import { ContentTypeVisibility, LinkToContentSummaryList } from "../elements/lis
 import { PageFragment } from "../elements/PageFragment";
 import { RenderNothing } from "../elements/RenderNothing";
 import { processTagHierarchy, pruneTreeNode } from "../../services/questionHierarchy";
+import { SearchInputWithIcon } from "../elements/SearchInputs";
 
 // Type is used to ensure that we check all query params if a new one is added in the future
 const FILTER_PARAMS = ["query", "topics", "fields", "subjects", "stages", "difficulties", "examBoards", "book", "excludeBooks", "statuses", "randomSeed"] as const;
@@ -489,19 +490,15 @@ export const QuestionFinder = withRouter(({location}: RouteComponentProps) => {
                 {isAda && <Row>
                     <Col lg={6} md={12} xs={12} className="finder-search">
                         <Label htmlFor="question-search-title" className="mt-2"><b>Search for a question</b></Label>
-                        <InputGroup>
-                            <Input id="question-search-title"
-                                type="text"
-                                maxLength={SEARCH_CHAR_LENGTH_LIMIT}
-                                defaultValue={searchQuery}
-                                placeholder={siteSpecific(`e.g. ${getQuestionPlaceholder(pageContext)}`, "e.g. Creating an AST")}
-                                onChange={(e) => {
-                                    debouncedSearchHandler(e.target.value);
-                                    setRandomSeed(undefined); // This random seed reset is for Ada only! This is managed in the filtersChanged useEffect for Phy
-                                }}
-                            />
-                            <Button className="question-search-button" onClick={searchAndUpdateURL}/>
-                        </InputGroup>
+                        <SearchInputWithIcon
+                            defaultValue={searchQuery}
+                            placeholder={siteSpecific(`e.g. ${getQuestionPlaceholder(pageContext)}`, "e.g. Creating an AST")}
+                            onChange={(e) => {
+                                debouncedSearchHandler(e.target.value);
+                                setRandomSeed(undefined); // This random seed reset is for Ada only! This is managed in the filtersChanged useEffect for Phy
+                            }}
+                            onSearch={searchAndUpdateURL}
+                        />
                     </Col>
                 </Row>}
 
diff --git a/src/app/services/search.ts b/src/app/services/search.ts
new file mode 100644
index 0000000000..ff6f3ba1d4
--- /dev/null
+++ b/src/app/services/search.ts
@@ -0,0 +1,53 @@
+import {History} from "history";
+import {DOCUMENT_TYPE, isStaff, TAG_ID} from ".";
+import {ContentSummaryDTO} from "../../IsaacApiTypes";
+import {PotentialUser} from "../../IsaacAppTypes";
+import queryString from "query-string";
+import {Immutable} from "immer";
+import pickBy from "lodash/pickBy";
+
+export const pushSearchToHistory = function(history: History, searchQuery: string, typesFilter: DOCUMENT_TYPE[]) {
+    const previousQuery = queryString.parse(history.location.search);
+    const newQueryOptions = {
+        query: encodeURI(searchQuery),
+        types: typesFilter.map(encodeURI).join(",") || undefined,
+    };
+    history.push({
+        pathname: "/search",
+        search: queryString.stringify({...previousQuery, ...newQueryOptions}, {encode: false}),
+    });
+};
+
+export const pushConceptsToHistory = function(history: History, searchText: string, subjects: TAG_ID[]) {
+    const queryOptions = {
+        "query": encodeURIComponent(searchText),
+        "types": subjects.join(","),
+    };
+    history.push({
+        pathname: history.location.pathname,
+        search: queryString.stringify(pickBy(queryOptions), {encode: false}),
+    });
+};
+
+export const searchResultIsPublic = function(content: ContentSummaryDTO, user?: Immutable<PotentialUser> | null) {
+    if (content.deprecated) {
+        return false;
+    } else if (isStaff(user)) {
+        return true;
+    } else {
+        return !content.supersededBy && !content.tags?.includes("nofilter");
+    }
+};
+
+export function parseLocationSearch(search: string): [Nullable<string>, DOCUMENT_TYPE[]] {
+    const searchParsed = queryString.parse(search);
+
+    const parsedQuery = searchParsed.query || "";
+    const query = parsedQuery instanceof Array ? parsedQuery[0] : parsedQuery;
+
+    const parsedFilters = searchParsed.types || "";
+    const possibleFilters = (Array.isArray(parsedFilters) ? parsedFilters[0] || "" : parsedFilters || "").split(",");
+    const filters = possibleFilters.filter(pf => Object.values(DOCUMENT_TYPE).includes(pf as DOCUMENT_TYPE)) as DOCUMENT_TYPE[];
+
+    return [query, filters];
+}
diff --git a/src/app/services/search.tsx b/src/app/services/search.tsx
deleted file mode 100644
index b49b0f79d0..0000000000
--- a/src/app/services/search.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import {History} from "history";
-import {DOCUMENT_TYPE, isStaff, SEARCH_CHAR_LENGTH_LIMIT, TAG_ID} from "./";
-import {ContentSummaryDTO} from "../../IsaacApiTypes";
-import {PotentialUser} from "../../IsaacAppTypes";
-import queryString from "query-string";
-import {Immutable} from "immer";
-import React, {FormEvent, useEffect, useRef, useState} from "react";
-import {useHistory, useLocation} from "react-router-dom";
-import {Form} from "reactstrap";
-import classNames from "classnames";
-import pickBy from "lodash/pickBy";
-
-export const pushSearchToHistory = function(history: History, searchQuery: string, typesFilter: DOCUMENT_TYPE[]) {
-    const previousQuery = queryString.parse(history.location.search);
-    const newQueryOptions = {
-        query: encodeURI(searchQuery),
-        types: typesFilter.map(encodeURI).join(",") || undefined,
-    };
-    history.push({
-        pathname: "/search",
-        search: queryString.stringify({...previousQuery, ...newQueryOptions}, {encode: false}),
-    });
-};
-
-export const pushConceptsToHistory = function(history: History, searchText: string, subjects: TAG_ID[]) {
-    const queryOptions = {
-        "query": encodeURIComponent(searchText),
-        "types": subjects.join(","),
-    };
-    history.push({
-        pathname: history.location.pathname,
-        search: queryString.stringify(pickBy(queryOptions), {encode: false}),
-    });
-};
-
-export const searchResultIsPublic = function(content: ContentSummaryDTO, user?: Immutable<PotentialUser> | null) {
-    if (content.deprecated) {
-        return false;
-    } else if (isStaff(user)) {
-        return true;
-    } else {
-        return !content.supersededBy && !content.tags?.includes("nofilter");
-    }
-};
-
-export function parseLocationSearch(search: string): [Nullable<string>, DOCUMENT_TYPE[]] {
-    const searchParsed = queryString.parse(search);
-
-    const parsedQuery = searchParsed.query || "";
-    const query = parsedQuery instanceof Array ? parsedQuery[0] : parsedQuery;
-
-    const parsedFilters = searchParsed.types || "";
-    const possibleFilters = (Array.isArray(parsedFilters) ? parsedFilters[0] || "" : parsedFilters || "").split(",");
-    const filters = possibleFilters.filter(pf => Object.values(DOCUMENT_TYPE).includes(pf as DOCUMENT_TYPE)) as DOCUMENT_TYPE[];
-
-    return [query, filters];
-}
-
-interface SearchInputProps {
-    setSearchText: (s: string) => void;
-    searchText: string;
-    inputProps: {
-        innerRef: React.RefObject<HTMLInputElement>;
-        "aria-label": "Search";
-        type: "search";
-        name: "query";
-        maxLength: typeof SEARCH_CHAR_LENGTH_LIMIT;
-        placeholder: "Search";
-    };
-}
-// HOC pattern for making different flavour search bars
-export function withSearch(Component: React.FC<SearchInputProps>) {
-    const SearchComponent = ({className, inline, onSearch, initialValue}: {className?: string; inline?: boolean; onSearch?: (searchText: string) => void; initialValue?: string}) => {
-        const [searchText, setSearchText] = useState(initialValue ?? "");
-        const searchInputRef = useRef<HTMLInputElement>(null);
-
-        const history = useHistory();
-        function doSearch(e: FormEvent<HTMLFormElement>) {
-            e.preventDefault();
-            if (searchText === "") {
-                if (searchInputRef.current) searchInputRef.current.focus();
-            } else {
-                onSearch?.(searchText);
-                pushSearchToHistory(history, searchText, []);
-            }
-        }
-
-        // Clear this search field on location (i.e. search query) change - user should use the main search bar
-        const location = useLocation();
-        useEffect(() => { if (location.pathname === "/search") { setSearchText(initialValue ?? ""); }}, [location]);
-
-        return <Form onSubmit={doSearch} className={classNames(className, {"form-inline" : inline})}>
-            <div className='form-group search--main-group'>
-                <Component inputProps={{
-                    maxLength: SEARCH_CHAR_LENGTH_LIMIT,
-                    type: "search",
-                    name: "query",
-                    "aria-label": "Search",
-                    innerRef: searchInputRef,
-                    placeholder: "Search"
-                }} setSearchText={setSearchText} searchText={searchText} />
-                <input type="hidden" name="types" value="isaacQuestionPage,isaacConceptPage" />
-            </div>
-        </Form>;
-    };
-    SearchComponent.displayName = "SearchComponent";
-    return SearchComponent;
-}
diff --git a/src/scss/common/elements.scss b/src/scss/common/elements.scss
index baaf60fd3d..b3595dfddc 100644
--- a/src/scss/common/elements.scss
+++ b/src/scss/common/elements.scss
@@ -381,17 +381,17 @@ iframe.email-html {
   transition: background-position 0.3s ease-in-out;
   
   &:has(> input:checked) {
-    border-left: solid 2px var(--sidebar-tab-active);
+    border-left: solid 2px var(--tab-active);
     background-position: 0% 0%;
     
     .badge.rounded-pill {
-      background-color: var(--sidebar-tab-active);
+      background-color: var(--tab-active);
       color: white;
     }
   }
 
   &:hover:not(:has(> input:checked, > input:disabled)) {
-    border-left: solid 2px var(--sidebar-tab-hover);
+    border-left: solid 2px var(--tab-hover);
   }
 
   &:has(> input:disabled) {
diff --git a/src/scss/common/icons.scss b/src/scss/common/icons.scss
index 8cc7bc450b..02760840c7 100644
--- a/src/scss/common/icons.scss
+++ b/src/scss/common/icons.scss
@@ -63,3 +63,80 @@ polygon.fill-secondary {
 img[aria-disabled="true"] {
   opacity: 0.5;
 }
+
+.icon-download {
+  @include svg-icon('/assets/common/icons/download.svg', var(--icon-size), var(--icon-size), var(--mask-size, 60%));
+}
+
+.icon-chevron-right {
+  @include svg-icon('/assets/common/icons/arrow-right.svg', var(--icon-size), var(--icon-size), var(--mask-size, 60%));
+}
+
+.icon-search {
+  @include svg-icon('/assets/common/icons/search-icon.svg', var(--icon-size), var(--icon-size), var(--mask-size, 60%));
+}
+
+// Icon sizing
+.icon {
+  --icon-size: 16px;
+  --mask-size: 100%;
+}
+
+.icon-lg {
+  --icon-size: 60px;
+  --mask-size: initial;
+}
+
+.icon-xl {
+  --icon-size: 75px;
+  --mask-size: initial;
+}
+
+@mixin icon-color-override($color) {
+  &.layered {
+    &::before {
+      background-color: $color !important;
+    }
+    &::after {
+      background-color: $color !important;
+    }
+  }
+
+  // .layered is a bit grim; if we could set something in @svg-icon-layered as a flag instead this would be ideal.
+  &:not(.layered) {
+    background-color: $color !important;
+  }
+}
+
+i.icon {
+  &, &[color="primary"] {
+    background-color: var(--icon-primary);
+    
+    @include not-reduced-motion {
+      transition: background-color 0.15s ease-in-out; // mirrors BS's $btn-transition
+    }
+  
+    // for layered icons, the ::after element takes the colour while the ::before remains uncoloured
+    &::after {
+      background-color: var(--icon-primary);
+      
+      @include not-reduced-motion {
+        transition: background-color 0.15s ease-in-out;
+      }
+    }
+  }
+
+  &[color="secondary"] {
+    background-color: var(--icon-secondary);
+    &::after {
+      background-color: var(--icon-secondary);
+    }
+  }
+
+  &[color="tertiary"] {
+    background-color: var(--icon-tertiary);
+    &::after {
+      background-color: var(--icon-tertiary);
+    }
+  }
+}
diff --git a/src/scss/common/search.scss b/src/scss/common/search.scss
index 7637bfbfdc..a5f76b54f3 100644
--- a/src/scss/common/search.scss
+++ b/src/scss/common/search.scss
@@ -105,3 +105,37 @@ nav.search {
   flex-flow: row nowrap;
   max-width: 520px;
 }
+
+.search-input-icon {
+  $search-button-offset: 50px;
+  > input {
+    border-right: none;
+  }
+
+  > button {
+    // background: white url(/assets/cs/icons/search-jet.svg) no-repeat center;
+    // background-size: 20px 20px;
+    background-color: white;
+    border: 1px solid black;
+    border-left: none;
+    border-radius: 0 $border-radius-lg $border-radius-lg 0;
+    padding: 0;
+    width: $search-button-offset;
+    min-width: 0;
+    &:active {
+      background-color: lightgray !important;
+    }
+  }
+
+  &::after {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 1px;
+    height: 75%;
+    top: 12.5%;
+    right: $search-button-offset;
+    background: #c2c2c2;
+    z-index: 4;
+  }
+}
diff --git a/src/scss/common/tabs.scss b/src/scss/common/tabs.scss
index 7a12d8df7b..4f0c6eaf27 100644
--- a/src/scss/common/tabs.scss
+++ b/src/scss/common/tabs.scss
@@ -39,7 +39,7 @@
     &.active {
       .nav-link {
         font-family: $secondary-font-semi-bold;
-        background-color: var(--sidebar-tab-active, $black);
+        background-color: var(--tab-active, $black);
         color: $white;
         text-decoration: none;
         cursor: default;
diff --git a/src/scss/cs/button.scss b/src/scss/cs/button.scss
index 02fd7e8d2f..ee5742cac4 100644
--- a/src/scss/cs/button.scss
+++ b/src/scss/cs/button.scss
@@ -78,11 +78,11 @@
 
   font-size: 1.111rem;
   &:not(.btn-sm):not(.btn-link) {
-    padding: 0.5rem 2.1rem 0.4rem 2.1rem;
+    padding: 0.5rem 2.1rem;
   }
   @extend .fw-semi-bold;
   &.btn-sm {
-    padding: 0.2rem 0.7rem 0.16rem 0.7rem;
+    padding: 0.2rem 0.7rem;
   }
   min-width: 25px;
 
diff --git a/src/scss/cs/color-theme.scss b/src/scss/cs/color-theme.scss
new file mode 100644
index 0000000000..f6565ec594
--- /dev/null
+++ b/src/scss/cs/color-theme.scss
@@ -0,0 +1,14 @@
+// TODO: 
+// - move any colour theming from /cs/isaac.scss here
+//   - (including all colour definitions)
+// - copy any required theming from phy/isaac.scss
+// - ensure all variables are named equivalently across the two files
+
+#root {
+    --tab-active: #{$dark-pink-300};
+    --tab-hover: #{$cs-light-gray};
+
+    --icon-primary: #{$dark-pink-300};
+    --icon-secondary: #{$cyan-100};
+    --icon-tertiary: #{$cs-black};
+}
diff --git a/src/scss/cs/fonts.scss b/src/scss/cs/fonts.scss
index 3e0dead30a..9e23598560 100644
--- a/src/scss/cs/fonts.scss
+++ b/src/scss/cs/fonts.scss
@@ -1,3 +1,10 @@
+
+@mixin poppins-fix {
+  ascent-override: 80%;
+  descent-override: 16%;
+  line-gap-override: 0%;
+}
+
 @font-face {
   font-family: 'desyrel';
   src: url('/assets/common/fonts/desyrel-webfont.woff') format('woff'),
@@ -13,6 +20,7 @@
   src: url('/assets/cs/fonts/poppins-bold.woff2') format('woff2'),
   url('/assets/cs/fonts/poppins-bold.woff') format('woff'),
   url('/assets/cs/fonts/poppins-bold.ttf') format('truetype');
+  @include poppins-fix;
 }
 
 @font-face {
@@ -22,6 +30,7 @@
   src: url('/assets/cs/fonts/poppins-bolditalic.woff2') format('woff2'),
   url('/assets/cs/fonts/poppins-bolditalic.woff') format('woff'),
   url('/assets/cs/fonts/poppins-bolditalic.ttf') format('truetype');
+  @include poppins-fix;
 }
 
 @font-face {
@@ -31,6 +40,7 @@
   src: url('/assets/cs/fonts/poppins-italic.woff2') format('woff2'),
   url('/assets/cs/fonts/poppins-italic.woff') format('woff'),
   url('/assets/cs/fonts/poppins-italic.ttf') format('truetype');
+  @include poppins-fix;
 }
 
 @font-face {
@@ -40,6 +50,7 @@
   src: url('/assets/cs/fonts/poppins-light.woff2') format('woff2'),
   url('/assets/cs/fonts/poppins-light.woff') format('woff'),
   url('/assets/cs/fonts/poppins-light.ttf') format('truetype');
+  @include poppins-fix;
 }
 
 @font-face {
@@ -49,6 +60,7 @@
   src: url('/assets/cs/fonts/poppins-lightitalic.woff2') format('woff2'),
   url('/assets/cs/fonts/poppins-lightitalic.woff') format('woff'),
   url('/assets/cs/fonts/poppins-lightitalic.ttf') format('truetype');
+  @include poppins-fix;
 }
 
 @font-face {
@@ -58,6 +70,7 @@
   src: url('/assets/cs/fonts/poppins-regular.woff2') format('woff2'),
   url('/assets/cs/fonts/poppins-regular.woff') format('woff'),
   url('/assets/cs/fonts/poppins-regular.ttf') format('truetype');
+  @include poppins-fix;
 }
 
 @font-face {
@@ -67,6 +80,7 @@
   src: url('/assets/cs/fonts/poppins-semibold.woff2') format('woff2'),
   url('/assets/cs/fonts/poppins-semibold.woff') format('woff'),
   url('/assets/cs/fonts/poppins-semibold.ttf') format('truetype');
+  @include poppins-fix;
 }
 
 @font-face {
@@ -76,6 +90,7 @@
   src: url('/assets/cs/fonts/poppins-semibolditalic.woff2') format('woff2'),
   url('/assets/cs/fonts/poppins-semibolditalic.woff') format('woff'),
   url('/assets/cs/fonts/poppins-semibolditalic.ttf') format('truetype');
+  @include poppins-fix;
 }
 
 @font-face {
diff --git a/src/scss/cs/isaac.scss b/src/scss/cs/isaac.scss
index ed7cd138c2..57da3b3375 100644
--- a/src/scss/cs/isaac.scss
+++ b/src/scss/cs/isaac.scss
@@ -344,6 +344,7 @@ $enable-negative-margins: true;
 
 // Theming
 @import "accessibility";
+@import "color-theme";
 
 // Atoms
 @import "fonts";
diff --git a/src/scss/phy/color-theme.scss b/src/scss/phy/color-theme.scss
index 7efa30f5f7..c3a7ad7971 100644
--- a/src/scss/phy/color-theme.scss
+++ b/src/scss/phy/color-theme.scss
@@ -41,8 +41,8 @@
     // NAVIGATION
     --nav-primary: #{map.get($subject-colors, 500)};
     --nav-secondary: #{map.get($subject-colors, 400)};
-    --sidebar-tab-active: #{map.get($subject-colors, 500)};
-    --sidebar-tab-hover: #{map.get($subject-colors, 300)};
+    --tab-active: #{map.get($subject-colors, 500)};
+    --tab-hover: #{map.get($subject-colors, 300)};
 
     // ICONS
     --icon-primary: #{map.get($subject-colors, 500)};
@@ -75,8 +75,8 @@
       --buttons-light-hover-prefix: #{$color-neutral-200};
 
       --nav-primary: #{$color-brand-500};
-      --sidebar-tab-active: #{$color-brand-500};
-      --sidebar-tab-hover: #{$color-neutral-300};
+      --tab-active: #{$color-brand-500};
+      --tab-hover: #{$color-neutral-300};
 
       --icon-primary: #{$color-brand-500};
 
diff --git a/src/scss/phy/icons.scss b/src/scss/phy/icons.scss
index 431f6cfa69..197b76c18d 100644
--- a/src/scss/phy/icons.scss
+++ b/src/scss/phy/icons.scss
@@ -304,21 +304,6 @@ svg {
   }
 }
 
-i.icon {
-  background-color: var(--icon-primary);
-  @include not-reduced-motion {
-    transition: background-color 0.15s ease-in-out; // mirrors BS's $btn-transition
-  }
-
-  // for layered icons, the ::after element takes the colour while the ::before remains uncoloured
-  &::after {
-    background-color: var(--icon-primary);
-    @include not-reduced-motion {
-      transition: background-color 0.15s ease-in-out;
-    }
-  }
-}
-
 .btn.btn-keyline:hover > i.icon, .btn.btn-tint:hover > i.icon {
   background-color: var(--icon-hover);
 
@@ -333,43 +318,12 @@ i.icon {
   position: absolute;
 }
 
-// Icon sizing
-.icon {
-  --icon-size: 16px;
-  --mask-size: 100%;
-}
-
-.icon-lg {
-  --icon-size: 60px;
-  --mask-size: initial;
-}
-
-.icon-xl {
-  --icon-size: 75px;
-  --mask-size: initial;
-}
-
 // Overrides -- ONLY use these on an individual basis to override an active theme.
 // Setting `data-bs-theme` on a parent element is the much preferred approach.
 
 // These are !important by the same logic as Bootstrap classes; if you have specified this as an explicit classname, you want it to take precedence.
 
 // the default icon colour for `neutral` is $color-theme-500 (green), but we use black icons in a few places across e.g. navigation
-@mixin icon-color-override($color) {
-  &.layered {
-    &::before {
-      background-color: $color !important;
-    }
-    &::after {
-      background-color: $color !important;
-    }
-  }
-
-  // .layered is a bit grim; if we could set something in @svg-icon-layered as a flag instead this would be ideal.
-  &:not(.layered) {
-    background-color: $color !important;
-  }
-}
 
 i.icon.icon-color-black {
   @include icon-color-override($color-neutral-900);
diff --git a/src/test/pages/__image_snapshots__/ada/Assignment Progress should have no visual regressions #0.png b/src/test/pages/__image_snapshots__/ada/Assignment Progress should have no visual regressions #0.png
index 5a3b71c075..b2cfb9ec0b 100644
Binary files a/src/test/pages/__image_snapshots__/ada/Assignment Progress should have no visual regressions #0.png and b/src/test/pages/__image_snapshots__/ada/Assignment Progress should have no visual regressions #0.png differ
diff --git a/src/test/pages/__image_snapshots__/ada/Concept pages should have no visual regressions #0.png b/src/test/pages/__image_snapshots__/ada/Concept pages should have no visual regressions #0.png
index 99c4584ba4..88f379fa7c 100644
Binary files a/src/test/pages/__image_snapshots__/ada/Concept pages should have no visual regressions #0.png and b/src/test/pages/__image_snapshots__/ada/Concept pages should have no visual regressions #0.png differ
diff --git a/src/test/pages/__image_snapshots__/ada/Gameboard builder should have no visual regressions #0.png b/src/test/pages/__image_snapshots__/ada/Gameboard builder should have no visual regressions #0.png
index 934dd12951..9e11e2e580 100644
Binary files a/src/test/pages/__image_snapshots__/ada/Gameboard builder should have no visual regressions #0.png and b/src/test/pages/__image_snapshots__/ada/Gameboard builder should have no visual regressions #0.png differ
diff --git a/src/test/pages/__image_snapshots__/ada/Groups should have no visual regressions #0.png b/src/test/pages/__image_snapshots__/ada/Groups should have no visual regressions #0.png
index 90d21043fd..fe098b6580 100644
Binary files a/src/test/pages/__image_snapshots__/ada/Groups should have no visual regressions #0.png and b/src/test/pages/__image_snapshots__/ada/Groups should have no visual regressions #0.png differ
diff --git a/src/test/pages/__image_snapshots__/ada/Homepage should have no visual regressions #0.png b/src/test/pages/__image_snapshots__/ada/Homepage should have no visual regressions #0.png
index 47938a1636..0f616153a8 100644
Binary files a/src/test/pages/__image_snapshots__/ada/Homepage should have no visual regressions #0.png and b/src/test/pages/__image_snapshots__/ada/Homepage should have no visual regressions #0.png differ
diff --git a/src/test/pages/__image_snapshots__/ada/My Account should have no visual regressions on Beta page #0.png b/src/test/pages/__image_snapshots__/ada/My Account should have no visual regressions on Beta page #0.png
index 064e4bfff3..c8b189e761 100644
Binary files a/src/test/pages/__image_snapshots__/ada/My Account should have no visual regressions on Beta page #0.png and b/src/test/pages/__image_snapshots__/ada/My Account should have no visual regressions on Beta page #0.png differ
diff --git a/src/test/pages/__image_snapshots__/ada/My Account should have no visual regressions on Customise page #0.png b/src/test/pages/__image_snapshots__/ada/My Account should have no visual regressions on Customise page #0.png
index 798bb0a7cb..66a5e3f3e8 100644
Binary files a/src/test/pages/__image_snapshots__/ada/My Account should have no visual regressions on Customise page #0.png and b/src/test/pages/__image_snapshots__/ada/My Account should have no visual regressions on Customise page #0.png differ
diff --git a/src/test/pages/__image_snapshots__/ada/My Account should have no visual regressions on Notifications page #0.png b/src/test/pages/__image_snapshots__/ada/My Account should have no visual regressions on Notifications page #0.png
index aa2461e76a..92058876f6 100644
Binary files a/src/test/pages/__image_snapshots__/ada/My Account should have no visual regressions on Notifications page #0.png and b/src/test/pages/__image_snapshots__/ada/My Account should have no visual regressions on Notifications page #0.png differ
diff --git a/src/test/pages/__image_snapshots__/ada/My Account should have no visual regressions on Profile page #0.png b/src/test/pages/__image_snapshots__/ada/My Account should have no visual regressions on Profile page #0.png
index 4b471be108..eff6a0dadc 100644
Binary files a/src/test/pages/__image_snapshots__/ada/My Account should have no visual regressions on Profile page #0.png and b/src/test/pages/__image_snapshots__/ada/My Account should have no visual regressions on Profile page #0.png differ
diff --git a/src/test/pages/__image_snapshots__/ada/My Account should have no visual regressions on Security page #0.png b/src/test/pages/__image_snapshots__/ada/My Account should have no visual regressions on Security page #0.png
index 089836bdc1..1031974d6c 100644
Binary files a/src/test/pages/__image_snapshots__/ada/My Account should have no visual regressions on Security page #0.png and b/src/test/pages/__image_snapshots__/ada/My Account should have no visual regressions on Security page #0.png differ
diff --git a/src/test/pages/__image_snapshots__/ada/My Account should have no visual regressions on Teacher connections page #0.png b/src/test/pages/__image_snapshots__/ada/My Account should have no visual regressions on Teacher connections page #0.png
index f0f9e9d307..92b06300c3 100644
Binary files a/src/test/pages/__image_snapshots__/ada/My Account should have no visual regressions on Teacher connections page #0.png and b/src/test/pages/__image_snapshots__/ada/My Account should have no visual regressions on Teacher connections page #0.png differ
diff --git a/src/test/pages/__image_snapshots__/ada/My Assignments should have no visual regressions #0.png b/src/test/pages/__image_snapshots__/ada/My Assignments should have no visual regressions #0.png
index b8c6b52c45..12521dc88a 100644
Binary files a/src/test/pages/__image_snapshots__/ada/My Assignments should have no visual regressions #0.png and b/src/test/pages/__image_snapshots__/ada/My Assignments should have no visual regressions #0.png differ
diff --git a/src/test/pages/__image_snapshots__/ada/My Gameboards should have no visual regressions in card view #0.png b/src/test/pages/__image_snapshots__/ada/My Gameboards should have no visual regressions in card view #0.png
index a9fd9e65bf..0fa646b4f3 100644
Binary files a/src/test/pages/__image_snapshots__/ada/My Gameboards should have no visual regressions in card view #0.png and b/src/test/pages/__image_snapshots__/ada/My Gameboards should have no visual regressions in card view #0.png differ
diff --git a/src/test/pages/__image_snapshots__/ada/My Gameboards should have no visual regressions in table view #0.png b/src/test/pages/__image_snapshots__/ada/My Gameboards should have no visual regressions in table view #0.png
index 43234f59c0..30d9cc69c2 100644
Binary files a/src/test/pages/__image_snapshots__/ada/My Gameboards should have no visual regressions in table view #0.png and b/src/test/pages/__image_snapshots__/ada/My Gameboards should have no visual regressions in table view #0.png differ
diff --git a/src/test/pages/__image_snapshots__/ada/News page should have no visual regressions #0.png b/src/test/pages/__image_snapshots__/ada/News page should have no visual regressions #0.png
index 58db36187d..2f71afac86 100644
Binary files a/src/test/pages/__image_snapshots__/ada/News page should have no visual regressions #0.png and b/src/test/pages/__image_snapshots__/ada/News page should have no visual regressions #0.png differ
diff --git a/src/test/pages/__image_snapshots__/ada/Question finder page should have no visual regressions #0.png b/src/test/pages/__image_snapshots__/ada/Question finder page should have no visual regressions #0.png
index 9b18bdab5d..e510e587f3 100644
Binary files a/src/test/pages/__image_snapshots__/ada/Question finder page should have no visual regressions #0.png and b/src/test/pages/__image_snapshots__/ada/Question finder page should have no visual regressions #0.png differ
diff --git a/src/test/pages/__image_snapshots__/ada/Question types' regression test page should have no visual regressions #0.png b/src/test/pages/__image_snapshots__/ada/Question types' regression test page should have no visual regressions #0.png
index 46fd421d75..e420a0d604 100644
Binary files a/src/test/pages/__image_snapshots__/ada/Question types' regression test page should have no visual regressions #0.png and b/src/test/pages/__image_snapshots__/ada/Question types' regression test page should have no visual regressions #0.png differ
diff --git a/src/test/pages/__image_snapshots__/ada/Set Assignments should have no visual regressions #0.png b/src/test/pages/__image_snapshots__/ada/Set Assignments should have no visual regressions #0.png
index a16392a8ab..69e379dbd6 100644
Binary files a/src/test/pages/__image_snapshots__/ada/Set Assignments should have no visual regressions #0.png and b/src/test/pages/__image_snapshots__/ada/Set Assignments should have no visual regressions #0.png differ