diff --git a/README.md b/README.md
index 001c9a6..6f51b35 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,75 @@
-# My_Personal_Repo
-This is my personal repo, I use it to share what makes me tick and some of the projects I've worked on. You can share my journey on my GitHub Pages where you'll find my personal website.
+# Toby Beevers | Personal Website
+
+A static personal website built with HTML and CSS, hosted via GitHub Pages.
+
+This repo captures my personal and professional journey, including:
+- key milestones in my career
+- personal development highlights
+- links to my profiles and resources
+- blog posts about projects and experiences
+
+## Live Site
+
+You can view the website here:
+
+- **GitHub Pages:** https://tobebeevers.github.io/My_Personal_Repo/
+
+## Tech Stack
+
+- HTML5
+- CSS3
+- Font Awesome (icons)
+
+## Project Structure
+
+```text
+.
+├── index.html
+├── my_early_years.html
+├── career_change.html
+├── personal_development.html
+├── my_links.html
+├── my_blog.html
+├── Blog-Posts/
+│   ├── blog_AIML.html
+│   ├── blog_CentralBilling.html
+│   ├── blog_CareerChange.html
+│   ├── blog_JupyterNotebook.html
+│   ├── blog_MyCSR.html
+│   ├── blog_O365Migrations.html
+│   ├── blog_PowerBI.html
+│   └── blog_template.html
+├── css/
+│   ├── containers.css
+│   ├── styles.css
+│   └── timeline.css
+└── library/
+    ├── images
+    ├── favicons
+    └── CV files
+```
+
+## Run Locally
+
+Because this is a static site, you can open `index.html` directly in your browser.
+
+For a better local development experience (recommended), run a simple local server from the repository root:
+
+```bash
+python -m http.server 8000
+```
+
+Then open:
+
+- `http://localhost:8000`
+
+## Maintenance Notes
+
+- Keep global layout and component styles in `css/styles.css` and `css/containers.css`.
+- Use `css/timeline.css` for timeline-specific styling.
+- Add new blog pages in `Blog-Posts/` and link them from `my_blog.html`.
+- Store reusable media and document assets in `library/`.
+
+## License
+
+This project is licensed under the terms of the [LICENSE](LICENSE) file.
diff --git a/css/containers.css b/css/containers.css
index 7e932e6..f305220 100644
--- a/css/containers.css
+++ b/css/containers.css
@@ -2,14 +2,14 @@
 .container {
   max-width: 1100px;
   margin: 0 auto;
-  overflow: auto;
-  padding: 0 40px
+  overflow: visible;
+  padding: 0 32px
 }
 
 .container1 {
   max-width: 2100px;
   margin: 0 auto;
-  overflow: auto;
+  overflow: visible;
   padding: 0 40px
 }
 
@@ -19,40 +19,52 @@
   margin: 0 auto;
   display: flex;
   justify-content: flex-start;
-  overflow: auto;
+  overflow: visible;
   padding: 40px
 }
 
 .card {
-  background-color: #fff;
+  background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
   color: #333;
-  border-radius: 10px;
-  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
-  padding: 20px;
-  margin: 10px;
+  border-radius: 16px;
+  border: 1px solid rgba(96, 150, 186, 0.2);
+  box-shadow: 0 12px 28px rgba(39, 76, 119, 0.14);
+  padding: 24px;
+  margin: 0;
+  transition: transform 0.22s ease, box-shadow 0.22s ease;
+}
+
+.card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 16px 36px rgba(39, 76, 119, 0.2);
 }
 
 /* BACKGROUNDS & BUTTONS*/
 .btn {
   display: inline-block;
-  padding: 10px 30px;
+  padding: 11px 26px;
   cursor: pointer;
   background-color: var(--primary-color);
-  color: var(--secondary-color);
+  color: #fff;
   border: none;
-  border-radius: 5px;
-  width: 300px; /* Ensures a minimum width */
+  border-radius: 999px;
+  width: auto;
+  min-width: 220px;
   text-align: center;
+  font-weight: 700;
+  letter-spacing: 0.25px;
+  box-shadow: 0 8px 18px rgba(39, 76, 119, 0.16);
 }
 
 .btn-outline {
   background-color: transparent;
   border: 1px var(--secondary-color) solid;
+  color: var(--secondary-color);
 }
 
 /* Adds a slight movement to the button boarder on hover*/
 .btn:hover {
-  transform: scale(0.98);
+  transform: translateY(-2px);
 }
 
 .bg-primary, 
@@ -123,7 +135,7 @@
 .grid {
   display: grid;
   grid-template-columns: 1fr 1fr; /* fr units are fractions of the space*/
-  gap: 20px;
+  gap: 24px;
   justify-content: center;
   align-items: center;
   height: 100%;
@@ -203,4 +215,4 @@
 }
 .p-5{
   padding: 4rem;
-}
\ No newline at end of file
+}
diff --git a/css/styles.css b/css/styles.css
index c2cbf63..a7ee7fb 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -6,6 +6,11 @@
   --secondary-color: #274C77;
   --dark-color: #8B8C89; 
   --light-color: #E7ECEF;
+  --surface-color: #ffffff;
+  --text-color: #12263a;
+  --text-soft: #36536b;
+  --shadow-soft: 0 12px 30px rgba(39, 76, 119, 0.16);
+  --shadow-hover: 0 18px 40px rgba(39, 76, 119, 0.22);
 }
 
 /* SET UP*/
@@ -20,8 +25,9 @@
 /* Setting the font, color and line height defaults*/
 body{
   font-family: 'Play', sans-serif;
-  color: #000;
-  line-height: 1.6;
+  color: var(--text-color);
+  background: linear-gradient(180deg, #f4f8fb 0%, #eef4f8 100%);
+  line-height: 1.7;
 }
 
 /*Removing the formating from the lists used in the menu bar (bullet points)*/
@@ -32,7 +38,12 @@ ul{
 /* These are the links used in the menu bar, removing the Link Underlines and adding colour*/
 a {
   text-decoration: none;
-  color: #1a7090;
+  color: var(--secondary-color);
+  transition: color 0.2s ease, opacity 0.2s ease;
+}
+
+a:hover {
+  color: var(--primary-color);
 }
 
 h1 {
@@ -40,7 +51,7 @@ h1 {
   font-weight: 800;
   line-height: 1.5;
   letter-spacing: 0px;
-  margin: 10px 0;
+  margin: 14px 0;
   color: var(--light-color);
 }
 
@@ -49,7 +60,7 @@ h2 {
   font-weight: 800;
   line-height: 1.15;
   letter-spacing: 0px;
-  margin: 10px 0;
+  margin: 12px 0;
   color: var(--light-color);
 }
 h3 {
@@ -82,10 +93,10 @@ h4 {
 p {
   font-family: Play;
   font-weight: 400;
-  line-height: 1.15;
-  letter-spacing: 1px;
-  margin: 10px 0;
-  color: var(--secondary-color);
+  line-height: 1.6;
+  letter-spacing: 0.25px;
+  margin: 12px 0;
+  color: var(--text-soft);
   
 }
 
@@ -95,79 +106,112 @@ p {
 
 /* Setting the image width to 100% to allow them to take 100% of the container they will be added to */
 img {
-  height: 100%;
+  height: auto;
   width: 100%;
-  border-radius: 2%;
+  border-radius: 12px;
+}
+
+/* Accessibility */
+.skip-link {
+  position: absolute;
+  left: -999px;
+  top: 0;
+  background: var(--secondary-color);
+  color: var(--light-color);
+  padding: 0.8rem 1rem;
+  z-index: 9999;
+  border-radius: 0 0 8px 8px;
+}
+
+.skip-link:focus {
+  left: 1rem;
 }
 
 /*NAV BAR*/
 /* Create various classes for NavBar to hold the formatting of the Navigation Bar across all pages*/
 .navbar {
-  background-color: var(--secondary-color);
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  backdrop-filter: blur(10px);
+  background: rgba(39, 76, 119, 0.92);
   color: #fff;
-  height: 70px;
+  min-height: 82px;
+  box-shadow: 0 8px 24px rgba(20, 37, 59, 0.18);
 }
 .navbar ul {
   display: flex;
+  flex-wrap: wrap;
+  gap: 0.3rem;
 }
 .navbar a {
   color: #fff;
-  font-size: 22px;
-  padding: 10px;
+  font-size: 1.05rem;
+  padding: 10px 12px;
   margin: 0 5px;   
+  border-radius: 8px;
 }
 .navbar a:hover {
-  border-bottom: 2px var(--primary-color) solid;
+  background: rgba(255, 255, 255, 0.12);
 }
 .navbar .flex {
   justify-content: space-between;
 }
 
+.navbar a[aria-current="page"] {
+  background: rgba(96, 150, 186, 0.35);
+  font-weight: 700;
+}
+
 /* SHOWCASE/HERO */
 .showcase{
-  height: 400px;
+  min-height: 480px;
   background-color: var(--primary-color);
   color: #fff;
   position: relative;
+  border-radius: 0 0 28px 28px;
 }
 .showcase h1{
-  font-size: 40px;
+  font-size: clamp(2rem, 4vw, 3rem);
 }
 .showcase p {
-  margin: 20px 0;
+  margin: 16px 0;
+  color: #f5fbff;
 }
 .showcase .grid {
   grid-template-columns: 55% 45%;
-  gap: 30px;
+  gap: 40px;
   overflow: visible;
 }
 .showcase-form {
-  position: relative;
-  top: 60px;
-  height: 350px;
-  width: 400px;
-  padding: 40px;
+  height: 100%;
+  max-height: 420px;
+  width: min(100%, 430px);
+  padding: 20px;
   z-index: 100;
+  border-radius: 20px;
+  box-shadow: var(--shadow-soft);
 }
 
 .showcase2{
-  height: 400px;
+  min-height: 460px;
   background-color: var(--light-color);
   position: relative;
+  border-radius: 0 0 28px 28px;
 }
 .showcase2 h1{
-  font-size: 40px;
+  font-size: clamp(2rem, 4vw, 3rem);
   color: var(--secondary-color);
 }
 .showcase2 h2{
   color: var(--secondary-color);
 }
 .showcase2 p {
-  margin: 20px 0;
+  margin: 16px 0;
 }
 .showcase2 .grid {
   grid-template-columns: 55% 45%;
-  gap: 30px;
+  gap: 40px;
   overflow: visible;
 }
 .showcase2-form {
@@ -180,15 +224,29 @@ img {
 }
 
 .showcase-wide {
-  max-width: 3000px; /* Adjust the width as needed */
+  max-width: 1600px;
   width: 90%; /* Ensures responsiveness */
   margin: 0 auto; /* Centers the content */
 }
 
 /* CLIs*/
+.cli {
+  padding: 3.5rem 0;
+}
+
 .cli .grid {
   grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(1, 1fr);
+  gap: 1.5rem;
+}
+
+.footer {
+  margin-top: 2rem;
+}
+
+.footer h1,
+.footer h2,
+.footer a {
+  color: var(--light-color);
 }
 
 /*TABLETS & UNDER*/
@@ -203,6 +261,11 @@ img {
   }
   .showcase {
     height: auto;
+    border-radius: 0 0 22px 22px;
+  }
+  .showcase2 {
+    min-height: auto;
+    border-radius: 0 0 22px 22px;
   }
   .showcase-text{
     text-align: center;
@@ -211,6 +274,7 @@ img {
   .showcase-form {
     justify-self: center;
     margin: auto;
+    max-height: 360px;
   }
   .cli .grid > *:first-child {
     grid-column: 1;
@@ -219,26 +283,34 @@ img {
 }
 
 @media(max-width: 500px) {
+  .navbar {
+    min-height: 110px;
+  }
   .navbar .flex {
     flex-direction: column;
-    align-items: left; /* Center items horizontally */
+    align-items: stretch;
   }
   .navbar ul {
-    padding: 0; /* Remove padding */
-    background-color: var(--secondary-color); /* Match navbar background color */
-    width: 100%; /* Take full width */
+    padding: 0;
+    background-color: transparent;
+    width: 100%;
+    justify-content: center;
   }
   .navbar a {
-    display: block; /* Make links take full width */
-    padding: 15px 15; /* Add vertical padding */
-    font-size: 14px; /* Decrease font size */
-    text-align: center; /* Center text */
-    margin: 0; /* Remove margin */
-    border-bottom: 1px solid rgba(255,255,255,0.1); /* Add a separator */
+    display: block;
+    padding: 10px 10px;
+    font-size: 0.92rem;
+    text-align: center;
+    margin: 0;
   }
-  .navbar a:last-child {
-    border-bottom: none; /* Remove separator for last link */
+
+  .showcase,
+  .showcase2 {
+    padding-bottom: 1.5rem;
   }
-}
 
+  .cli {
+    padding-top: 2.5rem;
+  }
+}