Merge pull request #198 from tomheaton/cleanup

website code cleanup
2024-06-17 16:15:54 -04:00
parent 1cf21ea61a e4191beb79
commit 55dbe7e0c4
35 changed files with 6997 additions and 24140 deletions
--- a/.editorconfig
+++ b/.editorconfig
@@ -0,0 +1,10 @@
+root = true
+
+[*.{js,jsx,ts,tsx,md,mdx,json,cjs,mjs,css}]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+max_line_length = 100
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -1,21 +1,18 @@
 module.exports = {
-  root: true,
-  env: { browser: true, es2020: true },
-  extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:react/jsx-runtime',
-    'plugin:react-hooks/recommended',
-  ],
-  ignorePatterns: ['build', '.eslintrc.cjs'],
-  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
-  settings: { react: { version: '18.2' } },
-  plugins: ['react-refresh'],
-  rules: {
-    'react/jsx-no-target-blank': 'off',
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
+    root: true,
+    env: { browser: true, es2020: true },
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:react/jsx-runtime",
+        "plugin:react-hooks/recommended",
    ],
-  },
-}
+    ignorePatterns: ["build", ".eslintrc.cjs"],
+    parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+    settings: { react: { version: "18.2" } },
+    plugins: ["react-refresh"],
+    rules: {
+        "react/jsx-no-target-blank": "off",
+        "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+    },
+};
--- a/.gitignore
+++ b/.gitignore
@@ -9,15 +9,22 @@
 /coverage

 # production
-/build
+/dist

-# misc
-.DS_Store
+# ENV
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local

+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# IDE
+.idea
+.vscode
+
+# macOS
+.DS_Store
--- a/.prettierignore
+++ b/.prettierignore
@@ -0,0 +1,7 @@
+# ignore these directories when formatting the repo
+Blogs
+CM20315
+CM20315_2023
+Notebooks
+PDFFigures
+Slides
--- a/.prettierrc.cjs
+++ b/.prettierrc.cjs
@@ -0,0 +1,14 @@
+/** @type {import("prettier").Config} */
+const prettierConfig = {
+    trailingComma: "all",
+    tabWidth: 4,
+    useTabs: false,
+    semi: true,
+    singleQuote: false,
+    bracketSpacing: true,
+    printWidth: 100,
+    endOfLine: "lf",
+    plugins: [require.resolve("prettier-plugin-organize-imports")],
+};
+
+module.exports = prettierConfig;
--- a/LICENSE.txt
+++ b/LICENSE.txt
--- a/README.md
+++ b/README.md
@@ -0,0 +1,34 @@
+# Understanding Deep Learning
+
+Understanding Deep Learning - Simon J.D. Prince
+
+## Website
+
+```shell
+# Install dependencies
+npm install
+
+# Run the website in development mode
+npm dev
+
+# Build the website
+npm build
+
+# Preview the built website
+npm preview
+
+# Format the code
+npm run format
+
+# Lint the code
+npm run lint
+
+# Clean the repository
+npm run clean
+
+# Prepare to deploy the website
+npm run predeploy
+
+# Deploy the website
+npm run deploy
+```
--- a/index.html
+++ b/index.html
@@ -1,19 +1,19 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Encode+Sans+Expanded:wght@400;700&display=swap"
-      rel="stylesheet"
-    />
-    <title>Understanding Deep Learning</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/index.jsx"></script>
-  </body>
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Encode+Sans+Expanded:wght@400;700&display=swap"
+            rel="stylesheet"
+        />
+        <title>Understanding Deep Learning</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/index.jsx"></script>
+    </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,33 +1,36 @@
 {
-  "name": "react-website-smooth-scroll",
-  "version": "0.1.0",
-  "private": true,
-  "homepage": "https://udlbook.github.io/udlbook",
-  "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.5.1",
-    "react": "^18.0.2",
-    "react-dom": "^18.0.2",
-    "react-icons": "^5.0.1",
-    "react-router-dom": "^6.0.2",
-    "react-scripts": "4.0.3",
-    "react-scroll": "^1.8.4",
-    "styled-components": "^5.3.3"
-  },
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview",
-    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
-    "predeploy": "npm run build",
-    "deploy": "gh-pages -d build"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-react-swc": "^3.5.0",
-    "gh-pages": "^6.1.1",
-    "eslint": "^8.57.0",
-    "eslint-plugin-react": "^7.34.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.6",
-    "vite": "^5.2.0"
-  }
+    "name": "udlbook-website",
+    "version": "0.1.0",
+    "private": true,
+    "homepage": "https://udlbook.github.io/udlbook",
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "preview": "vite preview",
+        "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+        "predeploy": "npm run build",
+        "deploy": "gh-pages -d dist",
+        "clean": "rm -rf node_modules dist",
+        "format": "prettier --write ."
+    },
+    "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.5.2",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-icons": "^5.2.1",
+        "react-router-dom": "^6.23.1",
+        "react-scroll": "^1.8.4",
+        "styled-components": "^6.1.11"
+    },
+    "devDependencies": {
+        "@vitejs/plugin-react-swc": "^3.5.0",
+        "eslint": "^8.57.0",
+        "eslint-plugin-react": "^7.34.2",
+        "eslint-plugin-react-hooks": "^4.6.2",
+        "eslint-plugin-react-refresh": "^0.4.7",
+        "gh-pages": "^6.1.1",
+        "prettier": "^3.3.1",
+        "prettier-plugin-organize-imports": "^3.2.4",
+        "vite": "^5.2.12"
+    }
 }
--- a/src/App.css
+++ b/src/App.css
@@ -1,6 +0,0 @@
-*{
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0 ;
-    font-family: 'Encode Sans Expanded', sans-serif;
-}
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,19 +1,12 @@
-import './App.css';
-import {BrowserRouter as Router, Routes, Route} from 'react-router-dom'
-import Home from './pages';
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import Home from "./pages";

-
-
-
-function App() {
-  return (
-    <Router>
-      <Routes>
-        <Route exact path="/udlbook/" element ={<Home/>} />      
-      </Routes>
-      
-    </Router>
-  );
+export default function App() {
+    return (
+        <Router>
+            <Routes>
+                <Route exact path="/udlbook/" element={<Home />} />
+            </Routes>
+        </Router>
+    );
 }
-
-export default App;
--- a/src/components/ButtonElement.jsx
+++ b/src/components/ButtonElement.jsx
@@ -1,14 +1,13 @@
-import styled from  'styled-components'
-import {Link} from 'react-scroll'
+import { Link } from "react-scroll";
+import styled from "styled-components";

-
-export const Button= styled(Link)` 
+export const Button = styled(Link)`
    border-radius: 50px;
-    background: ${({primary}) => (primary ? '#01BF71' : '#010606')};
+    background: ${({ primary }) => (primary ? "#01BF71" : "#010606")};
    white-space: nowrap;
-    padding: ${({big}) => (big? ' 14px 48px': '12px 30px')};
-    color: ${({dark}) => (dark ? '#010106': '#fff')};
-    font-size: $${({fontBig}) => (fontBig ? '20px' : '16px')};
+    padding: ${({ big }) => (big ? "14px 48px" : "12px 30px")};
+    color: ${({ dark }) => (dark ? "#010106" : "#fff")};
+    font-size: $ ${({ fontBig }) => (fontBig ? "20px" : "16px")};
    outline: none;
    border: none;
    cursor: pointer;
@@ -16,8 +15,9 @@ export const Button= styled(Link)`
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease-in-out;
+
    &:hover {
        transition: all 0.2s ease-in-out;
-        background: ${({primary}) => (primary ? '#fff' : '#01BF71')}
+        background: ${({ primary }) => (primary ? "#fff" : "#01BF71")};
    }
-`
+`;
--- a/src/components/Footer/FooterElements.jsx
+++ b/src/components/Footer/FooterElements.jsx
@@ -1,9 +1,9 @@
-import styled from 'styled-components'
-import {Link} from 'react-router-dom'
+import { Link } from "react-router-dom";
+import styled from "styled-components";

 export const FooterContainer = styled.footer`
    background-color: #101522;
-`
+`;

 export const FooterWrap = styled.div`
    padding: 48x 24px;
@@ -13,23 +13,24 @@ export const FooterWrap = styled.div`
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
-`
+`;

 export const FooterLinksContainer = styled.div`
    display: flex;
    justify-content: center;

-    @media screen and (max-width: 820px){
+    @media screen and (max-width: 820px) {
        padding-top: 32px;
    }
-`
+`;

 export const FooterLinksWrapper = styled.div`
    display: flex;
-    @media screen and (max-width: 820px){
+
+    @media screen and (max-width: 820px) {
        flex-direction: column;
    }
-`
+`;

 export const FooterLinkItems = styled.div`
    display: flex;
@@ -41,17 +42,17 @@ export const FooterLinkItems = styled.div`
    box-sizing: border-box;
    color: #fff;

-    @media screen and (max-width: 420px){
+    @media screen and (max-width: 420px) {
        margin: 0;
        padding: 10px;
        width: 100%;
    }
-`
+`;

 export const FooterLinkTitle = styled.h1`
    font-size: 14px;
-    margin-bottom: 16px ; 
-`
+    margin-bottom: 16px;
+`;

 export const FooterLink = styled(Link)`
    color: #ffffff;
@@ -59,28 +60,28 @@ export const FooterLink = styled(Link)`
    margin-bottom: 0.5rem;
    font-size: 14px;

-    &:hover{
+    &:hover {
        color: #01bf71;
        transition: 0.3s ease-in-out;
    }
-`
+`;

 export const SocialMedia = styled.section`
    max-width: 1000px;
    width: 100%;
-`
+`;

 export const SocialMediaWrap = styled.div`
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1100px;
-    margin: 20px auto 0 auto ; 
+    margin: 20px auto 0 auto;

-    @media screen and (max-width: 820px){
+    @media screen and (max-width: 820px) {
        flex-direction: column;
    }
-`
+`;

 export const SocialAttrWrap = styled.div`
    color: #fff;
@@ -88,12 +89,12 @@ export const SocialAttrWrap = styled.div`
    justify-content: center;
    align-items: center;
    max-width: 1100px;
-    margin: 10px auto 0 auto ; 
+    margin: 10px auto 0 auto;

-    @media screen and (max-width: 820px){
+    @media screen and (max-width: 820px) {
        flex-direction: column;
    }
-`
+`;

 export const SocialLogo = styled(Link)`
    color: #fff;
@@ -105,38 +106,39 @@ export const SocialLogo = styled(Link)`
    align-items: center;
    margin-bottom: 16px;
    font-weight: bold;
+
    @media screen and (max-width: 768px) {
        font-size: 20px;
    }
-`
+`;

 export const WebsiteRights = styled.small`
-    color: #fff ; 
-    margin-bottom: 8px ; 
-`
+    color: #fff;
+    margin-bottom: 8px;
+`;

 export const SocialIcons = styled.div`
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 60px;
-    margin-bottom: 8px ; 
-`
+    margin-bottom: 8px;
+`;

 export const SocialIconLink = styled.a`
    color: #fff;
    font-size: 24px;
-`
+`;

 export const FooterImgWrap = styled.div`
    max-width: 555px;
    height: 100%;
-`
+`;

 export const FooterImg = styled.img`
-  width: 100%;
-  margin-top: 0;
-  margin-right: 0;
-  margin-left: 10px;
-  padding-right: 0;
+    width: 100%;
+    margin-top: 0;
+    margin-right: 0;
+    margin-left: 10px;
+    padding-right: 0;
 `;
--- a/src/components/Footer/index.jsx
+++ b/src/components/Footer/index.jsx
@@ -1,14 +1,22 @@
-import React from 'react'
-import { FaLinkedin} from 'react-icons/fa'
-import { FooterContainer, FooterWrap, FooterImg } from './FooterElements'
-import { SocialMedia,  SocialMediaWrap, SocialIcons, SocialIconLink, WebsiteRights, SocialLogo } from './FooterElements'
-import { animateScroll as scroll } from 'react-scroll'
-import twitterImg from '../../images/square-x-twitter.svg'
+import { FaLinkedin } from "react-icons/fa";
+import { animateScroll as scroll } from "react-scroll";
+import twitterImg from "../../images/square-x-twitter.svg";
+import {
+    FooterContainer,
+    FooterImg,
+    FooterWrap,
+    SocialIconLink,
+    SocialIcons,
+    SocialLogo,
+    SocialMedia,
+    SocialMediaWrap,
+    WebsiteRights,
+} from "./FooterElements";

-const Footer = () => {
+export default function Footer() {
    const toggleHome = () => {
        scroll.scrollToTop();
-    }
+    };

    return (
        <>
@@ -16,19 +24,44 @@ const Footer = () => {
                <FooterWrap>
                    <SocialMedia>
                        <SocialMediaWrap>
-                            <SocialLogo to='/udlbook/' onClick={toggleHome}>
+                            <SocialLogo to="/udlbook/" onClick={toggleHome}>
                                Understanding Deep Learning
                            </SocialLogo>
-                            <WebsiteRights>©{new Date().getFullYear()} Simon J.D. Prince</WebsiteRights>
                            <WebsiteRights>
-                            Images by StorySet on FreePik: <a href="https://www.freepik.com/free-vector/hand-coding-concept-illustration_21864184.htm#query=coding&position=17&from_view=search&track=sph&uuid=5896d847-38e4-4cb9-8fe1-103041c7c933"> [1] </a> <a href="https://www.freepik.com/free-vector/mathematics-concept-illustration_10733824.htm#query=professor&position=13&from_view=search&track=sph&uuid=5b1a188a-64c5-45af-aae2-8573bc1bed3c">[2]</a> <a href="https://www.freepik.com/free-vector/content-concept-illustration_7171429.htm#query=media&position=3&from_view=search&track=sph&uuid=c7e35cf2-d85d-4bba-91a6-1cd883dcf153"> [3]</a>  <a href="https://www.freepik.com/free-vector/library-concept-illustration_9148008.htm#query=library&position=40&from_view=search&track=sph&uuid=abecc792-b6b2-4ec0-b318-5e6cc73ba649"> [4]</a> 
+                                ©{new Date().getFullYear()} Simon J.D. Prince
+                            </WebsiteRights>
+                            <WebsiteRights>
+                                Images by StorySet on FreePik:{" "}
+                                <a href="https://www.freepik.com/free-vector/hand-coding-concept-illustration_21864184.htm#query=coding&position=17&from_view=search&track=sph&uuid=5896d847-38e4-4cb9-8fe1-103041c7c933">
+                                    {" "}
+                                    [1]{" "}
+                                </a>{" "}
+                                <a href="https://www.freepik.com/free-vector/mathematics-concept-illustration_10733824.htm#query=professor&position=13&from_view=search&track=sph&uuid=5b1a188a-64c5-45af-aae2-8573bc1bed3c">
+                                    [2]
+                                </a>{" "}
+                                <a href="https://www.freepik.com/free-vector/content-concept-illustration_7171429.htm#query=media&position=3&from_view=search&track=sph&uuid=c7e35cf2-d85d-4bba-91a6-1cd883dcf153">
+                                    {" "}
+                                    [3]
+                                </a>{" "}
+                                <a href="https://www.freepik.com/free-vector/library-concept-illustration_9148008.htm#query=library&position=40&from_view=search&track=sph&uuid=abecc792-b6b2-4ec0-b318-5e6cc73ba649">
+                                    {" "}
+                                    [4]
+                                </a>
                            </WebsiteRights>
                            <SocialIcons>
-                                <SocialIconLink href="https://twitter.com/SimonPrinceAI" target="_blank" aria-label="Twitter">
-                                    <FooterImg src={twitterImg} alt="twitter"/>
+                                <SocialIconLink
+                                    href="https://twitter.com/SimonPrinceAI"
+                                    target="_blank"
+                                    aria-label="Twitter"
+                                >
+                                    <FooterImg src={twitterImg} alt="twitter" />
                                </SocialIconLink>
-                                <SocialIconLink href="https://www.linkedin.com/in/simon-prince-615bb9165/" target="_blank" aria-label="LinkedIn">
-                                    <FaLinkedin/>
+                                <SocialIconLink
+                                    href="https://www.linkedin.com/in/simon-prince-615bb9165/"
+                                    target="_blank"
+                                    aria-label="LinkedIn"
+                                >
+                                    <FaLinkedin />
                                </SocialIconLink>
                            </SocialIcons>
                        </SocialMediaWrap>
@@ -36,7 +69,5 @@ const Footer = () => {
                </FooterWrap>
            </FooterContainer>
        </>
-    )
+    );
 }
-
-export default Footer
--- a/src/components/HeroSection/HeroElements.jsx
+++ b/src/components/HeroSection/HeroElements.jsx
@@ -8,22 +8,20 @@ export const HeroContainer = styled.div`
    padding: 0 0px;
    position: static;
    z-index: 1;
-    }
-`
-
-
+`;

 export const HeroContent = styled.div`
    z-index: 3;
-    width: 100% ; 
+    width: 100%;
    max-width: 1100px;
    position: static;
    padding: 8px 24px;
    margin: 80px 0px;
    display: flex;
    flex-direction: column;
-    align-items: center ; 
-`
+    align-items: center;
+`;
+
 export const HeroH1 = styled.h1`
    color: #fff;
    font-size: 48px;
@@ -36,16 +34,14 @@ export const HeroH1 = styled.h1`
    @media screen and (max-width: 480px) {
        font-size: 32px;
    }
-
-`
+`;

 export const HeroP = styled.p`
    margin-top: 24px;
    color: #fff;
-    font-size: 24px ; 
-    text-align: center ; 
-    max-width: 600px ; 
-
+    font-size: 24px;
+    text-align: center;
+    max-width: 600px;

    @media screen and (max-width: 768px) {
        font-size: 24px;
@@ -54,15 +50,14 @@ export const HeroP = styled.p`
    @media screen and (max-width: 480px) {
        font-size: 18px;
    }
-`
+`;

 export const HeroBtnWrapper = styled.div`
-    margin-top: 32px ; 
+    margin-top: 32px;
    display: flex;
-    flex-direction: column ; 
-    align-items: center ; 
-`
-
+    flex-direction: column;
+    align-items: center;
+`;

 export const HeroRow = styled.div`
    display: grid;
@@ -73,29 +68,30 @@ export const HeroRow = styled.div`
    @media screen and (max-width: 768px){
        grid-template-areas: 'col2' 'col1';
    }
-`
-
+`;

 export const HeroNewsItem = styled.div`
    margin-left: 4px;
    color: #000000;
    font-size: 16px;
-    // line-height: 16px;
+    /* line-height: 16px; */
    margin-bottom: 16px;
    display: flex;
    justify-content: start;
+`;

-`
 export const HeroNewsItemDate = styled.div`
    width: 20%;
-    margin-right: 20px ; 
+    margin-right: 20px;
+
    @media screen and (max-width: 768px) {
        font-size: 12px;
    }
+
    @media screen and (max-width: 480px) {
        font-size: 12px;
    }
-`
+`;

 export const HeroNewsItemContent = styled.div`
    width: 80%;
@@ -108,9 +104,7 @@ export const HeroNewsItemContent = styled.div`
    @media screen and (max-width: 480px) {
        font-size: 12px;
    }
-`
-
-
+`;

 export const HeroColumn1 = styled.div`
    margin-bottom: 15px;
@@ -119,38 +113,38 @@ export const HeroColumn1 = styled.div`
    padding: 10px 15px;
    padding: 0 15px;
    grid-area: col1;
-    align-items:left;
+    align-items: left;
    display: flex;
-    flex-direction:column;
+    flex-direction: column;
    justify-content: space-between;
-`
-
+`;

 export const HeroColumn2 = styled.div`
    margin-bottom: 15px;
    padding: 0 15px;
    grid-area: col2;
    display: flex;
-    align-items:center;
-    flex-direction:column;
-`
+    align-items: center;
+    flex-direction: column;
+`;

 export const TextWrapper = styled.div`
-    max-width: 540px ; 
+    max-width: 540px;
    padding-top: 0;
    padding-bottom: 0;
-`
+`;
+
 export const HeroImgWrap = styled.div`
    max-width: 555px;
    height: 100%;
-`
+`;

 export const Img = styled.img`
-  width: 100%;
-  margin-top: 0;
-  margin-right: 0;
-  margin-left: 10px;
-  padding-right: 0;
+    width: 100%;
+    margin-top: 0;
+    margin-right: 0;
+    margin-left: 10px;
+    padding-right: 0;
 `;

 export const HeroDownloadsImg = styled.img`
@@ -159,63 +153,37 @@ export const HeroDownloadsImg = styled.img`
    margin-left: 0;
    padding-right: 0;
    margin-bottom: 10px;
-`
-
-export const HeroLink = styled.a`
-  color: #fff;
-  text-decoration: none;
-  padding: 0.6rem 0rem 0rem 0rem;
-  cursor: pointer;
-  position:relative ; 
-
-  &:before{
-    position: absolute;
-    margin: 0 auto;
-    top: 100%;
-    left: 0;
-    width: 100%;
-    height: 2px;
-    background-color: #fff;
-    content: '';
-    opacity: .3;
-    -webkit-transform: scaleX(1);
-    transition-property: opacity, -webkit-transform;
-    transition-duration: .3s;
-}
-
-    &:hover:before {
-    opacity: 1;
-    -webkit-transform: scaleX(1.05);
-  }
 `;

-//   color: #fff;
-//   text-decoration: none;
-//   padding: 0.1rem 0rem;
-//   height: 100%;
-//   cursor: pointer;
-//   position:relative ; 
+export const HeroLink = styled.a`
+    color: #fff;
+    text-decoration: none;
+    padding: 0.6rem 0rem 0rem 0rem;
+    cursor: pointer;
+    position: relative;

-//   &:before{
-//     position: absolute;
-//     margin: 0 auto;
-//     top: 100%;
-//     left: 0;
-//     width: 100%;
-//     height: 2px;
-//     background-color: #000;
-//     content: '';
-//     opacity: .3;
-//     -webkit-transform: scaleX(1);
-//     transition-property: opacity, -webkit-transform;
-//     transition-duration: .3s;
-// }
+    &:before {
+        position: absolute;
+        margin: 0 auto;
+        top: 100%;
+        left: 0;
+        width: 100%;
+        height: 2px;
+        background-color: #fff;
+        content: "";
+        opacity: 0.3;
+        -webkit-transform: scaleX(1);
+        transition-property:
+            opacity,
+            -webkit-transform;
+        transition-duration: 0.3s;
+    }

-//     &:hover:before {
-//     opacity: 1;
-//     -webkit-transform: scaleX(1.05);
-//   }
-// `;
+    &:hover:before {
+        opacity: 1;
+        -webkit-transform: scaleX(1.05);
+    }
+`;

 export const UDLLink = styled.a`
    text-decoration: none;
@@ -224,7 +192,7 @@ export const UDLLink = styled.a`
    margin: 0 2px;
    position: relative;

-    &:before{
+    &:before {
        position: absolute;
        margin: 0 auto;
        top: 100%;
@@ -232,21 +200,20 @@ export const UDLLink = styled.a`
        width: 100%;
        height: 2px;
        background-color: #000;
-        content: '';
-        opacity: .3;
+        content: "";
+        opacity: 0.3;
        -webkit-transform: scaleX(1);
-        transition-property: opacity, -webkit-transform;
-        transition-duration: .3s;
+        transition-property:
+            opacity,
+            -webkit-transform;
+        transition-duration: 0.3s;
    }

    &:hover:before {
        opacity: 1;
        -webkit-transform: scaleX(1.05);
-      }
-`
-
-
-
+    }
+`;

 export const HeroNewsTitle = styled.div`
    margin-left: 0px;
@@ -263,7 +230,7 @@ export const HeroNewsTitle = styled.div`
    @media screen and (max-width: 480px) {
        font-size: 18px;
    }
-`
+`;

 export const HeroCitationTitle = styled.div`
    margin-left: 0px;
@@ -272,7 +239,7 @@ export const HeroCitationTitle = styled.div`
    font-weight: bold;
    line-height: 16px;
    margin-bottom: 10px;
-    margin-top:36px;
+    margin-top: 36px;

    @media screen and (max-width: 768px) {
        font-size: 24px;
@@ -281,24 +248,18 @@ export const HeroCitationTitle = styled.div`
    @media screen and (max-width: 480px) {
        font-size: 18px;
    }
-`
+`;

+export const HeroNewsBlock = styled.div``;

-export const HeroNewsBlock = styled.div`
-
-`
 export const HeroCitationBlock = styled.div`
    font-size: 14px;
    margin-bottom: 0px;
    margin-top: 0px;
-
-`
-
-
-
+`;

 export const HeroFollowBlock = styled.div`
-@media screen and (max-width: 768px) {
-    font-size: 14px;
-}
-`
+    @media screen and (max-width: 768px) {
+        font-size: 14px;
+    }
+`;
--- a/src/components/HeroSection/index.jsx
+++ b/src/components/HeroSection/index.jsx
@@ -1,18 +1,35 @@
-import React from 'react'
-import { HeroContainer, HeroNewsBlock, HeroCitationBlock, HeroCitationTitle, HeroFollowBlock, HeroDownloadsImg, HeroLink, HeroRow, HeroColumn1, HeroColumn2, HeroContent, Img, HeroImgWrap, HeroNewsTitle, HeroNewsItem, HeroNewsItemDate, HeroNewsItemContent, UDLLink} from './HeroElements'
-import img from '../../images/F23.prince.learning.turquoise.jpg'
-
-const HeroSection = () => {
-
+import img from "../../images/F23.prince.learning.turquoise.jpg";
+import {
+    HeroCitationBlock,
+    HeroCitationTitle,
+    HeroColumn1,
+    HeroColumn2,
+    HeroContainer,
+    HeroContent,
+    HeroDownloadsImg,
+    HeroFollowBlock,
+    HeroImgWrap,
+    HeroLink,
+    HeroNewsBlock,
+    HeroNewsItem,
+    HeroNewsItemContent,
+    HeroNewsItemDate,
+    HeroNewsTitle,
+    HeroRow,
+    Img,
+    UDLLink,
+} from "./HeroElements";

+export default function HeroSection() {
    const citation = `
-@book{prince2023understanding,
-    author = "Simon J.D. Prince",
-    title = "Understanding Deep Learning",
-    publisher = "The MIT Press",
-    year = 2023,
-    url = "http://udlbook.com"}
-    `
+    @book{prince2023understanding,
+        author = "Simon J.D. Prince",
+        title = "Understanding Deep Learning",
+        publisher = "The MIT Press",
+        year = 2023,
+        url = "http://udlbook.com"
+    }
+    `;

    return (
        <HeroContainer id="home">
@@ -21,84 +38,166 @@ const HeroSection = () => {
                    <HeroColumn1>
                        <HeroNewsBlock>
                            <HeroNewsTitle>RECENT NEWS:</HeroNewsTitle>
-
                            <HeroNewsItem>
                                <HeroNewsItemDate>05/22/24</HeroNewsItemDate>
-                                <HeroNewsItemContent> New <UDLLink href="https://www.borealisai.com/research-blogs/neural-tangent-kernel-applications/"> blog  </UDLLink> about the applications of the neural tangent kernel.</HeroNewsItemContent>
+                                <HeroNewsItemContent>
+                                    {" "}
+                                    New{" "}
+                                    <UDLLink href="https://www.borealisai.com/research-blogs/neural-tangent-kernel-applications/">
+                                        {" "}
+                                        blog{" "}
+                                    </UDLLink>{" "}
+                                    about the applications of the neural tangent kernel.
+                                </HeroNewsItemContent>
                            </HeroNewsItem>

                            <HeroNewsItem>
                                <HeroNewsItemDate>05/10/24</HeroNewsItemDate>
-                                <HeroNewsItemContent> Positive <UDLLink href="https://github.com/udlbook/udlbook/blob/main/public/NMI_Review.pdf">review</UDLLink> in Nature Machine Intelligence.</HeroNewsItemContent>
+                                <HeroNewsItemContent>
+                                    {" "}
+                                    Positive{" "}
+                                    <UDLLink href="https://github.com/udlbook/udlbook/blob/main/public/NMI_Review.pdf">
+                                        review
+                                    </UDLLink>{" "}
+                                    in Nature Machine Intelligence.
+                                </HeroNewsItemContent>
                            </HeroNewsItem>

                            {/* <HeroNewsItem>
                                <HeroNewsItemDate>03/12/24</HeroNewsItemDate>
+                                <HeroNewsItemContent>
+                                    {" "}
+                                    Book now available again.
+                                </HeroNewsItemContent>
+                            </HeroNewsItem>
+                            <HeroNewsItem>
+                                <HeroNewsItemDate>02/21/24</HeroNewsItemDate>
+                                <HeroNewsItemContent>
+                                    New blog about the{" "}
+                                    <UDLLink href="https://www.borealisai.com/research-blogs/the-neural-tangent-kernel/">
+                                        Neural Tangent Kernel.
+                                    </UDLLink>
+                                </HeroNewsItemContent>
                                <HeroNewsItemContent> Book now available again.</HeroNewsItemContent>
                            </HeroNewsItem> */}

                            <HeroNewsItem>
                                <HeroNewsItemDate>02/21/24</HeroNewsItemDate>
-                                <HeroNewsItemContent>New blog about the <UDLLink href="https://www.borealisai.com/research-blogs/the-neural-tangent-kernel/">Neural Tangent Kernel</UDLLink>.</HeroNewsItemContent>
+                                <HeroNewsItemContent>
+                                    New blog about the{" "}
+                                    <UDLLink href="https://www.borealisai.com/research-blogs/the-neural-tangent-kernel/">
+                                        Neural Tangent Kernel
+                                    </UDLLink>
+                                    .
+                                </HeroNewsItemContent>
                            </HeroNewsItem>
                            {/* <HeroNewsItem>
                                <HeroNewsItemDate>02/15/24</HeroNewsItemDate>
+                                <HeroNewsItemContent>
+                                    {" "}
+                                    First printing of book has sold out in most places. Second
+                                    printing available mid-March.
+                                </HeroNewsItemContent>
+                            </HeroNewsItem>
                                <HeroNewsItemContent> First printing of book has sold out in most places. Second printing available mid-March.</HeroNewsItemContent>
                            </HeroNewsItem> */}

-
                            <HeroNewsItem>
                                <HeroNewsItemDate>01/29/24</HeroNewsItemDate>
-                                <HeroNewsItemContent> New blog about <UDLLink href="https://www.borealisai.com/research-blogs/gradient-flow/"> gradient flow </UDLLink> published.</HeroNewsItemContent>
+                                <HeroNewsItemContent>
+                                    {" "}
+                                    New blog about{" "}
+                                    <UDLLink href="https://www.borealisai.com/research-blogs/gradient-flow/">
+                                        {" "}
+                                        gradient flow{" "}
+                                    </UDLLink>{" "}
+                                    published.
+                                </HeroNewsItemContent>
                            </HeroNewsItem>
-
                            <HeroNewsItem>
                                <HeroNewsItemDate>12/26/23</HeroNewsItemDate>
-                                <HeroNewsItemContent> Machine Learning Street Talk  <UDLLink href="https://www.youtube.com/watch?v=sJXn4Cl4oww"> podcast </UDLLink>  discussing book.</HeroNewsItemContent>
+                                <HeroNewsItemContent>
+                                    {" "}
+                                    Machine Learning Street Talk{" "}
+                                    <UDLLink href="https://www.youtube.com/watch?v=sJXn4Cl4oww">
+                                        {" "}
+                                        podcast{" "}
+                                    </UDLLink>{" "}
+                                    discussing book.
+                                </HeroNewsItemContent>
                            </HeroNewsItem>
-
                            <HeroNewsItem>
                                <HeroNewsItemDate>12/19/23</HeroNewsItemDate>
-                                <HeroNewsItemContent>Deeper Insights <UDLLink href="https://podcasts.apple.com/us/podcast/understanding-deep-learning-with-simon-prince/id1669436318?i=1000638269385">podcast</UDLLink> discussing book.</HeroNewsItemContent>
+                                <HeroNewsItemContent>
+                                    Deeper Insights{" "}
+                                    <UDLLink href="https://podcasts.apple.com/us/podcast/understanding-deep-learning-with-simon-prince/id1669436318?i=1000638269385">
+                                        podcast
+                                    </UDLLink>{" "}
+                                    discussing book.
+                                </HeroNewsItemContent>
                            </HeroNewsItem>
-
                            <HeroNewsItem>
                                <HeroNewsItemDate>12/06/23</HeroNewsItemDate>
-                                <HeroNewsItemContent> <UDLLink href="https://www.borealisai.com/news/understanding-deep-learning/">Interview</UDLLink>  with Borealis AI.</HeroNewsItemContent>
+                                <HeroNewsItemContent>
+                                    {" "}
+                                    <UDLLink href="https://www.borealisai.com/news/understanding-deep-learning/">
+                                        Interview
+                                    </UDLLink>{" "}
+                                    with Borealis AI.
+                                </HeroNewsItemContent>
                            </HeroNewsItem>
-
                            <HeroNewsItem>
                                <HeroNewsItemDate>12/05/23</HeroNewsItemDate>
-                                <HeroNewsItemContent> Book released by <UDLLink href="https://mitpress.mit.edu/9780262048644/understanding-deep-learning/">The MIT Press</UDLLink>.</HeroNewsItemContent>
+                                <HeroNewsItemContent>
+                                    {" "}
+                                    Book released by{" "}
+                                    <UDLLink href="https://mitpress.mit.edu/9780262048644/understanding-deep-learning/">
+                                        The MIT Press
+                                    </UDLLink>
+                                    .
+                                </HeroNewsItemContent>
                            </HeroNewsItem>
                        </HeroNewsBlock>
                        <HeroCitationTitle>CITATION:</HeroCitationTitle>
                        <HeroCitationBlock>
                            <pre>
                                <code>
-                                    <React.Fragment>{citation}</React.Fragment>
+                                    <>{citation}</>
                                </code>
                            </pre>
                        </HeroCitationBlock>
                        <HeroFollowBlock>
-                            Follow me on <UDLLink href="https://twitter.com/SimonPrinceAI">Twitter</UDLLink> or <UDLLink
-                            href="https://www.linkedin.com/in/simon-prince-615bb9165/">LinkedIn</UDLLink> for updates.
+                            Follow me on{" "}
+                            <UDLLink href="https://twitter.com/SimonPrinceAI">Twitter</UDLLink> or{" "}
+                            <UDLLink href="https://www.linkedin.com/in/simon-prince-615bb9165/">
+                                LinkedIn
+                            </UDLLink>{" "}
+                            for updates.
                        </HeroFollowBlock>
                    </HeroColumn1>
                    <HeroColumn2>
                        <HeroImgWrap>
-                            <Img src={img} alt="book cover"/>
+                            <Img src={img} alt="book cover" />
                        </HeroImgWrap>
-                        <HeroLink href="https://github.com/udlbook/udlbook/releases/download/v4.0.1/UnderstandingDeepLearning_05_27_24_C.pdf">Download full pdf (27 May 2024)</HeroLink>
-                        <HeroDownloadsImg src="https://img.shields.io/github/downloads/udlbook/udlbook/total" alt="download stats shield"/>
-                        <HeroLink href="https://mitpress.mit.edu/9780262048644/understanding-deep-learning/">Buy the book</HeroLink>
-                        <HeroLink href="https://github.com/udlbook/udlbook/raw/main/UDL_Answer_Booklet_Students.pdf">Answers to selected questions</HeroLink>
-                        <HeroLink href="https://github.com/udlbook/udlbook/raw/main/UDL_Errata.pdf">Errata</HeroLink>
+                        <HeroLink href="https://github.com/udlbook/udlbook/releases/download/v4.0.1/UnderstandingDeepLearning_05_27_24_C.pdf">
+                            Download full pdf (27 May 2024)
+                        </HeroLink>
+                        <HeroDownloadsImg
+                            src="https://img.shields.io/github/downloads/udlbook/udlbook/total"
+                            alt="download stats shield"
+                        />
+                        <HeroLink href="https://mitpress.mit.edu/9780262048644/understanding-deep-learning/">
+                            Buy the book
+                        </HeroLink>
+                        <HeroLink href="https://github.com/udlbook/udlbook/raw/main/UDL_Answer_Booklet_Students.pdf">
+                            Answers to selected questions
+                        </HeroLink>
+                        <HeroLink href="https://github.com/udlbook/udlbook/raw/main/UDL_Errata.pdf">
+                            Errata
+                        </HeroLink>
                    </HeroColumn2>
                </HeroRow>
            </HeroContent>
        </HeroContainer>
-    )
+    );
 }
-
-export default HeroSection
--- a/src/components/Instructors/InstructorsElements.jsx
+++ b/src/components/Instructors/InstructorsElements.jsx
@@ -1,67 +1,67 @@
 import styled from "styled-components";

-
 export const InstructorsContainer = styled.div`
    color: #fff;
    /* background: #f9f9f9; */
-    background: ${({lightBg}) => (lightBg ? '#57c6d1': '#010606')};
+    background: ${({ lightBg }) => (lightBg ? "#57c6d1" : "#010606")};

    @media screen and (max-width: 768px) {
        padding: 100px 0;
    }
-`
+`;

 export const InstructorsWrapper = styled.div`
-    display: grid ; 
+    display: grid;
    z-index: 1;
-    width: 100% ; 
+    width: 100%;
    max-width: 1100px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 24px;
    justify-content: center;
-`
+`;

 export const InstructorsRow = styled.div`
    display: grid;
    grid-auto-columns: minmax(auto, 1fr);
    align-items: center;
-    grid-template-areas: ${({imgStart}) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
+    grid-template-areas: ${({ imgStart }) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};

-    @media screen and (max-width: 768px){
-        grid-template-areas: ${({imgStart}) => (imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`)};
+    @media screen and (max-width: 768px) {
+        grid-template-areas: ${({ imgStart }) =>
+            imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`};
    }
-`
+`;

 export const InstructorsRow2 = styled.div`
    display: grid;
    grid-auto-columns: minmax(auto, 1fr);
    align-items: top;
-    grid-template-areas: ${({imgStart}) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
+    grid-template-areas: ${({ imgStart }) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};

-    @media screen and (max-width: 768px){
-        grid-template-areas: ${({imgStart}) => (imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`)};
+    @media screen and (max-width: 768px) {
+        grid-template-areas: ${({ imgStart }) =>
+            imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`};
    }
-`
-
+`;

 export const Column1 = styled.div`
    margin-bottom: 15px;
    padding: 0 15px;
    grid-area: col1;
-`
+`;

 export const Column2 = styled.div`
    margin-bottom: 15px;
    padding: 0 15px;
    grid-area: col2;
-`
+`;

 export const TextWrapper = styled.div`
-    max-width: 540px ; 
+    max-width: 540px;
    padding-top: 0;
    padding-bottom: 0;
-`
+`;

 export const TopLine = styled.p`
    color: #773c23;
@@ -71,62 +71,58 @@ export const TopLine = styled.p`
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 16px;
-`
-
-export const Heading= styled.h1` 
+`;

+export const Heading = styled.h1`
    margin-bottom: 24px;
    font-size: 48px;
    line-height: 1.1;
    font-weight: 600;
-    color: ${({lightText}) => (lightText ? '#f7f8fa' : '#010606')};
+    color: ${({ lightText }) => (lightText ? "#f7f8fa" : "#010606")};

-    @media screen and (max-width: 480px)
-    {
+    @media screen and (max-width: 480px) {
        font-size: 32px;
    }
-`
-
+`;

 export const Subtitle = styled.p`
    max-width: 440px;
    margin-bottom: 35px;
    font-size: 18px;
    line-height: 24px;
-    color: ${({darkText})=> (darkText ? '#010606' : '#fff')};
-
-`
+    color: ${({ darkText }) => (darkText ? "#010606" : "#fff")};
+`;

 export const BtnWrap = styled.div`
    display: flex;
    justify-content: flex-start;
-`
+`;

 export const ImgWrap = styled.div`
    max-width: 555px;
    height: 100%;
-`
-
-export const Img = styled.img`
-  width: 100%;
-  margin-top: 0;
-  margin-right: 0;
-  margin-left: 10px;
-  padding-right: 0;
 `;

+export const Img = styled.img`
+    width: 100%;
+    margin-top: 0;
+    margin-right: 0;
+    margin-left: 10px;
+    padding-right: 0;
+`;

 export const InstructorsContent = styled.div`
    z-index: 3;
-    width: 100% ; 
+    width: 100%;
    max-width: 1100px;
    position: static;
    padding: 8px 0px;
    margin: 10px 0px;
    display: flex;
    flex-direction: column;
-    align-items: left ; 
+    align-items: left;
    list-style-position: inside;
+
    @media screen and (max-width: 1050px) {
        font-size: 12px;
    }
@@ -134,7 +130,7 @@ export const InstructorsContent = styled.div`
    @media screen and (max-width: 768px) {
        font-size: 10px;
    }
-`
+`;

 export const InstructorsLink = styled.a`
    text-decoration: none;
@@ -143,7 +139,7 @@ export const InstructorsLink = styled.a`
    margin: 0 2px;
    position: relative;

-    &:before{
+    &:before {
        position: absolute;
        margin: 0 auto;
        top: 100%;
@@ -151,15 +147,17 @@ export const InstructorsLink = styled.a`
        width: 100%;
        height: 2px;
        background-color: #555;
-        content: '';
-        opacity: .3;
+        content: "";
+        opacity: 0.3;
        -webkit-transform: scaleX(1);
-        transition-property: opacity, -webkit-transform;
-        transition-duration: .3s;
+        transition-property:
+            opacity,
+            -webkit-transform;
+        transition-duration: 0.3s;
    }

    &:hover:before {
        opacity: 1;
        -webkit-transform: scaleX(1.05);
-      }
-`
+    }
+`;
--- a/src/components/Instructors/index.jsx
+++ b/src/components/Instructors/index.jsx
@@ -1,178 +1,500 @@
-import React from 'react'
-import { ImgWrap, Img, InstructorsLink, InstructorsContainer, InstructorsContent, InstructorsRow2, InstructorsWrapper, InstructorsRow, Column1, Column2, TextWrapper, TopLine, Heading, Subtitle} from './InstructorsElements'
+import img from "../../images/instructor.svg";
+import {
+    Column1,
+    Column2,
+    Heading,
+    Img,
+    ImgWrap,
+    InstructorsContainer,
+    InstructorsContent,
+    InstructorsLink,
+    InstructorsRow,
+    InstructorsRow2,
+    InstructorsWrapper,
+    Subtitle,
+    TextWrapper,
+    TopLine,
+} from "./InstructorsElements";

-// export const homeObjOne = {
-//     id: 'about',
-//     lightBg: false,
-//     lightText: true,
-//     lightTextDesc: true,
-//     topLine: 'Premium Bank',
-//     headline: 'Unlimited transactions with zero fees',
-//     description:
-//       'Get access to our exclusive app that allows you to send unlimited transactions without getting charged any fees',
-//     buttonLabel: 'Get Started',
-//     imgStart: false,
-//     img: require('../../images/svg-1.svg').default,
-//     alt: 'Car',
-//     dark: true,
-//     primary: true,
-//     darkText: false
-//   };
-
-import img from '../../images/instructor.svg'
-
-
-
-const InstructorsSection = () => {
+export default function InstructorsSection() {
    return (
        <>
-            <InstructorsContainer lightBg={true} id='Instructors'>
+            <InstructorsContainer lightBg={true} id="Instructors">
                <InstructorsWrapper>
                    <InstructorsRow imgStart={false}>
                        <Column1>
                            <TextWrapper>
                                <TopLine>Instructors</TopLine>
                                <Heading lightText={false}>Resources for instructors</Heading>
-                                <Subtitle darkText={true}>All the figures in vector and image formats, full slides for first twelve chapters, instructor answer booklet</Subtitle>
+                                <Subtitle darkText={true}>
+                                    All the figures in vector and image formats, full slides for
+                                    first twelve chapters, instructor answer booklet
+                                </Subtitle>
                            </TextWrapper>
                        </Column1>
                        <Column2>
                            <ImgWrap>
-                                <Img src={img} alt='Car'/>
+                                <Img src={img} alt="Car" />
                            </ImgWrap>
                        </Column2>
                    </InstructorsRow>
                    <InstructorsRow2>
                        <Column1>
                            <TopLine>Register</TopLine>
-                            <InstructorsLink href="https://mitpress.ublish.com/request?cri=15055">Register</InstructorsLink> with MIT Press for answer booklet.
-                            <InstructorsContent>
-
-                            </InstructorsContent>
-                           
+                            <InstructorsLink href="https://mitpress.ublish.com/request?cri=15055">
+                                Register
+                            </InstructorsLink>{" "}
+                            with MIT Press for answer booklet.
+                            <InstructorsContent></InstructorsContent>
                            <TopLine>Full slides</TopLine>
                            <InstructorsContent>
                                Slides for 20 lecture undergraduate deep learning course:
                            </InstructorsContent>
                            <InstructorsContent>
                                <ol>
-                                    <li>Introduction <InstructorsLink href="https://drive.google.com/uc?export=download&id=17RHb11BrydOvxSFNbRIomE1QKLVI087m">PPTX</InstructorsLink></li>
-                                    <li>Supervised Learning <InstructorsLink href="https://drive.google.com/uc?export=download&id=1491zkHULC7gDfqlV6cqUxyVYXZ-de-Ub">PPTX</InstructorsLink></li>
-                                    <li>Shallow Neural Networks <InstructorsLink href="https://drive.google.com/uc?export=download&id=1XkP1c9EhOBowla1rT1nnsDGMf2rZvrt7">PPTX</InstructorsLink></li>
-                                    <li>Deep Neural Networks <InstructorsLink href="https://drive.google.com/uc?export=download&id=1e2ejfZbbfMKLBv0v-tvBWBdI8gO3SSS1">PPTX</InstructorsLink></li>
-                                    <li>Loss Functions <InstructorsLink href="https://drive.google.com/uc?export=download&id=1fxQ_a1Q3eFPZ4kPqKbak6_emJK-JfnRH">PPTX</InstructorsLink></li>
-                                    <li>Fitting Models <InstructorsLink href="https://drive.google.com/uc?export=download&id=17QQ5ZzXBtR_uCNCUU1gPRWWRUeZN9exW">PPTX</InstructorsLink></li>
-                                    <li>Computing Gradients <InstructorsLink href="https://drive.google.com/uc?export=download&id=1hC8JUCOaFWiw3KGn0rm7nW6mEq242QDK">PPTX</InstructorsLink></li>
-                                    <li>Initialization <InstructorsLink href="https://drive.google.com/uc?export=download&id=1tSjCeAVg0JCeBcPgDJDbi7Gg43Qkh9_d">PPTX</InstructorsLink></li>
-                                    <li>Performance <InstructorsLink href="https://drive.google.com/uc?export=download&id=1RVZW3KjEs0vNSGx3B2fdizddlr6I0wLl">PPTX</InstructorsLink></li>
-                                    <li>Regularization <InstructorsLink href="https://drive.google.com/uc?export=download&id=1LTicIKPRPbZRkkg6qOr1DSuOB72axood">PPTX</InstructorsLink></li>
-                                    <li>Convolutional Networks <InstructorsLink href="https://drive.google.com/uc?export=download&id=1bGVuwAwrofzZdfvj267elIzkYMIvYFj0">PPTX</InstructorsLink></li>
-                                    <li>Image Generation <InstructorsLink href="https://drive.google.com/uc?export=download&id=14w31QqWRDix1GdUE-na0_E0kGKBhtKzs">PPTX</InstructorsLink></li>
-                                    <li>Transformers and LLMs <InstructorsLink href="https://drive.google.com/uc?export=download&id=1af6bTTjAbhDYfrDhboW7Fuv52Gk9ygKr">PPTX</InstructorsLink></li>
+                                    <li>
+                                        Introduction{" "}
+                                        <InstructorsLink href="https://drive.google.com/uc?export=download&id=17RHb11BrydOvxSFNbRIomE1QKLVI087m">
+                                            PPTX
+                                        </InstructorsLink>
+                                    </li>
+                                    <li>
+                                        Supervised Learning{" "}
+                                        <InstructorsLink href="https://drive.google.com/uc?export=download&id=1491zkHULC7gDfqlV6cqUxyVYXZ-de-Ub">
+                                            PPTX
+                                        </InstructorsLink>
+                                    </li>
+                                    <li>
+                                        Shallow Neural Networks{" "}
+                                        <InstructorsLink href="https://drive.google.com/uc?export=download&id=1XkP1c9EhOBowla1rT1nnsDGMf2rZvrt7">
+                                            PPTX
+                                        </InstructorsLink>
+                                    </li>
+                                    <li>
+                                        Deep Neural Networks{" "}
+                                        <InstructorsLink href="https://drive.google.com/uc?export=download&id=1e2ejfZbbfMKLBv0v-tvBWBdI8gO3SSS1">
+                                            PPTX
+                                        </InstructorsLink>
+                                    </li>
+                                    <li>
+                                        Loss Functions{" "}
+                                        <InstructorsLink href="https://drive.google.com/uc?export=download&id=1fxQ_a1Q3eFPZ4kPqKbak6_emJK-JfnRH">
+                                            PPTX
+                                        </InstructorsLink>
+                                    </li>
+                                    <li>
+                                        Fitting Models{" "}
+                                        <InstructorsLink href="https://drive.google.com/uc?export=download&id=17QQ5ZzXBtR_uCNCUU1gPRWWRUeZN9exW">
+                                            PPTX
+                                        </InstructorsLink>
+                                    </li>
+                                    <li>
+                                        Computing Gradients{" "}
+                                        <InstructorsLink href="https://drive.google.com/uc?export=download&id=1hC8JUCOaFWiw3KGn0rm7nW6mEq242QDK">
+                                            PPTX
+                                        </InstructorsLink>
+                                    </li>
+                                    <li>
+                                        Initialization{" "}
+                                        <InstructorsLink href="https://drive.google.com/uc?export=download&id=1tSjCeAVg0JCeBcPgDJDbi7Gg43Qkh9_d">
+                                            PPTX
+                                        </InstructorsLink>
+                                    </li>
+                                    <li>
+                                        Performance{" "}
+                                        <InstructorsLink href="https://drive.google.com/uc?export=download&id=1RVZW3KjEs0vNSGx3B2fdizddlr6I0wLl">
+                                            PPTX
+                                        </InstructorsLink>
+                                    </li>
+                                    <li>
+                                        Regularization{" "}
+                                        <InstructorsLink href="https://drive.google.com/uc?export=download&id=1LTicIKPRPbZRkkg6qOr1DSuOB72axood">
+                                            PPTX
+                                        </InstructorsLink>
+                                    </li>
+                                    <li>
+                                        Convolutional Networks{" "}
+                                        <InstructorsLink href="https://drive.google.com/uc?export=download&id=1bGVuwAwrofzZdfvj267elIzkYMIvYFj0">
+                                            PPTX
+                                        </InstructorsLink>
+                                    </li>
+                                    <li>
+                                        Image Generation{" "}
+                                        <InstructorsLink href="https://drive.google.com/uc?export=download&id=14w31QqWRDix1GdUE-na0_E0kGKBhtKzs">
+                                            PPTX
+                                        </InstructorsLink>
+                                    </li>
+                                    <li>
+                                        Transformers and LLMs{" "}
+                                        <InstructorsLink href="https://drive.google.com/uc?export=download&id=1af6bTTjAbhDYfrDhboW7Fuv52Gk9ygKr">
+                                            PPTX
+                                        </InstructorsLink>
+                                    </li>
                                </ol>
-                             </InstructorsContent>
+                            </InstructorsContent>
                        </Column1>
                        <Column2>
                            <TopLine>Figures</TopLine>
                            <InstructorsContent>
-                            <ol>
-                                <li> Introduction: <InstructorsLink href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap1PDF.zip">PDF</InstructorsLink> / <InstructorsLink href="https://drive.google.com/uc?export=download&id=1udnl5pUOAc8DcAQ7HQwyzP9pwL95ynnv"> SVG</InstructorsLink> / <InstructorsLink href="https://docs.google.com/presentation/d/1IjTqIUvWCJc71b5vEJYte-Dwujcp7rvG/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX </InstructorsLink></li>
-
-                            <li> Supervised learning: <InstructorsLink
-                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap2PDF.zip">PDF</InstructorsLink> / <InstructorsLink
-                                        href="https://drive.google.com/uc?export=download&id=1VSxcU5y1qNFlmd3Lb3uOWyzILuOj1Dla"> SVG</InstructorsLink> / <InstructorsLink href="https://docs.google.com/presentation/d/1Br7R01ROtRWPlNhC_KOommeHAWMBpWtz/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</InstructorsLink></li>
-                                <li> Shallow neural networks: <InstructorsLink
-                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap3PDF.zip">PDF</InstructorsLink> / <InstructorsLink
-                                        href="https://drive.google.com/uc?export=download&id=19kZFWlXhzN82Zx02ByMmSZOO4T41fmqI"> SVG</InstructorsLink> / <InstructorsLink href="https://docs.google.com/presentation/d/1e9M3jB5I9qZ4dCBY90Q3Hwft_i068QVQ/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</InstructorsLink></li>
-                                <li> Deep neural networks: <InstructorsLink
-                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap4PDF.zip">PDF</InstructorsLink> / <InstructorsLink
-                                        href="https://drive.google.com/uc?export=download&id=1ojr0ebsOhzvS04ItAflX2cVmYqHQHZUa"> SVG</InstructorsLink>
-                                    /
-                                    <InstructorsLink href="https://docs.google.com/presentation/d/1LTSsmY4mMrJbqXVvoTOCkQwHrRKoYnJj/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</InstructorsLink></li>
-                                <li> Loss functions: <InstructorsLink
-                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap5PDF.zip">PDF
-                                    </InstructorsLink> / <InstructorsLink href="https://drive.google.com/uc?export=download&id=17MJO7fiMpFZVqKeqXTbQ36AMpmR4GizZ">
-                                    SVG
-                                    </InstructorsLink> / <InstructorsLink
-                                        href="https://docs.google.com/presentation/d/1gcpC_3z9oRp87eMkoco-kdLD-MM54Puk/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</InstructorsLink></li>
-                                <li> Training models: <InstructorsLink
-                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap6PDF.zip">PDF
-                                    </InstructorsLink> / <InstructorsLink href="https://drive.google.com/uc?export=download&id=1VPdhFRnCr9_idTrX0UdHKGAw2shUuwhK">
-                                    SVG
-                                    </InstructorsLink> / <InstructorsLink
-                                        href="https://docs.google.com/presentation/d/1AKoeggAFBl9yLC7X5tushAGzCCxmB7EY/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</InstructorsLink></li>
-                                <li> Gradients and initialization: <InstructorsLink
-                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap7PDF.zip">PDF</InstructorsLink> / <InstructorsLink
-                                        href="https://drive.google.com/uc?export=download&id=1TTl4gvrTvNbegnml4CoGoKOOd6O8-PGs"> SVG</InstructorsLink> / <InstructorsLink href="https://docs.google.com/presentation/d/11zhB6PI-Dp6Ogmr4IcI6fbvbqNqLyYcz/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</InstructorsLink></li>
-                                <li> Measuring performance: <InstructorsLink
-                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap8PDF.zip">PDF</InstructorsLink> / <InstructorsLink
-                                        href="https://drive.google.com/uc?export=download&id=19eQOnygd_l0DzgtJxXuYnWa4z7QKJrJx"> SVG</InstructorsLink> / <InstructorsLink href="https://docs.google.com/presentation/d/1SHRmJscDLUuQrG7tmysnScb3ZUAqVMZo/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</InstructorsLink></li>
-                                <li> Regularization: <InstructorsLink
-                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap9PDF.zip">PDF
-                                    </InstructorsLink> / <InstructorsLink href="https://drive.google.com/uc?export=download&id=1LprgnUGL7xAM9-jlGZC9LhMPeefjY0r0">
-                                    SVG
-                                    </InstructorsLink> / <InstructorsLink
-                                        href="https://docs.google.com/presentation/d/1VwIfvjpdfTny6sEfu4ZETwCnw6m8Eg-5/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</InstructorsLink></li>
-                                <li> Convolutional networks: <InstructorsLink
-                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap10PDF.zip">PDF</InstructorsLink> / <InstructorsLink
-                                        href="https://drive.google.com/uc?export=download&id=1-Wb3VzaSvVeRzoUzJbI2JjZE0uwqupM9"> SVG</InstructorsLink> / <InstructorsLink href="https://docs.google.com/presentation/d/1MtfKBC4Y9hWwGqeP6DVwUNbi1j5ncQCg/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</InstructorsLink></li>
-                                <li> Residual networks: <InstructorsLink
-                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap11PDF.zip">PDF</InstructorsLink> / <InstructorsLink
-                                        href="https://drive.google.com/uc?export=download&id=1Mr58jzEVseUAfNYbGWCQyDtEDwvfHRi1"> SVG</InstructorsLink> / <InstructorsLink href="https://docs.google.com/presentation/d/1saY8Faz0KTKAAifUrbkQdLA2qkyEjOPI/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</InstructorsLink></li>
-                                <li> Transformers: <InstructorsLink
-                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap12PDF.zip">PDF</InstructorsLink> / <InstructorsLink href="https://drive.google.com/uc?export=download&id=1txzOVNf8-jH4UfJ6SLnrtOfPd1Q3ebzd">
-                                    SVG</InstructorsLink> / <InstructorsLink
-                                        href="https://docs.google.com/presentation/d/1GVNvYWa0WJA6oKg89qZre-UZEhABfm0l/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</InstructorsLink></li>
-                                <li> Graph neural networks: <InstructorsLink
-                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap13PDF.zip">PDF</InstructorsLink> / <InstructorsLink
-                                        href="https://drive.google.com/uc?export=download&id=1lQIV6nRp6LVfaMgpGFhuwEXG-lTEaAwe"> SVG</InstructorsLink> / <InstructorsLink href="https://docs.google.com/presentation/d/1YwF3U82c1mQ74c1WqHVTzLZ0j7GgKaWP/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</InstructorsLink></li>
-                                <li> Unsupervised learning: <InstructorsLink
-                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap14PDF.zip">PDF</InstructorsLink> / <InstructorsLink
-                                        href="https://drive.google.com/uc?export=download&id=1aMbI6iCuUvOywqk5pBOmppJu1L1anqsM"> SVG</InstructorsLink> / <InstructorsLink href="https://docs.google.com/presentation/d/1A-lBGv3NHl4L32NvfFgy1EKeSwY-0UeB/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
-                                        PPTX</InstructorsLink></li>
-                                <li> GANs: <InstructorsLink
-                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap15PDF.zip">PDF</InstructorsLink> / <InstructorsLink
-                                        href="https://drive.google.com/uc?export=download&id=1EErnlZCOlXc3HK7m83T2Jh_0NzIUHvtL"> SVG</InstructorsLink> / <InstructorsLink href="https://docs.google.com/presentation/d/10Ernk41ShOTf4IYkMD-l4dJfKATkXH4w/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</InstructorsLink></li>
-                                <li> Normalizing flows: <InstructorsLink
-                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap16PDF.zip">PDF</InstructorsLink> / <InstructorsLink
-                                        href="https://drive.google.com/uc?export=download&id=1SNtNIY7khlHQYMtaOH-FosSH3kWwL4b7"> SVG</InstructorsLink> / <InstructorsLink href="https://docs.google.com/presentation/d/1nLLzqb9pdfF_h6i1HUDSyp7kSMIkSUUA/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</InstructorsLink></li>
-                                <li> Variational autoencoders: <InstructorsLink
-                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap17PDF.zip">PDF</InstructorsLink> / <InstructorsLink
-                                        href="https://drive.google.com/uc?export=download&id=1B9bxtmdugwtg-b7Y4AdQKAIEVWxjx8l3"> SVG</InstructorsLink> / <InstructorsLink href="https://docs.google.com/presentation/d/1lQE4Bu7-LgvV2VlJOt_4dQT-kusYl7Vo/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</InstructorsLink></li>
-                                <li> Diffusion models: <InstructorsLink
-                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap18PDF.zip">PDF</InstructorsLink> / <InstructorsLink
-                                        href="https://drive.google.com/uc?export=download&id=1A-pIGl4PxjVMYOKAUG3aT4a8wD3G-q_r"> SVG</InstructorsLink> / 
-                                    <InstructorsLink href="https://docs.google.com/presentation/d/1x_ufIBtVPzWUvRieKMkpw5SdRjXWwdfR/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
-                                    PPTX</InstructorsLink></li>
-                                <li> Deep reinforcement learning: <InstructorsLink
-                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap19PDF.zip">PDF</InstructorsLink> / <InstructorsLink
-                                        href="https://drive.google.com/uc?export=download&id=1a5WUoF7jeSgwC_PVdckJi1Gny46fCqh0"> SVG</InstructorsLink> / <InstructorsLink href="https://docs.google.com/presentation/d/1TnYmVbFNhmMFetbjyfXGmkxp1EHauMqr/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
-                                        PPTX </InstructorsLink></li>
-                                <li> Why does deep learning work?: <InstructorsLink
-                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap20PDF.zip">PDF</InstructorsLink> / <InstructorsLink
-                                        href="https://drive.google.com/uc?export=download&id=1M2d0DHEgddAQoIedKSDTTt7m1ZdmBLQ3"> SVG</InstructorsLink> / <InstructorsLink href="https://docs.google.com/presentation/d/1coxF4IsrCzDTLrNjRagHvqB_FBy10miA/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
-                                        PPTX</InstructorsLink></li>
-                                <li> Deep learning and ethics: <InstructorsLink
-                                        href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap21PDF.zip">PDF</InstructorsLink> / <InstructorsLink
-                                        href="https://drive.google.com/uc?export=download&id=1jixmFfwmZkW_UVYzcxmDcMsdFFtnZ0bU">SVG</InstructorsLink> / <InstructorsLink
-                                            href="https://docs.google.com/presentation/d/1EtfzanZYILvi9_-Idm28zD94I_6OrN9R/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</InstructorsLink></li>
-                                <li> Appendices - <InstructorsLink href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLAppendixPDF.zip">PDF</InstructorsLink> / <InstructorsLink href="https://drive.google.com/uc?export=download&id=1k2j7hMN40ISPSg9skFYWFL3oZT7r8v-l">
-                                    SVG</InstructorsLink> / <InstructorsLink
-                                        href="https://docs.google.com/presentation/d/1_2cJHRnsoQQHst0rwZssv-XH4o5SEHks/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">PPTX</InstructorsLink></li>
-                            </ol>
-                            </InstructorsContent>
-                            <InstructorsLink href="https://drive.google.com/file/d/1T_MXXVR4AfyMnlEFI-UVDh--FXI5deAp/view?usp=sharing">Instructions</InstructorsLink> for editing equations in figures.
-
-                            <InstructorsContent>
+                                <ol>
+                                    <li>
+                                        {" "}
+                                        Introduction:{" "}
+                                        <InstructorsLink href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap1PDF.zip">
+                                            PDF
+                                        </InstructorsLink>{" "}
+                                        /{" "}
+                                        <InstructorsLink href="https://drive.google.com/uc?export=download&id=1udnl5pUOAc8DcAQ7HQwyzP9pwL95ynnv">
+                                            {" "}
+                                            SVG
+                                        </InstructorsLink>{" "}
+                                        /{" "}
+                                        <InstructorsLink href="https://docs.google.com/presentation/d/1IjTqIUvWCJc71b5vEJYte-Dwujcp7rvG/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
+                                            PPTX{" "}
+                                        </InstructorsLink>
+                                    </li>

+                                    <li>
+                                        {" "}
+                                        Supervised learning:{" "}
+                                        <InstructorsLink href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap2PDF.zip">
+                                            PDF
+                                        </InstructorsLink>{" "}
+                                        /{" "}
+                                        <InstructorsLink href="https://drive.google.com/uc?export=download&id=1VSxcU5y1qNFlmd3Lb3uOWyzILuOj1Dla">
+                                            {" "}
+                                            SVG
+                                        </InstructorsLink>{" "}
+                                        /{" "}
+                                        <InstructorsLink href="https://docs.google.com/presentation/d/1Br7R01ROtRWPlNhC_KOommeHAWMBpWtz/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
+                                            PPTX
+                                        </InstructorsLink>
+                                    </li>
+                                    <li>
+                                        {" "}
+                                        Shallow neural networks:{" "}
+                                        <InstructorsLink href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap3PDF.zip">
+                                            PDF
+                                        </InstructorsLink>{" "}
+                                        /{" "}
+                                        <InstructorsLink href="https://drive.google.com/uc?export=download&id=19kZFWlXhzN82Zx02ByMmSZOO4T41fmqI">
+                                            {" "}
+                                            SVG
+                                        </InstructorsLink>{" "}
+                                        /{" "}
+                                        <InstructorsLink href="https://docs.google.com/presentation/d/1e9M3jB5I9qZ4dCBY90Q3Hwft_i068QVQ/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
+                                            PPTX
+                                        </InstructorsLink>
+                                    </li>
+                                    <li>
+                                        {" "}
+                                        Deep neural networks:{" "}
+                                        <InstructorsLink href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap4PDF.zip">
+                                            PDF
+                                        </InstructorsLink>{" "}
+                                        /{" "}
+                                        <InstructorsLink href="https://drive.google.com/uc?export=download&id=1ojr0ebsOhzvS04ItAflX2cVmYqHQHZUa">
+                                            {" "}
+                                            SVG
+                                        </InstructorsLink>
+                                        /
+                                        <InstructorsLink href="https://docs.google.com/presentation/d/1LTSsmY4mMrJbqXVvoTOCkQwHrRKoYnJj/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
+                                            PPTX
+                                        </InstructorsLink>
+                                    </li>
+                                    <li>
+                                        {" "}
+                                        Loss functions:{" "}
+                                        <InstructorsLink href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap5PDF.zip">
+                                            PDF
+                                        </InstructorsLink>{" "}
+                                        /{" "}
+                                        <InstructorsLink href="https://drive.google.com/uc?export=download&id=17MJO7fiMpFZVqKeqXTbQ36AMpmR4GizZ">
+                                            SVG
+                                        </InstructorsLink>{" "}
+                                        /{" "}
+                                        <InstructorsLink href="https://docs.google.com/presentation/d/1gcpC_3z9oRp87eMkoco-kdLD-MM54Puk/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
+                                            PPTX
+                                        </InstructorsLink>
+                                    </li>
+                                    <li>
+                                        {" "}
+                                        Training models:{" "}
+                                        <InstructorsLink href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap6PDF.zip">
+                                            PDF
+                                        </InstructorsLink>{" "}
+                                        /{" "}
+                                        <InstructorsLink href="https://drive.google.com/uc?export=download&id=1VPdhFRnCr9_idTrX0UdHKGAw2shUuwhK">
+                                            SVG
+                                        </InstructorsLink>{" "}
+                                        /{" "}
+                                        <InstructorsLink href="https://docs.google.com/presentation/d/1AKoeggAFBl9yLC7X5tushAGzCCxmB7EY/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
+                                            PPTX
+                                        </InstructorsLink>
+                                    </li>
+                                    <li>
+                                        {" "}
+                                        Gradients and initialization:{" "}
+                                        <InstructorsLink href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap7PDF.zip">
+                                            PDF
+                                        </InstructorsLink>{" "}
+                                        /{" "}
+                                        <InstructorsLink href="https://drive.google.com/uc?export=download&id=1TTl4gvrTvNbegnml4CoGoKOOd6O8-PGs">
+                                            {" "}
+                                            SVG
+                                        </InstructorsLink>{" "}
+                                        /{" "}
+                                        <InstructorsLink href="https://docs.google.com/presentation/d/11zhB6PI-Dp6Ogmr4IcI6fbvbqNqLyYcz/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
+                                            PPTX
+                                        </InstructorsLink>
+                                    </li>
+                                    <li>
+                                        {" "}
+                                        Measuring performance:{" "}
+                                        <InstructorsLink href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap8PDF.zip">
+                                            PDF
+                                        </InstructorsLink>{" "}
+                                        /{" "}
+                                        <InstructorsLink href="https://drive.google.com/uc?export=download&id=19eQOnygd_l0DzgtJxXuYnWa4z7QKJrJx">
+                                            {" "}
+                                            SVG
+                                        </InstructorsLink>{" "}
+                                        /{" "}
+                                        <InstructorsLink href="https://docs.google.com/presentation/d/1SHRmJscDLUuQrG7tmysnScb3ZUAqVMZo/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
+                                            PPTX
+                                        </InstructorsLink>
+                                    </li>
+                                    <li>
+                                        {" "}
+                                        Regularization:{" "}
+                                        <InstructorsLink href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap9PDF.zip">
+                                            PDF
+                                        </InstructorsLink>{" "}
+                                        /{" "}
+                                        <InstructorsLink href="https://drive.google.com/uc?export=download&id=1LprgnUGL7xAM9-jlGZC9LhMPeefjY0r0">
+                                            SVG
+                                        </InstructorsLink>{" "}
+                                        /{" "}
+                                        <InstructorsLink href="https://docs.google.com/presentation/d/1VwIfvjpdfTny6sEfu4ZETwCnw6m8Eg-5/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
+                                            PPTX
+                                        </InstructorsLink>
+                                    </li>
+                                    <li>
+                                        {" "}
+                                        Convolutional networks:{" "}
+                                        <InstructorsLink href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap10PDF.zip">
+                                            PDF
+                                        </InstructorsLink>{" "}
+                                        /{" "}
+                                        <InstructorsLink href="https://drive.google.com/uc?export=download&id=1-Wb3VzaSvVeRzoUzJbI2JjZE0uwqupM9">
+                                            {" "}
+                                            SVG
+                                        </InstructorsLink>{" "}
+                                        /{" "}
+                                        <InstructorsLink href="https://docs.google.com/presentation/d/1MtfKBC4Y9hWwGqeP6DVwUNbi1j5ncQCg/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
+                                            PPTX
+                                        </InstructorsLink>
+                                    </li>
+                                    <li>
+                                        {" "}
+                                        Residual networks:{" "}
+                                        <InstructorsLink href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap11PDF.zip">
+                                            PDF
+                                        </InstructorsLink>{" "}
+                                        /{" "}
+                                        <InstructorsLink href="https://drive.google.com/uc?export=download&id=1Mr58jzEVseUAfNYbGWCQyDtEDwvfHRi1">
+                                            {" "}
+                                            SVG
+                                        </InstructorsLink>{" "}
+                                        /{" "}
+                                        <InstructorsLink href="https://docs.google.com/presentation/d/1saY8Faz0KTKAAifUrbkQdLA2qkyEjOPI/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
+                                            PPTX
+                                        </InstructorsLink>
+                                    </li>
+                                    <li>
+                                        {" "}
+                                        Transformers:{" "}
+                                        <InstructorsLink href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap12PDF.zip">
+                                            PDF
+                                        </InstructorsLink>{" "}
+                                        /{" "}
+                                        <InstructorsLink href="https://drive.google.com/uc?export=download&id=1txzOVNf8-jH4UfJ6SLnrtOfPd1Q3ebzd">
+                                            SVG
+                                        </InstructorsLink>{" "}
+                                        /{" "}
+                                        <InstructorsLink href="https://docs.google.com/presentation/d/1GVNvYWa0WJA6oKg89qZre-UZEhABfm0l/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
+                                            PPTX
+                                        </InstructorsLink>
+                                    </li>
+                                    <li>
+                                        {" "}
+                                        Graph neural networks:{" "}
+                                        <InstructorsLink href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap13PDF.zip">
+                                            PDF
+                                        </InstructorsLink>{" "}
+                                        /{" "}
+                                        <InstructorsLink href="https://drive.google.com/uc?export=download&id=1lQIV6nRp6LVfaMgpGFhuwEXG-lTEaAwe">
+                                            {" "}
+                                            SVG
+                                        </InstructorsLink>{" "}
+                                        /{" "}
+                                        <InstructorsLink href="https://docs.google.com/presentation/d/1YwF3U82c1mQ74c1WqHVTzLZ0j7GgKaWP/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
+                                            PPTX
+                                        </InstructorsLink>
+                                    </li>
+                                    <li>
+                                        {" "}
+                                        Unsupervised learning:{" "}
+                                        <InstructorsLink href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap14PDF.zip">
+                                            PDF
+                                        </InstructorsLink>{" "}
+                                        /{" "}
+                                        <InstructorsLink href="https://drive.google.com/uc?export=download&id=1aMbI6iCuUvOywqk5pBOmppJu1L1anqsM">
+                                            {" "}
+                                            SVG
+                                        </InstructorsLink>{" "}
+                                        /{" "}
+                                        <InstructorsLink href="https://docs.google.com/presentation/d/1A-lBGv3NHl4L32NvfFgy1EKeSwY-0UeB/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
+                                            PPTX
+                                        </InstructorsLink>
+                                    </li>
+                                    <li>
+                                        {" "}
+                                        GANs:{" "}
+                                        <InstructorsLink href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap15PDF.zip">
+                                            PDF
+                                        </InstructorsLink>{" "}
+                                        /{" "}
+                                        <InstructorsLink href="https://drive.google.com/uc?export=download&id=1EErnlZCOlXc3HK7m83T2Jh_0NzIUHvtL">
+                                            {" "}
+                                            SVG
+                                        </InstructorsLink>{" "}
+                                        /{" "}
+                                        <InstructorsLink href="https://docs.google.com/presentation/d/10Ernk41ShOTf4IYkMD-l4dJfKATkXH4w/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
+                                            PPTX
+                                        </InstructorsLink>
+                                    </li>
+                                    <li>
+                                        {" "}
+                                        Normalizing flows:{" "}
+                                        <InstructorsLink href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap16PDF.zip">
+                                            PDF
+                                        </InstructorsLink>{" "}
+                                        /{" "}
+                                        <InstructorsLink href="https://drive.google.com/uc?export=download&id=1SNtNIY7khlHQYMtaOH-FosSH3kWwL4b7">
+                                            {" "}
+                                            SVG
+                                        </InstructorsLink>{" "}
+                                        /{" "}
+                                        <InstructorsLink href="https://docs.google.com/presentation/d/1nLLzqb9pdfF_h6i1HUDSyp7kSMIkSUUA/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
+                                            PPTX
+                                        </InstructorsLink>
+                                    </li>
+                                    <li>
+                                        {" "}
+                                        Variational autoencoders:{" "}
+                                        <InstructorsLink href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap17PDF.zip">
+                                            PDF
+                                        </InstructorsLink>{" "}
+                                        /{" "}
+                                        <InstructorsLink href="https://drive.google.com/uc?export=download&id=1B9bxtmdugwtg-b7Y4AdQKAIEVWxjx8l3">
+                                            {" "}
+                                            SVG
+                                        </InstructorsLink>{" "}
+                                        /{" "}
+                                        <InstructorsLink href="https://docs.google.com/presentation/d/1lQE4Bu7-LgvV2VlJOt_4dQT-kusYl7Vo/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
+                                            PPTX
+                                        </InstructorsLink>
+                                    </li>
+                                    <li>
+                                        {" "}
+                                        Diffusion models:{" "}
+                                        <InstructorsLink href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap18PDF.zip">
+                                            PDF
+                                        </InstructorsLink>{" "}
+                                        /{" "}
+                                        <InstructorsLink href="https://drive.google.com/uc?export=download&id=1A-pIGl4PxjVMYOKAUG3aT4a8wD3G-q_r">
+                                            {" "}
+                                            SVG
+                                        </InstructorsLink>{" "}
+                                        /
+                                        <InstructorsLink href="https://docs.google.com/presentation/d/1x_ufIBtVPzWUvRieKMkpw5SdRjXWwdfR/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
+                                            PPTX
+                                        </InstructorsLink>
+                                    </li>
+                                    <li>
+                                        {" "}
+                                        Deep reinforcement learning:{" "}
+                                        <InstructorsLink href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap19PDF.zip">
+                                            PDF
+                                        </InstructorsLink>{" "}
+                                        /{" "}
+                                        <InstructorsLink href="https://drive.google.com/uc?export=download&id=1a5WUoF7jeSgwC_PVdckJi1Gny46fCqh0">
+                                            {" "}
+                                            SVG
+                                        </InstructorsLink>{" "}
+                                        /{" "}
+                                        <InstructorsLink href="https://docs.google.com/presentation/d/1TnYmVbFNhmMFetbjyfXGmkxp1EHauMqr/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
+                                            PPTX{" "}
+                                        </InstructorsLink>
+                                    </li>
+                                    <li>
+                                        {" "}
+                                        Why does deep learning work?:{" "}
+                                        <InstructorsLink href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap20PDF.zip">
+                                            PDF
+                                        </InstructorsLink>{" "}
+                                        /{" "}
+                                        <InstructorsLink href="https://drive.google.com/uc?export=download&id=1M2d0DHEgddAQoIedKSDTTt7m1ZdmBLQ3">
+                                            {" "}
+                                            SVG
+                                        </InstructorsLink>{" "}
+                                        /{" "}
+                                        <InstructorsLink href="https://docs.google.com/presentation/d/1coxF4IsrCzDTLrNjRagHvqB_FBy10miA/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
+                                            PPTX
+                                        </InstructorsLink>
+                                    </li>
+                                    <li>
+                                        {" "}
+                                        Deep learning and ethics:{" "}
+                                        <InstructorsLink href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLChap21PDF.zip">
+                                            PDF
+                                        </InstructorsLink>{" "}
+                                        /{" "}
+                                        <InstructorsLink href="https://drive.google.com/uc?export=download&id=1jixmFfwmZkW_UVYzcxmDcMsdFFtnZ0bU">
+                                            SVG
+                                        </InstructorsLink>{" "}
+                                        /{" "}
+                                        <InstructorsLink href="https://docs.google.com/presentation/d/1EtfzanZYILvi9_-Idm28zD94I_6OrN9R/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
+                                            PPTX
+                                        </InstructorsLink>
+                                    </li>
+                                    <li>
+                                        {" "}
+                                        Appendices -{" "}
+                                        <InstructorsLink href="https://github.com/udlbook/udlbook/raw/main/PDFFigures/UDLAppendixPDF.zip">
+                                            PDF
+                                        </InstructorsLink>{" "}
+                                        /{" "}
+                                        <InstructorsLink href="https://drive.google.com/uc?export=download&id=1k2j7hMN40ISPSg9skFYWFL3oZT7r8v-l">
+                                            SVG
+                                        </InstructorsLink>{" "}
+                                        /{" "}
+                                        <InstructorsLink href="https://docs.google.com/presentation/d/1_2cJHRnsoQQHst0rwZssv-XH4o5SEHks/edit?usp=drive_link&ouid=110441678248547154185&rtpof=true&sd=true">
+                                            PPTX
+                                        </InstructorsLink>
+                                    </li>
+                                </ol>
                            </InstructorsContent>
+                            <InstructorsLink href="https://drive.google.com/file/d/1T_MXXVR4AfyMnlEFI-UVDh--FXI5deAp/view?usp=sharing">
+                                Instructions
+                            </InstructorsLink>{" "}
+                            for editing equations in figures.
+                            <InstructorsContent></InstructorsContent>
                        </Column2>
                    </InstructorsRow2>
-
                </InstructorsWrapper>
            </InstructorsContainer>
        </>
-    )
+    );
 }
-
-export default InstructorsSection
--- a/src/components/Media/MediaElements.jsx
+++ b/src/components/Media/MediaElements.jsx
@@ -1,55 +1,55 @@
 import styled from "styled-components";

-
 export const MediaContainer = styled.div`
    color: #fff;
    /* background: #f9f9f9; */
-    background: ${({lightBg}) => (lightBg ? '#f9f9f9': '#010606')};
+    background: ${({ lightBg }) => (lightBg ? "#f9f9f9" : "#010606")};

    @media screen and (max-width: 768px) {
        padding: 100px 0;
    }
-`
+`;

 export const MediaWrapper = styled.div`
-    display: grid ; 
+    display: grid;
    z-index: 1;
-    width: 100% ; 
+    width: 100%;
    max-width: 1100px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 24px;
    justify-content: center;
-`
+`;

 export const MediaRow = styled.div`
    display: grid;
    grid-auto-columns: minmax(auto, 1fr);
    align-items: center;
-    grid-template-areas: ${({imgStart}) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
+    grid-template-areas: ${({ imgStart }) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};

-    @media screen and (max-width: 768px){
-        grid-template-areas: ${({imgStart}) => (imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`)};
+    @media screen and (max-width: 768px) {
+        grid-template-areas: ${({ imgStart }) =>
+            imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`};
    }
-`
+`;

 export const Column1 = styled.div`
    margin-bottom: 15px;
    padding: 0 15px;
    grid-area: col1;
-`
+`;

 export const Column2 = styled.div`
    margin-bottom: 15px;
    padding: 0 15px;
    grid-area: col2;
-`
+`;

 export const TextWrapper = styled.div`
-    max-width: 540px ; 
+    max-width: 540px;
    padding-top: 0;
    padding-bottom: 0;
-`
+`;

 export const TopLine = styled.p`
    color: #57c6d1;
@@ -59,100 +59,94 @@ export const TopLine = styled.p`
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 16px;
-`
-
-export const Heading= styled.h1` 
+`;

+export const Heading = styled.h1`
    margin-bottom: 24px;
    font-size: 48px;
    line-height: 1.1;
    font-weight: 600;
-    color: ${({lightText}) => (lightText ? '#f7f8fa' : '#010606')};
+    color: ${({ lightText }) => (lightText ? "#f7f8fa" : "#010606")};

-    @media screen and (max-width: 480px)
-    {
+    @media screen and (max-width: 480px) {
        font-size: 32px;
    }
-`
-
+`;

 export const Subtitle = styled.p`
    max-width: 440px;
    margin-bottom: 35px;
    font-size: 18px;
    line-height: 24px;
-    color: ${({darkText})=> (darkText ? '#010606' : '#fff')};
-
-`
+    color: ${({ darkText }) => (darkText ? "#010606" : "#fff")};
+`;

 export const BtnWrap = styled.div`
    display: flex;
    justify-content: flex-start;
-`
+`;

 export const ImgWrap = styled.div`
    max-width: 555px;
    height: 100%;
-`
-
-export const Img = styled.img`
-  width: 100%;
-  margin-top: 0;
-  margin-right: 0;
-  margin-left: 10px;
-  padding-right: 0;
 `;

+export const Img = styled.img`
+    width: 100%;
+    margin-top: 0;
+    margin-right: 0;
+    margin-left: 10px;
+    padding-right: 0;
+`;

 export const MediaTextBlock = styled.div`
-@media screen and (max-width: 768px) {
-    font-size: 24px;
-}
+    @media screen and (max-width: 768px) {
+        font-size: 24px;
+    }

-@media screen and (max-width: 480px) {
-    font-size: 18px;
-}
-`
+    @media screen and (max-width: 480px) {
+        font-size: 18px;
+    }
+`;

 export const MediaContent = styled.div`
    z-index: 3;
-    width: 100% ; 
+    width: 100%;
    max-width: 1100px;
    position: static;
    padding: 8px 0px;
    margin: 10px 0px;
    display: flex;
    flex-direction: column;
-    align-items: left ; 
+    align-items: left;
    list-style-position: inside;
+
    @media screen and (max-width: 768px) {
        font-size: 14px;
    }
-
-`
+`;

 export const MediaRow2 = styled.div`
    display: grid;
    grid-auto-columns: minmax(auto, 1fr);
    align-items: top;
-    grid-template-areas: ${({imgStart}) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
+    grid-template-areas: ${({ imgStart }) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};

-    @media screen and (max-width: 768px){
-        grid-template-areas: ${({imgStart}) => (imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`)};
+    @media screen and (max-width: 768px) {
+        grid-template-areas: ${({ imgStart }) =>
+            imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`};
    }
-`
+`;
+
+export const VideoFrame = styled.div`
+    width: 560px;
+    height: 315px;

-export const VideoFrame=styled.div`
-    width: 560px ; 
-    height: 315px ; 
    @media screen and (max-width: 1050px) {
-        width: 280px ; 
-        height: 157px ; 
+        width: 280px;
+        height: 157px;
    }
-
-
-`
-
+`;

 export const MediaLink = styled.a`
    text-decoration: none;
@@ -161,23 +155,25 @@ export const MediaLink = styled.a`
    margin: 0 2px;
    position: relative;

-    &:before{
+    &:before {
        position: absolute;
        margin: 0 auto;
        top: 100%;
        left: 0;
        width: 100%;
        height: 2px;
-        background-color: #57c6d1;;
-        content: '';
-        opacity: .3;
+        background-color: #57c6d1;
+        content: "";
+        opacity: 0.3;
        -webkit-transform: scaleX(1);
-        transition-property: opacity, -webkit-transform;
-        transition-duration: .3s;
+        transition-property:
+            opacity,
+            -webkit-transform;
+        transition-duration: 0.3s;
    }

    &:hover:before {
        opacity: 1;
        -webkit-transform: scaleX(1.05);
-      }
-`
+    }
+`;
--- a/src/components/Media/index.jsx
+++ b/src/components/Media/index.jsx
@@ -1,44 +1,43 @@
-import React from 'react'
-import { ImgWrap, Img, MediaLink, MediaContainer, MediaContent, MediaWrapper, VideoFrame, MediaRow, MediaRow2, Column1, Column2, TextWrapper, TopLine, Heading, Subtitle} from './MediaElements'
+import img from "../../images/media.svg";
+import {
+    Column1,
+    Column2,
+    Heading,
+    Img,
+    ImgWrap,
+    MediaContainer,
+    MediaContent,
+    MediaLink,
+    MediaRow,
+    MediaRow2,
+    MediaWrapper,
+    Subtitle,
+    TextWrapper,
+    TopLine,
+    VideoFrame,
+} from "./MediaElements";

-// export const homeObjOne = {
-//     id: 'about',
-//     lightBg: false,
-//     lightText: true,
-//     lightTextDesc: true,
-//     topLine: 'Premium Bank',
-//     headline: 'Unlimited transactions with zero fees',
-//     description:
-//       'Get access to our exclusive app that allows you to send unlimited transactions without getting charged any fees',
-//     buttonLabel: 'Get Started',
-//     imgStart: false,
-//     img: require('../../images/svg-1.svg').default,
-//     alt: 'Car',
-//     dark: true,
-//     primary: true,
-//     darkText: false
-//   };
-
-import img from '../../images/media.svg'
-
-
-
-const MediaSection = () => {
+export default function MediaSection() {
    return (
        <>
-            <MediaContainer lightBg={false} id='Media'>
+            <MediaContainer lightBg={false} id="Media">
                <MediaWrapper>
                    <MediaRow imgStart={true}>
                        <Column1>
                            <TextWrapper>
                                <TopLine>Media</TopLine>
-                                <Heading lightText={true}> Reviews, videos, podcasts, interviews</Heading>
-                                <Subtitle darkText={false}>Various resources connected to the book</Subtitle>                            
+                                <Heading lightText={true}>
+                                    {" "}
+                                    Reviews, videos, podcasts, interviews
+                                </Heading>
+                                <Subtitle darkText={false}>
+                                    Various resources connected to the book
+                                </Subtitle>
                            </TextWrapper>
                        </Column1>
                        <Column2>
                            <ImgWrap>
-                                <Img src={img} alt='Car'/>
+                                <Img src={img} alt="Car" />
                            </ImgWrap>
                        </Column2>
                    </MediaRow>
@@ -46,16 +45,29 @@ const MediaSection = () => {
                        <Column1>
                            Machine learning street talk podcast
                            <VideoFrame>
-                                <iframe width="100%" height="100%" 
+                                <iframe
+                                    width="100%"
+                                    height="100%"
                                    src="https://www.youtube.com/embed/sJXn4Cl4oww?si=Lm_hQPqj0RXy-75H&amp;controls=0"
-                                    title="YouTube video player" frameborder="2" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>
-                                </iframe>
+                                    title="YouTube video player"
+                                    frameBorder="2"
+                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                                    allowfullscreen
+                                ></iframe>
                            </VideoFrame>
                        </Column1>
                        <Column2>
                            Deeper insights podcast
                            <VideoFrame>
-                                <iframe width="100%" height="100%" src="https://www.youtube.com/embed/nQf4o9TDSHI?si=uMk66zLD7uhuSnQ1&amp;controls=0" title="YouTube video player" frameborder="2" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+                                <iframe
+                                    width="100%"
+                                    height="100%"
+                                    src="https://www.youtube.com/embed/nQf4o9TDSHI?si=uMk66zLD7uhuSnQ1&amp;controls=0"
+                                    title="YouTube video player"
+                                    frameBorder="2"
+                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                                    allowfullscreen
+                                ></iframe>
                            </VideoFrame>
                        </Column2>
                    </MediaRow>
@@ -64,10 +76,59 @@ const MediaSection = () => {
                            <TopLine>Reviews</TopLine>
                            <MediaContent>
                                <ul>
-                                    <li> Nature Machine Intelligence <MediaLink href="https://github.com/udlbook/udlbook/blob/main/public/NMI_Review.pdf"> review </MediaLink> by <MediaLink href="https://wang-axis.github.io/">Ge Wang</MediaLink></li>
-                                    <li> Amazon <MediaLink href="https://www.amazon.com/Understanding-Deep-Learning-Simon-Prince-ebook/product-reviews/B0BXKH8XY6/">reviews</MediaLink></li>          
-                                    <li>Goodreads <MediaLink href="https://www.goodreads.com/book/show/123239819-understanding-deep-learning?">reviews </MediaLink></li>
-                                    <li>Book <MediaLink href="https://medium.com/@vishalvignesh/udl-book-review-the-new-deep-learning-textbook-youll-want-to-finish-69e1557b018d">review</MediaLink> by Vishal V.</li>
+                                    <li>
+                                        {" "}
+                                        Nature Machine Intelligence{" "}
+                                        <MediaLink href="https://github.com/udlbook/udlbook/blob/main/public/NMI_Review.pdf">
+                                            {" "}
+                                            review{" "}
+                                        </MediaLink>{" "}
+                                        by{" "}
+                                        <MediaLink href="https://wang-axis.github.io/">
+                                            Ge Wang
+                                        </MediaLink>
+                                    </li>
+
+                                    <li>
+                                        {" "}
+                                        Amazon{" "}
+                                        <MediaLink href="https://www.amazon.com/Understanding-Deep-Learning-Simon-Prince-ebook/product-reviews/B0BXKH8XY6/">
+                                            reviews
+                                        </MediaLink>
+                                    </li>
+                                    <li>
+                                        Goodreads{" "}
+                                        <MediaLink href="https://www.goodreads.com/book/show/123239819-understanding-deep-learning?">
+                                            reviews{" "}
+                                        </MediaLink>
+                                    </li>
+                                    <li>
+                                        Book{" "}
+                                        <MediaLink href="https://medium.com/@vishalvignesh/udl-book-review-the-new-deep-learning-textbook-youll-want-to-finish-69e1557b018d">
+                                            review
+                                        </MediaLink>{" "}
+                                        by Vishal V.
+                                    </li>
+                                    <li>
+                                        {" "}
+                                        Amazon{" "}
+                                        <MediaLink href="https://www.amazon.com/Understanding-Deep-Learning-Simon-Prince-ebook/product-reviews/B0BXKH8XY6/">
+                                            reviews
+                                        </MediaLink>
+                                    </li>
+                                    <li>
+                                        Goodreads{" "}
+                                        <MediaLink href="https://www.goodreads.com/book/show/123239819-understanding-deep-learning?">
+                                            reviews{" "}
+                                        </MediaLink>
+                                    </li>
+                                    <li>
+                                        Book{" "}
+                                        <MediaLink href="https://medium.com/@vishalvignesh/udl-book-review-the-new-deep-learning-textbook-youll-want-to-finish-69e1557b018d">
+                                            review
+                                        </MediaLink>{" "}
+                                        by Vishal V.
+                                    </li>
                                </ul>
                            </MediaContent>
                        </Column1>
@@ -75,17 +136,24 @@ const MediaSection = () => {
                            <TopLine>Interviews</TopLine>
                            <MediaContent>
                                <ul>
-                                    <li>Borealis AI <MediaLink href="https://www.borealisai.com/news/understanding-deep-learning/">interview</MediaLink></li>
-                                    <li>Shepherd ML book <MediaLink href="https://shepherd.com/best-books/machine-learning-and-deep-neural-networks">recommendations</MediaLink></li>
+                                    <li>
+                                        Borealis AI{" "}
+                                        <MediaLink href="https://www.borealisai.com/news/understanding-deep-learning/">
+                                            interview
+                                        </MediaLink>
+                                    </li>
+                                    <li>
+                                        Shepherd ML book{" "}
+                                        <MediaLink href="https://shepherd.com/best-books/machine-learning-and-deep-neural-networks">
+                                            recommendations
+                                        </MediaLink>
+                                    </li>
                                </ul>
                            </MediaContent>
                        </Column2>
                    </MediaRow2>
-
                </MediaWrapper>
            </MediaContainer>
        </>
-    )
+    );
 }
-
-export default MediaSection
--- a/src/components/More/MoreElements.jsx
+++ b/src/components/More/MoreElements.jsx
@@ -1,68 +1,68 @@
 import styled from "styled-components";

-
 export const MoreContainer = styled.div`
    color: #fff;
    /* background: #f9f9f9; */
-    background: ${({lightBg}) => (lightBg ? '#57c6d1': '#010606')};
+    background: ${({ lightBg }) => (lightBg ? "#57c6d1" : "#010606")};

    @media screen and (max-width: 768px) {
        padding: 100px 0;
    }
-`
+`;

 export const MoreWrapper = styled.div`
-    display: grid ; 
+    display: grid;
    z-index: 1;
-    // height: 1050px ;  
-    width: 100% ; 
+    /* height: 1050px; */
+    width: 100%;
    max-width: 1100px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 24px;
    justify-content: center;
-`
+`;

 export const MoreRow = styled.div`
    display: grid;
    grid-auto-columns: minmax(auto, 1fr);
    align-items: center;
-    grid-template-areas: ${({imgStart}) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
+    grid-template-areas: ${({ imgStart }) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};

-    @media screen and (max-width: 768px){
-        grid-template-areas: ${({imgStart}) => (imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`)};
+    @media screen and (max-width: 768px) {
+        grid-template-areas: ${({ imgStart }) =>
+            imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`};
    }
-`
+`;

 export const MoreRow2 = styled.div`
    display: grid;
    grid-auto-columns: minmax(auto, 1fr);
    align-items: top;
-    grid-template-areas: ${({imgStart}) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};
+    grid-template-areas: ${({ imgStart }) => (imgStart ? `'col2 col1'` : `'col1 col2'`)};

-    @media screen and (max-width: 768px){
-        grid-template-areas: ${({imgStart}) => (imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`)};
+    @media screen and (max-width: 768px) {
+        grid-template-areas: ${({ imgStart }) =>
+            imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`};
    }
-`
-
+`;

 export const Column1 = styled.div`
    margin-bottom: 15px;
    padding: 0 15px;
    grid-area: col1;
-`
+`;

 export const Column2 = styled.div`
    margin-bottom: 15px;
    padding: 0 15px;
    grid-area: col2;
-`
+`;

 export const TextWrapper = styled.div`
-    max-width: 540px ; 
+    max-width: 540px;
    padding-top: 0;
    padding-bottom: 0;
-`
+`;

 export const TopLine = styled.p`
    color: #773c23;
@@ -72,91 +72,85 @@ export const TopLine = styled.p`
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 12px;
-    margin-top: 16px ; 
-`
-
-export const Heading= styled.h1` 
+    margin-top: 16px;
+`;

+export const Heading = styled.h1`
    margin-bottom: 24px;
    font-size: 48px;
    line-height: 1.1;
    font-weight: 600;
-    color: ${({lightText}) => (lightText ? '#f7f8fa' : '#010606')};
+    color: ${({ lightText }) => (lightText ? "#f7f8fa" : "#010606")};

-    @media screen and (max-width: 480px)
-    {
+    @media screen and (max-width: 480px) {
        font-size: 32px;
    }
-`
-
+`;

 export const Subtitle = styled.p`
    max-width: 440px;
    margin-bottom: 35px;
    font-size: 18px;
    line-height: 24px;
-    color: ${({darkText})=> (darkText ? '#010606' : '#fff')};
-
-`
+    color: ${({ darkText }) => (darkText ? "#010606" : "#fff")};
+`;

 export const BtnWrap = styled.div`
    display: flex;
    justify-content: flex-start;
-`
+`;

 export const ImgWrap = styled.div`
    max-width: 555px;
    height: 100%;
-`
-
-export const Img = styled.img`
-  width: 100%;
-  margin-top: 0;
-  margin-right: 0;
-  margin-left: 10px;
-  padding-right: 0;
 `;

+export const Img = styled.img`
+    width: 100%;
+    margin-top: 0;
+    margin-right: 0;
+    margin-left: 10px;
+    padding-right: 0;
+`;

 export const MoreContent = styled.div`
    z-index: 3;
-    width: 100% ; 
+    width: 100%;
    max-width: 1100px;
    position: static;
    padding: 8px 0px;
    margin: 10px 0px;
    display: flex;
    flex-direction: column;
-    align-items: left ; 
+    align-items: left;
    list-style-position: inside;
-`
+`;

 export const MoreOuterList = styled.ul`
-    // list-style:none;
+    /* list-style:none; */
    list-style-position: inside;
-    margin:0;
+    margin: 0;
+
    @media screen and (max-width: 768px) {
        font-size: 14px;
    }
-
-`
+`;

 export const MoreInnerList = styled.ul`
    list-style-position: inside;
+
    @media screen and (max-width: 768px) {
        font-size: 12px;
    }
-
-`
+`;

 export const MoreInnerP = styled.p`
    padding-left: 18px;
-    padding-bottom: 10px ; 
-    padding-top: 3px ; 
-    font-size:14px;
-    color: #fff
-`
-
+    padding-bottom: 10px;
+    padding-top: 3px;
+    font-size: 14px;
+    color: #fff;
+`;

 export const MoreLink = styled.a`
    text-decoration: none;
@@ -165,7 +159,7 @@ export const MoreLink = styled.a`
    margin: 0 2px;
    position: relative;

-    &:before{
+    &:before {
        position: absolute;
        margin: 0 auto;
        top: 100%;
@@ -173,15 +167,17 @@ export const MoreLink = styled.a`
        width: 100%;
        height: 2px;
        background-color: #555;
-        content: '';
-        opacity: .3;
+        content: "";
+        opacity: 0.3;
        -webkit-transform: scaleX(1);
-        transition-property: opacity, -webkit-transform;
-        transition-duration: .3s;
+        transition-property:
+            opacity,
+            -webkit-transform;
+        transition-duration: 0.3s;
    }

    &:hover:before {
        opacity: 1;
        -webkit-transform: scaleX(1.05);
-      }
-`
+    }
+`;
--- a/src/components/More/index.jsx
+++ b/src/components/More/index.jsx
@@ -1,63 +1,99 @@
-import React from 'react'
-import { ImgWrap, Img, MoreContainer, MoreLink, MoreRow2, MoreWrapper, MoreRow, Column1, Column2, TextWrapper, TopLine, Heading, Subtitle, MoreOuterList, MoreInnerList, MoreInnerP} from './MoreElements'
-import img from '../../images/more.svg'
+import img from "../../images/more.svg";
+import {
+    Column1,
+    Column2,
+    Heading,
+    Img,
+    ImgWrap,
+    MoreContainer,
+    MoreInnerList,
+    MoreInnerP,
+    MoreLink,
+    MoreOuterList,
+    MoreRow,
+    MoreRow2,
+    MoreWrapper,
+    Subtitle,
+    TextWrapper,
+    TopLine,
+} from "./MoreElements";

-
-const MoreSection = () => {
+export default function MoreSection() {
    return (
        <>
-            <MoreContainer lightBg={true} id='More'>
+            <MoreContainer lightBg={true} id="More">
                <MoreWrapper>
                    <MoreRow imgStart={false}>
                        <Column1>
                            <TextWrapper>
                                <TopLine>More</TopLine>
                                <Heading lightText={false}>Further reading</Heading>
-                                <Subtitle darkText={true}>Other articles, blogs, and books that I have written. Most in a similar style and using the same notation as Understanding Deep Learning. </Subtitle>
+                                <Subtitle darkText={true}>
+                                    Other articles, blogs, and books that I have written. Most in a
+                                    similar style and using the same notation as Understanding Deep
+                                    Learning.{" "}
+                                </Subtitle>
                            </TextWrapper>
                        </Column1>
                        <Column2>
                            <ImgWrap>
-                                <Img src={img} alt='Car'/>
+                                <Img src={img} alt="Car" />
                            </ImgWrap>
                        </Column2>
                    </MoreRow>
                    <MoreRow2>
-                     
                        <Column1>
                            <TopLine>Book</TopLine>
-                                <MoreOuterList>
-                                    <li>
-                                        <MoreLink href="http://computervisionmodels.com" target="_blank" rel="noreferrer">Computer vision: models, learning, and inference</MoreLink>
-                                        <MoreInnerP>
-                                            <MoreInnerList>
-                                                <li> 2012 book published with CUP </li>
-                                                <li> Focused on probabilistic models </li>
-                                                <li> Pre-"deep learning" </li>
-                                                <li> Lots of ML content</li>
-                                                <li> Individual chapters available below</li>
-                                            </MoreInnerList> 
-                                        </MoreInnerP>
-                                    </li>
-                                </MoreOuterList>
+                            <MoreOuterList>
+                                <li>
+                                    <MoreLink
+                                        href="http://computervisionmodels.com"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Computer vision: models, learning, and inference
+                                    </MoreLink>
+                                    <MoreInnerP>
+                                        <MoreInnerList>
+                                            <li> 2012 book published with CUP </li>
+                                            <li> Focused on probabilistic models </li>
+                                            <li> Pre-"deep learning" </li>
+                                            <li> Lots of ML content </li>
+                                            <li> Individual chapters available below </li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                            </MoreOuterList>

                            <TopLine>Transformers & LLMs</TopLine>
                            <MoreOuterList>
                                <li>
-                                    <MoreLink href="https://www.borealisai.com/research-blogs/a-high-level-overview-of-large-language-models/" target="_blank"  rel="noreferrer">Intro to LLMs</MoreLink>
+                                    <MoreLink
+                                        href="https://www.borealisai.com/research-blogs/a-high-level-overview-of-large-language-models/"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Intro to LLMs
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
-                                            <li> What is an LLM?</li>
-                                            <li> Pretraining</li>
-                                            <li> Instruction fine-tuning</li>
-                                            <li> Reinforcement learning from human feedback</li>
-                                            <li> Notable LLMs</li>
-                                            <li> LLMs without training from scratch</li>
+                                            <li> What is an LLM? </li>
+                                            <li> Pretraining </li>
+                                            <li> Instruction fine-tuning </li>
+                                            <li>Reinforcement learning from human feedback </li>
+                                            <li> Notable LLMs </li>
+                                            <li> LLMs without training from scratch </li>
                                        </MoreInnerList>
                                    </MoreInnerP>
                                </li>
                                <li>
-                                    <MoreLink href="https://www.borealisai.com/en/blog/tutorial-14-transformers-i-introduction/" target="_blank"  rel="noreferrer">Transformers I</MoreLink>
+                                    <MoreLink
+                                        href="https://www.borealisai.com/en/blog/tutorial-14-transformers-i-introduction/"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Transformers I
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
                                            <li> Dot-Product self-attention </li>
@@ -72,7 +108,13 @@ const MoreSection = () => {
                                    </MoreInnerP>
                                </li>
                                <li>
-                                    <MoreLink href="https://www.borealisai.com/en/blog/tutorial-16-transformers-ii-extensions/" target="_blank"  rel="noreferrer">Transformers II</MoreLink>
+                                    <MoreLink
+                                        href="https://www.borealisai.com/en/blog/tutorial-16-transformers-ii-extensions/"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Transformers II
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
                                            <li> Sinusoidal position embeddings </li>
@@ -93,7 +135,13 @@ const MoreSection = () => {
                                    </MoreInnerP>
                                </li>
                                <li>
-                                    <MoreLink href="https://www.borealisai.com/en/blog/tutorial-17-transformers-iii-training/" target="_blank"  rel="noreferrer">Transformers III</MoreLink>
+                                    <MoreLink
+                                        href="https://www.borealisai.com/en/blog/tutorial-17-transformers-iii-training/"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Transformers III
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
                                            <li> Tricks for training transformers </li>
@@ -101,12 +149,21 @@ const MoreSection = () => {
                                            <li> Removing layer normalization</li>
                                            <li> Balancing residual dependencies </li>
                                            <li> Reducing optimizer variance </li>
-                                            <li> How to train deeper transformers on small datasets </li>
+                                            <li>
+                                                {" "}
+                                                How to train deeper transformers on small datasets{" "}
+                                            </li>
                                        </MoreInnerList>
                                    </MoreInnerP>
                                </li>
                                <li>
-                                    <MoreLink href="https://www.borealisai.com/research-blogs/training-and-fine-tuning-large-language-models/" target="_blank"  rel="noreferrer">Training and fine-tuning LLMs</MoreLink>
+                                    <MoreLink
+                                        href="https://www.borealisai.com/research-blogs/training-and-fine-tuning-large-language-models/"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Training and fine-tuning LLMs
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
                                            <li> Large language models </li>
@@ -118,7 +175,13 @@ const MoreSection = () => {
                                    </MoreInnerP>
                                </li>
                                <li>
-                                    <MoreLink href="https://www.borealisai.com/research-blogs/speeding-up-inference-in-transformers/" target="_blank"  rel="noreferrer">Speeding up inference in LLMs</MoreLink>
+                                    <MoreLink
+                                        href="https://www.borealisai.com/research-blogs/speeding-up-inference-in-transformers/"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Speeding up inference in LLMs
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
                                            <li> Problems with transformers</li>
@@ -135,7 +198,13 @@ const MoreSection = () => {
                            <TopLine>Math for machine learning</TopLine>
                            <MoreOuterList>
                                <li>
-                                    <MoreLink href="https://drive.google.com/file/d/1j2v2n6STPnblOCZ1_GBcVAZrsYkjPYwR/view?usp=sharing" target="_blank"  rel="noreferrer">Linear algebra</MoreLink>
+                                    <MoreLink
+                                        href="https://drive.google.com/file/d/1j2v2n6STPnblOCZ1_GBcVAZrsYkjPYwR/view?usp=sharing"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Linear algebra
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
                                            <li> Vectors and matrices </li>
@@ -154,7 +223,13 @@ const MoreSection = () => {
                                    </MoreInnerP>
                                </li>
                                <li>
-                                    <MoreLink href="https://drive.google.com/file/d/1cmxXneW122-hcfmMRjEE-n5C9T2YvuQX/view?usp=sharing" target="_blank"  rel="noreferrer">Introduction to probability</MoreLink>
+                                    <MoreLink
+                                        href="https://drive.google.com/file/d/1cmxXneW122-hcfmMRjEE-n5C9T2YvuQX/view?usp=sharing"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Introduction to probability
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
                                            <li> Random variables </li>
@@ -168,7 +243,13 @@ const MoreSection = () => {
                                    </MoreInnerP>
                                </li>
                                <li>
-                                    <MoreLink href="https://drive.google.com/file/d/1GI3eZNB1CjTqYHLyuRhCV215rwqANVOx/view?usp=sharing" target="_blank"  rel="noreferrer">Probability distributions</MoreLink>
+                                    <MoreLink
+                                        href="https://drive.google.com/file/d/1GI3eZNB1CjTqYHLyuRhCV215rwqANVOx/view?usp=sharing"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Probability distributions
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
                                            <li> Bernouilli distribution </li>
@@ -184,7 +265,13 @@ const MoreSection = () => {
                                    </MoreInnerP>
                                </li>
                                <li>
-                                    <MoreLink href="https://drive.google.com/file/d/1DZ4rCmC7AZ8PFc51PiMUIkBO-xqKT_CG/view?usp=sharing" target="_blank"  rel="noreferrer">Fitting probability distributions</MoreLink>
+                                    <MoreLink
+                                        href="https://drive.google.com/file/d/1DZ4rCmC7AZ8PFc51PiMUIkBO-xqKT_CG/view?usp=sharing"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Fitting probability distributions
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
                                            <li> Maximum likelihood </li>
@@ -196,7 +283,13 @@ const MoreSection = () => {
                                    </MoreInnerP>
                                </li>
                                <li>
-                                    <MoreLink href="https://drive.google.com/file/d/1CTfmsN-HJWZBRj8lY0ZhgHEbPCmYXWnA/view?usp=sharing" target="_blank"  rel="noreferrer">The normal distribution</MoreLink>
+                                    <MoreLink
+                                        href="https://drive.google.com/file/d/1CTfmsN-HJWZBRj8lY0ZhgHEbPCmYXWnA/view?usp=sharing"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        The normal distribution
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
                                            <li> Types of covariance matrix </li>
@@ -214,7 +307,13 @@ const MoreSection = () => {
                            <TopLine>Optimization</TopLine>
                            <MoreOuterList>
                                <li>
-                                    <MoreLink href="https://drive.google.com/file/d/1IoOSfJ0ku89aVyM9qygPl4MVnAhMEbAZ/view?usp=sharing" target="_blank"  rel="noreferrer">Gradient-based optimization</MoreLink>
+                                    <MoreLink
+                                        href="https://drive.google.com/file/d/1IoOSfJ0ku89aVyM9qygPl4MVnAhMEbAZ/view?usp=sharing"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Gradient-based optimization
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
                                            <li> Convexity </li>
@@ -227,7 +326,13 @@ const MoreSection = () => {
                                    </MoreInnerP>
                                </li>
                                <li>
-                                    <MoreLink href="https://www.borealisai.com/en/blog/tutorial-8-bayesian-optimization/" target="_blank"  rel="noreferrer">Bayesian optimization</MoreLink>
+                                    <MoreLink
+                                        href="https://www.borealisai.com/en/blog/tutorial-8-bayesian-optimization/"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Bayesian optimization
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
                                            <li> Gaussian processes </li>
@@ -235,15 +340,21 @@ const MoreSection = () => {
                                            <li> Incorporating noise</li>
                                            <li> Kernel choice </li>
                                            <li> Learning GP parameters </li>
-                                            <li> Tips, tricks, and limitations  </li>
-                                            <li> Beta-Bernoulli bandit  </li>
+                                            <li> Tips, tricks, and limitations </li>
+                                            <li> Beta-Bernoulli bandit </li>
                                            <li> Random forests for BO </li>
                                            <li> Tree-Parzen estimators </li>
                                        </MoreInnerList>
                                    </MoreInnerP>
                                </li>
                                <li>
-                                    <MoreLink href="https://www.borealisai.com/en/blog/tutorial-9-sat-solvers-i-introduction-and-applications/" target="_blank"  rel="noreferrer">SAT Solvers I</MoreLink>
+                                    <MoreLink
+                                        href="https://www.borealisai.com/en/blog/tutorial-9-sat-solvers-i-introduction-and-applications/"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        SAT Solvers I
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
                                            <li> Boolean logic and satisfiability </li>
@@ -258,7 +369,13 @@ const MoreSection = () => {
                                    </MoreInnerP>
                                </li>
                                <li>
-                                    <MoreLink href="https://www.borealisai.com/en/blog/tutorial-10-sat-solvers-ii-algorithms/" target="_blank"  rel="noreferrer">SAT Solvers II</MoreLink>
+                                    <MoreLink
+                                        href="https://www.borealisai.com/en/blog/tutorial-10-sat-solvers-ii-algorithms/"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        SAT Solvers II
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
                                            <li> Conditioning </li>
@@ -272,7 +389,13 @@ const MoreSection = () => {
                                    </MoreInnerP>
                                </li>
                                <li>
-                                    <MoreLink href="https://www.borealisai.com/en/blog/tutorial-11-sat-solvers-iii-factor-graphs-and-smt-solvers/" target="_blank"  rel="noreferrer">SAT Solvers III</MoreLink>
+                                    <MoreLink
+                                        href="https://www.borealisai.com/en/blog/tutorial-11-sat-solvers-iii-factor-graphs-and-smt-solvers/"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        SAT Solvers III
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
                                            <li> Satisfiability vs. problem size </li>
@@ -285,11 +408,91 @@ const MoreSection = () => {
                                    </MoreInnerP>
                                </li>
                            </MoreOuterList>
+                            {/* <li>
+                                <MoreLink
+                                    href="https://www.borealisai.com/en/blog/tutorial-11-sat-solvers-iii-factor-graphs-and-smt-solvers/"
+                                    target="_blank"
+                                    rel="noreferrer"
+                                >
+                                    SAT Solvers III
+                                </MoreLink>
+                                <MoreInnerP>
+                                    <MoreInnerList>
+                                        <li> Satisfiability vs. problem size </li>
+                                        <li> Factor graph representation </li>
+                                        <li> Max product / sum product for SAT </li>
+                                        <li> Survey propagation </li>
+                                        <li> SAT with non-binary variables </li>
+                                        <li> SMT solvers </li>
+                                    </MoreInnerList>
+                                </MoreInnerP>
+                            </li>
+
+                            <TopLine>Computer vision</TopLine>
+                            <MoreOuterList>
+                                <li>
+                                    <MoreLink
+                                        href="https://drive.google.com/file/d/1r3V1GC5grhPF2pD91izuE0hTrTUEpQ9I/view?usp=sharing"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Image Processing
+                                    </MoreLink>
+                                    <MoreInnerP>
+                                        <MoreInnerList>
+                                            <li> Whitening </li>
+                                            <li> Histogram equalization </li>
+                                            <li> Filtering </li>
+                                            <li> Edges and corners </li>
+                                            <li> Dimensionality reduction </li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                                <li>
+                                    <MoreLink
+                                        href="https://drive.google.com/file/d/1dbMBE13MWcd84dEGjYeWsC6eXouoC0xn/view?usp=sharing"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Pinhole camera
+                                    </MoreLink>
+                                    <MoreInnerP>
+                                        <MoreInnerList>
+                                            <li> Pinhole camera model </li>
+                                            <li> Radial distortion </li>
+                                            <li> Homogeneous coordinates </li>
+                                            <li> Learning extrinsic parameters </li>
+                                            <li> Learning intrinsic parameters </li>
+                                            <li> Inferring three-dimensional world points </li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                                <li>
+                                    <MoreLink
+                                        href="https://drive.google.com/file/d/1UArrb1ovqvZHbv90MufkW372r__ZZACQ/view?usp=sharing"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Geometric transformations
+                                    </MoreLink>
+                                    <MoreInnerP>
+                                        <MoreInnerList>
+                                            <li>
+                                                {" "}
+                                                Euclidean, similarity, affine, projective
+                                                transformations{" "}
+                                            </li> */}

                            <TopLine>Temporal models</TopLine>
                            <MoreOuterList>
                                <li>
-                                    <MoreLink href="https://drive.google.com/file/d/1rrzGNyZDjXQ3_9ZqCGDmRMM3GYtHSBvj/view?usp=sharing" target="_blank"  rel="noreferrer">Temporal models</MoreLink>
+                                    <MoreLink
+                                        href="https://drive.google.com/file/d/1rrzGNyZDjXQ3_9ZqCGDmRMM3GYtHSBvj/view?usp=sharing"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Temporal models
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
                                            <li> Kalman filter </li>
@@ -303,37 +506,59 @@ const MoreSection = () => {
                            </MoreOuterList>

                            <TopLine>Computer vision</TopLine>
-                                <MoreOuterList>
-                                    <li>
-                                        <MoreLink href="https://drive.google.com/file/d/1r3V1GC5grhPF2pD91izuE0hTrTUEpQ9I/view?usp=sharing" target="_blank" rel="noreferrer">Image Processing</MoreLink>
-                                        <MoreInnerP>
-                                            <MoreInnerList>
-                                                <li> Whitening </li>
-                                                <li> Histogram equalization </li>
-                                                <li> Filtering </li>
-                                                <li> Edges and corners </li>
-                                                <li> Dimensionality reduction </li>
-                                            </MoreInnerList> 
-                                        </MoreInnerP>
-                                    </li>
-                                    <li>
-                                        <MoreLink href="https://drive.google.com/file/d/1dbMBE13MWcd84dEGjYeWsC6eXouoC0xn/view?usp=sharing" target="_blank" rel="noreferrer">Pinhole camera</MoreLink>
-                                        <MoreInnerP>
-                                            <MoreInnerList> 
-                                                <li> Pinhole camera model </li>
-                                                <li> Radial distortion </li>
-                                                <li> Homogeneous coordinates </li>
-                                                <li> Learning extrinsic parameters </li>
-                                                <li> Learning intrinsic parameters </li>
-                                                <li> Inferring three-dimensional world points </li>
-                                            </MoreInnerList>
-                                        </MoreInnerP>
-                                    </li>
+                            <MoreOuterList>
                                <li>
-                                    <MoreLink href="https://drive.google.com/file/d/1UArrb1ovqvZHbv90MufkW372r__ZZACQ/view?usp=sharing" target="_blank" rel="noreferrer">Geometric transformations</MoreLink>
+                                    <MoreLink
+                                        href="https://drive.google.com/file/d/1r3V1GC5grhPF2pD91izuE0hTrTUEpQ9I/view?usp=sharing"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Image Processing
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
-                                            <li> Euclidean, similarity, affine, projective transformations </li>
+                                            <li> Whitening </li>
+                                            <li> Histogram equalization </li>
+                                            <li> Filtering </li>
+                                            <li> Edges and corners </li>
+                                            <li> Dimensionality reduction </li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                                <li>
+                                    <MoreLink
+                                        href="https://drive.google.com/file/d/1dbMBE13MWcd84dEGjYeWsC6eXouoC0xn/view?usp=sharing"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Pinhole camera
+                                    </MoreLink>
+                                    <MoreInnerP>
+                                        <MoreInnerList>
+                                            <li> Pinhole camera model </li>
+                                            <li> Radial distortion </li>
+                                            <li> Homogeneous coordinates </li>
+                                            <li> Learning extrinsic parameters </li>
+                                            <li> Learning intrinsic parameters </li>
+                                            <li> Inferring three-dimensional world points </li>
+                                        </MoreInnerList>
+                                    </MoreInnerP>
+                                </li>
+                                <li>
+                                    <MoreLink
+                                        href="https://drive.google.com/file/d/1UArrb1ovqvZHbv90MufkW372r__ZZACQ/view?usp=sharing"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Geometric transformations
+                                    </MoreLink>
+                                    <MoreInnerP>
+                                        <MoreInnerList>
+                                            <li>
+                                                {" "}
+                                                Euclidean, similarity, affine, projective
+                                                transformations{" "}
+                                            </li>
                                            <li> Fitting transformation models </li>
                                            <li> Inference in transformation models </li>
                                            <li> Three geometric problems for planes </li>
@@ -343,7 +568,13 @@ const MoreSection = () => {
                                    </MoreInnerP>
                                </li>
                                <li>
-                                    <MoreLink href="https://drive.google.com/file/d/1RqUoc7kvK8vqZF1NVuw7bIex9v4_QlSx/view?usp=sharing" target="_blank" rel="noreferrer">Multiple cameras</MoreLink>
+                                    <MoreLink
+                                        href="https://drive.google.com/file/d/1RqUoc7kvK8vqZF1NVuw7bIex9v4_QlSx/view?usp=sharing"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Multiple cameras
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
                                            <li> Two view geometry </li>
@@ -360,7 +591,13 @@ const MoreSection = () => {
                            <TopLine>Reinforcement learning</TopLine>
                            <MoreOuterList>
                                <li>
-                                    <MoreLink href="https://arxiv.org/abs/2307.05979" target="_blank"  rel="noreferrer">Transformers in RL</MoreLink>
+                                    <MoreLink
+                                        href="https://arxiv.org/abs/2307.05979"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Transformers in RL
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
                                            <li> Challenges in RL</li>
@@ -384,7 +621,13 @@ const MoreSection = () => {
                            <TopLine>AI Theory</TopLine>
                            <MoreOuterList>
                                <li>
-                                    <MoreLink href="https://www.borealisai.com/research-blogs/gradient-flow/" target="_blank"  rel="noreferrer">Gradient flow</MoreLink>
+                                    <MoreLink
+                                        href="https://www.borealisai.com/research-blogs/gradient-flow/"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Gradient flow
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
                                            <li> Gradient flow </li>
@@ -396,7 +639,13 @@ const MoreSection = () => {
                                    </MoreInnerP>
                                </li>
                                <li>
-                                <MoreLink href="https://www.borealisai.com/research-blogs/the-neural-tangent-kernel/" target="_blank"  rel="noreferrer">Neural tangent kernel</MoreLink>
+                                    <MoreLink
+                                        href="https://www.borealisai.com/research-blogs/the-neural-tangent-kernel/"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Neural tangent kernel
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
                                            <li> Infinite width neural networks </li>
@@ -409,7 +658,28 @@ const MoreSection = () => {
                                    </MoreInnerP>
                                </li>
                                <li>
-                                <MoreLink href="https://www.borealisai.com/research-blogs/neural-tangent-kernel-applications/" target="_blank"  rel="noreferrer">NTK applications</MoreLink>
+                                    {/*
+                                    <MoreLink
+                                        href="https://drive.google.com/file/d/1rrzGNyZDjXQ3_9ZqCGDmRMM3GYtHSBvj/view?usp=sharing"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Temporal models
+                                    </MoreLink>
+                                    <MoreInnerP>
+                                        <MoreInnerList>
+                                            <li> Kalman filter </li>
+                                            <li> Smoothing </li>
+                                            <li> Extended Kalman filter </li>
+                                            <li> Unscented Kalman filter </li>
+                                            <li> Particle filtering </li>*/}
+                                    <MoreLink
+                                        href="https://www.borealisai.com/research-blogs/neural-tangent-kernel-applications/"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        NTK applications
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
                                            <li> Trainability </li>
@@ -423,12 +693,16 @@ const MoreSection = () => {
                                </li>
                            </MoreOuterList>

-                 
-
                            <TopLine> Unsupervised learning</TopLine>
                            <MoreOuterList>
                                <li>
-                                    <MoreLink href="https://drive.google.com/file/d/1BrPHxAuyz28hhz_FtbO0A1cWYdMs2_h8/view?usp=sharing" target="_blank"  rel="noreferrer">Modeling complex data densities</MoreLink>
+                                    <MoreLink
+                                        href="https://drive.google.com/file/d/1BrPHxAuyz28hhz_FtbO0A1cWYdMs2_h8/view?usp=sharing"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Modeling complex data densities
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
                                            <li> Hidden variables </li>
@@ -442,7 +716,13 @@ const MoreSection = () => {
                                </li>

                                <li>
-                                    <MoreLink href="https://www.borealisai.com/en/blog/tutorial-5-variational-auto-encoders/" target="_blank"  rel="noreferrer">Variational autoencoders</MoreLink>
+                                    <MoreLink
+                                        href="https://www.borealisai.com/en/blog/tutorial-5-variational-auto-encoders/"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Variational autoencoders
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
                                            <li> Non-linear latent variable models </li>
@@ -455,17 +735,23 @@ const MoreSection = () => {
                                    </MoreInnerP>
                                </li>
                                <li>
-                                    <MoreLink href="https://arxiv.org/abs/1908.09257" target="_blank"  rel="noreferrer">Normalizing flows: introduction and review</MoreLink>
+                                    <MoreLink
+                                        href="https://arxiv.org/abs/1908.09257"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Normalizing flows: introduction and review
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
-                                        <li> Normalizing flows </li>
-                                        <li> Elementwise and linear flows </li>
-                                        <li> Planar and radial flows </li>
-                                        <li> Coupling and auto-regressive flows </li>
-                                        <li> Coupling functions </li>
-                                        <li> Residual flows </li>
-                                        <li> Infinitesimal (continuous) flows </li>
-                                        <li> Datasets and performance </li>
+                                            <li> Normalizing flows </li>
+                                            <li> Elementwise and linear flows </li>
+                                            <li> Planar and radial flows </li>
+                                            <li> Coupling and auto-regressive flows </li>
+                                            <li> Coupling functions </li>
+                                            <li> Residual flows </li>
+                                            <li> Infinitesimal (continuous) flows </li>
+                                            <li> Datasets and performance </li>
                                        </MoreInnerList>
                                    </MoreInnerP>
                                </li>
@@ -473,7 +759,13 @@ const MoreSection = () => {
                            <TopLine>Graphical Models</TopLine>
                            <MoreOuterList>
                                <li>
-                                    <MoreLink href="https://drive.google.com/file/d/1ghgeRmeZMyzNHcuzVwS4vRP6BXi3npVO/view?usp=sharing" target="_blank"  rel="noreferrer">Graphical models</MoreLink>
+                                    <MoreLink
+                                        href="https://drive.google.com/file/d/1ghgeRmeZMyzNHcuzVwS4vRP6BXi3npVO/view?usp=sharing"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Graphical models
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
                                            <li> Conditional independence </li>
@@ -486,7 +778,13 @@ const MoreSection = () => {
                                    </MoreInnerP>
                                </li>
                                <li>
-                                    <MoreLink href="https://drive.google.com/file/d/1WAMc3wtZoPv5wRkdF-D0SShVYF6Net84/view?usp=sharing" target="_blank"  rel="noreferrer">Models for chains and trees</MoreLink>
+                                    <MoreLink
+                                        href="https://drive.google.com/file/d/1WAMc3wtZoPv5wRkdF-D0SShVYF6Net84/view?usp=sharing"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Models for chains and trees
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
                                            <li> Hidden Markov models </li>
@@ -500,7 +798,13 @@ const MoreSection = () => {
                                    </MoreInnerP>
                                </li>
                                <li>
-                                    <MoreLink href="https://drive.google.com/file/d/1qqS9OfA1z7t12M45UaBr4CSCj1jwzcwz/view?usp=sharing" target="_blank"  rel="noreferrer">Models for grids</MoreLink>
+                                    <MoreLink
+                                        href="https://drive.google.com/file/d/1qqS9OfA1z7t12M45UaBr4CSCj1jwzcwz/view?usp=sharing"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Models for grids
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
                                            <li> Markov random fields </li>
@@ -517,7 +821,13 @@ const MoreSection = () => {
                            <TopLine>Machine learning</TopLine>
                            <MoreOuterList>
                                <li>
-                                    <MoreLink href="https://drive.google.com/file/d/1ArWWi-qbzK2ih6KpOeIF8wX5g3S4J5DY/view?usp=sharing" target="_blank"  rel="noreferrer">Learning and inference</MoreLink>
+                                    <MoreLink
+                                        href="https://drive.google.com/file/d/1ArWWi-qbzK2ih6KpOeIF8wX5g3S4J5DY/view?usp=sharing"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Learning and inference
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
                                            <li> Discriminative models </li>
@@ -528,7 +838,13 @@ const MoreSection = () => {
                                    </MoreInnerP>
                                </li>
                                <li>
-                                    <MoreLink href="https://drive.google.com/file/d/1QZX5jm4xN8rhpvdjRsFP5Ybw1EXSNGaL/view?usp=sharing" target="_blank"  rel="noreferrer">Regression models</MoreLink>
+                                    <MoreLink
+                                        href="https://drive.google.com/file/d/1QZX5jm4xN8rhpvdjRsFP5Ybw1EXSNGaL/view?usp=sharing"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Regression models
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
                                            <li> Linear regression </li>
@@ -543,7 +859,13 @@ const MoreSection = () => {
                                    </MoreInnerP>
                                </li>
                                <li>
-                                    <MoreLink href="https://drive.google.com/file/d/1-_f4Yfm8iBWcaZ2Gyjw6O0eZiODipmSV/view?usp=sharing" target="_blank"  rel="noreferrer">Classification models</MoreLink>
+                                    <MoreLink
+                                        href="https://drive.google.com/file/d/1-_f4Yfm8iBWcaZ2Gyjw6O0eZiODipmSV/view?usp=sharing"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Classification models
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
                                            <li> Logistic regression </li>
@@ -557,7 +879,13 @@ const MoreSection = () => {
                                    </MoreInnerP>
                                </li>
                                <li>
-                                    <MoreLink href="https://www.borealisai.com/en/blog/tutorial-2-few-shot-learning-and-meta-learning-i/" target="_blank"  rel="noreferrer">Few-shot learning and meta-learning I</MoreLink>
+                                    <MoreLink
+                                        href="https://www.borealisai.com/en/blog/tutorial-2-few-shot-learning-and-meta-learning-i/"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Few-shot learning and meta-learning I
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
                                            <li> Meta-learning framework </li>
@@ -569,7 +897,13 @@ const MoreSection = () => {
                                    </MoreInnerP>
                                </li>
                                <li>
-                                    <MoreLink href="https://www.borealisai.com/en/blog/tutorial-3-few-shot-learning-and-meta-learning-ii/" target="_blank"  rel="noreferrer">Few-shot learning and meta-learning II</MoreLink>
+                                    <MoreLink
+                                        href="https://www.borealisai.com/en/blog/tutorial-3-few-shot-learning-and-meta-learning-ii/"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Few-shot learning and meta-learning II
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
                                            <li> MAML & Reptile </li>
@@ -582,12 +916,18 @@ const MoreSection = () => {
                                        </MoreInnerList>
                                    </MoreInnerP>
                                </li>
-                           </MoreOuterList>
+                            </MoreOuterList>

-                           <TopLine>Natural language processing</TopLine>
-                           <MoreOuterList>
+                            <TopLine>Natural language processing</TopLine>
+                            <MoreOuterList>
                                <li>
-                                    <MoreLink href="https://www.borealisai.com/en/blog/tutorial-6-neural-natural-language-generation-decoding-algorithms/" target="_blank"  rel="noreferrer">Neural natural language generation I</MoreLink>
+                                    <MoreLink
+                                        href="https://www.borealisai.com/en/blog/tutorial-6-neural-natural-language-generation-decoding-algorithms/"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Neural natural language generation I
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
                                            <li> Encoder-decoder architecture </li>
@@ -601,7 +941,13 @@ const MoreSection = () => {
                                    </MoreInnerP>
                                </li>
                                <li>
-                                    <MoreLink href="https://www.borealisai.com/en/blog/tutorial-7-neural-natural-language-generation-sequence-level-training/" target="_blank"  rel="noreferrer">Neural natural language generation II</MoreLink>
+                                    <MoreLink
+                                        href="https://www.borealisai.com/en/blog/tutorial-7-neural-natural-language-generation-sequence-level-training/"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Neural natural language generation II
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
                                            <li> Fine-tuning with reinforcement learning </li>
@@ -616,7 +962,13 @@ const MoreSection = () => {
                                    </MoreInnerP>
                                </li>
                                <li>
-                                    <MoreLink href="https://www.borealisai.com/en/blog/tutorial-15-parsing-i-context-free-grammars-and-cyk-algorithm/" target="_blank"  rel="noreferrer">Parsing I</MoreLink>
+                                    <MoreLink
+                                        href="https://www.borealisai.com/en/blog/tutorial-15-parsing-i-context-free-grammars-and-cyk-algorithm/"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Parsing I
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
                                            <li> Parse trees </li>
@@ -628,7 +980,13 @@ const MoreSection = () => {
                                    </MoreInnerP>
                                </li>
                                <li>
-                                    <MoreLink href="https://www.borealisai.com/en/blog/tutorial-18-parsing-ii-wcfgs-inside-algorithm-and-weighted-parsing/" target="_blank"  rel="noreferrer">Parsing II</MoreLink>
+                                    <MoreLink
+                                        href="https://www.borealisai.com/en/blog/tutorial-18-parsing-ii-wcfgs-inside-algorithm-and-weighted-parsing/"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Parsing II
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
                                            <li> Weighted context-free grammars </li>
@@ -640,7 +998,13 @@ const MoreSection = () => {
                                    </MoreInnerP>
                                </li>
                                <li>
-                                    <MoreLink href="https://www.borealisai.com/en/blog/tutorial-19-parsing-iii-pcfgs-and-inside-outside-algorithm/" target="_blank"  rel="noreferrer">Parsing III</MoreLink>
+                                    <MoreLink
+                                        href="https://www.borealisai.com/en/blog/tutorial-19-parsing-iii-pcfgs-and-inside-outside-algorithm/"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Parsing III
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
                                            <li> Probabilistic context-free grammars </li>
@@ -654,7 +1018,13 @@ const MoreSection = () => {
                                    </MoreInnerP>
                                </li>
                                <li>
-                                    <MoreLink href="https://www.borealisai.com/en/blog/understanding-xlnet/" target="_blank"  rel="noreferrer">XLNet</MoreLink>
+                                    <MoreLink
+                                        href="https://www.borealisai.com/en/blog/understanding-xlnet/"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        XLNet
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
                                            <li> Language modeling </li>
@@ -667,12 +1037,16 @@ const MoreSection = () => {
                                </li>
                            </MoreOuterList>

-       
-                           
-                           <TopLine>Responsible AI</TopLine>
-                           <MoreOuterList>
+                            <TopLine>Responsible AI</TopLine>
+                            <MoreOuterList>
                                <li>
-                                    <MoreLink href="https://www.borealisai.com/en/blog/tutorial1-bias-and-fairness-ai/" target="_blank"  rel="noreferrer">Bias and fairness</MoreLink>
+                                    <MoreLink
+                                        href="https://www.borealisai.com/en/blog/tutorial1-bias-and-fairness-ai/"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Bias and fairness
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
                                            <li> Sources of bias</li>
@@ -685,7 +1059,13 @@ const MoreSection = () => {
                                    </MoreInnerP>
                                </li>
                                <li>
-                                    <MoreLink href="https://www.borealisai.com/research-blogs/explainability-i-local-post-hoc-explanations/" target="_blank"  rel="noreferrer">Explainability I</MoreLink>
+                                    <MoreLink
+                                        href="https://www.borealisai.com/research-blogs/explainability-i-local-post-hoc-explanations/"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Explainability I
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
                                            <li> Taxonomy of XAI approaches</li>
@@ -698,7 +1078,13 @@ const MoreSection = () => {
                                    </MoreInnerP>
                                </li>
                                <li>
-                                    <MoreLink href="https://www.borealisai.com/research-blogs/explainability-ii-global-explanations-proxy-models-and-interpretable-models/" target="_blank"  rel="noreferrer">Explainability II</MoreLink>
+                                    <MoreLink
+                                        href="https://www.borealisai.com/research-blogs/explainability-ii-global-explanations-proxy-models-and-interpretable-models/"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Explainability II
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
                                            <li> Global feature importance</li>
@@ -712,7 +1098,13 @@ const MoreSection = () => {
                                    </MoreInnerP>
                                </li>
                                <li>
-                                    <MoreLink href="https://www.borealisai.com/en/blog/tutorial-12-differential-privacy-i-introduction/" target="_blank"  rel="noreferrer">Differential privacy I</MoreLink>
+                                    <MoreLink
+                                        href="https://www.borealisai.com/en/blog/tutorial-12-differential-privacy-i-introduction/"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Differential privacy I
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
                                            <li> Early approaches to privacy </li>
@@ -726,7 +1118,13 @@ const MoreSection = () => {
                                    </MoreInnerP>
                                </li>
                                <li>
-                                    <MoreLink href="https://www.borealisai.com/en/blog/tutorial-13-differential-privacy-ii-machine-learning-and-data-generation/" target="_blank"  rel="noreferrer">Differential privacy II</MoreLink>
+                                    <MoreLink
+                                        href="https://www.borealisai.com/en/blog/tutorial-13-differential-privacy-ii-machine-learning-and-data-generation/"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        Differential privacy II
+                                    </MoreLink>
                                    <MoreInnerP>
                                        <MoreInnerList>
                                            <li> Differential privacy and matchine learning</li>
@@ -738,15 +1136,11 @@ const MoreSection = () => {
                                        </MoreInnerList>
                                    </MoreInnerP>
                                </li>
-                           </MoreOuterList>
+                            </MoreOuterList>
                        </Column2>
                    </MoreRow2>
                </MoreWrapper>
            </MoreContainer>
        </>
-    )
+    );
 }
-
-export default MoreSection
-
-
--- a/src/components/NavBar/NavbarElements.jsx
+++ b/src/components/NavBar/NavbarElements.jsx
@@ -1,119 +1,119 @@
-import { Link as LinkS } from 'react-scroll';
-import { Link as LinkR } from 'react-router-dom';
-import styled from 'styled-components';
+import { Link as LinkR } from "react-router-dom";
+import { Link as LinkS } from "react-scroll";
+import styled from "styled-components";

 export const Nav = styled.nav`
-  background: ${({ scrollNav }) => (scrollNav ? '#000' : 'transparent')};
-  height: 100px;
-  margin-top: -100px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 1rem;
-  position: sticky;
-  top: 0;
-  z-index: 10;
+    background: ${({ scrollNav }) => (scrollNav ? "#000" : "transparent")};
+    height: 100px;
+    margin-top: -100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1rem;
+    position: sticky;
+    top: 0;
+    z-index: 10;

-  @media screen and (max-width: 960px) {
-    transition: 0.8s all ease;
-  }
+    @media screen and (max-width: 960px) {
+        transition: 0.8s all ease;
+    }
 `;

 export const NavbarContainer = styled.div`
-  display: flex;
-  justify-content: space-between;
-  height: 100px;
-  z-index: 1;
-  width: 100%;
-  padding: 0 24px;
-  max-width: 1100px;
+    display: flex;
+    justify-content: space-between;
+    height: 100px;
+    z-index: 1;
+    width: 100%;
+    padding: 0 24px;
+    max-width: 1100px;
 `;

 export const NavLogo = styled(LinkR)`
-  color: #fff;
-  justify-self: flex-start;
-  cursor: pointer;
-  font-size: 1.5rem;
-  display: flex;
-  align-items: center;
-  margin-left: 24px;
-  font-weight: bold;
-  text-decoration: none;
-  @media screen and (max-width: 768px) {
-    font-size: 1.0rem;
-  }
+    color: #fff;
+    justify-self: flex-start;
+    cursor: pointer;
+    font-size: 1.5rem;
+    display: flex;
+    align-items: center;
+    margin-left: 24px;
+    font-weight: bold;
+    text-decoration: none;

+    @media screen and (max-width: 768px) {
+        font-size: 1rem;
+    }
 `;

 export const MobileIcon = styled.div`
-  display: none;
+    display: none;

-  @media screen and (max-width: 768px) {
-    display: block;
-    position: absolute;
-    top: 0;
-    right: 0;
-    transform: translate(-100%, 60%);
-    font-size: 1.8rem;
-    cursor: pointer;
-  }
+    @media screen and (max-width: 768px) {
+        display: block;
+        position: absolute;
+        top: 0;
+        right: 0;
+        transform: translate(-100%, 60%);
+        font-size: 1.8rem;
+        cursor: pointer;
+    }
 `;

 export const NavMenu = styled.ul`
-  display: flex;
-  align-items: center;
-  list-style: none;
-  text-align: center;
-  margin-right: -22px;
+    display: flex;
+    align-items: center;
+    list-style: none;
+    text-align: center;
+    margin-right: -22px;

-  @media screen and (max-width: 768px) {
-    display: none;
-  }
+    @media screen and (max-width: 768px) {
+        display: none;
+    }
 `;

 export const NavItem = styled.li`
-  height: 80px;
+    height: 80px;
 `;

 export const NavBtn = styled.nav`
-  display: flex;
-  align-items: center;
+    display: flex;
+    align-items: center;

-  @media screen and (max-width: 768px) {
-    display: none;
-  }
+    @media screen and (max-width: 768px) {
+        display: none;
+    }
 `;

 export const NavLinks = styled(LinkS)`
-  color: #fff;
-  display: flex;
-  align-items: center;
-  text-decoration: none;
-  padding: 0 1rem;
-  height: 100%;
-  cursor: pointer;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    padding: 0 1rem;
+    height: 100%;
+    cursor: pointer;

-  &.active {
-    border-bottom: 3px solid #57c6d1
-  }
+    &.active {
+        border-bottom: 3px solid #57c6d1;
+    }
 `;

 export const NavBtnLink = styled(LinkR)`
-  border-radius: 50px;
-  background: #01bf71;
-  white-space: nowrap;
-  padding: 10px 22px;
-  color: #010606;
-  font-size: 16px;
-  outline: none;
-  border: none;
-  cursor: pointer;
-  transition: all 0.2s ease-in-out;
-  text-decoration: none;
-
-  &:hover {
-    transition: all 0.2s ease-in-out;
-    background: #fff;
+    border-radius: 50px;
+    background: #01bf71;
+    white-space: nowrap;
+    padding: 10px 22px;
    color: #010606;
-  }
+    font-size: 16px;
+    outline: none;
+    border: none;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+    text-decoration: none;
+
+    &:hover {
+        transition: all 0.2s ease-in-out;
+        background: #fff;
+        color: #010606;
+    }
 `;
--- a/src/components/NavBar/index.jsx
+++ b/src/components/NavBar/index.jsx
@@ -1,59 +1,108 @@
-import React, {useState, useEffect} from 'react'
-import {FaBars} from 'react-icons/fa'
-import {IconContext} from 'react-icons/lib'
-import {Nav, NavbarContainer, NavLogo, MobileIcon, NavMenu, NavItem, NavLinks} from './NavbarElements'
-import { animateScroll as scroll } from 'react-scroll'
+import { useEffect, useState } from "react";
+import { FaBars } from "react-icons/fa";
+import { IconContext } from "react-icons/lib";
+import { animateScroll as scroll } from "react-scroll";
+import {
+    MobileIcon,
+    Nav,
+    NavbarContainer,
+    NavItem,
+    NavLinks,
+    NavLogo,
+    NavMenu,
+} from "./NavbarElements";

+export default function NavBar({ toggle }) {
+    const [scrollNav, setScrollNav] = useState(false);

-const Navbar = ( {toggle} ) => {
-    const [scrollNav, setScrollNav] = useState(false)
+    useEffect(() => {
+        const changeNav = () => {
+            if (window.scrollY >= 80) {
+                setScrollNav(true);
+            } else {
+                setScrollNav(false);
+            }
+        };

-    const changeNav = () =>{
-        if (window.scrollY >= 80){
-            setScrollNav(true)
-        }else{
-            setScrollNav(false)
-        }
-    }
+        window.addEventListener("scroll", changeNav);

-    useEffect(() =>{
-        window.addEventListener('scroll', changeNav)
-    }, [])
+        return () => {
+            window.removeEventListener("scroll", changeNav);
+        };
+    }, []);

    const toggleHome = () => {
        scroll.scrollToTop();
-    }
+    };

    return (
        <>
-        <IconContext.Provider value={{color: '#fff'}}>
-            <Nav scrollNav={scrollNav}>
-                <NavbarContainer>
-                    <NavLogo to="/udlbook/" onClick={toggleHome}>
-                        <h1> Understanding Deep Learning </h1>
-                    </NavLogo>
-                    <MobileIcon onClick={toggle}>
-                        <FaBars />
-                    </MobileIcon>
-                    <NavMenu>
-                        <NavItem>
-                            <NavLinks to="Notebooks" smooth={true} duration={500} spy={true} exact='true' offset={-80} activeClass='active'>Notebooks</NavLinks>
-                        </NavItem>
-                        <NavItem>
-                            <NavLinks to="Instructors" smooth={true} duration={500} spy={true} exact='true' offset={-80} activeClass='active'>Instructors</NavLinks>
-                        </NavItem>
-                        <NavItem>
-                            <NavLinks to="Media" smooth={true} duration={500} spy={true} exact='true' offset={-80} activeClass='active'>Media</NavLinks>
-                        </NavItem>
-                        <NavItem>
-                            <NavLinks to="More" smooth={true} duration={500} spy={true} exact='true' offset={-80} activeClass='active'>More</NavLinks>
-                        </NavItem>
-                    </NavMenu>
-                </NavbarContainer>
-            </Nav>
-        </IconContext.Provider>
+            <IconContext.Provider value={{ color: "#fff" }}>
+                <Nav scrollNav={scrollNav}>
+                    <NavbarContainer>
+                        <NavLogo to="/udlbook/" onClick={toggleHome}>
+                            <h1> Understanding Deep Learning </h1>
+                        </NavLogo>
+                        <MobileIcon onClick={toggle}>
+                            <FaBars />
+                        </MobileIcon>
+                        <NavMenu>
+                            <NavItem>
+                                <NavLinks
+                                    to="Notebooks"
+                                    smooth={true}
+                                    duration={500}
+                                    spy={true}
+                                    exact="true"
+                                    offset={-80}
+                                    activeClass="active"
+                                >
+                                    Notebooks
+                                </NavLinks>
+                            </NavItem>
+                            <NavItem>
+                                <NavLinks
+                                    to="Instructors"
+                                    smooth={true}
+                                    duration={500}
+                                    spy={true}
+                                    exact="true"
+                                    offset={-80}
+                                    activeClass="active"
+                                >
+                                    Instructors
+                                </NavLinks>
+                            </NavItem>
+                            <NavItem>
+                                <NavLinks
+                                    to="Media"
+                                    smooth={true}
+                                    duration={500}
+                                    spy={true}
+                                    exact="true"
+                                    offset={-80}
+                                    activeClass="active"
+                                >
+                                    Media
+                                </NavLinks>
+                            </NavItem>
+                            <NavItem>
+                                <NavLinks
+                                    to="More"
+                                    smooth={true}
+                                    duration={500}
+                                    spy={true}
+                                    exact="true"
+                                    offset={-80}
+                                    activeClass="active"
+                                >
+                                    More
+                                </NavLinks>
+                            </NavItem>
+                        </NavMenu>
+                    </NavbarContainer>
+                </Nav>
+            </IconContext.Provider>
        </>
    );
 }
-
-export default Navbar
--- a/src/components/Notebooks/NotebookElements.jsx
+++ b/src/components/Notebooks/NotebookElements.jsx
@@ -1,6 +1,5 @@
 import styled from "styled-components";

-
 export const NotebookContainer = styled.div`
    color: #fff;
    /* background: #f9f9f9; */
@@ -12,10 +11,10 @@ export const NotebookContainer = styled.div`
 `

 export const NotebookWrapper = styled.div`
-    display: grid ; 
+    display: grid;
    z-index: 1;
-    // height: 1250px ;  
-    width: 100% ; 
+    /* height: 1250px; */
+    width: 100%;
    max-width: 1100px;
    margin-right: auto;
    margin-left: auto;
@@ -38,6 +37,7 @@ export const Column1 = styled.p`
    margin-bottom: 15px;
    padding: 0 15px;
    grid-area: col1;
+
    @media screen and (max-width: 1050px) {
        font-size: 12px;
    }
@@ -51,6 +51,7 @@ export const Column2 = styled.p`
    margin-bottom: 15px;
    padding: 0 15px;
    grid-area: col2;
+
    @media screen and (max-width: 1050px) {
        font-size: 12px;
    }
@@ -61,7 +62,7 @@ export const Column2 = styled.p`
 `

 export const TextWrapper = styled.div`
-    max-width: 540px ; 
+    max-width: 540px;
    padding-top: 0;
    padding-bottom: 0;
 `
@@ -77,20 +78,17 @@ export const TopLine = styled.p`
 `

 export const Heading= styled.h1`
-
    margin-bottom: 24px;
    font-size: 48px;
    line-height: 1.1;
    font-weight: 600;
    color: ${({lightText}) => (lightText ? '#f7f8fa' : '#010606')};

-    @media screen and (max-width: 480px)
-    {
+    @media screen and (max-width: 480px) {
        font-size: 32px;
    }
 `

-
 export const Subtitle = styled.p`
    max-width: 440px;
    margin-bottom: 35px;
@@ -110,14 +108,13 @@ export const ImgWrap = styled.div`
 `

 export const Img = styled.img`
-  width: 100%;
-  margin-top: 0;
-  margin-right: 0;
-  margin-left: 10px;
-  padding-right: 0;
+    width: 100%;
+    margin-top: 0;
+    margin-right: 0;
+    margin-left: 10px;
+    padding-right: 0;
 `;

-
 export const NBLink = styled.a`
    text-decoration: none;
    color: #57c6d1;;
@@ -143,5 +140,5 @@ export const NBLink = styled.a`
    &:hover:before {
        opacity: 1;
        -webkit-transform: scaleX(1.05);
-      }
+    }
 `
--- a/src/components/Notebooks/index.jsx
+++ b/src/components/Notebooks/index.jsx
@@ -1,29 +1,7 @@
-import React from 'react'
-import { NBLink, ImgWrap, Img, NotebookContainer, NotebookWrapper, NotebookRow, Column1, Column2, TextWrapper, TopLine, Heading, Subtitle} from './NotebookElements'
-
-// export const homeObjOne = {
-//     id: 'about',
-//     lightBg: false,
-//     lightText: true,
-//     lightTextDesc: true,
-//     topLine: 'Premium Bank',
-//     headline: 'Unlimited transactions with zero fees',
-//     description:
-//       'Get access to our exclusive app that allows you to send unlimited transactions without getting charged any fees',
-//     buttonLabel: 'Get Started',
-//     imgStart: false,
-//     img: require('../../images/svg-1.svg').default,
-//     alt: 'Car',
-//     dark: true,
-//     primary: true,
-//     darkText: false
-//   };
-
 import img from '../../images/coding.svg'
+import { Column1, Column2, Heading, Img, ImgWrap, NBLink, NotebookContainer, NotebookRow, NotebookWrapper, Subtitle, TextWrapper, TopLine } from './NotebookElements'

-
-
-const NotebookSection = () => {
+export default function NotebookSection() {
    return (
        <>
            <NotebookContainer lightBg={false} id='Notebooks'>
@@ -210,11 +188,8 @@ const NotebookSection = () => {
                            </ul>
                        </Column2>
                    </NotebookRow>
-
                </NotebookWrapper>
            </NotebookContainer>
        </>
    )
 }
-
-export default NotebookSection
--- a/src/components/ScrollToTop.jsx
+++ b/src/components/ScrollToTop.jsx
@@ -1,11 +1,12 @@
-import {useEffect} from 'react'
-import { useLocation } from 'react-router-dom'
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";

 export default function ScrollToTop() {
-    const {pathname} = useLocation()
+    const { pathname } = useLocation();
+
    useEffect(() => {
-        window.scrollTo(0,0)
-    }, [pathname])
+        window.scrollTo(0, 0, { behavior: "smooth" });
+    }, [pathname]);

    return null;
 }
--- a/src/components/Sidebar/SidebarElements.jsx
+++ b/src/components/Sidebar/SidebarElements.jsx
@@ -1,12 +1,10 @@
-import styled from 'styled-components'
-import {Link as LinkS} from 'react-scroll'
-import {Link as LinkR} from 'react-router-dom'
-import {FaTimes} from 'react-icons/fa'
-
-
+import { FaTimes } from "react-icons/fa";
+import { Link as LinkR } from "react-router-dom";
+import { Link as LinkS } from "react-scroll";
+import styled from "styled-components";

 export const SidebarContainer = styled.aside`
-    position:fixed ; 
+    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
@@ -16,18 +14,18 @@ export const SidebarContainer = styled.aside`
    top: 0;
    left: 0;
    transition: 0.3s ease-in-out;
-    opacity: ${({ isOpen }) => (isOpen ? '100%' :  '0')};
-    top: ${({ isOpen }) => (isOpen ? '0' : '-100%')};   
- 
-`
+    opacity: ${({ isOpen }) => (isOpen ? "100%" : "0")};
+    top: ${({ isOpen }) => (isOpen ? "0" : "-100%")};
+`;

 export const CloseIcon = styled(FaTimes)`
-    color: #fff ; 
+    color: #fff;
+
    &:hover {
        color: #01bf71;
        transition: 0.2s ease-in-out;
    }
-`
+`;

 export const Icon = styled.div`
    position: absolute;
@@ -37,25 +35,25 @@ export const Icon = styled.div`
    font-size: 2rem;
    cursor: pointer;
    outline: none;
-`
+`;

 export const SidebarWrapper = styled.div`
    color: #ffffff;
-`
+`;

 export const SidebarMenu = styled.ul`
    display: grid;
    grid-template-columns: 1fr;
-    grid-template-rows: repeat(6,80px);
+    grid-template-rows: repeat(6, 80px);
    text-align: center;

-    @media screen and (max-width: 480px){
-        grid-template-rows: repeat(6, 60px) ; 
+    @media screen and (max-width: 480px) {
+        grid-template-rows: repeat(6, 60px);
    }
-`
+`;

 export const SidebarLink = styled(LinkS)`
-    display: flex ;
+    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
@@ -70,12 +68,12 @@ export const SidebarLink = styled(LinkS)`
        color: #01bf71;
        transition: 0.2s ease-in-out;
    }
-`
+`;

 export const SideBtnWrap = styled.div`
    display: flex;
    justify-content: center;
-`
+`;

 export const SidebarRoute = styled(LinkR)`
    border-radius: 50px;
@@ -95,4 +93,4 @@ export const SidebarRoute = styled(LinkR)`
        background: #fff;
        color: #010606;
    }
-`
+`;
--- a/src/components/Sidebar/index.jsx
+++ b/src/components/Sidebar/index.jsx
@@ -1,33 +1,36 @@
-import React from 'react'
-import { SidebarContainer, Icon, CloseIcon, SidebarWrapper, SidebarMenu, SidebarLink} from './SidebarElements'
+import {
+    CloseIcon,
+    Icon,
+    SidebarContainer,
+    SidebarLink,
+    SidebarMenu,
+    SidebarWrapper,
+} from "./SidebarElements";

-
-const Sidebar = ({isOpen, toggle}) => {
+export default function Sidebar({ isOpen, toggle }) {
    return (
        <>
-        <SidebarContainer isOpen={isOpen} onClick={toggle}>
-            <Icon onClick={toggle}>
-                <CloseIcon />
-            </Icon>
-            <SidebarWrapper>
-                <SidebarMenu >
-                    <SidebarLink to="Notebooks" onClick={toggle}>
-                        Notebooks
-                    </SidebarLink>
-                    <SidebarLink to="Instructors" onClick={toggle}>
-                        Instructors
-                    </SidebarLink>
-                    <SidebarLink to="Media" onClick={toggle}>
-                        Media
-                    </SidebarLink>
-                    <SidebarLink to="More" onClick={toggle}>
-                        More
-                    </SidebarLink>
-                </SidebarMenu>
-            </SidebarWrapper>
-        </SidebarContainer>
+            <SidebarContainer isOpen={isOpen} onClick={toggle}>
+                <Icon onClick={toggle}>
+                    <CloseIcon />
+                </Icon>
+                <SidebarWrapper>
+                    <SidebarMenu>
+                        <SidebarLink to="Notebooks" onClick={toggle}>
+                            Notebooks
+                        </SidebarLink>
+                        <SidebarLink to="Instructors" onClick={toggle}>
+                            Instructors
+                        </SidebarLink>
+                        <SidebarLink to="Media" onClick={toggle}>
+                            Media
+                        </SidebarLink>
+                        <SidebarLink to="More" onClick={toggle}>
+                            More
+                        </SidebarLink>
+                    </SidebarMenu>
+                </SidebarWrapper>
+            </SidebarContainer>
        </>
-    )
+    );
 }
-
-export default Sidebar
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,10 +1,10 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-
-ReactDOM.createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-)
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+import "./styles/globals.css";

+ReactDOM.createRoot(document.getElementById("root")).render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>,
+);
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -1,34 +1,30 @@
-import React, {useState} from 'react'
-import Sidebar from '../components/Sidebar'
-import Navbar from '../components/NavBar'
-import HeroSection from '../components/HeroSection';
-import NotebookSection from '../components/Notebooks'
-import InstructorsSection from '../components/Instructors';
-import Footer from '../components/Footer';
-import MediaSection from '../components/Media';
-import MoreSection from '../components/More';
+import { useState } from "react";
+import Footer from "../components/Footer";
+import HeroSection from "../components/HeroSection";
+import InstructorsSection from "../components/Instructors";
+import MediaSection from "../components/Media";
+import MoreSection from "../components/More";
+import Navbar from "../components/NavBar";
+import NotebookSection from "../components/Notebooks";
+import Sidebar from "../components/Sidebar";

-const Home = () => {
-    const [isOpen, setIsOpen] = useState(false)
+export default function Home() {
+    const [isOpen, setIsOpen] = useState(false);

    const toggle = () => {
-        setIsOpen(!isOpen)
+        setIsOpen(!isOpen);
    };

    return (
        <>
-            <Sidebar isOpen={isOpen} toggle={toggle}/>
-            <Navbar toggle={toggle}/>
+            <Sidebar isOpen={isOpen} toggle={toggle} />
+            <Navbar toggle={toggle} />
            <HeroSection />
-            <NotebookSection/>
-            <InstructorsSection/>
-            <MediaSection/>
-            <MoreSection/>
-            <Footer/>                
+            <NotebookSection />
+            <InstructorsSection />
+            <MediaSection />
+            <MoreSection />
+            <Footer />
        </>
-    )
-};
-
-export default Home
-
- 
+    );
+}
--- a/src/pages/signin.jsx
+++ b/src/pages/signin.jsx
@@ -1,14 +1,11 @@
-import React from 'react'
-import ScrollToTop from '../components/ScrollToTop';
-import SignIn from '../components/SignIn';
+import ScrollToTop from "../components/ScrollToTop";
+import SignIn from "../components/SignIn";

-const SigninPage = () => {
+export default function SigninPage() {
    return (
        <>
            <ScrollToTop />
            <SignIn />
        </>
-    )
+    );
 }
-
-export default SigninPage;
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -0,0 +1,6 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    font-family: "Encode Sans Expanded", sans-serif;
+}
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,16 +1,14 @@
-import react from '@vitejs/plugin-react-swc'
-import { defineConfig } from 'vite'
+import react from "@vitejs/plugin-react-swc";
+import { defineConfig } from "vite";

 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
-  server: {
-    port: 3000,
-  },
-  preview: {
-    port: 3000,
-  },
-  build: {
-    outDir: 'build',
-  }
-})
+    plugins: [react()],
+    server: {
+        port: 3000,
+    },
+    preview: {
+        port: 3000,
+    },
+    base: "/udlbook",
+});