diff --git a/Public/index.html b/Public/index.html
index 4136d9f..da65529 100644
--- a/Public/index.html
+++ b/Public/index.html
@@ -1 +1,299 @@
-//put your html + css + JavaScript here it will run on web url on render 🧑‍💻 made with love by Frank kaumba dev 🫶
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>YOUNG TEETech</title>
+<h1> WELCOME TO YOUNG TEE TECH</h1>
+<marquee behavior="scroll" direction="left">
+POWERED BY YOUNG TEE
+</marquee>
+<button id=“button1” onclick="myFunction()"> 
+Click Me! 
+</button>
+  <style>
+        /* General Page Styles */
+        body {
+            background-color: lightblue; 
+            color: darkblack; 
+            font-family: Arial, sans-serif;
+            text-align: center;
+        }
+
+        /* Header Styles */
+        header {
+            background-color: white
+            padding: 10px;
+            color: white;
+            font-size: 24px;
+        }
+
+        /* Navigation Bar */
+        nav {
+            background-color: black;
+            padding: 10px;
+            margin: 10px;
+        }
+
+        nav a {
+            text-decoration: none;
+            color: black;
+            font-weight: bold;
+            margin: 10px;
+        }
+
+        /* Main Content */
+        main {
+            padding: 20px;
+        }
+
+        /* Image Styling */
+        img {
+            width: 300px;
+            height: auto; 
+            border-radius: 10px; /* Rounded corners */
+        }
+
+        /* Form Styling */
+        form {
+            background-color: aqua;
+            padding: 20px;
+            border-radius: 10px;
+            display: inline-block;
+        }
+
+        input {
+            width: 80%;
+            padding: 8px;
+            margin: 5px;
+            border: 1px solid gray;
+            border-radius: 5px;
+        }
+
+        button {
+            background-color: darkgreen;
+            color: white;
+            padding: 10px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+
+        button:hover {
+            background-color: white;
+        }
+
+        /* Footer */
+        footer {
+            background-color: white;
+            color: white;
+            padding: 10px;
+            margin-top: 20px;
+        }
+        nav button {
+      padding: 0.75rem 1.5rem;
+      background: transparent;
+      border: 2px solid #3B82F6;
+      color: #3B82F6;
+      border-radius: 9999px;
+      cursor: pointer;
+      font-weight: 600;
+      transition: all 0.3s ease;
+    }
+     nav button:hover {
+      background: #3B82F6;
+      color: #fff;
+    }
+
+    nav button.active {
+      background: #3B82F6;
+      color: #fff;
+    }
+
+    section {
+      padding: 4rem 1rem;
+      max-width: 1200px;
+      margin: auto;
+    }
+
+    .card {
+      background: #fff;
+      padding: 2rem;
+      margin: 1rem 0;
+      border-radius: 12px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      transition: transform 0.3s ease;
+    }
+
+    .card:hover {
+      transform: translateY(-5px);
+    }
+
+    h2 {
+      font-size: 1.875rem;
+      font-weight: 700;
+      color: #1E3A8A;
+      margin-bottom: 1rem;
+    }
+
+    .projects .filter {
+      display: flex;
+      gap: 1rem;
+      margin-bottom: 2rem;
+      justify-content: center;
+    }
+
+    .filter button {
+      padding: 0.5rem 1rem;
+      background: #E5E7EB;
+      border: none;
+      border-radius: 9999px;
+      cursor: pointer;
+      font-weight: 500;
+      transition: all 0.3s ease;
+    }
+
+    .filter button.active,
+    .filter button:hover {
+      background: #3B82F6;
+      color: #fff;
+    }
+
+    .projects .project-item {
+      margin-bottom: 2rem;
+    }
+
+    .projects img {
+      width: 100%;
+      border-radius: 8px;
+      margin-bottom: 1rem;
+    }
+
+    .skills .bar {
+      height: 8px;
+      background: #E5E7EB;
+      border-radius: 9999px;
+      margin: 0.5rem 0 1.5rem;
+      overflow: hidden;
+    }
+
+    .skills .bar-fill {
+      height: 100%;
+      background: #3B82F6;
+      border-radius: 9999px;
+      transition: width 1.5s ease;
+    }
+
+    .contact-form {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      max-width: 500px;
+      margin: 1rem auto;
+    }
+
+    .contact-form input,
+    .contact-form textarea {
+      padding: 0.75rem;
+      border: 1px solid #D1D5DB;
+      border-radius: 8px;
+      font-size: 1rem;
+    }
+
+    .contact-form button {
+      padding: 0.75rem;
+      background: #3B82F6;
+      color: #fff;
+      border: none;
+      border-radius: 8px;
+      cursor: pointer;
+      font-weight: 600;
+      transition: background 0.3s ease;
+    }
+
+    .contact-form button:hover {
+      background: #1E3A8A;
+    }
+
+    .resume-btn {
+      display: inline-block;
+      padding: 0.75rem 1.5rem;
+      background: #3B82F6;
+      color: #fff;
+      border-radius: 9999px;
+      text-decoration: none;
+      font-weight: 600;
+      transition: background 0.3s ease;
+    }
+
+    .resume-btn:hover {
+      background: #1E3A8A;
+    }
+
+    footer {
+      text-align: center;
+      padding: 2rem;
+      background: #1E3A8A;
+      color: #fff;
+      font-size: 0.875rem;
+    }
+
+    .back-to-top {
+      position: fixed;
+      bottom: 2rem;
+      right: 2rem;
+      background: #3B82F6;
+      color: #fff;
+      border: none;
+      border-radius: 50%;
+      width: 3rem;
+      height: 3rem;
+      font-size: 1.5rem;
+      cursor: pointer;
+      display: none;
+      transition: opacity 0.3s ease;
+    }
+
+    .back-to-top.show {
+      display: block;
+    }
+
+    @media (max-width: 768px) {
+      h1 {
+        font-size: 2rem;
+      }
+
+      h2 {
+        font-size: 1.5rem;
+      }
+
+      nav {
+        flex-direction: column;
+        gap: 0.5rem;
+      }
+    }
+
+    </style>
+</head>
+
+<body>
+
+ <nav>
+        <a href="#">Home</a>
+        <a href="#">About</a>
+        <a href="#">Contact</a>
+    </nav>
+
+
+<h1>ALL ABOUT HELPING YOU AND REPORTING ISSUES </h1>
+<h2>IF YOU WOULD LIKE TO CONTACT ME</h2>
+<h3>HERE ARE MY DETAILS BELLOW</h3>
+<li>WhatsApp: <a href="https://wa.me/27722247464">Click here to chat</a></li>
+<li>Group: <a href="https://chat.whatsapp.com/CvCsijfCVD67IPsREC2vLE">Start chatting</a></li>
+<li>Channel: <a href="https://whatsapp.com/channel/0029Vb3X5B7CHDynvsspSI0g">Click here</a></li>
+<footer>
+<p>&copy; 2025 YOUNG TEE Tech.
+ALL RIGHTS RESERVED</p>
+</footer>
+</body>
+  </html>
