diff --git a/css/styles.css b/css/styles.css
index db5b882..51d966f 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1,16 +1,24 @@
 body {
   font-family: Arial, sans-serif;
-  background-color: #121212;
-  color: #ffffff;
+  background-color: #2c2c2c;
+  color: white;
   margin: 0;
   padding: 0;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
 }
 
 .container {
-  width: 90%;
-  max-width: 800px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  max-width: 600px;
   margin: 0 auto;
+  height: 100%;
   padding: 20px;
+  box-sizing: border-box;
 }
 
 h1 {
@@ -22,68 +30,59 @@ h1 {
   flex-direction: column;
 }
 
-textarea {
+#messageInput {
+  width: 100%;
   padding: 10px;
   margin-bottom: 10px;
-  border: 1px solid #444;
+  border: none;
   border-radius: 5px;
-  background-color: #222;
-  color: #fff;
-  width: 100%;
+  resize: none;
 }
 
 button {
   padding: 10px;
   border: none;
-  border-radius: 5px;
-  background-color: #007bff;
-  color: #fff;
+  background-color: #5a5a5a;
+  color: white;
   cursor: pointer;
 }
 
 button:hover {
-  background-color: #0056b3;
+  background-color: #3c3c3c;
 }
 
 .messages-container {
+  flex-grow: 1;
+  overflow-y: auto;
   margin-top: 20px;
 }
 
 .message {
-  background-color: #333;
+  background-color: #444;
   padding: 15px;
-  margin-bottom: 10px;
   border-radius: 5px;
+  margin-bottom: 10px;
 }
 
-.message p {
-  margin: 0;
-}
-
-.upvote {
-  background-color: #28a745;
+.upvote-btn {
+  background-color: #888;
+  color: white;
   border: none;
   padding: 5px;
-  border-radius: 5px;
-  color: #fff;
   cursor: pointer;
+  border-radius: 5px;
 }
 
-.upvote:hover {
-  background-color: #218838;
-}
-
-.toggle-container {
-  display: flex;
-  align-items: center;
-  margin-bottom: 20px;
+.upvote-btn:hover {
+  background-color: #666;
 }
 
+/* Styling for the toggle button */
 .switch {
   position: relative;
   display: inline-block;
-  width: 34px;
-  height: 20px;
+  width: 60px;
+  height: 34px;
 }
 
 .switch input {
@@ -101,25 +100,25 @@ button:hover {
   bottom: 0;
   background-color: #ccc;
   transition: .4s;
-  border-radius: 20px;
+  border-radius: 34px;
 }
 
 .slider:before {
   position: absolute;
   content: "";
-  height: 12px;
-  width: 12px;
-  border-radius: 50%;
+  height: 26px;
+  width: 26px;
   left: 4px;
   bottom: 4px;
   background-color: white;
   transition: .4s;
+  border-radius: 50%;
 }
 
 input:checked + .slider {
-  background-color: #007bff;
+  background-color: #5a5a5a;
 }
 
 input:checked + .slider:before {
-  transform: translateX(14px);
+  transform: translateX(26px);
 }
diff --git a/index.html b/index.html
index 4610794..a02c065 100644
--- a/index.html
+++ b/index.html
@@ -29,12 +29,11 @@ <h1>Anonymous Message Board</h1>
     </form>
   </div>
 
-  <!-- Firebase SDKs -->
+  <!-- Firebase SDKs via CDN -->
   <script src="https://www.gstatic.com/firebasejs/9.22.1/firebase-app.js"></script>
   <script src="https://www.gstatic.com/firebasejs/9.22.1/firebase-firestore.js"></script>
-  <script src="https://www.gstatic.com/firebasejs/9.22.1/firebase-analytics.js"></script>
 
-  <!-- Your app script -->
-  <script type="module" src="js/app.js"></script>
+  <!-- Your custom script -->
+  <script src="js/app.js"></script>
 </body>
 </html>
diff --git a/js/app.js b/js/app.js
index 7f52821..4eaf18d 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1,75 +1,84 @@
-// Your Firebase configuration
+// Firebase Configuration (restricted key)
 const firebaseConfig = {
-  apiKey: "your-public-api-key",
-  authDomain: "your-project.firebaseapp.com",
-  projectId: "your-project-id",
-  storageBucket: "your-project.appspot.com",
-  messagingSenderId: "your-messaging-sender-id",
-  appId: "your-app-id",
-  measurementId: "your-measurement-id"
+  apiKey: "AIzaSyAcyNJq5x-HRsaBewFcfe0cix96fEgDcfY",
+  authDomain: "goanonymous-8126e.firebaseapp.com",
+  projectId: "goanonymous-8126e",
+  storageBucket: "goanonymous-8126e.appspot.com",
+  messagingSenderId: "334767869045",
+  appId: "1:334767869045:web:cb64e9d39c577df87fbc3c",
+  measurementId: "G-WLEFD6NJF2"
 };
 
 // Initialize Firebase
-import { initializeApp } from "firebase/app";
-import { getAnalytics } from "firebase/analytics";
-import { getFirestore, collection, addDoc, onSnapshot, orderBy, query, doc, getDoc, updateDoc } from "firebase/firestore";
+firebase.initializeApp(firebaseConfig);
+const db = firebase.firestore();
 
-const app = initializeApp(firebaseConfig);
-const analytics = getAnalytics(app);
-const db = getFirestore(app);
-
-const messagesContainer = document.getElementById('messagesContainer');
+// DOM Elements
 const messageForm = document.getElementById('messageForm');
 const messageInput = document.getElementById('messageInput');
+const messagesContainer = document.getElementById('messagesContainer');
 const toggleSort = document.getElementById('toggleSort');
-const toggleLabel = document.getElementById('toggleLabel');
-
-let sortByLatest = true;
+let sortByLatest = true; // Default sorting by latest
 
+// Add a new message
 messageForm.addEventListener('submit', async (e) => {
   e.preventDefault();
+
   const messageText = messageInput.value;
-  if (messageText) {
-    await addDoc(collection(db, 'messages'), {
-      text: messageText,
-      upvotes: 0,
-      timestamp: new Date()
-    });
-    messageInput.value = '';
-  }
-});
+  if (messageText.trim() === '') return;
 
-const fetchMessages = async () => {
-  const q = query(collection(db, 'messages'), orderBy(sortByLatest ? 'timestamp' : 'upvotes', sortByLatest ? 'desc' : 'desc'));
-  onSnapshot(q, (snapshot) => {
-    messagesContainer.innerHTML = '';
-    snapshot.forEach(doc => {
-      const data = doc.data();
-      const messageDiv = document.createElement('div');
-      messageDiv.classList.add('message');
-      messageDiv.innerHTML = `
-        <p>${data.text}</p>
-        <button class="upvote" data-id="${doc.id}">Upvote (${data.upvotes})</button>
-      `;
-      messagesContainer.appendChild(messageDiv);
-    });
+  // Add message to Firestore
+  await db.collection('messages').add({
+    text: messageText,
+    upvotes: 0,
+    timestamp: firebase.firestore.FieldValue.serverTimestamp()
   });
-};
-
-fetchMessages();
 
-messagesContainer.addEventListener('click', async (e) => {
-  if (e.target.classList.contains('upvote')) {
-    const id = e.target.getAttribute('data-id');
-    const messageRef = doc(db, 'messages', id);
-    const docSnap = await getDoc(messageRef);
-    const newUpvotes = docSnap.data().upvotes + 1;
-    await updateDoc(messageRef, { upvotes: newUpvotes });
-  }
+  messageInput.value = '';
+  fetchMessages(); // Refresh messages
 });
 
+// Toggle between Latest and Most Upvoted
 toggleSort.addEventListener('change', () => {
   sortByLatest = !sortByLatest;
-  toggleLabel.textContent = `Sort by: ${sortByLatest ? 'Latest' : 'Most Upvoted'}`;
   fetchMessages();
 });
+
+// Fetch and display messages
+async function fetchMessages() {
+  let query = db.collection('messages');
+  if (sortByLatest) {
+    query = query.orderBy('timestamp', 'desc');
+  } else {
+    query = query.orderBy('upvotes', 'desc');
+  }
+
+  const snapshot = await query.get();
+  messagesContainer.innerHTML = ''; // Clear previous messages
+
+  snapshot.forEach(doc => {
+    const message = doc.data();
+    const messageElement = document.createElement('div');
+    messageElement.classList.add('message');
+    messageElement.innerHTML = `
+      <p>${message.text}</p>
+      <button class="upvote-btn" data-id="${doc.id}">Upvote (${message.upvotes})</button>
+    `;
+    messagesContainer.appendChild(messageElement);
+  });
+
+  // Attach upvote event listeners
+  document.querySelectorAll('.upvote-btn').forEach(btn => {
+    btn.addEventListener('click', async (e) => {
+      const id = e.target.getAttribute('data-id');
+      const messageRef = db.collection('messages').doc(id);
+      const message = await messageRef.get();
+      const newUpvotes = (message.data().upvotes || 0) + 1;
+      await messageRef.update({ upvotes: newUpvotes });
+      fetchMessages(); // Refresh after upvoting
+    });
+  });
+}
+
+// Initial fetch
+fetchMessages();