diff --git a/e2e/eight.spec.ts b/e2e/eight.spec.ts
index 2459a77..ab0c312 100644
--- a/e2e/eight.spec.ts
+++ b/e2e/eight.spec.ts
@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import { expect, test } from '@playwright/test';
 
 // Test with lightmode
diff --git a/e2e/example.spec.ts b/e2e/example.spec.ts
index c511525..f1a3531 100644
--- a/e2e/example.spec.ts
+++ b/e2e/example.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
 test('has title', async ({ page }) => {
   await page.goto('https://playwright.dev/');
diff --git a/e2e/five.spec.ts b/e2e/five.spec.ts
index bcf7c45..44632ef 100644
--- a/e2e/five.spec.ts
+++ b/e2e/five.spec.ts
@@ -1,3 +1,4 @@
+/* eslint-disable sonarjs/no-duplicate-string */
 import { expect, test } from '@playwright/test';
 
 test('Five form should work correctly', async ({ page }) => {
diff --git a/e2e/tenShop.spec.ts b/e2e/tenShop.spec.ts
index 5040a1a..1ad1462 100644
--- a/e2e/tenShop.spec.ts
+++ b/e2e/tenShop.spec.ts
@@ -1,5 +1,6 @@
 // @ts-check
-import { expect, Page, test } from '@playwright/test';
+import type { Page} from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/ten');
diff --git a/src/App.tsx b/src/App.tsx
index 524c264..78e018b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
-import { CssBaseline, PaletteMode, ThemeProvider, useMediaQuery } from '@mui/material';
+import type { PaletteMode} from '@mui/material';
+import { CssBaseline, ThemeProvider, useMediaQuery } from '@mui/material';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { RouterProvider } from 'react-router-dom';
 import { router } from './routes';
diff --git a/src/components/1/One.tsx b/src/components/1/One.tsx
index eb79710..ed0da28 100644
--- a/src/components/1/One.tsx
+++ b/src/components/1/One.tsx
@@ -1,8 +1,8 @@
-import './tempstyle.css';
-
 import { Footer } from './Footer';
+
 import { Header } from './Header';
 import { MainContent } from './MainContent';
+import './tempstyle.css';
 
 export function One() {
   return (
diff --git a/src/components/10/CartSummary.tsx b/src/components/10/CartSummary.tsx
index 2f8f7ae..42edd1f 100644
--- a/src/components/10/CartSummary.tsx
+++ b/src/components/10/CartSummary.tsx
@@ -1,8 +1,8 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 import { useSelector } from 'react-redux';
 import { selectDistinctNumOfItems, selectTotalAmount, selectTotalItems } from '../redux/features/cart/cart.selectors';
 
-import { RootState } from '../redux/store';
+import type { RootState } from '../redux/store';
 
 const style: Record<string, CSSProperties> = {
   component: {
diff --git a/src/components/10/Header.tsx b/src/components/10/Header.tsx
index 3ea4b0b..9504a1a 100644
--- a/src/components/10/Header.tsx
+++ b/src/components/10/Header.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 import { Link } from 'react-router-dom';
 import logo from './assets/redux.svg';
 import { ShoppingCartIcon } from './ShoppingCartIcon';
diff --git a/src/components/10/OrderSummary.tsx b/src/components/10/OrderSummary.tsx
index eb63727..4ea9404 100644
--- a/src/components/10/OrderSummary.tsx
+++ b/src/components/10/OrderSummary.tsx
@@ -1,8 +1,9 @@
-import { Box, Button, SxProps, Theme, Typography } from '@mui/material';
+import type { SxProps, Theme} from '@mui/material';
+import { Box, Button, Typography } from '@mui/material';
 import { useSelector } from 'react-redux';
 import { selectDistinctNumOfItems, selectTotalAmount } from '../redux/features/cart/cart.selectors';
 
-import { RootState } from '../redux/store';
+import type { RootState } from '../redux/store';
 
 const sx: Record<string, SxProps<Theme>> = {
   backdropClicker: {
@@ -49,7 +50,7 @@ type Props = {
 export function OrderSummary({ handleCloseSummary }: Props) {
   const { cart } = useSelector((state: RootState) => state.cartState);
 
-  const handleCompletion = () => alert(`Order completed, please pay ${selectTotalAmount(cart).toFixed(2)}€ now!`);
+  const handleCompletion = () => { alert(`Order completed, please pay ${selectTotalAmount(cart).toFixed(2)}€ now!`); };
 
   return (
     <Box sx={sx.component}>
diff --git a/src/components/10/Product.tsx b/src/components/10/Product.tsx
index c797273..c123891 100644
--- a/src/components/10/Product.tsx
+++ b/src/components/10/Product.tsx
@@ -1,9 +1,10 @@
-import { CSSProperties, ChangeEvent, useCallback, useState } from 'react';
+import type { ChangeEvent, CSSProperties} from 'react';
+import { useCallback, useState } from 'react';
 
 import { useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 import { addItem } from '../redux/features/cart/cart';
-import { RootState } from '../redux/store';
+import type { RootState } from '../redux/store';
 import { useDispatchActionCallback } from './ShoppingCart.utils';
 
 const style: Record<string, CSSProperties> = {
@@ -63,7 +64,7 @@ export function Product() {
     <div style={style.component}>
       <h1>{product.title}</h1>
 
-      <img alt={`${product.title}`} src={product.image} style={style.image} />
+      <img alt={product.title} src={product.image} style={style.image} />
 
       <p>{product.description}</p>
 
diff --git a/src/components/10/ProductError.tsx b/src/components/10/ProductError.tsx
index 2b0a3d9..426f31d 100644
--- a/src/components/10/ProductError.tsx
+++ b/src/components/10/ProductError.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 
 const style: Record<string, CSSProperties> = {
   text: {
diff --git a/src/components/10/ProductItem.tsx b/src/components/10/ProductItem.tsx
index c34c9a5..7957269 100644
--- a/src/components/10/ProductItem.tsx
+++ b/src/components/10/ProductItem.tsx
@@ -1,7 +1,7 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 import { Link } from 'react-router-dom';
 import { addItem } from '../redux/features/cart/cart';
-import { Product } from '../redux/features/cart/cart.types';
+import type { Product } from '../redux/features/cart/cart.types';
 import { useDispatchActionCallback } from './ShoppingCart.utils';
 
 const style: Record<string, CSSProperties> = {
@@ -49,7 +49,7 @@ export function ProductItem({ product }: Props) {
   return (
     <div style={style.component}>
       <Link style={style.link} to={`product/${product.productId}`}>
-        <img alt={`${product.title}`} src={product.image} style={style.image} />
+        <img alt={product.title} src={product.image} style={style.image} />
       </Link>
 
       <h2 style={style.title}>{product.title}</h2>
diff --git a/src/components/10/Purchase.tsx b/src/components/10/Purchase.tsx
index f409576..392e12d 100644
--- a/src/components/10/Purchase.tsx
+++ b/src/components/10/Purchase.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 
 const style: Record<string, CSSProperties> = {
   checkout: {
diff --git a/src/components/10/ShoppingCart.utils.ts b/src/components/10/ShoppingCart.utils.ts
index 56ae787..2f0bf48 100644
--- a/src/components/10/ShoppingCart.utils.ts
+++ b/src/components/10/ShoppingCart.utils.ts
@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { AnyAction } from '@reduxjs/toolkit';
+import type { AnyAction } from '@reduxjs/toolkit';
 import { useDispatch } from 'react-redux';
 
 export function useDispatchAction2<T>(action: (args: T) => AnyAction, args: T): () => void {
diff --git a/src/components/10/ShoppingCartIcon.tsx b/src/components/10/ShoppingCartIcon.tsx
index e5a2798..90fa336 100644
--- a/src/components/10/ShoppingCartIcon.tsx
+++ b/src/components/10/ShoppingCartIcon.tsx
@@ -1,8 +1,8 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { selectTotalItems } from '../redux/features/cart/cart.selectors';
-import { RootState } from '../redux/store';
+import type { RootState } from '../redux/store';
 import shoppingCart from './assets/shop.svg';
 
 const style: Record<string, CSSProperties> = {
diff --git a/src/components/10/ShoppingCartItem.tsx b/src/components/10/ShoppingCartItem.tsx
index 4814752..e5698a5 100644
--- a/src/components/10/ShoppingCartItem.tsx
+++ b/src/components/10/ShoppingCartItem.tsx
@@ -1,8 +1,8 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 import { Link } from 'react-router-dom';
 import { decreaseAmountBy, increaseAmountBy, removeItem } from '../redux/features/cart/cart';
 
-import { CartItem } from '../redux/features/cart/cart.types';
+import type { CartItem } from '../redux/features/cart/cart.types';
 import placeholderProduct from './assets/placeholderProduct.webp';
 import { useDispatchAction2 } from './ShoppingCart.utils';
 
@@ -82,7 +82,7 @@ export function ShoppingCartItem({ data: product }: Props) {
   return (
     <div style={style.component}>
       <Link to={`/ten/product/${product.productId}`}>
-        <img alt={`${product.title}`} src={product.image || placeholderProduct} style={style.image} />
+        <img alt={product.title} src={product.image ?? placeholderProduct} style={style.image} />
       </Link>
 
       <span style={style.title}>{product.title}</span>
diff --git a/src/components/10/TenCart.tsx b/src/components/10/TenCart.tsx
index 7a7554e..383e408 100644
--- a/src/components/10/TenCart.tsx
+++ b/src/components/10/TenCart.tsx
@@ -1,8 +1,9 @@
-import { CSSProperties, useCallback, useState } from 'react';
+import type { CSSProperties} from 'react';
+import { useCallback, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { emptyCart } from '../redux/features/cart/cart';
-import { RootState } from '../redux/store';
+import type { RootState } from '../redux/store';
 import { CartSummary } from './CartSummary';
 import { OrderSummary } from './OrderSummary';
 import { Purchase } from './Purchase';
diff --git a/src/components/10/TenShop.tsx b/src/components/10/TenShop.tsx
index da5dd7c..5de4afa 100644
--- a/src/components/10/TenShop.tsx
+++ b/src/components/10/TenShop.tsx
@@ -1,6 +1,6 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 import { useSelector } from 'react-redux';
-import { RootState } from '../redux/store';
+import type { RootState } from '../redux/store';
 import { ProductItem } from './ProductItem';
 
 const style: Record<string, CSSProperties> = {
diff --git a/src/components/11/Eleven.tsx b/src/components/11/Eleven.tsx
index d5e7ed6..f27a98a 100644
--- a/src/components/11/Eleven.tsx
+++ b/src/components/11/Eleven.tsx
@@ -4,7 +4,7 @@ export function Eleven() {
   return (
     <>
       <Typography variant="h2">This works! (More to come)</Typography>
-      <Button variant="contained" onClick={() => alert('hi')}>
+      <Button variant="contained" onClick={() => { alert('hi'); }}>
         Hello
       </Button>
     </>
diff --git a/src/components/12/CourseItem.tsx b/src/components/12/CourseItem.tsx
index 111169c..119e061 100644
--- a/src/components/12/CourseItem.tsx
+++ b/src/components/12/CourseItem.tsx
@@ -1,5 +1,5 @@
 import { ListItem, ListItemText, Typography } from '@mui/material';
-import { Course, Period } from './Twelve.types';
+import type { Course, Period } from './Twelve.types';
 import { formatNatoDate, getContrastColor, getCourseFromId } from './Twelve.utils';
 
 type Props = {
diff --git a/src/components/12/DataDisplay.tsx b/src/components/12/DataDisplay.tsx
index 67619db..b910fc9 100644
--- a/src/components/12/DataDisplay.tsx
+++ b/src/components/12/DataDisplay.tsx
@@ -3,16 +3,14 @@ import { Box, Fade } from '@mui/material';
 import { uniq } from 'lodash';
 import { Day } from './Day';
 import { Legend } from './Legend';
-import { Course, Data, Period } from './Twelve.types';
+import type { Course, Data, Period } from './Twelve.types';
 
 type Props = {
-  data: Data;
+  data?: Data;
   elementId: number;
 };
 
 export function DataDisplay({ data, elementId }: Props) {
-  const courses: Course[] = data?.elements ? data.elements : [];
-
   const periods = useMemo<Period[]>(() => {
     if (!data) {
       return [];
@@ -23,6 +21,8 @@ export function DataDisplay({ data, elementId }: Props) {
     return periods ?? [];
   }, [data, elementId]);
 
+  const courses: Course[] = data?.elements ? data.elements : [];
+
   const dates = useMemo(() => periods.flatMap((p) => p.date), [periods]);
   const sortedUniqDays = useMemo(() => uniq(dates.sort((a, b) => a - b)), [dates]);
 
diff --git a/src/components/12/Day.tsx b/src/components/12/Day.tsx
index f10631b..4c927c4 100644
--- a/src/components/12/Day.tsx
+++ b/src/components/12/Day.tsx
@@ -1,10 +1,10 @@
+import { useMemo } from 'react';
 import { Box, Divider, List, Typography } from '@mui/material';
 import moment from 'moment';
-import 'moment/dist/locale/de';
-import { useMemo } from 'react';
 import { CourseItem } from './CourseItem';
-import { Course, Period } from './Twelve.types';
+import type { Course, Period } from './Twelve.types';
 import { stringToColor } from './Twelve.utils';
+import 'moment/dist/locale/de';
 
 type Props = {
   courses: Course[];
@@ -64,15 +64,16 @@ export function Day({ courses, date, periods }: Props) {
         {dayOfWeek} {!isThisWeek && `(${formattedDate})`}
       </Typography>
 
-      {expandedSortedClasses && (
+      {expandedSortedClasses.length > 0 && (
         <List>
           {expandedSortedClasses.map((cls) =>
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- unknown api definition
             cls.elements[1] === undefined ? (
               // If not defined, print empty element
               <></>
             ) : (
               <Box key={cls.id + cls.lessonId}>
-                <CourseItem bgColor={colorMap.get(cls.elements[1].id)} classItem={cls} courses={courses} />
+                <CourseItem bgColor={colorMap.get(cls.elements[1].id) as string} classItem={cls} courses={courses} />
                 <Divider component="li" variant="fullWidth" />
               </Box>
             ),
diff --git a/src/components/12/DelayedSpinner.tsx b/src/components/12/DelayedSpinner.tsx
index fc7cc65..41b867d 100644
--- a/src/components/12/DelayedSpinner.tsx
+++ b/src/components/12/DelayedSpinner.tsx
@@ -6,7 +6,7 @@ type Props = {
   loading: boolean;
 };
 
-export function DelayedSpinner({ loading, delayMs }: Props) {
+export function DelayedSpinner({ delayMs, loading }: Props) {
   return (
     // Set fixed height for no movement when transitioning
     <Box sx={{ height: 2, m: 1 }}>
diff --git a/src/components/12/Legend.tsx b/src/components/12/Legend.tsx
index 21741e1..99a87e0 100644
--- a/src/components/12/Legend.tsx
+++ b/src/components/12/Legend.tsx
@@ -1,5 +1,5 @@
 import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography } from '@mui/material';
-import { Course } from './Twelve.types';
+import type { Course } from './Twelve.types';
 
 type Props = {
   courses: Course[];
diff --git a/src/components/12/TimeSelect.tsx b/src/components/12/TimeSelect.tsx
index fed78a9..d907552 100644
--- a/src/components/12/TimeSelect.tsx
+++ b/src/components/12/TimeSelect.tsx
@@ -1,10 +1,12 @@
 import { useCallback, useState } from 'react';
-import { Box, SxProps, Theme } from '@mui/material';
+import type { SxProps, Theme } from '@mui/material';
+import { Box } from '@mui/material';
 import TextField from '@mui/material/TextField';
 import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import moment, { Moment } from 'moment';
+import type { Moment } from 'moment';
+import moment from 'moment';
 import { WeekSkipper } from './WeekSkipper';
 
 const sx: Record<string, SxProps<Theme>> = {
@@ -24,7 +26,7 @@ export function TimeSelect({ dateChanged }: Props) {
   const handleDateChange = useCallback(
     (newValue: Moment | null) => {
       if (newValue !== null) {
-        console.log('TimeSelect new date:', moment(newValue).format('yyyy-MM-DD'));
+        // console.log('TimeSelect new date:', moment(newValue).format('yyyy-MM-DD'));
         setDate(newValue);
         dateChanged(moment(newValue).format('yyyy-MM-DD'));
       }
@@ -33,23 +35,37 @@ export function TimeSelect({ dateChanged }: Props) {
   );
 
   const handleAddWeeks = useCallback(
-    (numWeeks: number) => handleDateChange(moment(date).add(numWeeks, 'week')),
+    (numWeeks: number) => {
+      handleDateChange(moment(date).add(numWeeks, 'week'));
+    },
     [date, handleDateChange],
   );
 
   return (
     <Box sx={sx.root}>
       <LocalizationProvider dateAdapter={AdapterMoment}>
-        <WeekSkipper direction="back" onClick={() => handleAddWeeks(-1)} />
+        <WeekSkipper
+          direction="back"
+          onClick={() => {
+            handleAddWeeks(-1);
+          }}
+        />
 
         <DatePicker
           label="Wochenstart"
           renderInput={(params) => <TextField {...params} />}
           value={date}
-          onChange={(newValue) => handleDateChange(newValue)}
+          onChange={(newValue) => {
+            handleDateChange(newValue);
+          }}
         />
 
-        <WeekSkipper direction="forward" onClick={() => handleAddWeeks(1)} />
+        <WeekSkipper
+          direction="forward"
+          onClick={() => {
+            handleAddWeeks(1);
+          }}
+        />
       </LocalizationProvider>
     </Box>
   );
diff --git a/src/components/12/Twelve.api.ts b/src/components/12/Twelve.api.ts
index dc8e204..c293321 100644
--- a/src/components/12/Twelve.api.ts
+++ b/src/components/12/Twelve.api.ts
@@ -1,5 +1,5 @@
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
-import { Response } from './Twelve.types';
+import type { Response } from './Twelve.types';
 
 // locally e.g. http://localhost:3000/proxy/
 const proxyUrl = import.meta.env.VITE_PROXY_URL;
diff --git a/src/components/12/Twelve.tsx b/src/components/12/Twelve.tsx
index 635fae0..1c749fe 100644
--- a/src/components/12/Twelve.tsx
+++ b/src/components/12/Twelve.tsx
@@ -6,7 +6,7 @@ import { DataDisplay } from './DataDisplay';
 import { DelayedSpinner } from './DelayedSpinner';
 import { TimeSelect } from './TimeSelect';
 import { timeTableApi, useGetClassesQuery } from './Twelve.api';
-import { Data } from './Twelve.types';
+import type { Data } from './Twelve.types';
 
 export function Twelve() {
   // console.log('Twelve rendered');
@@ -16,7 +16,7 @@ export function Twelve() {
 
   const [date, setDate] = useState(moment().format('yyyy-MM-DD'));
 
-  const { data, error, isError, isLoading, isFetching } = useGetClassesQuery({
+  const { data, error, isError, isFetching, isLoading } = useGetClassesQuery({
     date,
     elementId,
     elementType: 1,
@@ -26,7 +26,7 @@ export function Twelve() {
   // console.log(JSON.stringify(data));
 
   const handleDateChanged = useCallback((newDate: string) => {
-    console.log('invalidate query timetable', newDate);
+    // console.log('invalidate query timetable', newDate);
     setDate(newDate);
     // queryClient.invalidateQueries({ queryKey: ['timetable'] });
     timeTableApi.util.invalidateTags(['classes']);
@@ -44,13 +44,17 @@ export function Twelve() {
         <Typography sx={{ m: 2 }} variant="h2">
           Stundenplan
         </Typography>
-        <TimeSelect dateChanged={(newDate) => handleDateChanged(newDate)} />
+        <TimeSelect
+          dateChanged={(newDate) => {
+            handleDateChanged(newDate);
+          }}
+        />
       </Box>
 
       <DelayedSpinner delayMs={500} loading={isFetching || isLoading} />
 
       {isError ? (
-        <Typography>{`An error has occurred: ${error.toString()}`}</Typography>
+        <Typography>{`An error has occurred: ${JSON.stringify(error)}`}</Typography>
       ) : (
         <DataDisplay data={myData} elementId={elementId} />
       )}
diff --git a/src/components/12/Twelve.types.ts b/src/components/12/Twelve.types.ts
index 15e181a..2abd7f1 100644
--- a/src/components/12/Twelve.types.ts
+++ b/src/components/12/Twelve.types.ts
@@ -1,4 +1,4 @@
-import { res } from './mockData';
+import type { res } from './mockData';
 
 export type Course = {
   alternatename: string;
diff --git a/src/components/12/Twelve.utils.test.ts b/src/components/12/Twelve.utils.test.ts
index ba50e53..443c97c 100644
--- a/src/components/12/Twelve.utils.test.ts
+++ b/src/components/12/Twelve.utils.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it, test } from 'vitest';
-import { Course } from './Twelve.types';
+import type { Course } from './Twelve.types';
 import { formatNatoDate, getContrastColor, getCourseFromId, padZero, stringToColor } from './Twelve.utils';
 
 describe('formatNatoDate', () => {
diff --git a/src/components/12/Twelve.utils.ts b/src/components/12/Twelve.utils.ts
index 86ca63f..69ad9dd 100644
--- a/src/components/12/Twelve.utils.ts
+++ b/src/components/12/Twelve.utils.ts
@@ -1,4 +1,4 @@
-import { Course } from './Twelve.types';
+import type { Course } from './Twelve.types';
 
 export function formatNatoDate(natoDate: number): string {
   const date = String(natoDate);
@@ -30,7 +30,7 @@ export function stringToColor(str: string) {
 export function getContrastColor(hexColor: string, bw?: boolean) {
   let hex = hexColor;
 
-  if (hex.indexOf('#') === 0) {
+  if (hex.startsWith('#')) {
     hex = hex.slice(1);
   }
 
@@ -63,7 +63,7 @@ export function getContrastColor(hexColor: string, bw?: boolean) {
 
 // Returns a string that is a specific length and contains a number (prefixed by zero to get the fixed length)
 export function padZero(str: string, length?: number): string {
-  const len = length || 2;
+  const len = length ?? 2;
   const zeros = new Array(len).join('0');
   return (zeros + str).slice(-len);
 }
diff --git a/src/components/12/mockData.ts b/src/components/12/mockData.ts
index c71a63e..fac8db4 100644
--- a/src/components/12/mockData.ts
+++ b/src/components/12/mockData.ts
@@ -1,3 +1,4 @@
+/* eslint-disable sonarjs/no-duplicate-string -- mock data only */
 export const res = {
   data: {
     result: {
diff --git a/src/components/2/Footer.consts.ts b/src/components/2/Footer.consts.ts
index 749061d..9a7c86e 100644
--- a/src/components/2/Footer.consts.ts
+++ b/src/components/2/Footer.consts.ts
@@ -3,7 +3,7 @@ import githubIcon from './assets/github.png';
 import instagramIcon from './assets/instagram.png';
 import linkedinIcon from './assets/linkedin.png';
 import twitterIcon from './assets/twitter.png';
-import { Icon } from './Footer.types';
+import type { Icon } from './Footer.types';
 
 export const icons: Icon[] = [
   { name: 'Twitter', src: twitterIcon },
diff --git a/src/components/2/Two.tsx b/src/components/2/Two.tsx
index 20e04ee..32c22af 100644
--- a/src/components/2/Two.tsx
+++ b/src/components/2/Two.tsx
@@ -1,8 +1,8 @@
-import './2.css';
-
 import { Content } from './content/Content';
+
 import { Footer } from './Footer';
 import { Info } from './info/Info';
+import './2.css';
 
 export function Two() {
   return (
diff --git a/src/components/3/Card.tsx b/src/components/3/Card.tsx
index bdd4274..13d2114 100644
--- a/src/components/3/Card.tsx
+++ b/src/components/3/Card.tsx
@@ -1,4 +1,4 @@
-import { CardType } from './Card.types';
+import type { CardType } from './Card.types';
 import { CardPrice } from './CardPrice';
 import { Rating } from './Rating';
 
diff --git a/src/components/3/Cards.tsx b/src/components/3/Cards.tsx
index 1f3c960..9b42e88 100644
--- a/src/components/3/Cards.tsx
+++ b/src/components/3/Cards.tsx
@@ -1,5 +1,5 @@
 import { Card } from './Card';
-import { CardType } from './Card.types';
+import type { CardType } from './Card.types';
 
 export function Cards(props: { data: CardType[] }) {
   return (
diff --git a/src/components/3/Hero.tsx b/src/components/3/Hero.tsx
index 3d3ce8d..0978a49 100644
--- a/src/components/3/Hero.tsx
+++ b/src/components/3/Hero.tsx
@@ -3,7 +3,7 @@ import hero from './assets/hero.png';
 export function Hero() {
   return (
     <section>
-      <img alt="Image Collection: Travel" className="hero" src={hero} />
+      <img alt="Collection: Travel" className="hero" src={hero} />
 
       <div className="headline-info">
         <h1>Online experiences</h1>
diff --git a/src/components/3/Rating.tsx b/src/components/3/Rating.tsx
index 6a4ee5a..bdef454 100644
--- a/src/components/3/Rating.tsx
+++ b/src/components/3/Rating.tsx
@@ -11,7 +11,7 @@ export function Rating({ country, reviews, value }: Props) {
     <div className="rating">
       <img alt="Star" src={star} />
 
-      {value && <span className="stars">{value?.toFixed(1)}</span>}
+      {value && <span className="stars">{value.toFixed(1)}</span>}
 
       <span className="reviews">{reviews ? ` (${reviews})` : 0}</span>
 
diff --git a/src/components/3/Three.consts.ts b/src/components/3/Three.consts.ts
index e1b363c..a1ead21 100644
--- a/src/components/3/Three.consts.ts
+++ b/src/components/3/Three.consts.ts
@@ -1,7 +1,7 @@
 import bike from './assets/bike.svg';
 import katy from './assets/katy.svg';
 import wedding from './assets/wedding.svg';
-import { CardType } from './Card.types';
+import type { CardType } from './Card.types';
 
 export const testdata: CardType[] = [
   {
diff --git a/src/components/3/Three.tsx b/src/components/3/Three.tsx
index 58f3dec..25cb4ea 100644
--- a/src/components/3/Three.tsx
+++ b/src/components/3/Three.tsx
@@ -1,9 +1,9 @@
-import './3.scss';
-
 import { Cards } from './Cards';
+
 import { Hero } from './Hero';
 import { Navbar } from './Navbar';
 import { testdata } from './Three.consts';
+import './3.scss';
 
 export function Three() {
   return (
diff --git a/src/components/4/Display.tsx b/src/components/4/Display.tsx
index 6fcfaa9..42b5cdc 100644
--- a/src/components/4/Display.tsx
+++ b/src/components/4/Display.tsx
@@ -1,5 +1,5 @@
-import { CSSProperties } from 'react';
-import { CurrentMeme } from './Four.types';
+import type { CSSProperties } from 'react';
+import type { CurrentMeme } from './Four.types';
 
 const style: Record<string, CSSProperties> = {
   text: {
@@ -7,15 +7,21 @@ const style: Record<string, CSSProperties> = {
   },
 };
 
-type Props = { data: CurrentMeme };
+type Props = { data?: CurrentMeme };
 
 export function Display({ data }: Props) {
+  if (!data) {
+    return null;
+  }
+
   return (
     <div className="display">
       <p className="toptext memetext" style={style.text}>
         {data.topText}
       </p>
-      {data?.meme && <img alt={data.meme.name} className="imageBox" src={data.meme.url} />}
+
+      {data.meme && <img alt={data.meme.name} className="imageBox" src={data.meme.url} />}
+
       <p className="bottomtext memetext" style={style.text}>
         {data.bottomText}
       </p>
diff --git a/src/components/4/Four.tsx b/src/components/4/Four.tsx
index fb07869..762da48 100644
--- a/src/components/4/Four.tsx
+++ b/src/components/4/Four.tsx
@@ -1,12 +1,12 @@
-import './4.scss';
-
 import { useCallback, useEffect, useState } from 'react';
 
 import { Header } from '../4/Header';
+
 import { apiData } from './api-data';
 import { Display } from './Display';
-import { CurrentMeme, Meme } from './Four.types';
+import type { CurrentMeme, Meme } from './Four.types';
 import { Interaction } from './Interaction';
+import './4.scss';
 
 export function Four() {
   const testdata = apiData.data.memes;
@@ -17,22 +17,24 @@ export function Four() {
     async function getMemes() {
       const res: unknown = await (await fetch('https://api.imgflip.com/get_memes')).json();
       if (res instanceof Error) {
-        console.warn(res?.message);
+        console.warn(res.message);
       }
       if (
         typeof res === 'object' &&
         res &&
         'data' in res &&
-        typeof res?.data === 'object' &&
-        res?.data &&
+        typeof res.data === 'object' &&
+        res.data &&
         'memes' in res.data &&
-        typeof res?.data?.memes === 'object' &&
-        res?.data?.memes
+        typeof res.data.memes === 'object' &&
+        res.data.memes
       ) {
-        setMemeData(res?.data.memes as Meme[]);
+        setMemeData(res.data.memes as Meme[]);
       }
     }
-    getMemes().catch((err) => console.warn(err));
+    getMemes().catch((err) => {
+      console.warn(err);
+    });
     setMemeData(testdata);
   }, [testdata]);
 
@@ -40,31 +42,29 @@ export function Four() {
   const currentMemeInit = { bottomText: 'bottom', meme: getRandomMeme(), topText: 'top' };
 
   const [currentMeme, setCurrentMeme] = useState<CurrentMeme>(currentMemeInit);
-  const displayNew = useCallback(
-    () =>
-      setCurrentMeme((prevCurrMeme) => ({
-        ...prevCurrMeme,
-        meme: getRandomMeme(),
-      })),
-    [getRandomMeme],
-  );
+  const displayNew = useCallback(() => {
+    setCurrentMeme((prevCurrMeme) => ({
+      ...prevCurrMeme,
+      meme: getRandomMeme(),
+    }));
+  }, [getRandomMeme]);
 
-  const setText = useCallback(
-    (fieldName: string, newText: string) =>
-      setCurrentMeme((prevCurrMeme) => ({
-        ...prevCurrMeme,
-        [fieldName]: newText,
-      })),
-    [],
-  );
+  const setText = useCallback((fieldName: string, newText: string) => {
+    setCurrentMeme((prevCurrMeme) => ({
+      ...prevCurrMeme,
+      [fieldName]: newText,
+    }));
+  }, []);
 
-  useEffect(() => displayNew(), [displayNew]);
+  useEffect(() => {
+    displayNew();
+  }, [displayNew]);
 
   return (
     <div>
       <Header />
       <Interaction data={currentMeme} getNewMeme={displayNew} setNewText={setText} />
-      {currentMeme && <Display data={currentMeme} />}
+      {currentMeme.meme && <Display data={currentMeme} />}
     </div>
   );
 }
diff --git a/src/components/4/Four.types.ts b/src/components/4/Four.types.ts
index 26cd41d..96b48a4 100644
--- a/src/components/4/Four.types.ts
+++ b/src/components/4/Four.types.ts
@@ -1,6 +1,6 @@
 export type CurrentMeme = {
   bottomText: string;
-  meme: Meme;
+  meme?: Meme;
   topText: string;
 };
 
diff --git a/src/components/4/Interaction.tsx b/src/components/4/Interaction.tsx
index d735ade..04893b3 100644
--- a/src/components/4/Interaction.tsx
+++ b/src/components/4/Interaction.tsx
@@ -1,5 +1,5 @@
-import { CSSProperties } from 'react';
-import { CurrentMeme } from './Four.types';
+import type { CSSProperties } from 'react';
+import type { CurrentMeme } from './Four.types';
 
 const style: Record<string, CSSProperties> = {
   input: {
@@ -24,7 +24,7 @@ export function Interaction({ data, getNewMeme, setNewText }: Props) {
           style={style.input}
           type="text"
           value={data.topText}
-          onChange={(e) => setNewText(e.target.name, e.target.value)}
+          onChange={(e) => { setNewText(e.target.name, e.target.value); }}
         />
         <input
           className="secondInput input"
@@ -33,7 +33,7 @@ export function Interaction({ data, getNewMeme, setNewText }: Props) {
           style={style.input}
           type="text"
           value={data.bottomText}
-          onChange={(e) => setNewText(e.target.name, e.target.value)}
+          onChange={(e) => { setNewText(e.target.name, e.target.value); }}
         />
       </div>
 
diff --git a/src/components/5/Five.tsx b/src/components/5/Five.tsx
index 61b368c..086fa72 100644
--- a/src/components/5/Five.tsx
+++ b/src/components/5/Five.tsx
@@ -1,8 +1,9 @@
-import './5.scss';
+import type { ChangeEvent, FormEvent } from 'react';
+import { useCallback, useState } from 'react';
 
-import { ChangeEvent, FormEvent, useCallback, useState } from 'react';
+import type { FormValues } from './Five.types';
 
-import { FormValues } from './Five.types';
+import './5.scss';
 
 export function Five() {
   const formDataInit = {
@@ -18,7 +19,7 @@ export function Five() {
 
   const handleFormInput = useCallback(
     (e: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement> | ChangeEvent<HTMLTextAreaElement>) => {
-      const { name, value, type } = e.target;
+      const { name, type, value } = e.target;
       const checked = (e.target as HTMLInputElement).checked;
       setFormData((prevFormData) => ({
         ...prevFormData,
@@ -30,7 +31,7 @@ export function Five() {
 
   const handleSubmit = (e: FormEvent) => {
     e.preventDefault();
-    console.log(formData);
+    // console.log(formData);
   };
 
   return (
diff --git a/src/components/6/LoginDialog.tsx b/src/components/6/LoginDialog.tsx
index 376e206..f9e4489 100644
--- a/src/components/6/LoginDialog.tsx
+++ b/src/components/6/LoginDialog.tsx
@@ -1,6 +1,7 @@
-import { ChangeEvent, CSSProperties, FormEvent, useState } from 'react';
+import type { ChangeEvent, CSSProperties, FormEvent } from 'react';
+import { useState } from 'react';
 
-import { FormValues } from './LoginDialog.types';
+import type { FormValues } from './LoginDialog.types';
 
 const style: Record<string, CSSProperties> = {
   component: {
@@ -34,7 +35,7 @@ export function LoginDialog() {
   });
 
   const handleFormInput = (e: ChangeEvent<HTMLInputElement>) => {
-    const { name, value, checked, type } = e.target;
+    const { checked, name, type, value } = e.target;
 
     setFormData((prevFormData) => ({
       ...prevFormData,
@@ -56,7 +57,9 @@ export function LoginDialog() {
       return;
     }
     // passwords match
+    // eslint-disable-next-line no-console -- poc
     console.log(formData);
+    // eslint-disable-next-line no-console -- poc
     formData.newsletter ? console.log('Thank you for signing up to our newsletter!') : '';
   };
 
diff --git a/src/components/7/Seven.tsx b/src/components/7/Seven.tsx
index fd40aa6..8661923 100644
--- a/src/components/7/Seven.tsx
+++ b/src/components/7/Seven.tsx
@@ -4,17 +4,25 @@ export function Seven() {
   const [apiData, setApiData] = useState({});
   const [count, setCount] = useState(1);
 
-  console.info('Seven rendered');
+  // console.info('Seven rendered');
 
-  const IncreaseCount = () => setCount((prevCount) => prevCount + 1);
+  const IncreaseCount = () => {
+    setCount((prevCount) => prevCount + 1);
+  };
 
   useEffect(() => {
-    console.info('Effect ran');
+    // console.info('Effect ran');
 
     fetch(`https://swapi.dev/api/people/${count}`)
       .then((res) => res.json())
-      .then((data) => setApiData(data))
-      .catch(() => console.warn('Mistakes ware made'));
+      .then((data) => {
+        if (data instanceof Array) {
+          setApiData(data);
+        }
+      })
+      .catch(() => {
+        console.warn('Mistakes ware made');
+      });
   }, [count]);
 
   return (
diff --git a/src/components/8/ActionButton.tsx b/src/components/8/ActionButton.tsx
index d82a3d1..45bf557 100644
--- a/src/components/8/ActionButton.tsx
+++ b/src/components/8/ActionButton.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 
 const style: Record<string, CSSProperties> = {
   button: {
diff --git a/src/components/8/Bin.tsx b/src/components/8/Bin.tsx
index 6d77771..db08280 100644
--- a/src/components/8/Bin.tsx
+++ b/src/components/8/Bin.tsx
@@ -1,7 +1,9 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 
 const style: Record<string, CSSProperties> = {
   button: {
+    background: 'none',
+    border: 'none',
     bottom: 0,
     cursor: 'pointer',
     display: 'inline-block',
@@ -23,10 +25,8 @@ export function Bin({ clearHistory, username = 'Anonymous' }: Props) {
   };
 
   return (
-    <div>
-      <span style={style.button} onClick={askUser}>
-        🗑️
-      </span>
-    </div>
+    <button style={style.button} onClick={askUser}>
+      🗑️
+    </button>
   );
 }
diff --git a/src/components/8/Dice.tsx b/src/components/8/Dice.tsx
index 7d15b0b..95deb6f 100644
--- a/src/components/8/Dice.tsx
+++ b/src/components/8/Dice.tsx
@@ -1,6 +1,7 @@
-import { CSSProperties, MouseEvent, useState } from 'react';
+import type { CSSProperties, MouseEvent } from 'react';
+import { useState } from 'react';
 
-import { DiceType } from './Dice.types';
+import type { DiceType } from './Dice.types';
 
 const style: Record<string, CSSProperties> = {
   dice: {
@@ -35,7 +36,9 @@ type Props = {
 export function Dice({ dice, toggleSelect }: Props) {
   const [hovered, setHovered] = useState(false);
 
-  const handleHover = (e: MouseEvent) => (e.type === 'mouseover' ? setHovered(true) : setHovered(false));
+  const handleHover = (e: Pick<MouseEvent, 'type'>) => {
+    e.type === 'mouseover' ? setHovered(true) : setHovered(false);
+  };
 
   return (
     <div>
@@ -46,6 +49,7 @@ export function Dice({ dice, toggleSelect }: Props) {
           boxShadow: hovered ? cssVars.boxShadowHovered : cssVars.boxShadowNotHovered,
         }}
         onClick={toggleSelect}
+        onFocus={handleHover}
         onMouseLeave={handleHover}
         onMouseOver={handleHover}
       >
diff --git a/src/components/8/Dices.tsx b/src/components/8/Dices.tsx
index dc483d5..210358e 100644
--- a/src/components/8/Dices.tsx
+++ b/src/components/8/Dices.tsx
@@ -1,6 +1,6 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 import { Dice } from './Dice';
-import { DiceType } from './Dice.types';
+import type { DiceType } from './Dice.types';
 
 const style: Record<string, CSSProperties> = {
   component: {
@@ -24,7 +24,7 @@ export function Dices({ dices, toggleSelect: handleToggleSelect }: Props) {
     <div style={style.component}>
       <div style={style.dices}>
         {dices.map((dice) => (
-          <Dice key={dice.id} dice={dice} toggleSelect={() => handleToggleSelect(dice.id, !dice.lockedIn)} />
+          <Dice key={dice.id} dice={dice} toggleSelect={() => { handleToggleSelect(dice.id, !dice.lockedIn); }} />
         ))}
       </div>
     </div>
diff --git a/src/components/8/Eight.tsx b/src/components/8/Eight.tsx
index 97d05cf..a06220b 100644
--- a/src/components/8/Eight.tsx
+++ b/src/components/8/Eight.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 import { TenziesGame } from './TenziesGame';
 
 const style: Record<string, CSSProperties> = {
diff --git a/src/components/8/HistoryElement.tsx b/src/components/8/HistoryElement.tsx
index 7a65162..2d4f842 100644
--- a/src/components/8/HistoryElement.tsx
+++ b/src/components/8/HistoryElement.tsx
@@ -1,4 +1,4 @@
-import { GameStats } from './TenziesGame.types';
+import type { GameStats } from './TenziesGame.types';
 
 type Props = {
   game: GameStats;
diff --git a/src/components/8/HistoryPane.tsx b/src/components/8/HistoryPane.tsx
index 8cdb88c..9920a3e 100644
--- a/src/components/8/HistoryPane.tsx
+++ b/src/components/8/HistoryPane.tsx
@@ -1,5 +1,5 @@
 import { HistoryElement } from './HistoryElement';
-import { GameStats } from './TenziesGame.types';
+import type { GameStats } from './TenziesGame.types';
 
 type Props = {
   data: GameStats[];
diff --git a/src/components/8/Indicator.tsx b/src/components/8/Indicator.tsx
index 55d835c..cd1d6a8 100644
--- a/src/components/8/Indicator.tsx
+++ b/src/components/8/Indicator.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 
 const style: Record<string, CSSProperties> = {
   component: {
@@ -20,11 +20,13 @@ type Props = {
   value?: number;
 };
 
-export function Indicator({ description, positionX, positionY, value, clicked }: Props) {
+export function Indicator({ clicked, description, positionX, positionY, value }: Props) {
   return (
-    <div
+    <button
       style={{
         ...style.component,
+        background: 'none',
+        border: 'none',
         cursor: clicked ? 'pointer' : 'select',
         [positionX]: 0,
         [positionY]: 0,
@@ -34,6 +36,6 @@ export function Indicator({ description, positionX, positionY, value, clicked }:
       {description}
       {description && value && ': '}
       {value && <span style={style.value}>{value}</span>}
-    </div>
+    </button>
   );
 }
diff --git a/src/components/8/Nickname.tsx b/src/components/8/Nickname.tsx
index 6f936fd..8a1d6d8 100644
--- a/src/components/8/Nickname.tsx
+++ b/src/components/8/Nickname.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 
 const style: Record<string, CSSProperties> = {
   input: {
@@ -29,7 +29,7 @@ export function Nickname({ changed: handleChange, value }: Props) {
         style={style.input}
         type="text"
         value={value}
-        onChange={(e) => handleChange(e.target.value)}
+        onChange={(e) => { handleChange(e.target.value); }}
       />
     </div>
   );
diff --git a/src/components/8/TenziesGame.consts.ts b/src/components/8/TenziesGame.consts.ts
index 16f8106..6d3caa4 100644
--- a/src/components/8/TenziesGame.consts.ts
+++ b/src/components/8/TenziesGame.consts.ts
@@ -1,4 +1,4 @@
-import { GameStats } from './TenziesGame.types';
+import type { GameStats } from './TenziesGame.types';
 
 export const gameSize = 10;
 export const startRound = 1;
diff --git a/src/components/8/TenziesGame.tsx b/src/components/8/TenziesGame.tsx
index 8e3b3fc..ea2ce41 100644
--- a/src/components/8/TenziesGame.tsx
+++ b/src/components/8/TenziesGame.tsx
@@ -1,14 +1,15 @@
-import { CSSProperties, useCallback, useEffect, useState } from 'react';
+import type { CSSProperties } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 import { ActionButton } from './ActionButton';
 import { Bin } from './Bin';
-import { DiceType } from './Dice.types';
+import type { DiceType } from './Dice.types';
 import { Dices } from './Dices';
 import { HistoryPane } from './HistoryPane';
 import { Indicator } from './Indicator';
 import { Nickname } from './Nickname';
 import { gameStartValue, startGameNumber, startRound } from './TenziesGame.consts';
-import { GameStats } from './TenziesGame.types';
+import type { GameStats } from './TenziesGame.types';
 import { generateInitialDices, getJsonFromLocalStorage, getRandomNumber } from './TenziesGame.utils';
 import { Timer } from './Timer';
 
@@ -32,7 +33,7 @@ export function TenziesGame() {
 
   // Get last value from localStore if available, otherwise take starting value
   const [currentGameStats, setCurrentGameStats] = useState<GameStats>(
-    getJsonFromLocalStorage('currentGame', gameStartValue),
+    getJsonFromLocalStorage<GameStats>('currentGame', gameStartValue),
   );
 
   // Get overall stats from localStorage when exists, otherwise start with empty array
@@ -106,7 +107,7 @@ export function TenziesGame() {
   }, []);
 
   const handleToggleSelect = useCallback(
-    (diceIndex: any, newVal: boolean) => {
+    (diceIndex: number, newVal: boolean) => {
       setDices((prevDices) =>
         prevDices.map((dice) => {
           if (dice.id === diceIndex) {
@@ -146,7 +147,7 @@ export function TenziesGame() {
         positionY={'top'}
         value={gameNumber}
       />
-      <Indicator description={'Round'} positionX={'right'} positionY={'top'} value={currentGameStats?.rounds} />
+      <Indicator description={'Round'} positionX={'right'} positionY={'top'} value={currentGameStats.rounds} />
 
       <h1 style={style.h1}>Tenzies</h1>
       <p>Roll until all dice are the same. Click each die to freeze it at its current value between rolls.</p>
@@ -156,14 +157,16 @@ export function TenziesGame() {
       <ActionButton finished={gameOver} reset={handleReset} roll={handleRoll} />
 
       <Nickname
-        changed={(newNickName) => handleCurrentGameStatsChange('nickname', newNickName)}
-        value={currentGameStats?.nickname}
+        changed={(newNickName) => {
+          handleCurrentGameStatsChange('nickname', newNickName);
+        }}
+        value={currentGameStats.nickname}
       />
 
-      {currentGameStats?.rounds > startRound && (
+      {currentGameStats.rounds > startRound && (
         <Timer gameNumber={gameNumber} gameOver={gameOver} publishTime={handleTimer} />
       )}
-      <Bin clearHistory={handleClearHistory} username={currentGameStats?.nickname} />
+      <Bin clearHistory={handleClearHistory} username={currentGameStats.nickname} />
 
       {showHistory && <HistoryPane data={gameStats} size={3} />}
     </div>
diff --git a/src/components/8/TenziesGame.utils.ts b/src/components/8/TenziesGame.utils.ts
index 9eeea96..0371727 100644
--- a/src/components/8/TenziesGame.utils.ts
+++ b/src/components/8/TenziesGame.utils.ts
@@ -1,4 +1,4 @@
-import { DiceType } from './Dice.types';
+import type { DiceType } from './Dice.types';
 import { gameSize } from './TenziesGame.consts';
 
 export const generateInitialDices = (): DiceType[] => {
@@ -11,17 +11,18 @@ export const generateInitialDices = (): DiceType[] => {
 
 export const getRandomNumber = (): number => Math.ceil(Math.random() * 6);
 
-export const getJsonFromLocalStorage = (item: string, defaultData: any) => {
+export function getJsonFromLocalStorage<T>(item: string, defaultData: T): T {
   try {
-    const storageItem = localStorage.getItem(item) as string;
-    const data = JSON.parse(storageItem);
+    const storageItem = localStorage.getItem(item);
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    const data = JSON.parse(storageItem ?? '');
 
     // Check if data is null or undefined
     if (!data) {
       return defaultData;
     }
 
-    return data;
+    return data as T;
   } catch (err) {
     if (typeof err === 'string') {
       console.warn(err);
@@ -31,4 +32,4 @@ export const getJsonFromLocalStorage = (item: string, defaultData: any) => {
   }
 
   return defaultData;
-};
+}
diff --git a/src/components/8/Timer.tsx b/src/components/8/Timer.tsx
index dd31857..d6128ff 100644
--- a/src/components/8/Timer.tsx
+++ b/src/components/8/Timer.tsx
@@ -1,4 +1,5 @@
-import { CSSProperties, useEffect, useState } from 'react';
+import type { CSSProperties} from 'react';
+import { useEffect, useState } from 'react';
 
 const style: Record<string, CSSProperties> = {
   component: {
@@ -21,16 +22,16 @@ export function Timer({ gameNumber, gameOver, publishTime }: Props) {
   const [timer, setTimer] = useState(0);
   const [startTime, setStartTime] = useState<number>(Date.now());
 
-  useEffect(() => setStartTime(Date.now()), [gameNumber]);
+  useEffect(() => { setStartTime(Date.now()); }, [gameNumber]);
 
-  useEffect(() => publishTime(timer), [publishTime, timer]);
+  useEffect(() => { publishTime(timer); }, [publishTime, timer]);
 
   useEffect(() => {
-    const interval = setInterval(() => setTimer(Math.ceil((Date.now() - startTime) / 1000) - 1), 1000);
+    const interval = setInterval(() => { setTimer(Math.ceil((Date.now() - startTime) / 1000) - 1); }, 1000);
     if (gameOver) {
       clearInterval(interval);
     }
-    return () => clearInterval(interval);
+    return () => { clearInterval(interval); };
   }, [startTime, gameOver, timer]);
 
   return (
diff --git a/src/components/9/Nine.tsx b/src/components/9/Nine.tsx
index 33d3e54..4dfb50b 100644
--- a/src/components/9/Nine.tsx
+++ b/src/components/9/Nine.tsx
@@ -1,11 +1,11 @@
-import { ChangeEvent } from 'react';
+import type { ChangeEvent } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { decrement, increment, incrementByAmount, reset, setAmount } from '../redux/features/counter/counter';
 
-import { RootState } from '../redux/store';
+import type { RootState } from '../redux/store';
 
 export function Nine() {
-  const { count, amount } = useSelector((state: RootState) => state.counterState);
+  const { amount, count } = useSelector((state: RootState) => state.counterState);
   const dispatch = useDispatch();
 
   const handleAmountChange = (e: ChangeEvent<HTMLInputElement>) => dispatch(setAmount(Number(e.target.value)));
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index 663eed7..adbb5bc 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 import { Link } from 'react-router-dom';
 import { router } from '../routes';
 
diff --git a/src/components/attractions/MainAttractions.tsx b/src/components/attractions/MainAttractions.tsx
index 8877d5b..221b3fa 100644
--- a/src/components/attractions/MainAttractions.tsx
+++ b/src/components/attractions/MainAttractions.tsx
@@ -1,5 +1,7 @@
-import { Badge, Card, CardContent, CardMedia, Theme, Typography } from '@mui/material';
-import { Container, SxProps } from '@mui/system';
+import type { Theme} from '@mui/material';
+import { Badge, Card, CardContent, CardMedia, Typography } from '@mui/material';
+import type { SxProps } from '@mui/system';
+import { Container } from '@mui/system';
 import Grid from '@mui/system/Unstable_Grid';
 import { Link } from 'react-router-dom';
 import { links } from './attractions.mockData';
diff --git a/src/components/attractions/attractions.mockData.ts b/src/components/attractions/attractions.mockData.ts
index 9e8f1ce..73dbc33 100644
--- a/src/components/attractions/attractions.mockData.ts
+++ b/src/components/attractions/attractions.mockData.ts
@@ -3,7 +3,7 @@ import learn from './assets/learn.jpg';
 import shop from './assets/shop.jpg';
 import tenzies from './assets/tenzies.jpg';
 
-import { LinkItem } from './attractions.types';
+import type { LinkItem } from './attractions.types';
 
 export const links: LinkItem[] = [
   { description: 'Fun game to play with your colleagues.', image: tenzies, name: 'Tenzies Game', to: '/eight' },
diff --git a/src/components/redux/features/cart/cart.middleware.ts b/src/components/redux/features/cart/cart.middleware.ts
index 55c42dc..4dcfd17 100644
--- a/src/components/redux/features/cart/cart.middleware.ts
+++ b/src/components/redux/features/cart/cart.middleware.ts
@@ -1,6 +1,6 @@
 import { createListenerMiddleware, isAnyOf } from '@reduxjs/toolkit';
 
-import { RootState } from './../../store';
+import type { RootState } from './../../store';
 import { addItem, decreaseAmountBy, increaseAmountBy, removeItem } from './cart';
 
 export const localStorageMiddleware = createListenerMiddleware();
diff --git a/src/components/redux/features/cart/cart.mockData.ts b/src/components/redux/features/cart/cart.mockData.ts
index 9454e8e..58c6e74 100644
--- a/src/components/redux/features/cart/cart.mockData.ts
+++ b/src/components/redux/features/cart/cart.mockData.ts
@@ -1,4 +1,4 @@
-import { CartItem, Product } from './cart.types';
+import type { CartItem, Product } from './cart.types';
 
 type MockData = {
   cart: CartItem[];
diff --git a/src/components/redux/features/cart/cart.selectors.ts b/src/components/redux/features/cart/cart.selectors.ts
index bae3409..1efa36d 100644
--- a/src/components/redux/features/cart/cart.selectors.ts
+++ b/src/components/redux/features/cart/cart.selectors.ts
@@ -1,5 +1,5 @@
 import memoize from 'lodash/memoize';
-import { CartItem } from './cart.types';
+import type { CartItem } from './cart.types';
 
 export const selectTotalAmount = memoize((cart: CartItem[]) =>
   cart.reduce((prevSum, cartItem) => prevSum + cartItem.price * cartItem.amount, 0),
diff --git a/src/components/redux/features/cart/cart.ts b/src/components/redux/features/cart/cart.ts
index 44f4149..364774b 100644
--- a/src/components/redux/features/cart/cart.ts
+++ b/src/components/redux/features/cart/cart.ts
@@ -1,7 +1,7 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { getJsonFromLocalStorage } from './../../../8/TenziesGame.utils';
 import { mockData } from './cart.mockData';
-import { CartItem, Product } from './cart.types';
+import type { CartItem, Product } from './cart.types';
 
 type State = {
   cart: CartItem[];
@@ -13,7 +13,7 @@ const initialState: State = {
   products: mockData.products,
 };
 
-export const cartSlice = createSlice({
+const cartSlice = createSlice({
   initialState: initialState,
   name: 'cart',
   reducers: {
@@ -26,7 +26,7 @@ export const cartSlice = createSlice({
         state.cart.push(newCartItem);
       } else {
         state.cart.map((item) =>
-          item.productId !== product.productId ? item : { ...item, amount: (item.amount = item.amount + amount) },
+          item.productId === product.productId ? { ...item, amount: (item.amount = item.amount + amount) } : item,
         );
       }
     },
diff --git a/src/main.tsx b/src/main.tsx
index 5632b45..019ad0c 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,13 +1,15 @@
-import './global.css';
-import './index.css';
-
+/* eslint-disable import/no-unused-modules */
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
+
+import { Provider } from 'react-redux';
 import { App } from './App';
 import { store } from './components/redux/store';
-import { Provider } from 'react-redux';
+import './global.css';
+import './index.css';
 
-createRoot(document.getElementById('root') as HTMLElement).render(
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- react starting point
+createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <Provider store={store}>
       <App />
diff --git a/src/routes.tsx b/src/routes.tsx
index 857fee0..ebc5356 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -1,12 +1,5 @@
 import { createBrowserRouter } from 'react-router-dom';
 import { One } from './components/1/One';
-import { Product } from './components/10/Product';
-import { ProductError } from './components/10/ProductError';
-import { Ten } from './components/10/Ten';
-import { TenCart } from './components/10/TenCart';
-import { TenShop } from './components/10/TenShop';
-import { Eleven } from './components/11/Eleven';
-import { Twelve } from './components/12/Twelve';
 import { Two } from './components/2/Two';
 import { Three } from './components/3/Three';
 import { Four } from './components/4/Four';
@@ -15,6 +8,13 @@ import { Six } from './components/6/Six';
 import { Seven } from './components/7/Seven';
 import { Eight } from './components/8/Eight';
 import { Nine } from './components/9/Nine';
+import { Product } from './components/10/Product';
+import { ProductError } from './components/10/ProductError';
+import { Ten } from './components/10/Ten';
+import { TenCart } from './components/10/TenCart';
+import { TenShop } from './components/10/TenShop';
+import { Eleven } from './components/11/Eleven';
+import { Twelve } from './components/12/Twelve';
 import { MainAttractions } from './components/attractions/MainAttractions';
 import { Navigation } from './components/Navigation';
 import { ErrorPage } from './ErrorPage';
diff --git a/src/theme.ts b/src/theme.ts
index 365af3f..462c8ac 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -1,5 +1,6 @@
-import { PaletteMode } from '@mui/material';
-import { createTheme, PaletteOptions } from '@mui/material/styles';
+import type { PaletteMode } from '@mui/material';
+import type { PaletteOptions } from '@mui/material/styles';
+import { createTheme } from '@mui/material/styles';
 
 export const getTheme = (mode: PaletteMode) => {
   const theme = createTheme({
@@ -12,7 +13,7 @@ export const getTheme = (mode: PaletteMode) => {
 };
 
 // Be careful when changing, css variables in index.css might differ
-export function getMuiPalette(mode: PaletteMode): PaletteOptions {
+function getMuiPalette(mode: PaletteMode): PaletteOptions {
   const dark = {
     background: {
       default: '#242424',