diff --git a/src/components/CareerPage/index.tsx b/src/components/CareerPage/index.tsx
index 55b8c3be1..0e5955f0a 100644
--- a/src/components/CareerPage/index.tsx
+++ b/src/components/CareerPage/index.tsx
@@ -93,7 +93,7 @@ const CareerPage: React.FC = () => {
   };
 
   return (
-    <div className="p-4 max-w-7xl mx-auto">
+    <div className="p-4 max-w-auto mx-auto">
       <h1 className="text-3xl font-bold text-center bg-clip-text text-transparent bg-gradient-to-r from-yellow-600 to-blue-600">
         Career Opportunities for You
       </h1>
@@ -127,7 +127,7 @@ const CareerPage: React.FC = () => {
           <option value="Quality Assurance">Quality Assurance</option>
         </select>
       </div>
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+      <div className="grid gap-4 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1">
         {filteredCareers.map((career) => (
           <CareerCard key={career.id} {...career} />
         ))}
diff --git a/src/components/RateUsPopup/RateUsPopup.js b/src/components/RateUsPopup/RateUsPopup.js
deleted file mode 100644
index 1e24f81e1..000000000
--- a/src/components/RateUsPopup/RateUsPopup.js
+++ /dev/null
@@ -1,57 +0,0 @@
-// src/components/RateUsPopup/RateUsPopup.js
-import React, { useState } from 'react';
-import clsx from 'clsx';
-import style from './RateUsPopup.module.css';
-import { motion } from 'framer-motion';
-
-function RateUsPopup({ onClose }) {
-  const [rating, setRating] = useState(0);
-  const [feedback, setFeedback] = useState('');
-
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    // Handle form submission logic here
-    console.log({ rating, feedback });
-    onClose();
-  };
-
-  return (
-    <div className={clsx(style.popupOverlay)}>
-      <motion.div
-        className={clsx(style.popup)}
-        initial={{ opacity: 0, y: -50 }}
-        animate={{ opacity: 1, y: 0 }}
-        exit={{ opacity: 0, y: -50 }}
-      >
-        <button className={clsx(style.closeButton)} onClick={onClose}>
-          &times;
-        </button>
-        <h2>Rate Us</h2>
-        <form onSubmit={handleSubmit}>
-          <div className={clsx(style.starRating)}>
-            {[...Array(5)].map((_, index) => (
-              <span
-                key={index}
-                className={clsx(index < rating ? style.filled : style.empty)}
-                onClick={() => setRating(index + 1)}
-              >
-                ★
-              </span>
-            ))}
-          </div>
-          <textarea
-            value={feedback}
-            onChange={(e) => setFeedback(e.target.value)}
-            placeholder="Leave your feedback here..."
-            required
-          />
-          <button type="submit" className={clsx(style.submitButton)}>
-            Submit
-          </button>
-        </form>
-      </motion.div>
-    </div>
-  );
-}
-
-export default RateUsPopup;
diff --git a/src/components/RateUsPopup/RateUsPopup.module.css b/src/components/RateUsPopup/RateUsPopup.module.css
deleted file mode 100644
index 74a7ee823..000000000
--- a/src/components/RateUsPopup/RateUsPopup.module.css
+++ /dev/null
@@ -1,73 +0,0 @@
-/* src/components/RateUsPopup/RateUsPopup.module.css */
-.popupOverlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.5);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 1000;
-  }
-  
-  .popup {
-    background: white;
-    padding: 20px;
-    border-radius: 8px;
-    width: 400px;
-    max-width: 90%;
-    position: relative;
-  }
-  
-  .closeButton {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    background: none;
-    border: none;
-    font-size: 24px;
-    cursor: pointer;
-  }
-  
-  .starRating {
-    display: flex;
-    justify-content: center;
-    margin-bottom: 20px;
-  }
-  
-  .starRating span {
-    font-size: 24px;
-    cursor: pointer;
-  }
-  
-  .starRating .filled {
-    color: gold;
-  }
-  
-  .starRating .empty {
-    color: lightgray;
-  }
-  
-  .popupOverlay form textarea {
-    width: 100%;
-    height: 100px;
-    margin-bottom: 20px;
-    padding: 10px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    resize: none;
-  }
-  
-  .submitButton {
-    display: block;
-    width: 100%;
-    padding: 10px;
-    background: #007bff;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-  }
-  
diff --git a/src/components/Tweet/index.tsx b/src/components/Tweet/index.tsx
index 6d8fab52f..2df3b6097 100644
--- a/src/components/Tweet/index.tsx
+++ b/src/components/Tweet/index.tsx
@@ -1,9 +1,5 @@
-import React, {type ReactNode} from 'react';
-
-import clsx from 'clsx';
-
-import Link from '@docusaurus/Link';
-import styles from './styles.module.css';
+import React, { type ReactNode } from "react";
+import Link from "@docusaurus/Link";
 export interface Props {
   url: string;
   handle: string;
@@ -22,28 +18,32 @@ export default function Tweet({
   githubUsername,
 }: Props): JSX.Element {
   return (
-    <div className={clsx('card', styles.tweet)}>
-      <div className="card__header">
-        <div className="avatar">
+    <div className="tweet p-4 mt-4 border rounded-lg bg-transparent shadow-sm border-gray-200 dark:border-gray-800 dark:bg-gray-900">
+      <div className="card__header mb-3">
+        <div className="flex items-center">
           <img
             alt={name}
-            className="avatar__photo"
+            className="w-12 h-12 rounded-full"
             src={`https://unavatar.io/twitter/${handle}?fallback=https://github.com/${githubUsername}.png`}
             width="48"
             height="48"
             loading="lazy"
           />
-          <div className={clsx('avatar__intro', styles.tweetMeta)}>
-            <strong className="avatar__name">{name}</strong>
-            <span>@{handle}</span>
+          <div className="ml-3">
+            <strong className="block text-base text-gray-900 dark:text-gray-100">
+              {name}
+            </strong>
+            <span className="text-gray-500 dark:text-gray-300 ">@{handle}</span>
           </div>
         </div>
       </div>
 
-      <div className={clsx('card__body', styles.tweet)}>{content}</div>
+      <div className="card__body mb-3 text-sm text-gray-800 dark:text-gray-100">
+        {content}
+      </div>
 
-      <div className="card__footer">
-        <Link className={clsx(styles.tweetMeta, styles.tweetDate)} to={url}>
+      <div className="card__footer text-right">
+        <Link className="text-sm hover:underline" to={url}>
           {date}
         </Link>
       </div>
diff --git a/src/components/Tweet/styles.module.css b/src/components/Tweet/styles.module.css
deleted file mode 100644
index 23cec5c40..000000000
--- a/src/components/Tweet/styles.module.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.tweet {
-  font-size: 15px;
-  margin-top: 10px;
-  background-color: transparent;
-}
-
-.tweetMeta {
-  color: var(--ifm-color-emphasis-700);
-}
-
-.tweetMeta strong {
-  color: var(--ifm-font-color-base);
-}
\ No newline at end of file
diff --git a/src/components/TweetQuote/index.tsx b/src/components/TweetQuote/index.tsx
index 24ae7dce6..e58e57e44 100644
--- a/src/components/TweetQuote/index.tsx
+++ b/src/components/TweetQuote/index.tsx
@@ -1,9 +1,5 @@
-import React, {type ReactNode} from 'react';
-
-import clsx from 'clsx';
-
+import React, { type ReactNode } from 'react';
 import Link from '@docusaurus/Link';
-import styles from './styles.module.css';
 
 export interface Props {
   url: string;
@@ -22,28 +18,32 @@ export default function TweetQuote({
 }: Props): JSX.Element {
   const avatar = `https://unavatar.io/twitter/${handle}`;
   const profileUrl = `https://twitter.com/${handle}`;
+
   return (
-    <figure className={styles.tweetQuote}>
-      <blockquote>
-        <Link to={url}>{children}</Link>
+    <figure className="mx-4 my-12 tweetQuote">
+      <blockquote className="relative mb-2 text-center font-light text-lg leading-relaxed">
+        <Link to={url} className="text-emphasis-900 hover:text-emphasis-900">
+          {children}
+        </Link>
+        <span className="absolute text-gray-200 text-6xl w-12 h-12 font-cursive leading-none" style={{ top: '-1.1rem', left: '-2.4rem' }}>
+          “
+        </span>
+        <span className="absolute text-gray-200 text-6xl w-12 h-12 font-cursive leading-none" style={{ bottom: '-1.1rem', right: '-1.6rem' }}>
+          ”
+        </span>
       </blockquote>
       <figcaption>
-        <Link to={profileUrl} rel="nofollow">
-          <div className="avatar">
-            <img
-              alt={name}
-              className={clsx('avatar__photo', styles.avatarImg)}
-              src={avatar}
-              // loading="lazy"
-            />
-            <div className={clsx('avatar__intro')}>
-              <strong className="avatar__name">
-                <cite>{name}</cite>
-              </strong>
-              <small className="avatar__subtitle" itemProp="description">
-                {job}
-              </small>
-            </div>
+        <Link to={profileUrl} rel="nofollow" className="flex items-center">
+          <img
+            alt={name}
+            className="rounded-full w-10 h-10 mr-3"
+            src={avatar}
+          />
+          <div>
+            <strong className="block">
+              <cite className="not-italic">{name}</cite>
+            </strong>
+            <small className="text-gray-600">{job}</small>
           </div>
         </Link>
       </figcaption>
diff --git a/src/components/TweetQuote/styles.module.css b/src/components/TweetQuote/styles.module.css
deleted file mode 100644
index cd4b59eb5..000000000
--- a/src/components/TweetQuote/styles.module.css
+++ /dev/null
@@ -1,57 +0,0 @@
-.tweetQuote {
-  padding: 0;
-  margin: 3rem 1rem;
-  --ifm-link-color: var(--ifm-color-emphasis-900);
-  --ifm-link-hover-color: var(--ifm-color-emphasis-900);
-}
-
-.tweetQuote blockquote {
-  font-weight: 200;
-  font-size: 1.2rem;
-  line-height: 1.4;
-  position: relative;
-  border: none;
-  margin-bottom: 0.6rem;
-  text-align: center;
-}
-
-.tweetQuote :global(.avatar__subtitle) {
-  margin-top: 0;
-}
-
-.tweetQuote blockquote::before,
-.tweetQuote blockquote::after {
-  position: absolute;
-  color: #f1efe6;
-  font-size: 6rem;
-  width: 3rem;
-  height: 3rem;
-  font-family: cursive;
-  line-height: 1;
-}
-
-.tweetQuote blockquote::before {
-  content: "“";
-  left: -2.4rem;
-  top: -1.1rem;
-}
-
-.tweetQuote blockquote::after {
-  content: "”";
-  right: -1.6rem;
-  bottom: -1.1rem;
-}
-
-[data-theme="dark"] .tweetQuote blockquote::before,
-[data-theme="dark"] .tweetQuote blockquote::after {
-  color: #3b3b3b;
-}
-
-.tweetQuote p {
-  display: inline;
-}
-
-.tweetQuote .avatarImg {
-  width: 42px;
-  height: 42px;
-}
diff --git a/src/components/popup/popup.tsx b/src/components/popup/popup.tsx
index 6dfb11c91..d7d265e12 100644
--- a/src/components/popup/popup.tsx
+++ b/src/components/popup/popup.tsx
@@ -11,4 +11,4 @@ const Popup = ({ status, message }) => {
     </div>
   );
 };
-export default Popup;
+export default Popup;
\ No newline at end of file