diff --git a/Deployments.png b/Deployments.png
deleted file mode 100644
index c429139e2..000000000
Binary files a/Deployments.png and /dev/null differ
diff --git a/Environments.png b/Environments.png
deleted file mode 100644
index 0de0f4800..000000000
Binary files a/Environments.png and /dev/null differ
diff --git a/Gemfile b/Gemfile
index 608380b13..018b301f1 100644
--- a/Gemfile
+++ b/Gemfile
@@ -10,6 +10,11 @@ source "https://rubygems.org"
 #gem "jekyll", "~> 4.0.0"
 # This is the default theme for new Jekyll sites. You may change this to anything you like.
 gem "github-pages", group: :jekyll_plugins
+gem "bigdecimal"
+gem "csv"
+gem "base64"
+gem "fiddle"
+
 
 # If you want to use GitHub Pages, remove the "gem "jekyll"" above and
 # uncomment the line below. To upgrade, run `bundle update github-pages`.
@@ -26,6 +31,5 @@ install_if -> { RUBY_PLATFORM =~ %r!mingw|mswin|java! } do
   gem "tzinfo-data"
 end
 
-# Performance-booster for watching directories on Windows
-gem "wdm", "~> 0.1.1", :install_if => Gem.win_platform?
+
 
diff --git a/Gemfile.lock b/Gemfile.lock
index b180e70e2..89b1dfec8 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -1,100 +1,109 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    activesupport (6.0.3.4)
+    activesupport (6.0.6.1)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 0.7, < 2)
       minitest (~> 5.1)
       tzinfo (~> 1.1)
       zeitwerk (~> 2.2, >= 2.2.2)
-    addressable (2.8.0)
-      public_suffix (>= 2.0.2, < 5.0)
+    addressable (2.8.7)
+      public_suffix (>= 2.0.2, < 7.0)
+    base64 (0.3.0)
+    bigdecimal (3.3.1)
     coffee-script (2.4.1)
       coffee-script-source
       execjs
-    coffee-script-source (1.11.1)
+    coffee-script-source (1.12.2)
     colorator (1.1.0)
-    commonmarker (0.17.13)
-      ruby-enum (~> 0.5)
-    concurrent-ruby (1.1.8)
-    dnsruby (1.61.5)
-      simpleidn (~> 0.1)
-    em-websocket (0.5.2)
+    commonmarker (0.23.12)
+    concurrent-ruby (1.3.5)
+    csv (3.3.5)
+    dnsruby (1.73.1)
+      base64 (>= 0.2)
+      logger (~> 1.6)
+      simpleidn (~> 0.2.1)
+    em-websocket (0.5.3)
       eventmachine (>= 0.12.9)
-      http_parser.rb (~> 0.6.0)
-    ethon (0.12.0)
-      ffi (>= 1.3.0)
+      http_parser.rb (~> 0)
+    ethon (0.15.0)
+      ffi (>= 1.15.0)
     eventmachine (1.2.7)
-    execjs (2.7.0)
-    faraday (1.3.0)
-      faraday-net_http (~> 1.0)
-      multipart-post (>= 1.2, < 3)
-      ruby2_keywords
-    faraday-net_http (1.0.1)
-    ffi (1.14.2)
+    execjs (2.10.0)
+    faraday (2.14.0)
+      faraday-net_http (>= 2.0, < 3.5)
+      json
+      logger
+    faraday-net_http (3.4.2)
+      net-http (~> 0.5)
+    ffi (1.17.2-x64-mingw-ucrt)
+    fiddle (1.1.8)
     forwardable-extended (2.6.0)
-    gemoji (3.0.1)
-    github-pages (210)
-      github-pages-health-check (= 1.16.1)
-      jekyll (= 3.9.0)
-      jekyll-avatar (= 0.7.0)
-      jekyll-coffeescript (= 1.1.1)
-      jekyll-commonmark-ghpages (= 0.1.6)
-      jekyll-default-layout (= 0.1.4)
-      jekyll-feed (= 0.15.1)
+    gemoji (4.1.0)
+    github-pages (232)
+      github-pages-health-check (= 1.18.2)
+      jekyll (= 3.10.0)
+      jekyll-avatar (= 0.8.0)
+      jekyll-coffeescript (= 1.2.2)
+      jekyll-commonmark-ghpages (= 0.5.1)
+      jekyll-default-layout (= 0.1.5)
+      jekyll-feed (= 0.17.0)
       jekyll-gist (= 1.5.0)
-      jekyll-github-metadata (= 2.13.0)
+      jekyll-github-metadata (= 2.16.1)
+      jekyll-include-cache (= 0.2.1)
       jekyll-mentions (= 1.6.0)
       jekyll-optional-front-matter (= 0.3.2)
       jekyll-paginate (= 1.1.0)
       jekyll-readme-index (= 0.3.0)
       jekyll-redirect-from (= 0.16.0)
       jekyll-relative-links (= 0.6.1)
-      jekyll-remote-theme (= 0.4.2)
+      jekyll-remote-theme (= 0.4.3)
       jekyll-sass-converter (= 1.5.2)
-      jekyll-seo-tag (= 2.7.1)
+      jekyll-seo-tag (= 2.8.0)
       jekyll-sitemap (= 1.4.0)
       jekyll-swiss (= 1.0.0)
-      jekyll-theme-architect (= 0.1.1)
-      jekyll-theme-cayman (= 0.1.1)
-      jekyll-theme-dinky (= 0.1.1)
-      jekyll-theme-hacker (= 0.1.2)
-      jekyll-theme-leap-day (= 0.1.1)
-      jekyll-theme-merlot (= 0.1.1)
-      jekyll-theme-midnight (= 0.1.1)
-      jekyll-theme-minimal (= 0.1.1)
-      jekyll-theme-modernist (= 0.1.1)
-      jekyll-theme-primer (= 0.5.4)
-      jekyll-theme-slate (= 0.1.1)
-      jekyll-theme-tactile (= 0.1.1)
-      jekyll-theme-time-machine (= 0.1.1)
+      jekyll-theme-architect (= 0.2.0)
+      jekyll-theme-cayman (= 0.2.0)
+      jekyll-theme-dinky (= 0.2.0)
+      jekyll-theme-hacker (= 0.2.0)
+      jekyll-theme-leap-day (= 0.2.0)
+      jekyll-theme-merlot (= 0.2.0)
+      jekyll-theme-midnight (= 0.2.0)
+      jekyll-theme-minimal (= 0.2.0)
+      jekyll-theme-modernist (= 0.2.0)
+      jekyll-theme-primer (= 0.6.0)
+      jekyll-theme-slate (= 0.2.0)
+      jekyll-theme-tactile (= 0.2.0)
+      jekyll-theme-time-machine (= 0.2.0)
       jekyll-titles-from-headings (= 0.5.3)
-      jemoji (= 0.12.0)
-      kramdown (= 2.3.0)
+      jemoji (= 0.13.0)
+      kramdown (= 2.4.0)
       kramdown-parser-gfm (= 1.1.0)
-      liquid (= 4.0.3)
+      liquid (= 4.0.4)
       mercenary (~> 0.3)
       minima (= 2.5.1)
-      nokogiri (>= 1.10.4, < 2.0)
-      rouge (= 3.23.0)
+      nokogiri (>= 1.16.2, < 2.0)
+      rouge (= 3.30.0)
       terminal-table (~> 1.4)
-    github-pages-health-check (1.16.1)
+      webrick (~> 1.8)
+    github-pages-health-check (1.18.2)
       addressable (~> 2.3)
       dnsruby (~> 1.60)
-      octokit (~> 4.0)
-      public_suffix (~> 3.0)
+      octokit (>= 4, < 8)
+      public_suffix (>= 3.0, < 6.0)
       typhoeus (~> 1.3)
-    html-pipeline (2.14.0)
+    html-pipeline (2.14.3)
       activesupport (>= 2)
       nokogiri (>= 1.4)
-    http_parser.rb (0.6.0)
-    i18n (0.9.5)
+    http_parser.rb (0.8.0)
+    i18n (1.14.7)
       concurrent-ruby (~> 1.0)
-    jekyll (3.9.0)
+    jekyll (3.10.0)
       addressable (~> 2.4)
       colorator (~> 1.0)
+      csv (~> 3.0)
       em-websocket (~> 0.5)
-      i18n (~> 0.7)
+      i18n (>= 0.7, < 2)
       jekyll-sass-converter (~> 1.0)
       jekyll-watch (~> 2.0)
       kramdown (>= 1.17, < 3)
@@ -103,27 +112,30 @@ GEM
       pathutil (~> 0.9)
       rouge (>= 1.7, < 4)
       safe_yaml (~> 1.0)
-    jekyll-avatar (0.7.0)
+      webrick (>= 1.0)
+    jekyll-avatar (0.8.0)
       jekyll (>= 3.0, < 5.0)
-    jekyll-coffeescript (1.1.1)
+    jekyll-coffeescript (1.2.2)
       coffee-script (~> 2.2)
-      coffee-script-source (~> 1.11.1)
-    jekyll-commonmark (1.3.1)
-      commonmarker (~> 0.14)
-      jekyll (>= 3.7, < 5.0)
-    jekyll-commonmark-ghpages (0.1.6)
-      commonmarker (~> 0.17.6)
-      jekyll-commonmark (~> 1.2)
-      rouge (>= 2.0, < 4.0)
-    jekyll-default-layout (0.1.4)
-      jekyll (~> 3.0)
-    jekyll-feed (0.15.1)
+      coffee-script-source (~> 1.12)
+    jekyll-commonmark (1.4.0)
+      commonmarker (~> 0.22)
+    jekyll-commonmark-ghpages (0.5.1)
+      commonmarker (>= 0.23.7, < 1.1.0)
+      jekyll (>= 3.9, < 4.0)
+      jekyll-commonmark (~> 1.4.0)
+      rouge (>= 2.0, < 5.0)
+    jekyll-default-layout (0.1.5)
+      jekyll (>= 3.0, < 5.0)
+    jekyll-feed (0.17.0)
       jekyll (>= 3.7, < 5.0)
     jekyll-gist (1.5.0)
       octokit (~> 4.2)
-    jekyll-github-metadata (2.13.0)
+    jekyll-github-metadata (2.16.1)
       jekyll (>= 3.4, < 5.0)
-      octokit (~> 4.0, != 4.4.0)
+      octokit (>= 4, < 7, != 4.4.0)
+    jekyll-include-cache (0.2.1)
+      jekyll (>= 3.7, < 5.0)
     jekyll-mentions (1.6.0)
       html-pipeline (~> 2.3)
       jekyll (>= 3.7, < 5.0)
@@ -136,137 +148,135 @@ GEM
       jekyll (>= 3.3, < 5.0)
     jekyll-relative-links (0.6.1)
       jekyll (>= 3.3, < 5.0)
-    jekyll-remote-theme (0.4.2)
+    jekyll-remote-theme (0.4.3)
       addressable (~> 2.0)
       jekyll (>= 3.5, < 5.0)
       jekyll-sass-converter (>= 1.0, <= 3.0.0, != 2.0.0)
       rubyzip (>= 1.3.0, < 3.0)
     jekyll-sass-converter (1.5.2)
       sass (~> 3.4)
-    jekyll-seo-tag (2.7.1)
+    jekyll-seo-tag (2.8.0)
       jekyll (>= 3.8, < 5.0)
     jekyll-sitemap (1.4.0)
       jekyll (>= 3.7, < 5.0)
     jekyll-swiss (1.0.0)
-    jekyll-theme-architect (0.1.1)
-      jekyll (~> 3.5)
+    jekyll-theme-architect (0.2.0)
+      jekyll (> 3.5, < 5.0)
       jekyll-seo-tag (~> 2.0)
-    jekyll-theme-cayman (0.1.1)
-      jekyll (~> 3.5)
+    jekyll-theme-cayman (0.2.0)
+      jekyll (> 3.5, < 5.0)
       jekyll-seo-tag (~> 2.0)
-    jekyll-theme-dinky (0.1.1)
-      jekyll (~> 3.5)
+    jekyll-theme-dinky (0.2.0)
+      jekyll (> 3.5, < 5.0)
       jekyll-seo-tag (~> 2.0)
-    jekyll-theme-hacker (0.1.2)
+    jekyll-theme-hacker (0.2.0)
       jekyll (> 3.5, < 5.0)
       jekyll-seo-tag (~> 2.0)
-    jekyll-theme-leap-day (0.1.1)
-      jekyll (~> 3.5)
+    jekyll-theme-leap-day (0.2.0)
+      jekyll (> 3.5, < 5.0)
       jekyll-seo-tag (~> 2.0)
-    jekyll-theme-merlot (0.1.1)
-      jekyll (~> 3.5)
+    jekyll-theme-merlot (0.2.0)
+      jekyll (> 3.5, < 5.0)
       jekyll-seo-tag (~> 2.0)
-    jekyll-theme-midnight (0.1.1)
-      jekyll (~> 3.5)
+    jekyll-theme-midnight (0.2.0)
+      jekyll (> 3.5, < 5.0)
       jekyll-seo-tag (~> 2.0)
-    jekyll-theme-minimal (0.1.1)
-      jekyll (~> 3.5)
+    jekyll-theme-minimal (0.2.0)
+      jekyll (> 3.5, < 5.0)
       jekyll-seo-tag (~> 2.0)
-    jekyll-theme-modernist (0.1.1)
-      jekyll (~> 3.5)
+    jekyll-theme-modernist (0.2.0)
+      jekyll (> 3.5, < 5.0)
       jekyll-seo-tag (~> 2.0)
-    jekyll-theme-primer (0.5.4)
+    jekyll-theme-primer (0.6.0)
       jekyll (> 3.5, < 5.0)
       jekyll-github-metadata (~> 2.9)
       jekyll-seo-tag (~> 2.0)
-    jekyll-theme-slate (0.1.1)
-      jekyll (~> 3.5)
+    jekyll-theme-slate (0.2.0)
+      jekyll (> 3.5, < 5.0)
       jekyll-seo-tag (~> 2.0)
-    jekyll-theme-tactile (0.1.1)
-      jekyll (~> 3.5)
+    jekyll-theme-tactile (0.2.0)
+      jekyll (> 3.5, < 5.0)
       jekyll-seo-tag (~> 2.0)
-    jekyll-theme-time-machine (0.1.1)
-      jekyll (~> 3.5)
+    jekyll-theme-time-machine (0.2.0)
+      jekyll (> 3.5, < 5.0)
       jekyll-seo-tag (~> 2.0)
     jekyll-titles-from-headings (0.5.3)
       jekyll (>= 3.3, < 5.0)
     jekyll-watch (2.2.1)
       listen (~> 3.0)
-    jemoji (0.12.0)
-      gemoji (~> 3.0)
+    jemoji (0.13.0)
+      gemoji (>= 3, < 5)
       html-pipeline (~> 2.2)
       jekyll (>= 3.0, < 5.0)
-    kramdown (2.3.0)
+    json (2.16.0)
+    kramdown (2.4.0)
       rexml
     kramdown-parser-gfm (1.1.0)
       kramdown (~> 2.0)
-    liquid (4.0.3)
-    listen (3.4.1)
+    liquid (4.0.4)
+    listen (3.9.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
+    logger (1.7.0)
     mercenary (0.3.6)
-    mini_portile2 (2.8.0)
     minima (2.5.1)
       jekyll (>= 3.5, < 5.0)
       jekyll-feed (~> 0.9)
       jekyll-seo-tag (~> 2.1)
-    minitest (5.14.3)
-    multipart-post (2.1.1)
-    nokogiri (1.13.3)
-      mini_portile2 (~> 2.8.0)
+    minitest (5.26.2)
+    net-http (0.8.0)
+      uri (>= 0.11.1)
+    nokogiri (1.18.10-x64-mingw-ucrt)
       racc (~> 1.4)
-    octokit (4.20.0)
-      faraday (>= 0.9)
-      sawyer (~> 0.8.0, >= 0.5.3)
+    octokit (4.25.1)
+      faraday (>= 1, < 3)
+      sawyer (~> 0.9)
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
-    public_suffix (3.1.1)
-    racc (1.6.0)
-    rb-fsevent (0.10.4)
-    rb-inotify (0.10.1)
+    public_suffix (5.1.1)
+    racc (1.8.1)
+    rb-fsevent (0.11.2)
+    rb-inotify (0.11.1)
       ffi (~> 1.0)
-    rexml (3.2.5)
-    rouge (3.23.0)
-    ruby-enum (0.8.0)
-      i18n
-    ruby2_keywords (0.0.4)
-    rubyzip (2.3.0)
+    rexml (3.4.4)
+    rouge (3.30.0)
+    rubyzip (2.4.1)
     safe_yaml (1.0.5)
     sass (3.7.4)
       sass-listen (~> 4.0.0)
     sass-listen (4.0.0)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
-    sawyer (0.8.2)
+    sawyer (0.9.3)
       addressable (>= 2.3.5)
-      faraday (> 0.8, < 2.0)
-    simpleidn (0.2.1)
-      unf (~> 0.1.4)
+      faraday (>= 0.17.3, < 3)
+    simpleidn (0.2.3)
     terminal-table (1.8.0)
       unicode-display_width (~> 1.1, >= 1.1.1)
     thread_safe (0.3.6)
-    typhoeus (1.4.0)
-      ethon (>= 0.9.0)
-    tzinfo (1.2.9)
+    typhoeus (1.5.0)
+      ethon (>= 0.9.0, < 0.16.0)
+    tzinfo (1.2.11)
       thread_safe (~> 0.1)
-    tzinfo-data (1.2020.6)
+    tzinfo-data (1.2025.2)
       tzinfo (>= 1.0.0)
-    unf (0.1.4)
-      unf_ext
-    unf_ext (0.0.7.7)
-    unicode-display_width (1.7.0)
-    wdm (0.1.1)
-    zeitwerk (2.4.2)
+    unicode-display_width (1.8.0)
+    uri (1.1.1)
+    webrick (1.9.1)
+    zeitwerk (2.7.3)
 
 PLATFORMS
-  ruby
+  x64-mingw-ucrt
 
 DEPENDENCIES
+  base64
+  bigdecimal
+  csv
+  fiddle
   github-pages
   jekyll-feed (~> 0.12)
   tzinfo (~> 1.2)
   tzinfo-data
-  wdm (~> 0.1.1)
 
 BUNDLED WITH
-   2.1.4
+   2.7.2
diff --git a/README.md b/README.md
index 548caa90f..8803bd1db 100644
--- a/README.md
+++ b/README.md
@@ -1,42 +1,42 @@
-# Hosting Parsons on Github Template
-This repo is a template to help you quickly and easily host Parson's problems on GitHub.
-
-You can use [Codio's graphical Parson's problems generator](https://codio.github.io/parsons-puzzle-ui/dist/) to create the Parson's problems and paste them into this template. [Visit the other repo's main page for help on using the generator.](https://codio.github.io/parsons-puzzle-ui/)
-
-## How to host your own Parson's Problems
-
-1. Create a Github account (if you don't have one already). A free account works great for this!
-
-1. Fork this repo using the "Fork" button 
-    
-1. In **your fork** (it should have your user name after the `github.com/` in the URL bar) click on "Settings":
-
-    ![Settings Tab](https://pages.github.com/images/repo-settings@2x.png)
-    
-1. Set the GitHub Pages Source to Master branch using the drop down:
-
-    ![Set GitHub Pages Source](https://pages.github.com/images/source-setting@2x.png)
-    
-### Test your repo
-
-1. To check that your repo is now setup correctly, return to the "Code" tab on the far left (you can get there by clicking on the repo name at the top too). 
-
-1. Click on the environment button with the rocketship icon on the right-side of the page
-
-    ![Click github-pages link on the right-side of the page](https://raw.githubusercontent.com/codio-content/hosting-parsons-on-github-template/master/Environments.png)
-
-1. Click on the "View Deployment" button - the one at the top is the most recent.
-
-    ![Click on the "View Deployment" button](https://raw.githubusercontent.com/codio-content/hosting-parsons-on-github-template/master/Deployments.png)
-    
-## How to Add Generated Parson's Problems
-
-1. Use [Codio's graphical Parson's problems generator](https://codio.github.io/parsons-puzzle-ui/dist/) to create a Parson's problem
-
-1. Click EXPORT in the top left
-
-1. Click Switch to Code
-
-1. (optional) If you are hosting multiple parsons problems on the same page (in the same markdown) then add a unique pre-fix in the textbox at the top and press enter.
-
-1. Copy the code into index.markdown
+# Hosting Parsons on Github Template
+This repo is a template to help you quickly and easily host Parson's problems on GitHub.
+
+You can use [Codio's graphical Parson's problems generator](https://codio.github.io/parsons-puzzle-ui/dist/) to create the Parson's problems and paste them into this template. [Visit the other repo's main page for help on using the generator.](https://codio.github.io/parsons-puzzle-ui/)
+
+## How to host your own Parson's Problems
+
+1. Create a Github account (if you don't have one already). A free account works great for this!
+
+1. Fork this repo using the "Fork" button 
+    
+1. In **your fork** (it should have your user name after the `github.com/` in the URL bar) click on "Settings":
+
+    ![Settings Tab](https://pages.github.com/images/repo-settings@2x.png)
+    
+1. Set the GitHub Pages Source to Master branch using the drop down:
+
+    ![Set GitHub Pages Source](https://pages.github.com/images/source-setting@2x.png)
+    
+### Test your repo
+
+1. To check that your repo is now setup correctly, return to the "Code" tab on the far left (you can get there by clicking on the repo name at the top too). 
+
+1. Click on the environment button with the rocketship icon on the right-side of the page
+
+    ![Click github-pages link on the right-side of the page](https://raw.githubusercontent.com/codio-content/hosting-parsons-on-github-template/master/Environments.png)
+
+1. Click on the "View Deployment" button - the one at the top is the most recent.
+
+    ![Click on the "View Deployment" button](https://raw.githubusercontent.com/codio-content/hosting-parsons-on-github-template/master/Deployments.png)
+    
+## How to Add Generated Parson's Problems
+
+1. Use [Codio's graphical Parson's problems generator](https://codio.github.io/parsons-puzzle-ui/dist/) to create a Parson's problem
+
+1. Click EXPORT in the top left
+
+1. Click Switch to Code
+
+1. (optional) If you are hosting multiple parsons problems on the same page (in the same markdown) then add a unique pre-fix in the textbox at the top and press enter.
+
+1. Copy the code into index.markdown
diff --git a/_config.yml b/_config.yml
index 04d962738..8b1884ea2 100644
--- a/_config.yml
+++ b/_config.yml
@@ -17,19 +17,18 @@
 # you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
 # You can create any custom variable you would like, and they will be accessible
 # in the templates via {{ site.myvariable }}.
+repository: tom-chate/Chate-s-Parson-Puzzles
 
-title: Parsons UI Example
+title: Edu-Chate
 email: support@codio.com
 description: # >- # this means to ignore newlines until "baseurl:"
-  Drag or shuffle the blocks of code in the practice problems below.
-  Remember to indent where appropriate by dragging blocks to the right. <br/>
+baseurl: "/"
+url: "https://tom-chate.github.io"
 
-  To check your work, press the "Get Feedback" button.
-  To start over, press the "Reset Problem" button.
-baseurl: "/hosting-parsons-on-github-template" # the subpath of your site, e.g. /blog
-url: "" # the base hostname & protocol for your site, e.g. http://example.com
 twitter_username:
 github_username:
+sass:
+  sass_dir: assets/css
 
 # Build settings
 theme: jekyll-theme-cayman
diff --git a/_layouts/default.html b/_layouts/default.html
index dd7bc45dd..e57ae8dd5 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -1,7 +1,8 @@
 <!DOCTYPE html>
-<html lang="{{ site.lang | default: "en-US" }}">
+<html lang="{{ site.lang | default: 'en-US' }}" data-theme="default" data-font="default">
   <head>
     {%- include parsons-scripts.html -%}
+
     {% if site.google_analytics %}
       <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
       <script>
@@ -11,50 +12,157 @@
         gtag('config', '{{ site.google_analytics }}');
       </script>
     {% endif %}
-    <meta charset="UTF-8">
 
-    <link href="https://js-parsons.github.io/js/js-parsons/parsons.css" rel="stylesheet" />
-    <link href="https://js-parsons.github.io/js/js-parsons/lib/prettify.css" rel="stylesheet" />
-
-    <script src="https://js-parsons.github.io/js/js-parsons/lib/jquery.min.js"></script>
-    <script src="https://js-parsons.github.io/js/js-parsons/lib/jquery-ui.min.js"></script>
-    <script src="https://js-parsons.github.io/js/jquery.ui.touch-punch.min.js"></script>
-    <script src="https://js-parsons.github.io/js/js-parsons/lib/skulpt.js"></script>
-    <script src="https://js-parsons.github.io/js/js-parsons/lib/skulpt-stdlib.js"></script>
-    <script src="https://js-parsons.github.io/js/js-parsons/lib/underscore-min.js"></script>
-    <script src="https://js-parsons.github.io/js/js-parsons/lib/lis.js"></script>
-    <script src="https://js-parsons.github.io/js/js-parsons/lib/jquery.sound.js"></script>
-    <script src="https://js-parsons.github.io/js/js-parsons/lib/prettify.js"></script>
-    <script src="https://js-parsons.github.io/js/js-parsons/parsons.js"></script>
-
-{% seo %}
+    <meta charset="UTF-8">
+    {% seo %}
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="theme-color" content="#157878">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-    <link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
+
+    <!-- Bootstrap CSS -->
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
+      crossorigin="anonymous"
+    >
+
+    <!-- Bootstrap Icons -->
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css"
+    >
+
+    <!-- OpenDyslexic font (you may need to adjust this URL if it ever changes) -->
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/open-dyslexic@0.0.3/open-dyslexic.min.css"
+    >
+
+    <!-- Jekyll-compiled CSS -->
+    <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
   </head>
+
   <body>
-    <header class="page-header" role="banner">
-      <h1 class="project-name">{{ page.title | default: site.title | default: site.github.repository_name }}</h1>
-      <h2 class="project-tagline">{{ page.description | default: site.description | default: site.github.project_tagline }}</h2>
-      {% if site.github.is_project_page %}
-        <a href="{{ site.github.repository_url }}" class="btn">View on GitHub</a>
-      {% endif %}
-      {% if site.show_downloads %}
-        <a href="{{ site.github.zip_url }}" class="btn">Download .zip</a>
-        <a href="{{ site.github.tar_url }}" class="btn">Download .tar.gz</a>
-      {% endif %}
-    </header>
-
-    <main id="content" class="main-content" role="main">
-      {{ content }}
+    <!-- Navbar -->
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
+      <div class="container-fluid">
+
+        <!-- Brand -->
+        <a class="navbar-brand fw-bold d-flex align-items-center gap-2"
+           href="{{ '/' | relative_url }}">
+          <i class="bi bi-house-fill"></i>
+          Ed-Chate
+        </a>
+
+        <button class="navbar-toggler" type="button"
+          data-bs-toggle="collapse"
+          data-bs-target="#mainNavbar"
+          aria-controls="mainNavbar"
+          aria-expanded="false"
+          aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
 
-      <footer class="site-footer">
-        {% if site.github.is_project_page %}
-          <span class="site-footer-owner"><a href="{{ site.github.repository_url }}">{{ site.github.repository_name }}</a> is maintained by <a href="{{ site.github.owner_url }}">{{ site.github.owner_name }}</a>.</span>
-        {% endif %}
-        <span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a>.</span>
-      </footer>
+        <div class="collapse navbar-collapse" id="mainNavbar">
+          <!-- Left side: Parson Puzzles -->
+          <ul class="navbar-nav ms-3 me-auto">
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle"
+                 href="#"
+                 id="puzzlesDropdown"
+                 role="button"
+                 data-bs-toggle="dropdown"
+                 aria-expanded="false">
+                Parson Puzzles
+              </a>
+              <ul class="dropdown-menu" aria-labelledby="puzzlesDropdown">
+                {% assign grouped = site.data.tasks | group_by: "category" %}
+                {% for group in grouped %}
+                  <li class="dropdown-submenu dropend">
+                    <a class="dropdown-item dropdown-toggle" href="#">
+                      {{ group.name }}
+                    </a>
+                    <ul class="dropdown-menu">
+                      {% for task in group.items %}
+                        {% assign task_url = '/parsons/' | append: task.slug | append: '.html' %}
+                        <li>
+                          <a class="dropdown-item{% if page.url == task_url %} active{% endif %}"
+                             href="{{ task_url | relative_url }}">
+                            {{ task.title }}
+                          </a>
+                        </li>
+                      {% endfor %}
+                    </ul>
+                  </li>
+                {% endfor %}
+              </ul>
+            </li>
+          </ul>
+
+          <!-- Right side: current page title -->
+          <span class="navbar-text small text-truncate">
+            {{ page.title | default: site.title }}
+          </span>
+        </div>
+      </div>
+    </nav>
+    <!-- Main content -->
+    <main id="content" class="main-content container" role="main">
+      {{ content }}
     </main>
+
+    <!-- Footer -->
+      <div class="footer-inner">
+        <small>© {{ site.time | date: "%Y" }} Ed-Chate</small>
+
+        <div class="footer-actions">
+          <!-- YouTube link -->
+          <a
+            href="https://www.youtube.com/@edu-chate"
+            target="_blank"
+            rel="noopener"
+            class="footer-link"
+          >
+            <i class="bi bi-youtube"></i> YouTube
+          </a>
+      </div>
+    </footer>
+
+    <!-- Bootstrap JS bundle -->
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+      crossorigin="anonymous"
+    ></script>
+
+    <!-- Theme & font switching logic -->
+    <script>
+      document.addEventListener('DOMContentLoaded', () => {
+        const root = document.documentElement;
+
+        // Restore saved theme & font
+        const savedTheme = localStorage.getItem('theme');
+        const savedFont = localStorage.getItem('font');
+
+        if (savedTheme) {
+          root.setAttribute('data-theme', savedTheme);
+        }
+        if (savedFont) {
+          root.setAttribute('data-font', savedFont);
+        }
+
+        // Expose helpers for buttons
+        window.setTheme = function(theme) {
+          root.setAttribute('data-theme', theme);
+          localStorage.setItem('theme', theme);
+        };
+
+        window.setFont = function(font) {
+          root.setAttribute('data-font', font);
+          localStorage.setItem('font', font);
+        };
+      });
+    </script>
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/_layouts/page.html b/_layouts/page.html
index 4ab6b23b9..de24672b3 100644
--- a/_layouts/page.html
+++ b/_layouts/page.html
@@ -16,21 +16,29 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="theme-color" content="#157878">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-    <link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
+    <link rel="stylesheet" href="{{ '/assets/css/style.scss?v=' | append: site.github.build_revision | relative_url }}">
   </head>
   <body>
     <header class="page-header" role="banner">
-      <h1 class="project-name">{{ page.title | default: site.title | default: site.github.repository_name }}</h1>
+      <h1 class="project-name">{{ page.title | default: site.title }}</h1>
     </header>
     <main id="content" class="main-content" role="main">
       {{ content }}
 
       <footer class="site-footer">
-        {% if site.github.is_project_page %}
-          <span class="site-footer-owner"><a href="{{ site.github.repository_url }}">{{ site.github.repository_name }}</a> is maintained by <a href="{{ site.github.owner_url }}">{{ site.github.owner_name }}</a>.</span>
-        {% endif %}
-        <span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a>.</span>
+
       </footer>
     </main>
+<<<<<<< HEAD
+=======
+
+<footer class="site-footer">
+  <div class="footer-inner">
+    <strong>TEST FOOTER CONTENT</strong>
+  </div>
+</footer>
+
+
+>>>>>>> parent of f2b22c1 (Colour Overlay; Attempt 1)
   </body>
 </html>
\ No newline at end of file
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 62f843e0e..2424c1301 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -1,8 +1,214 @@
 ---
 ---
-
 @import "{{ site.theme }}";
 
+/* ===== Layout: sticky footer + full-height body ===== */
+html,
+body {
+  height: 100%;
+  margin: 0;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  background-color: #cee0e9;
+  font-family: 'Open Sans', Arial, sans-serif;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #333;
+  overflow-x: visible !important;
+}
+
+.main-content {
+  flex: 1 0 auto;
+  max-width: 100% !important;
+  width: 100% !important;
+}
+
+.page-header {
+  flex-shrink: 0;
+}
+
+.site-footer {
+  flex-shrink: 0;
+}
+
+/* ===== Header overlay via CSS variables ===== */
+:root {
+  --overlay-start: #0d6efd; /* default left colour */
+  --overlay-end:   #198754; /* default right colour */
+}
+
+#pageHeader {
+  background: linear-gradient(to right, var(--overlay-start), var(--overlay-end));
+  color: #fff;
+}
+
+/* ===== Footer styling ===== */
+.site-footer {
+  background-color: #212529; /* same as navbar bg-dark */
+  color: #f8f9fa;            /* Bootstrap text-light */
+  padding: 0.75rem 1.25rem;
+  margin-top: auto;          /* ensures bottom alignment */
+  border-top: 1px solid rgba(255,255,255,0.08);
+  box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.25);
+}
+
+.site-footer .footer-inner {
+  max-width: 100%;
+  padding: 0 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 0.9rem;
+}
+
+/* Right-hand controls container (YouTube + button) */
+.footer-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/* YouTube link – styled pill */
+.footer-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  color: #f8f9fa;
+  text-decoration: none;
+  font-size: 0.85rem;
+  padding: 0.25rem 0.6rem;
+  border-radius: 0.25rem;
+  border: 1px solid rgba(255,255,255,0.25);
+}
+
+.footer-link i {
+  color: #ff0000; /* YouTube red */
+}
+
+.footer-link:hover {
+  background: rgba(255,0,0,0.12);
+  border-color: #ff0000;
+  color: #ffffff;
+  text-decoration: none;
+}
+
+/* Overlay toggle button styled to match */
+.site-footer #overlayToggle {
+  background: none;
+  color: #f8f9fa;
+  border: 1px solid rgba(255,255,255,0.4);
+  padding: 0.25rem 0.6rem;
+  border-radius: 0.25rem;
+  font-size: 0.8rem;
+  cursor: pointer;
+}
+
+.site-footer #overlayToggle:hover {
+  background: rgba(255,255,255,0.1);
+  border-color: rgba(255,255,255,0.7);
+}
+
+/* ===== Navbar dropdowns (Parson Puzzles multi-level) ===== */
+.dropdown-header {
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: #6c757d;
+}
+
+.dropdown-item.active {
+  font-weight: 600;
+  background-color: rgba(13, 110, 253, 0.15);
+}
+
+/* Base width for dropdowns */
+.dropdown-menu {
+  width: max-content;
+  min-width: 260px;
+}
+
+/* Second-level dropdown positioning */
+.dropdown-submenu .dropdown-menu {
+  top: 0;
+  left: 100%;
+  margin-left: .1rem;
+  margin-right: .1rem;
+}
+
+/* Show submenu on hover (desktop) */
+@media (min-width: 992px) {
+  .navbar .dropdown-menu .dropdown-submenu:hover > .dropdown-menu {
+    display: block;
+  }
+}
+
+/* Right-facing arrow for submenus */
+.dropdown-submenu > .dropdown-item.dropdown-toggle::after {
+  float: right;
+  border-top: .3em solid transparent;
+  border-right: 0;
+  border-bottom: .3em solid transparent;
+  border-left: .3em solid currentColor;
+  margin-top: .45rem;
+}
+
+/* ===== Carousel arrows (override Bootstrap icons) ===== */
+
+/* Remove Bootstrap's default background-image icons */
+.carousel-control-prev-icon,
+.carousel-control-next-icon {
+  background-image: none !important;
+  background-color: transparent;
+  width: 2rem;
+  height: 2rem;
+  display: none; 
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  
+}
+
+/* Custom chevrons */
+.carousel-control-prev-icon::after {
+  content: '‹';
+  font-size: 1rem;
+  line-height: 1;
+  color: #ffffff;
+}
+
+.carousel-control-next-icon::after {
+  content: '›';
+  font-size: 2rem;
+  line-height: 1;
+  color: #ffffff;
+}
+
+/* Control hitbox width */
+.carousel-control-prev,
+.carousel-control-next {
+  width: 6%;
+}
+
+/* Push content in from the edges inside each slide
+   (so arrows don't overlap text/buttons) */
+#homeCarousel .carousel-item > .d-flex {
+  padding-left: 3.5rem;
+  padding-right: 3.5rem;
+}
+
+/* ===== Misc styling ===== */
 .sortable-code {
-  width: 56%;
-}
\ No newline at end of file
+  width: 100%;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Open Sans', Arial, sans-serif;
+  font-weight: 600;
+  margin-top: 1.4em;
+  margin-bottom: 0.5em;
+  line-height: 1.2;
+}
diff --git a/index.markdown b/index.markdown
index 44c44ba44..0cce9f653 100644
--- a/index.markdown
+++ b/index.markdown
@@ -3,245 +3,86 @@
 # To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults
 
 layout: default
-title: Multiple Parson's Problems on One Page
+title: Home Page
 ---
-# Parsons Practice
-
-## Parsons 1 (Line Based Grader)
-Re-arrange the blocks below so they print out "Hello World!"
-
-<div id="p1-sortableTrash" class="sortable-code"></div>
-<div id="p1-sortable" class="sortable-code"></div>
-<div style="clear:both;"></div>
-<p>
-    <input id="p1-feedbackLink" value="Get Feedback" type="button" />
-    <input id="p1-newInstanceLink" value="Reset Problem" type="button" />
-</p>
-<script type="text/javascript">
-(function() {
-  var initial = "print(\"Hello\")\n" +
-    "print(\" \")\n" +
-    "print(\"World\")\n" +
-    "print(\"!\")";
-  var parsonsPuzzle = new ParsonsWidget({
-    "sortableId": "p1-sortable",
-    "max_wrong_lines": 10,
-    "grader": ParsonsWidget._graders.LineBasedGrader,
-    "exec_limit": 2500,
-    "can_indent": false,
-    "x_indent": 50,
-    "lang": "en",
-    "trashId": "p1-sortableTrash"
-  });
-  parsonsPuzzle.init(initial);
-  parsonsPuzzle.shuffleLines();
-  $("#p1-newInstanceLink").click(function(event){
-      event.preventDefault();
-      parsonsPuzzle.shuffleLines();
-  });
-  $("#p1-feedbackLink").click(function(event){
-      event.preventDefault();
-      parsonsPuzzle.getFeedback();
-  });
-})();
-</script>
-
-
-## Parsons 2 (Variable Check Grader)
-Construct a program that swaps the values of variables <code>x</code> and <code>y</code> using the helper variable <code>tmp</code>. You can change the names of the variables (<span class="jsparson-toggle"></span>) by clicking them.
-
-<div id="p2-sortableTrash" class="sortable-code"></div>
-<div id="p2-sortable" class="sortable-code"></div>
-<div style="clear:both;"></div>
-<p>
-    <input id="p2-feedbackLink" value="Get Feedback" type="button" />
-    <input id="p2-newInstanceLink" value="Reset Problem" type="button" />
-</p>
-<script type="text/javascript">
-(function(){
-  var initial = "$$toggle::x::y::tmp$$ = $$toggle::x::y::tmp$$\n" +
-    "$$toggle::x::y::tmp$$ = $$toggle::x::y::tmp$$\n" +
-    "$$toggle::x::y::tmp$$ = $$toggle::x::y::tmp$$";
-  var parsonsPuzzle = new ParsonsWidget({
-    "sortableId": "p2-sortable",
-    "max_wrong_lines": 10,
-    "grader": ParsonsWidget._graders.VariableCheckGrader,
-    "exec_limit": 2500,
-    "can_indent": true,
-    "x_indent": 50,
-    "lang": "en",
-    "trashId": "p2-sortableTrash",
-    "vartests": [
-        {
-            "message": "Testing with initial variable values x = 3 and y = 4",
-            "initcode": "x = 3\ny = 4",
-            "code": "",
-            "variables": {}
-        },
-        {
-            "message": "Testing with initial variable values x = 0 and y = 2",
-            "initcode": "x = 0\ny = 2",
-            "code": "",
-            "variables": {}
-        }
-    ]
-  });
-  parsonsPuzzle.init(initial);
-  parsonsPuzzle.shuffleLines();
-  $("#p2-newInstanceLink").click(function(event){
-      event.preventDefault();
-      parsonsPuzzle.shuffleLines();
-  });
-  $("#p2-feedbackLink").click(function(event){
-      event.preventDefault();
-      parsonsPuzzle.getFeedback();
- });
-})();
-</script>
-
-## Parsons 3 (Unit Test Grader)
-Your task is to construct a function which returns the index of the largest element in the array.
-
-<div id="p3-sortableTrash" class="sortable-code"></div>
-<div id="p3-sortable" class="sortable-code"></div>
-<div style="clear:both;"></div>
-<p>
-    <input id="p3-feedbackLink" value="Get Feedback" type="button" />
-    <input id="p3-newInstanceLink" value="Reset Problem" type="button" />
-</p>
-<script type="text/javascript">
-(function(){
-  var initial = "def maxindex(arg):\n" +
-    " ans = 0\n" +
-    " for i in range(len(arg)):\n" +
-    " if arg[i] > arg[ans]:\n" +
-    " ans = i\n" +
-    " while True:\n" +
-    "pass\n" +
-    " return ans";
-  var parsonsPuzzle = new ParsonsWidget({
-    "sortableId": "p3-sortable",
-    "max_wrong_lines": 10,
-    "grader": ParsonsWidget._graders.UnitTestGrader,
-    "exec_limit": 2500,
-    "can_indent": true,
-    "x_indent": 50,
-    "lang": "en",
-    "trashId": "p3-sortableTrash",
-    "unittests": "import unittestparson\nclass myTests(unittestparson.unittest):\n  def test_0(self):\n    self.assertEqual(,,)\n_test_result = myTests().main()"
-  });
-  parsonsPuzzle.init(initial);
-  parsonsPuzzle.shuffleLines();
-  $("#p3-newInstanceLink").click(function(event){
-      event.preventDefault();
-      parsonsPuzzle.shuffleLines();
-  });
-  $("#p3-feedbackLink").click(function(event){
-      event.preventDefault();
-      parsonsPuzzle.getFeedback();
-  });
-})();
-</script>
-
-## Parsons 4 (Language Translation Grader)
-Print out "I am a Java program" three times using a for loop.
-
-<div id="p4-sortableTrash" class="sortable-code"></div>
-<div id="p4-sortable" class="sortable-code"></div>
-<div style="clear:both;"></div>
-<p>
-    <input id="p4-feedbackLink" value="Get Feedback" type="button" />
-    <input id="p4-newInstanceLink" value="Reset Problem" type="button" />
-</p>
-<script type="text/javascript">
-(function(){
-  var initial = "for (int i=0;i<3;i++) {\n" +
-    "System.out.print(\\\"I \\\");\n" +
-    "System.out.print(\\\"am \\\");\n" +
-    "System.out.print(\\\"a Java program \\\");\n" +
-    "}";
-  var parsonsPuzzle = new ParsonsWidget({
-    "sortableId": "p4-sortable",
-    "max_wrong_lines": 1,
-    "grader": ParsonsWidget._graders.LanguageTranslationGrader,
-    "exec_limit": 2500,
-    "can_indent": true,
-    "x_indent": 50,
-    "lang": "en",
-    "executable_code": "for x in range(3):\n    output += 'I '\n    output += 'am '\n    output += 'a Java program '\npass",
-    "programmingLang": "java",
-    "vartests": [
-        {
-            "message": "Testing...",
-            "initcode": "output = ''",
-            "code": "",
-            "variables": {
-                "output": "I am a Java program I am a Java program I am a Java program "
-            }
-        }
-    ]
-  });
-  parsonsPuzzle.init(initial);
-  parsonsPuzzle.shuffleLines();
-  $("#p4-newInstanceLink").click(function(event){
-      event.preventDefault();
-      parsonsPuzzle.shuffleLines();
-  });
-  $("#p4-feedbackLink").click(function(event){
-      event.preventDefault();
-      parsonsPuzzle.getFeedback();
-   });
-})();
-</script>
-
-
-## Parsons 5 (Turtle Grader)
-Construct a program by dragging&amp;dropping and reordering lines. The constructed program should draw a triangle like shown below.
-
-<div id="p5-sortableTrash" class="sortable-code"></div>
-<div id="p5-sortable" class="sortable-code"></div>
-<div style="clear:both;"></div>
-<p>
-    <input id="p5-feedbackLink" value="Get Feedback" type="button" />
-    <input id="p5-newInstanceLink" value="Reset Problem" type="button" />
-</p>
-<script type="text/javascript">
-(function(){
-  var initial = "REPEAT 3 TIMES\n" +
-    "  forward(100)\n" +
-    "  left(120)\n" +
-    "ENDREPEAT";
-  var parsonsPuzzle = new ParsonsWidget({
-    "sortableId": "p5-sortable",
-    "max_wrong_lines": 1,
-    "grader": ParsonsWidget._graders.TurtleGrader,
-    "exec_limit": 2500,
-    "can_indent": true,
-    "x_indent": 50,
-    "lang": "en",
-    "trashId": "p5-sortableTrash",
-    "executable_code": "for i in range(0,3):\nmyTurtle.forward(100)\nmyTurtle.left(120)\npass",
-    "programmingLang": "pseudo",
-    "turtleModelCode": "modelTurtle.forward(100)\nmodelTurtle.left(120)\nmodelTurtle.forward(100)\nmodelTurtle.left(120)\nmodelTurtle.forward(100)\nmodelTurtle.left(120)",
-  });
-  parsonsPuzzle.init(initial);
-  parsonsPuzzle.shuffleLines();
-  $("#p5-newInstanceLink").click(function(event){
-      event.preventDefault();
-      parsonsPuzzle.shuffleLines();
-  });
-  $("#p5-feedbackLink").click(function(event){
-      event.preventDefault();
-      parsonsPuzzle.getFeedback();
-  });
-})();
-</script>
-
-### Implementation Notes
-
-When you host multiple Parson's problems on a single markdown page, you need to add a unique prefix. You can easily do this in the Codio generator by typing a unique prefix into the "Prefix" textbox and pressing Enter/Return. Then you can simply copy-paste like normal.
-
-If want each problem to be it's own page, you can use relative path links at the bottom of each of your markdown pages as seen below. If you want students to be able to return to previous problems in this format, consider adding previous links or link to a table of contents like page.
-
-### Example Next Link
-[Next](./parsons/example1.html)
+<<<<<<< HEAD
+<ul>
+  <li><a href="./parsons/passwords-condition-controlled.html">Passwords Condition Controlled</a></li>
+  <li><a href="./parsons/GCSE-total-grade-calc.html">GCSE Total Grade Calculator</a></li>
+  <li><a href="./parsons/petrol-station-easy.html">Petrol Station Easy</a></li>
+  <li><a href="./parsons/number-guessing-challenge.html">Number Guessing Challenge</a></li>
+   <li><a href="./parsons/square-area-perimeter.html">Square & Perimeter Measurement</a></li>
+  <li><a href="./parsons\count-controlled-word-counter.html">Count Controlled Word Counter</a></li>
+
+  <li><a href="contact.html">Contact Us</a></li>
+</ul>
+=======
+<div class="carousel-inner">
+
+  <!-- Slide 1: Parson puzzle -->
+  <div class="carousel-item active">
+    <div class="d-flex flex-column flex-md-row align-items-center justify-content-between p-4 bg-light rounded">
+      <div>
+        <h2 class="h4 mb-2">Try a Parson Puzzle</h2>
+        <p class="mb-0">
+          Practice GCSE programming skills with interactive Parsons puzzles.
+        </p>
+      </div>
+      <a
+        class="btn btn-primary mt-3 mt-md-0"
+        href="{{ '/parsons/passwords-condition-controlled.html' | relative_url }}">
+        Start with: Passwords Puzzle
+      </a>
+    </div>
+  </div>
+
+  <!-- Slide 2: GCSE grade calculator -->
+  <div class="carousel-item">
+    <div class="d-flex flex-column flex-md-row align-items-center justify-content-between p-4 bg-light rounded">
+      <div>
+        <h2 class="h4 mb-2">GCSE Total Grade Calculator</h2>
+        <p class="mb-0">
+          Work out your total GCSE points using a count-controlled loop.
+        </p>
+      </div>
+      <a
+        class="btn btn-success mt-3 mt-md-0"
+        href="{{ '/parsons/GCSE-total-grade-calc.html' | relative_url }}">
+        Open calculator
+      </a>
+    </div>
+  </div>
+
+  <!-- Slide 3: YouTube -->
+  <div class="carousel-item">
+    <div class="d-flex flex-column flex-md-row align-items-center justify-content-between p-4 bg-light rounded">
+      <div>
+        <h2 class="h4 mb-2">Watch on YouTube</h2>
+        <p class="mb-0">
+          See walkthroughs and explanations for Ed-Chate activities.
+        </p>
+      </div>
+      <a
+        class="btn btn-danger mt-3 mt-md-0"
+        href="https://www.youtube.com/@edu-chate"
+        target="_blank"
+        rel="noopener">
+        Visit channel
+      </a>
+    </div>
+  </div>
+  <button class="carousel-control-prev" type="button"
+        data-bs-target="#homeCarousel" data-bs-slide="prev">
+  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+  <span class="visually-hidden">Previous</span>
+</button>
+
+<button class="carousel-control-next" type="button"
+        data-bs-target="#homeCarousel" data-bs-slide="next">
+  <span class="carousel-control-next-icon" aria-hidden="true"></span>
+  <span class="visually-hidden">Next</span>
+</button>
+
+
+</div>
+>>>>>>> parent of f2b22c1 (Colour Overlay; Attempt 1)
diff --git a/parsons/GCSE-total-grade-calc.md b/parsons/GCSE-total-grade-calc.md
new file mode 100644
index 000000000..1b905cb1d
--- /dev/null
+++ b/parsons/GCSE-total-grade-calc.md
@@ -0,0 +1,69 @@
+---
+layout: default
+title: "Password Checker: Conditional Controlled"
+---
+
+<p class="task-description">
+ Ask the user to input how many GCSE’s they have. They should then be allowed to enter a result for each GCSE grade.  
+ The computer should work out how many points they have got (9=9, 8=8, 7=7 etc).  
+ If their total score is 40 or over it should output ‘You can go to the sixth form’.  
+ If their score between 35 and 39 it should output ‘A discussion is needed.’  
+ Otherwise, it should say ‘Sorry not enough points.’
+</p> 
+<p class="task-instructions">
+Drag or shuffle the blocks of code in the practice problems below.
+Remember to indent where appropriate by dragging blocks to the right.
+To check your work, press the "Get Feedback" button.
+To start over, press the "Reset Problem" button.
+</p> 
+<div id="sortableTrash" class="sortable-code"></div>
+<div id="sortable" class="sortable-code"></div>
+<div style="clear:both;"></div>
+
+<p>
+    <input id="feedbackLink" value="Get Feedback" type="button" />
+    <input id="newInstanceLink" value="Reset Problem" type="button" />
+</p>
+
+<script type="text/javascript">
+(function() {
+
+  var initial =
+    "amount = int(input(&quot;How many GCSEs do you have? &quot;))\n" +
+    "total = 0\n" +
+    "for x in range(amount):\n" +
+    "  grade = int(input(&quot;Please enter the grade of a GCSE: &quot;))\n" +
+    "  total = total + grade\n" +
+    "if total &gt;= 40:\n" +
+    "  print(&quot;You can go to the sixth form&quot;)\n" +
+    "elif total &gt;= 35 and total &lt;= 39:\n" +
+    "  print(&quot;A discussion is needed&quot;)\n" +
+    "else:\n" +
+    "  print(&quot;Sorry, not enough points.&quot;)";
+
+  var parsonsPuzzle = new ParsonsWidget({
+    sortableId: "sortable",
+    max_wrong_lines: 10,
+    grader: ParsonsWidget._graders.LineBasedGrader,
+    exec_limit: 2500,
+    can_indent: true,
+    x_indent: 50,
+    lang: "en",
+    show_feedback: true
+  });
+
+  parsonsPuzzle.init(initial);
+  parsonsPuzzle.shuffleLines();
+
+  $("#newInstanceLink").click(function(event) {
+    event.preventDefault();
+    parsonsPuzzle.shuffleLines();
+  });
+
+  $("#feedbackLink").click(function(event) {
+    event.preventDefault();
+    parsonsPuzzle.getFeedback();
+  });
+
+})();
+</script>
diff --git a/parsons/count-controlled-word-counter.md b/parsons/count-controlled-word-counter.md
new file mode 100644
index 000000000..c03096b97
--- /dev/null
+++ b/parsons/count-controlled-word-counter.md
@@ -0,0 +1,53 @@
+---
+layout: default
+title: "Word Counter (Count Controlled)"
+---
+
+<p class="task-description">
+An algorithm stores a list of words. The user enters a word and the algorithm will display how many times that word appears
+</p> 
+<p class="task-instructions">
+Drag or shuffle the blocks of code in the practice problems below.
+Remember to indent where appropriate by dragging blocks to the right.
+To check your work, press the "Get Feedback" button.
+To start over, press the "Reset Problem" button.
+</p> 
+<div id="sortableTrash" class="sortable-code"></div> 
+<div id="sortable" class="sortable-code"></div> 
+<div style="clear:both;"></div> 
+<p> 
+    <input id="feedbackLink" value="Get Feedback" type="button" /> 
+    <input id="newInstanceLink" value="Reset Problem" type="button" /> 
+</p> 
+<script type="text/javascript"> 
+(function(){
+  var initial = "words = [&quot;button&quot;, &quot;steak&quot;, &quot;dog&quot; ,&quot;steak&quot;, &quot;house&quot;]\n" +
+    "find = input(&quot;Which word are you looking for? &quot;)\n" +
+    "total = 0\n" +
+    "for item in words:\n" +
+    "  if item == find:\n" +
+    "    total = total + 1\n" +
+    "\n" +
+    "print(&quot;The word &quot; + find + &quot; appears &quot; + str(total) + &quot; in the list&quot;)";
+  var parsonsPuzzle = new ParsonsWidget({
+    "sortableId": "sortable",
+    "max_wrong_lines": 10,
+    "grader": ParsonsWidget._graders.LineBasedGrader,
+    "exec_limit": 2500,
+    "can_indent": true,
+    "x_indent": 50,
+    "lang": "en",
+    "show_feedback": true
+  });
+  parsonsPuzzle.init(initial);
+  parsonsPuzzle.shuffleLines();
+  $("#newInstanceLink").click(function(event){ 
+      event.preventDefault(); 
+      parsonsPuzzle.shuffleLines(); 
+  }); 
+  $("#feedbackLink").click(function(event){ 
+      event.preventDefault(); 
+      parsonsPuzzle.getFeedback(); 
+  }); 
+})(); 
+</script>
\ No newline at end of file
diff --git a/parsons/example1.md b/parsons/example1.md
deleted file mode 100644
index 0542c8aeb..000000000
--- a/parsons/example1.md
+++ /dev/null
@@ -1,45 +0,0 @@
----
-layout: default
-title: Page 2 Example (Variable Check Grader)
----
-
-Construct a program that swaps the values of variables <code>x</code> and <code>y</code> using the helper variable <code>tmp</code>. You can change the names of the variables (<span class="jsparson-toggle"></span>) by clicking them.
-
-<div id="p1-sortableTrash" class="sortable-code"></div>
-<div id="p1-sortable" class="sortable-code"></div>
-<div style="clear:both;"></div>
-<p>
-    <input id="p1-feedbackLink" value="Get Feedback" type="button" />
-    <input id="p1-newInstanceLink" value="Reset Problem" type="button" />
-</p>
-<script type="text/javascript">
-(function(){
-  var initial = "1\n" +
-    "2\n" +
-    "3\n" +
-    "4\n" +
-    "5";
-  var parsonsPuzzle = new ParsonsWidget({
-    "sortableId": "p1-sortable",
-    "max_wrong_lines": 10,
-    "grader": ParsonsWidget._graders.LineBasedGrader,
-    "exec_limit": 2500,
-    "can_indent": true,
-    "x_indent": 50,
-    "lang": "en",
-    "trashId": "p1-sortableTrash"
-  });
-  parsonsPuzzle.init(initial);
-  parsonsPuzzle.shuffleLines();
-  $("#p1-newInstanceLink").click(function(event){
-      event.preventDefault();
-      parsonsPuzzle.shuffleLines();
-  });
-  $("#p1-feedbackLink").click(function(event){
-      event.preventDefault();
-      parsonsPuzzle.getFeedback();
-  });
-})();
-</script>
-
-[Next](./example2.html)
diff --git a/parsons/example2.md b/parsons/example2.md
deleted file mode 100644
index 6a27b240b..000000000
--- a/parsons/example2.md
+++ /dev/null
@@ -1,41 +0,0 @@
----
-layout: default
-title: Example 2
----
-<div id="sortableTrash" class="sortable-code"></div>
-<div id="sortable" class="sortable-code"></div>
-<div style="clear:both;"></div>
-
-<p>
-    <input id="feedbackLink" value="Get Feedback" type="button" />
-    <input id="newInstanceLink" value="Reset Problem" type="button" />
-</p>
-
-<script type="text/javascript">
-var initial = "1\n" +
-    "2\n" +
-    "3\n" +
-    "4\n" +
-    "5";
-var parsonsPuzzle2 = new ParsonsWidget({
-    "sortableId": "sortable",
-    "max_wrong_lines": 10,
-    "grader": ParsonsWidget._graders.LineBasedGrader,
-    "exec_limit": 2500,
-    "can_indent": true,
-    "x_indent": 50,
-    "lang": "en"
-});
-parsonsPuzzle2.init(initial);
-parsonsPuzzle2.shuffleLines();
-$("#newInstanceLink").click(function(event){
-    event.preventDefault();
-    parsonsPuzzle2.shuffleLines();
-});
-$("#feedbackLink").click(function(event){
-    event.preventDefault();
-    parsonsPuzzle2.getFeedback();
-});
-</script>
-
-[Previous](./example1.html)
diff --git a/parsons/number-guessing-challenge.md b/parsons/number-guessing-challenge.md
new file mode 100644
index 000000000..a15848b6a
--- /dev/null
+++ b/parsons/number-guessing-challenge.md
@@ -0,0 +1,62 @@
+---
+layout: default
+title: "Number Guessing Challenge"
+---
+
+<p class="task-description">
+Create an algorithm which asks a user to guess a randomly generated number until they get it correct. Every time they guess, it should tell them how far away from the actual number they are.
+</p> 
+<p class="task-instructions">
+Drag or shuffle the blocks of code in the practice problems below.
+Remember to indent where appropriate by dragging blocks to the right.
+To check your work, press the "Get Feedback" button.
+To start over, press the "Reset Problem" button.
+</p> 
+<div id="sortableTrash" class="sortable-code"></div> 
+<div id="sortable" class="sortable-code"></div> 
+<div style="clear:both;"></div> 
+<p> 
+    <input id="feedbackLink" value="Get Feedback" type="button" /> 
+    <input id="newInstanceLink" value="Reset Problem" type="button" /> 
+</p> 
+
+<script type="text/javascript"> 
+(function(){
+  var initial =
+    "import random\n" +
+    "target = random.randint(1, 100)\n" +
+    "\n" +
+    "guess = int(input(&quot;Guess the number (1–100): &quot;))\n" +
+    "\n" +
+    "while guess != target:\n" +
+    "  difference = abs(target - guess)\n" +
+    "  print(&quot;You are &quot; + str(difference) + &quot; away from the actual number.&quot;)\n" +
+    "  guess = int(input(&quot;Guess again: &quot;))\n" +
+    "\n" +
+    "print(&quot;Correct! The number was &quot; + str(target))";
+
+  var parsonsPuzzle = new ParsonsWidget({
+    "sortableId": "sortable",
+    "max_wrong_lines": 10,
+    "grader": ParsonsWidget._graders.LineBasedGrader,
+    "exec_limit": 2500,
+    "can_indent": true,
+    "x_indent": 50,
+    "lang": "en",
+    "show_feedback": true
+  });
+
+  parsonsPuzzle.init(initial);
+  parsonsPuzzle.shuffleLines();
+
+  $("#newInstanceLink").click(function(event){ 
+      event.preventDefault(); 
+      parsonsPuzzle.shuffleLines(); 
+  }); 
+
+  $("#feedbackLink").click(function(event){ 
+      event.preventDefault(); 
+      parsonsPuzzle.getFeedback(); 
+  }); 
+})(); 
+</script>
diff --git a/parsons/passwords-condition-controlled.md b/parsons/passwords-condition-controlled.md
new file mode 100644
index 000000000..a3cfbabd3
--- /dev/null
+++ b/parsons/passwords-condition-controlled.md
@@ -0,0 +1,68 @@
+---
+layout: default
+title: "Password Checker: Conditional Controlled"
+---
+<p class="task-description">
+ Ask the user to input how many GCSE’s they have. They should then be allowed to enter a result for each GCSE grade. The computer should work out how many
+points they have got (9=9, 8=8, 7=7 etc). If their total score is 40 or over it should output ‘You can go to the sixth form’. If their score is between 35 and 39 it should
+output ‘A discussion is needed.’ Otherwise, it should say ‘Sorry not enough points.’
+</p>
+
+<p class="task-instructions">
+Drag or shuffle the blocks of code in the practice problems below.<br>
+Remember to indent where appropriate by dragging blocks to the right.<br>
+To check your work, press the "Get Feedback" button.<br>
+To start over, press the "Reset Problem" button.
+</p>
+
+<div id="sortableTrash" class="sortable-code"></div>
+<div id="sortable" class="sortable-code"></div>
+<div style="clear:both;"></div>
+
+<p>
+    <input id="feedbackLink" value="Get Feedback" type="button" />
+    <input id="newInstanceLink" value="Reset Problem" type="button" />
+</p>
+
+<script type="text/javascript">
+(function() {
+
+  var initial =
+    "amount = int(input(&quot;How many GCSEs do you have? &quot;))\n" +
+    "total = 0\n" +
+    "for x in range(amount):\n" +
+    "  grade = int(input(&quot;Please enter the grade of a GCSE: &quot;))\n" +
+    "  total = total + grade\n" +
+    "if total &gt;= 40:\n" +
+    "  print(&quot;You can go to the sixth form&quot;)\n" +
+    "elif total &gt;= 35 and total &lt;= 39:\n" +
+    "  print(&quot;A discussion is needed&quot;)\n" +
+    "else:\n" +
+    "  print(&quot;Sorry, not enough points.&quot;)";
+
+  var parsonsPuzzle = new ParsonsWidget({
+    sortableId: "sortable",
+    max_wrong_lines: 10,
+    grader: ParsonsWidget._graders.LineBasedGrader,
+    exec_limit: 2500,
+    can_indent: true,
+    x_indent: 50,
+    lang: "en",
+    show_feedback: true
+  });
+
+  parsonsPuzzle.init(initial);
+  parsonsPuzzle.shuffleLines();
+
+  $("#newInstanceLink").click(function(event) {
+    event.preventDefault();
+    parsonsPuzzle.shuffleLines();
+  });
+
+  $("#feedbackLink").click(function(event) {
+    event.preventDefault();
+    parsonsPuzzle.getFeedback();
+  });
+
+})();
+</script>
diff --git a/parsons/petrol-station-easy.md b/parsons/petrol-station-easy.md
new file mode 100644
index 000000000..ef3d9e1de
--- /dev/null
+++ b/parsons/petrol-station-easy.md
@@ -0,0 +1,62 @@
+---
+layout: default
+title: "Petrol Station Easy"
+---
+
+<p class="task-description">
+ An algorithm at a petrol station to work out how much to charge customers. Petrol is £1.34 a litre and Diesel is £1.43. Create an algorithm which asks the user for
+the type of fuel and the amount of fuel and output the total amount.
+</p> 
+<p class="task-instructions">
+Drag or shuffle the blocks of code in the practice problems below.
+Remember to indent where appropriate by dragging blocks to the right.
+To check your work, press the "Get Feedback" button.
+To start over, press the "Reset Problem" button.
+</p> 
+<div id="sortableTrash" class="sortable-code"></div> 
+<div id="sortable" class="sortable-code"></div> 
+<div style="clear:both;"></div> 
+<p> 
+    <input id="feedbackLink" value="Get Feedback" type="button" /> 
+    <input id="newInstanceLink" value="Reset Problem" type="button" /> 
+</p> 
+
+<script type="text/javascript"> 
+(function(){
+  var initial =
+    "total = 0\n" +
+    "amount = int(input(&quot;How much fuel? &quot;))\n" +
+    "fuel = input(&quot;Which type of fuel? &quot;)\n" +
+    "\n" +
+    "if fuel == &quot;petrol&quot;:\n" +
+    "  total = amount * 1.34\n" +
+    "else:\n" +
+    "  total = amount * 1.43\n" +
+    "\n" +
+    "print(&quot;£&quot; + str(round(total, 2)))";
+
+  var parsonsPuzzle = new ParsonsWidget({
+    sortableId: "sortable",
+    max_wrong_lines: 10,
+    grader: ParsonsWidget._graders.LineBasedGrader,
+    exec_limit: 2500,
+    can_indent: true,
+    x_indent: 50,
+    lang: "en",
+    show_feedback: true
+  });
+
+  parsonsPuzzle.init(initial);
+  parsonsPuzzle.shuffleLines();
+
+  $("#newInstanceLink").click(function(event){ 
+      event.preventDefault(); 
+      parsonsPuzzle.shuffleLines(); 
+  }); 
+
+  $("#feedbackLink").click(function(event){ 
+      event.preventDefault(); 
+      parsonsPuzzle.getFeedback(); 
+  }); 
+})(); 
+</script>
diff --git a/parsons/square-area-perimeter.md b/parsons/square-area-perimeter.md
new file mode 100644
index 000000000..a34f59ecf
--- /dev/null
+++ b/parsons/square-area-perimeter.md
@@ -0,0 +1,62 @@
+---
+layout: default
+title: "Square & Rectangle Measurement"
+---
+
+<p class="task-description">
+An algorithm is used to either calculate the area or perimeter of a rectangle. The user enters the length of two sides of the rectangle (as separate inputs), and
+then if they want to calculate the area or perimeter or area. The desired result is shown
+</p> 
+<p class="task-instructions">
+Drag or shuffle the blocks of code in the practice problems below.
+Remember to indent where appropriate by dragging blocks to the right.
+To check your work, press the "Get Feedback" button.
+To start over, press the "Reset Problem" button.
+</p> 
+<div id="sortableTrash" class="sortable-code"></div> 
+<div id="sortable" class="sortable-code"></div> 
+<div style="clear:both;"></div> 
+<p> 
+    <input id="feedbackLink" value="Get Feedback" type="button" /> 
+    <input id="newInstanceLink" value="Reset Problem" type="button" /> 
+</p> 
+
+<div id="sortableTrash" class="sortable-code"></div> 
+<div id="sortable" class="sortable-code"></div> 
+<div style="clear:both;"></div> 
+<p> 
+    <input id="feedbackLink" value="Get Feedback" type="button" /> 
+    <input id="newInstanceLink" value="Reset Problem" type="button" /> 
+</p> 
+<script type="text/javascript"> 
+(function(){
+  var initial = "length1 = float(input(&quot;Please enter the length of 1 side in cm &quot;)) \n" +
+    "length2 = float(input(&quot;Please enter the length of 2 side in cm &quot;))\n" +
+    "measure = input(&quot;Please enter A for area, and P for permieter&quot;)\n" +
+    "\n" +
+    "if measure == &quot;A&quot;:\n" +
+    "  print(length1*length2)\n" +
+    "else:\n" +
+    "  print(length1+length1+length2+length2)";
+  var parsonsPuzzle = new ParsonsWidget({
+    "sortableId": "sortable",
+    "max_wrong_lines": 10,
+    "grader": ParsonsWidget._graders.LineBasedGrader,
+    "exec_limit": 2500,
+    "can_indent": true,
+    "x_indent": 50,
+    "lang": "en",
+    "show_feedback": true
+  });
+  parsonsPuzzle.init(initial);
+  parsonsPuzzle.shuffleLines();
+  $("#newInstanceLink").click(function(event){ 
+      event.preventDefault(); 
+      parsonsPuzzle.shuffleLines(); 
+  }); 
+  $("#feedbackLink").click(function(event){ 
+      event.preventDefault(); 
+      parsonsPuzzle.getFeedback(); 
+  }); 
+})(); 
+</script>
\ No newline at end of file