diff --git a/README.md b/README.md
index 2ad906b..f99e3e8 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,56 @@
-# READ: Use ImageMagick to ensure images render well in safari
+# Tyler J. Skluzacek, Ph.D. - Personal Website
 
-Before adding your news‐logo images to the project, you can “flatten” them onto a white background so that browsers like Safari won’t introduce gray halos around transparent edges.
+This repository contains the code for my personal website.
 
-For instance, to convert the logo from pearc24, do: 
-convert pearc24logo.png -background white -flatten pearc24logo.png
+## How to View Locally
+
+There are several ways to view this website locally without pushing to GitHub:
+
+### Method 1: Using Python's Built-in HTTP Server
+
+1. Open a terminal
+2. Navigate to the website directory: `cd /path/to/tskluzac.github.io`
+3. Run: `python3 -m http.server 8000`
+4. Open a browser and go to: `http://localhost:8000`
+
+### Method 2: Using Node.js and http-server
+
+1. Install http-server if you don't have it: `npm install -g http-server`
+2. Navigate to the website directory: `cd /path/to/tskluzac.github.io`
+3. Run: `http-server -p 8000`
+4. Open a browser and go to: `http://localhost:8000`
+
+### Method 3: Using VS Code Live Server Extension
+
+1. Install the "Live Server" extension in VS Code
+2. Right-click on `index.html` in VS Code
+3. Select "Open with Live Server"
+4. The website will automatically open in your default browser
+
+### Method 4: Simply Open the HTML File
+
+For basic viewing without server features:
+1. Navigate to the website directory in your file explorer
+2. Double-click on `index.html` to open it directly in your browser
+   - Note: Some features might not work correctly with this method
+
+## Features
+
+The website includes:
+
+- Responsive design that works on mobile, tablet, and desktop
+- Dark/light mode toggle with system preference detection
+- Smooth animations using AOS (Animate On Scroll) library
+- Modern card-based layout for news items
+- Timeline display for older news
+- Font Awesome icons for social media links
+- Google Fonts integration for typography
+- Bootstrap 5 for layout and components
+
+## File Structure
+
+- `index.html` - Main HTML file
+- `static/css/styles.css` - Custom CSS styles
+- `static/js/script.js` - JavaScript functionality
+- `static/images/` - Image assets
+- `static/cv/` - CV PDF file
diff --git a/index.html b/index.html
index ede6a3c..af99e49 100644
--- a/index.html
+++ b/index.html
@@ -4,115 +4,244 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Tyler J. Skluzacek, Ph.D.</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="../static/css/styles.css">
-    <style>
-        /* Ensure consistent section width */
-        .container {
-            max-width: 800px;
-            margin: 0 auto; /* Center the sections */
-        }
-
-        /* Center the CV button */
-        .cv-download {
-            display: flex;
-            justify-content: center; /* Center horizontally */
-            margin-top: 20px; /* Optional: Adds spacing above the button */
-        }
-    </style>
+    <!-- Google Fonts -->
+    <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=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- Bootstrap -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- AOS Animation Library -->
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="static/css/styles.css">
 </head>
 <body>
+    <!-- Theme Toggle -->
+    <div class="theme-toggle">
+        <button id="theme-toggle-btn" aria-label="Toggle dark/light mode">
+            <i class="fas fa-moon"></i>
+        </button>
+    </div>
 
-    <div class="container py-5">
-
-        <!-- Introduction Section -->
-        <section id="introduction" class="text-center mb-5">
-            <img src="../static/images/abcde.jpeg" alt="Dr. Tyler Skluzacek" class="img-fluid rounded-circle" style="max-width: 200px;">
-            <h1>Tyler J. Skluzacek, Ph.D.</h1>
-    
-            <!-- Social Media Icons -->
-            <div class="social-icons">
-                <a href="https://scholar.google.com/citations?user=S2g6hQYAAAAJ&hl=en&oi=ao" target="_blank"><img src="../static/images/scholar-logo.png" alt="Google Scholar"></a>
-                <a href="https://www.linkedin.com/in/tskluzacek/" target="_blank"><img src="../static/images/linkedin_icon.png" alt="LinkedIn"></a>
-            </div>
-    
-            <br>
-    
-            <div style="text-align: left; margin: 0 auto;">
-                <p class="intro-text">I am a Staff Research Scientist in the <a href="https://www.ornl.gov/group/workflows-and-ecosystem-services">Workflow and Ecosystem Services (WES) group</a> at the National Center for Computational Sciences (NCCS) at Oak Ridge National Lab. In this position, I write programs and papers that explore the interconnections between data science and distributed computing. Some questions I've explored recently are:</p>
-    
-                <ul style="list-style-type: disc; list-style-position: inside; padding-left: 20px; line-height: 1.6;">
-                    <li>How can we automate one's interactions with a supercomputer beyond the age-old requirement of 'ssh'?</li>
-                    <li>What tradeoffs exist when orchestrating workflows between supercomputers, microscopes, and analysis clusters?</li>
-                    <li>Can we automatically make research repositories navigable with minimal human indexing effort?</li>
-                    <li>What artificial intelligence approaches can help us automatically generate a search index over a data set?</li>
-                </ul>
-    
-                <p class="intro-text">Additionally, I am an Adjunct Professor in the Computing and Data Analytics Department at Trinity Christian College in Palos Heights, IL, and am the original founder of the NightWare (previously myBivy) application for monitoring and treating nightmares in patients with PTSD.</p>
-    
-                <p class="intro-text">I stay actively involved in the computing community. I am currently serving as the publicity chair for HPDC '25 and posters chair for eScience '25, and have previously served on program committees for SC, HPDC, IPDPS, ICPP, and SciPy. I also served on the curriculum development team for the Data4All bridge workshop for South-Chicago high school students.</p>
+    <!-- Header Section -->
+    <header class="py-5">
+        <div class="container">
+            <div class="row align-items-center">
+                <div class="col-md-4 text-center text-md-start" data-aos="fade-right">
+                    <img src="static/images/abcde.jpeg" alt="Dr. Tyler Skluzacek" class="profile-image">
+                </div>
+                <div class="col-md-8" data-aos="fade-left">
+                    <h1 class="display-4 fw-bold">Tyler J. Skluzacek, Ph.D.</h1>
+                    <p class="lead text-muted">Staff Research Scientist | Oak Ridge National Laboratory</p>
+                    
+                    <!-- Social Media Icons -->
+                    <div class="social-icons">
+                        <a href="https://scholar.google.com/citations?user=S2g6hQYAAAAJ&hl=en&oi=ao" target="_blank" aria-label="Google Scholar">
+                            <i class="fas fa-graduation-cap"></i>
+                        </a>
+                        <a href="https://www.linkedin.com/in/tskluzacek/" target="_blank" aria-label="LinkedIn">
+                            <i class="fab fa-linkedin"></i>
+                        </a>
+                    </div>
+                    <a href="static/cv/tyler_skluzacek_cv.pdf" download="tyler_skluzacek_cv.pdf" class="btn btn-primary mt-3">
+                        <i class="fas fa-file-pdf me-2"></i>Download CV
+                    </a>
+                </div>
             </div>
-    
-        </section>
+        </div>
+    </header>
 
-        <!-- CV Download Link -->
-        <div class="cv-download">
-            <a href="static/cv/tyler_skluzacek_cv.pdf" download="tyler_skluzacek_cv.pdf" class="btn btn-primary">Download CV</a>
+    <!-- About Section -->
+    <section id="about" class="py-5">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-12" data-aos="fade-up">
+                    <div class="card shadow-sm">
+                        <div class="card-body">
+                            <h2 class="section-title">About Me</h2>
+                            <p class="intro-text">I am a Staff Research Scientist in the <a href="https://www.ornl.gov/group/workflows-and-ecosystem-services">Workflow and Ecosystem Services (WES) group</a> at the National Center for Computational Sciences (NCCS) at Oak Ridge National Lab. In this position, I write programs and papers that explore the interconnections between data science and distributed computing. Some questions I've explored recently are:</p>
+                            
+                            <div class="research-questions">
+                                <div class="question-card" data-aos="zoom-in" data-aos-delay="100">
+                                    <i class="fas fa-terminal icon"></i>
+                                    <p>How can we automate one's interactions with a supercomputer beyond the age-old requirement of 'ssh'?</p>
+                                </div>
+                                <div class="question-card" data-aos="zoom-in" data-aos-delay="200">
+                                    <i class="fas fa-network-wired icon"></i>
+                                    <p>What tradeoffs exist when orchestrating workflows between supercomputers, microscopes, and analysis clusters?</p>
+                                </div>
+                                <div class="question-card" data-aos="zoom-in" data-aos-delay="300">
+                                    <i class="fas fa-database icon"></i>
+                                    <p>Can we automatically make research repositories navigable with minimal human indexing effort?</p>
+                                </div>
+                                <div class="question-card" data-aos="zoom-in" data-aos-delay="400">
+                                    <i class="fas fa-brain icon"></i>
+                                    <p>What artificial intelligence approaches can help us automatically generate a search index over a data set?</p>
+                                </div>
+                            </div>
+                            
+                            <p class="intro-text mt-4">Additionally, I am an Adjunct Professor in the Computing and Data Analytics Department at Trinity Christian College in Palos Heights, IL, and am the original founder of the NightWare (previously myBivy) application for monitoring and treating nightmares in patients with PTSD.</p>
+                            
+                            <p class="intro-text">I stay actively involved in the computing community. I am currently serving as the publicity chair for HPDC '25 and posters chair for eScience '25, and have previously served on program committees for SC, HPDC, IPDPS, ICPP, and SciPy. I also served on the curriculum development team for the Data4All bridge workshop for South-Chicago high school students.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
-    </div>
+    </section>
 
     <!-- Recent News Section -->
-    <div class="container mt-4">
-        <section id="news">
-            <h2 class="mb-4">Recent News</h2>
-            <div class="row">
-                <div class="col-md-3">
-                    <img src="../static/images/ornl-logo.png" alt="News Title 3" class="img-fluid">
-                    <h3>New Role: ORNL Staff Scientist</h3>
-                    <p>(May 2025) I am thrilled to announce that I've been promoted to Staff Scientist at ORNL. 
+    <section id="news" class="py-5 bg-light">
+        <div class="container">
+            <h2 class="section-title text-center mb-5" data-aos="fade-up">Recent News</h2>
+            
+            <div class="row g-4">
+                <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="100">
+                    <div class="news-card">
+                        <div class="news-img">
+                            <img src="static/images/ornl-logo.png" alt="ORNL Logo" class="img-fluid">
+                        </div>
+                        <div class="news-content">
+                            <span class="date">May 2025</span>
+                            <h3>New Role: ORNL Staff Scientist</h3>
+                            <p>I am thrilled to announce that I've been promoted to Staff Scientist at ORNL.</p>
+                        </div>
+                    </div>
                 </div>
-                <div class="col-md-3">
-                    <img src="../static/images/pearc24logo.png" alt="HPDC Chair" class="img-fluid">
-                    <h3>PEARC-25 Paper</h3>
-                    <p>(May 2025) My team's paper "Secure API-Driven Research Automation to Accelerate Scientific Discovery" has been accepted for publication at <a href="https://pearc.acm.org/pearc25/">PEARC 2025!</a></p>
+                
+                <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="200">
+                    <div class="news-card">
+                        <div class="news-img">
+                            <img src="static/images/pearc24logo.png" alt="PEARC Logo" class="img-fluid">
+                        </div>
+                        <div class="news-content">
+                            <span class="date">May 2025</span>
+                            <h3>PEARC-25 Paper</h3>
+                            <p>My team's paper "Secure API-Driven Research Automation to Accelerate Scientific Discovery" has been accepted for publication at <a href="https://pearc.acm.org/pearc25/">PEARC 2025!</a></p>
+                        </div>
+                    </div>
                 </div>
-                <div class="col-md-3">
-                    <img src="../static/images/confab-logo.png" alt="Confab Presentation" class="img-fluid">
-                    <h3>Confab Presentation</h3>
-                    <p>(Mar. 2025) I presented "The Secure Scientific Service Mesh (S3M) at Confab 2025.</p>
+                
+                <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="300">
+                    <div class="news-card">
+                        <div class="news-img">
+                            <img src="static/images/confab-logo.png" alt="Confab Logo" class="img-fluid">
+                        </div>
+                        <div class="news-content">
+                            <span class="date">March 2025</span>
+                            <h3>Confab Presentation</h3>
+                            <p>I presented "The Secure Scientific Service Mesh (S3M)" at Confab 2025.</p>
+                        </div>
+                    </div>
                 </div>
-                <div class="col-md-3">
-                    <img src="../static/images/uchicago-logo.png" alt="News Title 3" class="img-fluid">
-                    <h3>New Role: UChicago Adjunct Faculty</h3>
-                    <p>(Jan. 2025) I am thrilled to announce that I've been appointed to the Adjunct Faculty of the MPCS and MS-ADS Master's programs at UChicago. I taught "Distributed Computing" in Spring 2025.</p>
+                
+                <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="400">
+                    <div class="news-card">
+                        <div class="news-img">
+                            <img src="static/images/uchicago-logo.png" alt="UChicago Logo" class="img-fluid">
+                        </div>
+                        <div class="news-content">
+                            <span class="date">January 2025</span>
+                            <h3>UChicago Adjunct Faculty</h3>
+                            <p>I've been appointed to the Adjunct Faculty of the MPCS and MS-ADS Master's programs at UChicago. I taught "Distributed Computing" in Spring 2025.</p>
+                        </div>
+                    </div>
                 </div>
             </div>
-    
-            <br>
-    
-            <!-- Older News Items -->
-            <div class="older-news">
-                <h3>Other News</h3>
-                <ul>
-                    <li> [Jun. 2025] I served as the Publicity Chair of HPDC 2025. </li>
-                    <li> [Mar. 2025] A paper co-authored by Brian Etz, others, and me "Enabling Seamless Transitions from Experimental to Production HPC for Interactive Workflows" accepted to Workshop on Interactive and Urgent High-Performance Computing.
-                    <li> [Dec. 2024] I taught "Advanced Data Visualization" for the Computing and Data Analytics Department at Trinity Christian College.</li>
-                    <li> [Nov. 2024] Takuya Kurihana presented our team's paper "Scalable Multi-Facility Workflows for Artificial Intelligence Applications in Climate Research" at XLOOP24 in Atlanta, GA.
-                    <li>[Aug. 2024] I presented my poster entitled "Enabling Distributed Research Orchestration Capabilities at ORNL" at the invitation-only Monterrey 
-                    <li>[Sep. 2024] I served as the Publicity Chair of eScience 2024.</li>
-                    <li>[Aug. 2024] I had the opportunity to present a poster on cross-facility workflows orchestration at the invitation-only 2024 Monterey Data Conference.</li>
-                    <li>[Jul. 2024] My team's paper "Towards Cross-Facility Workflows Orchestration through Distributed Automation" presented at <a href="https://pearc.acm.org/pearc24/">PEARC 2024!</a></li>
-                    <li>[May 2024] I presented "Enhancing research orchestration capabilities at ORNL" at GlobusWorld 2024.</li>
-                    <li>[Jan. 2024] I taught "Machine Learning for Data Mining" at Trinity Christian College.</li>
-                    <li>[Nov. 2023] I am co-PI on $300k grant to study distributed multi-workflow orchestration. Awarded by Oak Ridge National Lab.</li>
-                    <li>[Oct. 2023] I traveled to Limassol, Cyprus to present my team's paper: "Can Automated Metadata Extraction Make Scientific Data More Navigable?"</li>
-                    <li>[Oct. 2023] I presented at ParslFest 2023.</li>
-                </ul>
+            
+            <!-- Older News Section -->
+            <div class="older-news mt-5" data-aos="fade-up">
+                <h3 class="mb-4">Other News</h3>
+                <div class="timeline">
+                    <div class="timeline-item">
+                        <div class="timeline-date">Jun 2025</div>
+                        <div class="timeline-content">
+                            <p>I served as the Publicity Chair of HPDC 2025.</p>
+                        </div>
+                    </div>
+                    <div class="timeline-item">
+                        <div class="timeline-date">Mar 2025</div>
+                        <div class="timeline-content">
+                            <p>A paper co-authored by Brian Etz, others, and me "Enabling Seamless Transitions from Experimental to Production HPC for Interactive Workflows" accepted to Workshop on Interactive and Urgent High-Performance Computing.</p>
+                        </div>
+                    </div>
+                    <div class="timeline-item">
+                        <div class="timeline-date">Dec 2024</div>
+                        <div class="timeline-content">
+                            <p>I taught "Advanced Data Visualization" for the Computing and Data Analytics Department at Trinity Christian College.</p>
+                        </div>
+                    </div>
+                    <div class="timeline-item">
+                        <div class="timeline-date">Nov 2024</div>
+                        <div class="timeline-content">
+                            <p>Takuya Kurihana presented our team's paper "Scalable Multi-Facility Workflows for Artificial Intelligence Applications in Climate Research" at XLOOP24 in Atlanta, GA.</p>
+                        </div>
+                    </div>
+                    <div class="timeline-item">
+                        <div class="timeline-date">Sep 2024</div>
+                        <div class="timeline-content">
+                            <p>I served as the Publicity Chair of eScience 2024.</p>
+                        </div>
+                    </div>
+                    <div class="timeline-item">
+                        <div class="timeline-date">Aug 2024</div>
+                        <div class="timeline-content">
+                            <p>I presented my poster entitled "Enabling Distributed Research Orchestration Capabilities at ORNL" at the invitation-only Monterey Data Conference.</p>
+                        </div>
+                    </div>
+                    <div class="timeline-item">
+                        <div class="timeline-date">Jul 2024</div>
+                        <div class="timeline-content">
+                            <p>My team's paper "Towards Cross-Facility Workflows Orchestration through Distributed Automation" presented at <a href="https://pearc.acm.org/pearc24/">PEARC 2024!</a></p>
+                        </div>
+                    </div>
+                    <div class="timeline-item">
+                        <div class="timeline-date">May 2024</div>
+                        <div class="timeline-content">
+                            <p>I presented "Enhancing research orchestration capabilities at ORNL" at GlobusWorld 2024.</p>
+                        </div>
+                    </div>
+                    <div class="timeline-item">
+                        <div class="timeline-date">Jan 2024</div>
+                        <div class="timeline-content">
+                            <p>I taught "Machine Learning for Data Mining" at Trinity Christian College.</p>
+                        </div>
+                    </div>
+                    <div class="timeline-item">
+                        <div class="timeline-date">Nov 2023</div>
+                        <div class="timeline-content">
+                            <p>I am co-PI on $300k grant to study distributed multi-workflow orchestration. Awarded by Oak Ridge National Lab.</p>
+                        </div>
+                    </div>
+                    <div class="timeline-item">
+                        <div class="timeline-date">Oct 2023</div>
+                        <div class="timeline-content">
+                            <p>I traveled to Limassol, Cyprus to present my team's paper: "Can Automated Metadata Extraction Make Scientific Data More Navigable?"</p>
+                        </div>
+                    </div>
+                    <div class="timeline-item">
+                        <div class="timeline-date">Oct 2023</div>
+                        <div class="timeline-content">
+                            <p>I presented at ParslFest 2023.</p>
+                        </div>
+                    </div>
+                </div>
             </div>
-        </section>
-    </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="py-4 text-center">
+        <div class="container">
+            <p>© 2025 Tyler J. Skluzacek, Ph.D.</p>
+        </div>
+    </footer>
 
-    <script src="js/script.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- Scripts -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <script src="static/js/script.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/static/css/styles.css b/static/css/styles.css
index 4738218..e3a22aa 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -1,126 +1,418 @@
-/* General body styles */
+:root {
+    --primary-color: #0066cc;
+    --secondary-color: #f8f9fa;
+    --accent-color: #17a2b8;
+    --text-color: #333;
+    --text-muted: #6c757d;
+    --bg-color: #ffffff;
+    --card-bg: #ffffff;
+    --border-color: #e9ecef;
+    --shadow-color: rgba(0, 0, 0, 0.05);
+    --transition-speed: 0.3s;
+    --font-heading: 'Playfair Display', serif;
+    --font-body: 'Inter', sans-serif;
+}
+
+/* Dark Mode Variables */
+.dark-mode {
+    --primary-color: #4d94ff;
+    --secondary-color: #2d3748;
+    --accent-color: #38b2ac;
+    --text-color: #f7fafc;
+    --text-muted: #a0aec0;
+    --bg-color: #1a202c;
+    --card-bg: #2d3748;
+    --border-color: #4a5568;
+    --shadow-color: rgba(0, 0, 0, 0.2);
+}
+
+/* General Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    transition: background-color var(--transition-speed), color var(--transition-speed);
+}
+
 body {
-    font-family: Arial, sans-serif;
+    font-family: var(--font-body);
+    color: var(--text-color);
+    background-color: var(--bg-color);
+    line-height: 1.6;
 }
 
-/* Modal styles */
-.modal {
-    display: none;
-    position: fixed;
-    z-index: 1;
+h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-heading);
+    font-weight: 600;
+    margin-bottom: 1rem;
+}
+
+a {
+    color: var(--primary-color);
+    text-decoration: none;
+    transition: color var(--transition-speed);
+}
+
+a:hover {
+    color: var(--accent-color);
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 1.5rem;
+}
+
+.section-title {
+    position: relative;
+    margin-bottom: 2rem;
+    color: var(--primary-color);
+    font-weight: 700;
+}
+
+.section-title::after {
+    content: '';
+    position: absolute;
     left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    background-color: rgba(0, 0, 0, 0.4);
+    bottom: -10px;
+    width: 50px;
+    height: 3px;
+    background-color: var(--primary-color);
 }
 
-.modal-content {
-    background-color: #fefefe;
-    margin: 15% auto;
-    padding: 20px;
-    border: 1px solid #888;
-    width: 80%;
+.bg-light {
+    background-color: var(--secondary-color);
 }
 
-.close {
-    color: #aaa;
-    float: right;
-    font-size: 28px;
-    font-weight: bold;
+/* Theme Toggle */
+.theme-toggle {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 1000;
 }
 
-.close:hover,
-.close:focus {
-    color: black;
+#theme-toggle-btn {
+    background: none;
+    border: none;
+    color: var(--text-color);
+    font-size: 1.5rem;
     cursor: pointer;
+    padding: 0.5rem;
+    border-radius: 50%;
+    background-color: var(--card-bg);
+    box-shadow: 0 2px 10px var(--shadow-color);
+    transition: transform 0.2s;
 }
 
-/* Image styles */
-img {
-    margin: 0 auto;
-    display: block;
+#theme-toggle-btn:hover {
+    transform: scale(1.1);
 }
 
-/* Introduction text */
-.intro-text {
-    text-align: justify;
-    text-align-last: left;
+/* Header Styles */
+header {
+    padding: 2rem 0;
+}
+
+.profile-image {
+    width: 200px;
+    height: 200px;
+    object-fit: cover;
+    border-radius: 50%;
+    border: 4px solid var(--primary-color);
+    box-shadow: 0 10px 20px var(--shadow-color);
+    transition: transform 0.3s;
+}
+
+.profile-image:hover {
+    transform: scale(1.05);
 }
 
-/* Social media icons */
 .social-icons {
-    margin: 10px 0;
+    display: flex;
+    align-items: center;
+    margin-top: 1.5rem;
 }
 
-.social-icons img {
-    width: 30px;
-    margin: 0 10px;
-    display: inline-block;
+.social-icons a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background-color: var(--primary-color);
+    color: white;
+    margin-right: 1rem;
+    transition: transform 0.3s, background-color 0.3s;
+    text-decoration: none;
+    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
 }
 
-/* Social icons and CV section */
-.social-and-cv {
+.social-icons a:hover {
+    transform: translateY(-5px);
+    background-color: var(--accent-color);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+}
+
+.social-icons i {
+    font-size: 1.2rem;
+}
+
+.cv-button {
     display: flex;
+    align-items: center;
     justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background-color: var(--primary-color);
+    color: white;
+    margin-right: 1rem;
+    transition: transform 0.3s, background-color 0.3s;
+    text-decoration: none;
+    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+}
+
+.cv-button:hover {
+    transform: translateY(-5px);
+    background-color: var(--accent-color);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+}
+
+/* About Section */
+#about {
+    padding: 4rem 0;
+}
+
+.card {
+    background-color: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 10px;
+    overflow: hidden;
+    transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 15px 30px var(--shadow-color);
+}
+
+.card-body {
+    padding: 2rem;
+}
+
+.intro-text {
+    margin-bottom: 1.5rem;
+    color: var(--text-color);
+    line-height: 1.8;
+}
+
+.research-questions {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 1.5rem;
+    margin: 2rem 0;
+}
+
+.question-card {
+    background-color: var(--secondary-color);
+    padding: 1.5rem;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
     align-items: center;
+    text-align: center;
+    transition: transform 0.3s;
+}
+
+.question-card p {
+    color: var(--text-color);
+}
+
+.question-card:hover {
+    transform: translateY(-5px);
+}
+
+.question-card .icon {
+    font-size: 2rem;
+    color: var(--primary-color);
+    margin-bottom: 1rem;
 }
 
-/* Center CV button */
-.cv-download {
+/* Ensure better contrast in dark mode */
+.dark-mode .question-card {
+    background-color: var(--card-bg);
+}
+
+.dark-mode .question-card p {
+    color: var(--text-color);
+}
+
+/* News Section */
+#news {
+    padding: 4rem 0;
+}
+
+.news-card {
+    background-color: var(--card-bg);
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: 0 5px 15px var(--shadow-color);
+    height: 100%;
+    transition: transform 0.3s;
+}
+
+.news-card:hover {
+    transform: translateY(-10px);
+}
+
+.news-img {
+    height: 180px;
+    overflow: hidden;
     display: flex;
+    align-items: center;
     justify-content: center;
-    margin-top: 20px;
+    background-color: white;
+    padding: 1rem;
 }
 
-/* News Section Styles */
-#news .col-custom {
-    flex: 0 0 20%; /* Each column takes up 20% of the row */
-    max-width: 20%;
+.news-img img {
+    max-height: 100%;
+    max-width: 100%;
+    object-fit: contain;
 }
 
-#news img {
-    width: 100%;
-    height: auto;
-    border-radius: 5px;
+.news-content {
+    padding: 1.5rem;
 }
 
-/* Ensure consistent section width */
-.container {
-    max-width: 800px;
-    margin: 0 auto; /* Center sections */
+.news-content .date {
+    display: inline-block;
+    background-color: var(--primary-color);
+    color: white;
+    padding: 0.25rem 0.75rem;
+    border-radius: 20px;
+    font-size: 0.8rem;
+    margin-bottom: 0.75rem;
 }
 
-/* Responsiveness */
-@media (max-width: 768px) {
-    #news .col-custom {
-        flex: 0 0 50%;
-        max-width: 50%;
+.news-content h3 {
+    font-size: 1.2rem;
+    margin-bottom: 0.75rem;
+}
+
+/* Timeline */
+.timeline {
+    position: relative;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.timeline::after {
+    content: '';
+    position: absolute;
+    width: 2px;
+    background-color: var(--primary-color);
+    top: 0;
+    bottom: 0;
+    left: 120px;
+    margin-left: -1px;
+}
+
+.timeline-item {
+    padding: 10px 40px 10px 150px;
+    position: relative;
+    margin-bottom: 1.5rem;
+}
+
+.timeline-date {
+    position: absolute;
+    width: 100px;
+    text-align: right;
+    left: 0;
+    top: 10px;
+    font-weight: 600;
+    color: var(--primary-color);
+}
+
+.timeline-content {
+    padding: 1rem;
+    background-color: var(--card-bg);
+    border-radius: 8px;
+    box-shadow: 0 3px 10px var(--shadow-color);
+    position: relative;
+}
+
+.timeline-content::before {
+    content: '';
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    background-color: var(--primary-color);
+    border-radius: 50%;
+    top: 15px;
+    left: -50px;
+    z-index: 1;
+}
+
+/* Footer */
+footer {
+    background-color: var(--secondary-color);
+    color: var(--text-muted);
+    padding: 2rem 0;
+    margin-top: 2rem;
+}
+
+/* Animations */
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+/* Responsive Styles */
+@media (max-width: 992px) {
+    .research-questions {
+        grid-template-columns: repeat(2, 1fr);
     }
 }
 
-@media (max-width: 576px) {
-    #news .col-custom {
-        flex: 0 0 100%;
-        max-width: 100%;
+@media (max-width: 768px) {
+    .timeline::after {
+        left: 31px;
+    }
+    
+    .timeline-item {
+        padding-left: 70px;
+    }
+    
+    .timeline-date {
+        width: auto;
+        text-align: left;
+        left: 70px;
+        top: -20px;
+    }
+    
+    .timeline-content::before {
+        left: -40px;
+    }
+    
+    .research-questions {
+        grid-template-columns: 1fr;
     }
 }
 
-/* Image styles */
-img {
-    margin: 0 auto;
-    display: block;
-    /* force transparent PNGs to sit on white */
-    background-color: #fff;
-}
-
-/* News Section Styles */
-#news img {
-    width: 100%;
-    height: auto;
-    border-radius: 5px;
-    /* reinforce white backing, and remove any browser outline */
-    background-color: #fff;
-    border: none;
+@media (max-width: 576px) {
+    .profile-image {
+        width: 150px;
+        height: 150px;
+    }
+    
+    .section-title {
+        font-size: 1.5rem;
+    }
+    
+    .timeline-content::before {
+        display: none;
+    }
 }
\ No newline at end of file
diff --git a/static/js/script.js b/static/js/script.js
index 8345297..f0204d8 100644
--- a/static/js/script.js
+++ b/static/js/script.js
@@ -1,14 +1,59 @@
-function showCV() {
-    var modal = document.getElementById("cvModal");
-    var span = document.getElementsByClassName("close")[0];
+// Initialize AOS animations
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize AOS animation library
+    AOS.init({
+        duration: 800,
+        easing: 'ease-in-out',
+        once: true,
+        mirror: false
+    });
 
-    modal.style.display = "block";
-    span.onclick = function() {
-        modal.style.display = "none";
+    // Theme toggle functionality
+    const themeToggleBtn = document.getElementById('theme-toggle-btn');
+    const themeIcon = themeToggleBtn.querySelector('i');
+    
+    // Check for saved theme preference or use preferred color scheme
+    const savedTheme = localStorage.getItem('theme');
+    const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    
+    // Apply saved theme or use system preference
+    if (savedTheme === 'dark' || (!savedTheme && prefersDarkScheme)) {
+        document.body.classList.add('dark-mode');
+        themeIcon.classList.remove('fa-moon');
+        themeIcon.classList.add('fa-sun');
     }
-    window.onclick = function(event) {
-        if (event.target == modal) {
-            modal.style.display = "none";
+    
+    // Toggle theme when button is clicked
+    themeToggleBtn.addEventListener('click', function() {
+        document.body.classList.toggle('dark-mode');
+        
+        // Update icon
+        if (document.body.classList.contains('dark-mode')) {
+            themeIcon.classList.remove('fa-moon');
+            themeIcon.classList.add('fa-sun');
+            localStorage.setItem('theme', 'dark');
+        } else {
+            themeIcon.classList.remove('fa-sun');
+            themeIcon.classList.add('fa-moon');
+            localStorage.setItem('theme', 'light');
         }
-    }
-}
+    });
+    
+    // Smooth scrolling for anchor links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function(e) {
+            e.preventDefault();
+            
+            const targetId = this.getAttribute('href');
+            if (targetId === '#') return;
+            
+            const targetElement = document.querySelector(targetId);
+            if (targetElement) {
+                targetElement.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'start'
+                });
+            }
+        });
+    });
+});