diff --git a/web/components/RefinementList.js b/web/components/RefinementList.js
index e0592b2..0935af7 100644
--- a/web/components/RefinementList.js
+++ b/web/components/RefinementList.js
@@ -8,28 +8,31 @@ const RefinementList = ({
   searchForItems,
   createURL,
 }) => (
-  <ul className="flex justify-center mt-10">
+  <ul className=" hidden lg:flex lg:justify-center lg:mt-10 lg:mx-10">
     <span className="text-white font-bold">Filter By:</span>
-    {items.map((item) => (
-      <span key={item.label}>
-        <a
-          className="text-xs text-white font-medium font-mono bg-primary-end bg-opacity-50 border-primary-start border-2 rounded-full px-3 py-2 mx-2 hover:bg-opacity-80"
-          href={createURL(item.value)}
-          style={{ backgroundColor: item.isRefined ? "#59AF77" : "" }}
-          onClick={(event) => {
-            event.preventDefault();
-            refine(item.value);
-          }}
-        >
-          {isFromSearch ? (
-            <Highlight attribute="label" hit={item} />
-          ) : (
-            item.label
-          )}{" "}
-          ({item.count})
-        </a>
-      </span>
-    ))}
+    {items.map((item, i) => {
+      if (i < 6)
+        return (
+          <span key={item.label}>
+            <a
+              className="text-xs text-white font-medium font-mono bg-primary-end bg-opacity-50 border-primary-start border-2 rounded-full px-3 py-2 mx-2 hover:bg-opacity-80"
+              href={createURL(item.value)}
+              style={{ backgroundColor: item.isRefined ? "#59AF77" : "" }}
+              onClick={(event) => {
+                event.preventDefault();
+                refine(item.value);
+              }}
+            >
+              {isFromSearch ? (
+                <Highlight attribute="label" hit={item} />
+              ) : (
+                item.label
+              )}{" "}
+              ({item.count})
+            </a>
+          </span>
+        );
+    })}
   </ul>
 );
 
diff --git a/web/components/SearchBar.js b/web/components/SearchBar.js
index 5d6c694..0d44807 100644
--- a/web/components/SearchBar.js
+++ b/web/components/SearchBar.js
@@ -8,7 +8,7 @@ function SearchBar({ currentRefinement, refine, placeholder = "Search" }) {
   return (
     <div className="w-full flex justify-center">
       <div className="absolute w-8/12 h-14 flex justify-end items-center ">
-        <div className="bg-secondary-solid z-20 h-14 w-1/6 rounded-r-lg flex items-center divide-x divide-white">
+        <div className="bg-secondary-solid z-20 h-14 w-1/6 rounded-r-lg flex items-center divide-x divide-white divide-opacity-40">
           <button
             onClick={() => router.push("/explore/people")}
             className="w-1/2 h-full hover:bg-primary-solid"
@@ -20,7 +20,7 @@ function SearchBar({ currentRefinement, refine, placeholder = "Search" }) {
           </button>
           <button
             onClick={() => router.push("/explore/blog")}
-            className="w-1/2 h-full hover:bg-primary-solid hover:rounded-r-lg"
+            className="w-1/2 h-full hover:bg-primary-solid rounded-r-lg"
           >
             <div className="text-sm">📰</div>
             <div className="text-sm font-mono font-medium text-white">Blog</div>
diff --git a/web/lib/utils.js b/web/lib/utils.js
index 9a63a58..39bae14 100644
--- a/web/lib/utils.js
+++ b/web/lib/utils.js
@@ -4,3 +4,15 @@ export const truncatePost = (post) => {
   }
   return post;
 };
+
+export const getTimeOfDay = (hour) => {
+  if (hour >= 5 && hour < 12) {
+    return "Good Morning 🌥";
+  } else if (hour >= 12 && hour < 17) {
+    return "Good Afternoon 🌞";
+  } else if (hour >= 17 && hour < 20) {
+    return "Good Evening 🌇";
+  } else {
+    return "Good Night 🌘";
+  }
+};
diff --git a/web/pages/edituser.js b/web/pages/edituser.js
new file mode 100644
index 0000000..cec4014
--- /dev/null
+++ b/web/pages/edituser.js
@@ -0,0 +1,160 @@
+import React, { useEffect, useState } from "react";
+import { useAuth } from "../lib/auth";
+import { getCurrentUser, searchUsers, signOut } from "../lib/connection";
+import Image from "next/image";
+import { useRouter } from "next/dist/client/router";
+import { supabase } from "../lib/supabase";
+import toast from "react-hot-toast";
+
+export default function EditUser() {
+  const [thisUser, setThisUser] = useState(null);
+  const { currentUser } = useAuth();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (currentUser) {
+      searchUsers(currentUser.email).then((res) => {
+        if (res == -1) {
+          router.push("/onboarding");
+        } else {
+          getCurrentUser(currentUser.email).then((user) => {
+            setThisUser(user);
+          });
+        }
+      });
+    } else {
+      router.push("/signup");
+    }
+    console.log(currentUser);
+  }, [currentUser, router]);
+
+  const [userObject, setUserObject] = useState({
+    fullName: "",
+    tags: "",
+    username: "",
+  });
+
+  useEffect(() => {
+    if (thisUser) {
+      setUserObject({
+        fullName: thisUser.fullName,
+        tags: thisUser.tags.join(","),
+        username: thisUser.username,
+      });
+    }
+  }, [thisUser]);
+
+  const handleChange = (e) => {
+    setUserObject({ ...userObject, [e.target.name]: e.target.value });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    let tagsToBeSent = [];
+    console.log(userObject);
+    tagsToBeSent = userObject.tags.split(",");
+    try {
+      let res = await supabase
+        .from("users")
+        .update({
+          fullName: userObject.fullName,
+          tags: tagsToBeSent,
+          username: userObject.username,
+        })
+        .match({ email: currentUser.email });
+      console.log(res);
+
+      if (res.error) {
+        throw res.error;
+      }
+      toast.success("User Updated");
+      router.push("/profile");
+    } catch (error) {
+      console.log(error);
+      if (error.code == 23505) {
+        toast.error("Username already taken");
+      } else {
+        toast.error("Something went wrong, check your details");
+      }
+    }
+  };
+
+  return (
+    <div className="flex justify-center">
+      <div className="mt-40 w-5/12 flex flex-col justify-center p-10 bg-gradient-to-br from-primary-start to-primary-end rounded-lg shadow-lg">
+        {thisUser ? (
+          <>
+            <Image
+              className="pr-20"
+              src={
+                "https://avatars.dicebear.com/api/miniavs/" +
+                userObject.username +
+                ".svg"
+              }
+              alt="Avatar"
+              height="120"
+              width="120"
+            />
+            <form
+              className="text-left flex flex-col items-center mt-10 mx-20"
+              onSubmit={handleSubmit}
+            >
+              <div className="my-5 flex flex-row justify-between w-full">
+                <label className="text-black text-2xl font-thin mr-10">
+                  Full Name (real or Fake)
+                </label>
+                <input
+                  className="rounded-lg p-2 focus:outline-none"
+                  name="fullName"
+                  value={userObject.fullName}
+                  onChange={handleChange}
+                  required
+                  placeholder="Full Name"
+                />
+              </div>
+              <div className="my-5 flex flex-row justify-between w-full">
+                <label className="text-black text-2xl font-thin mr-10">
+                  Your tags (separated by commas)
+                </label>
+                <input
+                  className="rounded-lg p-2 focus:outline-none"
+                  name="tags"
+                  value={userObject.tags}
+                  onChange={handleChange}
+                  required
+                  placeholder="Enter , separated values"
+                />
+              </div>
+              <div className="my-5 flex flex-row justify-between w-full">
+                <label className="text-black text-2xl font-thin mr-10">
+                  Username (does <b>COOL</b> things to your dp)
+                </label>
+                <input
+                  className="rounded-lg p-2 focus:outline-none"
+                  name="username"
+                  value={userObject.username}
+                  onChange={handleChange}
+                  required
+                  placeholder="Username"
+                />
+              </div>
+              <button
+                type="submit"
+                className=" w-5/12 my-10 mx-5 bg-gradient-to-tr from-secondary-start to-secondary-end shadow-xl hover:bg-opacity-70 text-white font-bold font-mono py-2 px-10 rounded-lg"
+              >
+                Update
+              </button>
+              <button
+                type="button"
+                className=" w-5/12 mx-5 bg-gradient-to-tr from-danger-start to-danger-end shadow-xl hover:bg-opacity-70 text-white font-bold font-mono py-2 px-10 rounded-lg"
+                onClick={() => router.push("/profile")}
+              >
+                Cancel
+              </button>
+            </form>
+          </>
+        ) : null}
+      </div>
+    </div>
+  );
+}
diff --git a/web/pages/guild/[gid].js b/web/pages/guild/[gid].js
index bc2e8db..b6fcc13 100644
--- a/web/pages/guild/[gid].js
+++ b/web/pages/guild/[gid].js
@@ -14,6 +14,10 @@ export default function GuildDetail() {
     setNewClientText(e.target.value);
   };
 
+  useEffect(() => {
+    window.scrollTo(0, document.body.scrollHeight);
+  }, [messages]);
+
   const fetchMessages = async () => {
     if (messages.length === 0) {
       const fetchedMessages = await supabase
@@ -24,19 +28,25 @@ export default function GuildDetail() {
 
       console.log(fetchedMessages.data);
 
-      fetchedMessages?.data?.map(async (message, i) => {
-        const sender = await supabase
-          .from("users")
-          .select("username")
-          .match({ uid: message.uid });
+      if (
+        fetchedMessages?.data !== null &&
+        fetchedMessages?.data !== undefined
+      ) {
+        console.log(fetchedMessages.data.length);
+        for (let i = 0; i < fetchedMessages.data.length; i++) {
+          const sender = await supabase
+            .from("users")
+            .select("username")
+            .match({ uid: fetchedMessages.data[i].uid });
 
-        const newText = new Message({
-          id: message.mid,
-          message: message.text,
-          senderName: sender.data[0].username,
-        });
-        setmessages((messages) => [...messages, newText]);
-      });
+          const newText = new Message({
+            id: fetchedMessages.data[i].mid,
+            message: fetchedMessages.data[i].text,
+            senderName: sender.data[0].username,
+          });
+          setmessages((messages) => [...messages, newText]);
+        }
+      }
     }
   };
 
@@ -107,23 +117,14 @@ export default function GuildDetail() {
       <input
         value={newClientText}
         onChange={handleChange}
-        placeholder="Type a message"
+        onKeyPress={(e) => {
+          if (e.key === "Enter") {
+            handleSubmit();
+          }
+        }}
+        placeholder="Type a message and hit return"
         className="w-9/12 fixed bottom-10 bg-accentGray rounded-xl h-14 mt-10 text-white p-4 text-lg focus:outline-none"
       />
-      <div className="w-full flex justify-end">
-        <div
-          onClick={() => handleSubmit()}
-          className="fixed flex items-center pr-3 cursor-pointer hover:opacity-70 justify-center bottom-10 float-right rounded-r-xl bg-primary-solid h-14 w-20"
-        >
-          <Image
-            className="transform rotate-45"
-            src="/send.svg"
-            alt="send"
-            height="30"
-            width="30"
-          />
-        </div>
-      </div>
     </div>
   );
 }
diff --git a/web/pages/guilds.js b/web/pages/guilds.js
index 0378039..c85d037 100644
--- a/web/pages/guilds.js
+++ b/web/pages/guilds.js
@@ -48,7 +48,7 @@ export default function Guilds() {
     );
 
   return (
-    <div className="flex justify-center text-center">
+    <div className="flex justify-center text-center px-20">
       <GuildList />
     </div>
   );
diff --git a/web/pages/home.js b/web/pages/home.js
index 8755a40..608dd2e 100644
--- a/web/pages/home.js
+++ b/web/pages/home.js
@@ -1,12 +1,16 @@
 import React, { useState, useEffect } from "react";
 import Image from "next/image";
 import { supabase } from "../lib/supabase";
-import { truncatePost } from "../lib/utils";
+import { getTimeOfDay, truncatePost } from "../lib/utils";
 import Link from "next/link";
+import { useAuth } from "../lib/auth";
+import { useRouter } from "next/dist/client/router";
 
 export default function Home() {
   const [posts, setPosts] = useState(null);
   const [loading, setLoading] = useState(true);
+  const { currentUser } = useAuth();
+  const router = useRouter();
 
   useEffect(() => {
     async function fetchPost() {
@@ -24,6 +28,12 @@ export default function Home() {
     fetchPost();
   }, [posts]);
 
+  useEffect(() => {
+    if (!currentUser) {
+      router.push("/splash");
+    }
+  }, [currentUser, router]);
+
   useEffect(() => {
     console.log(posts);
   }, [posts]);
@@ -31,9 +41,20 @@ export default function Home() {
   return (
     <div>
       <div className="px-40 flex flex-col items-center justify-between">
-        <h1 className="text-5xl font-bold font-mono text-white my-10">
-          Good Morning 🌥&nbsp;🗞
-        </h1>
+        <div className="flex flex-row items-center justify-between ld:w-10/12 xl:w-1/2">
+          <h1 className="md:text-lg lg:text-3xl xl:text-5xl font-bold font-mono text-white my-10 mx-10">
+            {getTimeOfDay(new Date().getHours())} 🗞
+          </h1>
+          <button
+            onClick={() => {
+              router.push("/posts/edit");
+            }}
+            className="h-10 md:text-xs xl:text-md bg-gradient-to-tr from-primary-start to-primary-end shadow-xl hover:bg-opacity-70 text-white font-bold font-mono px-10 rounded-lg"
+          >
+            New Post
+          </button>
+        </div>
+
         <div className="flex flex-row flex-wrap">
           {!loading
             ? posts.map((post, i) => {
diff --git a/web/pages/onboarding.js b/web/pages/onboarding.js
index cfb2b0d..ed41613 100644
--- a/web/pages/onboarding.js
+++ b/web/pages/onboarding.js
@@ -1,5 +1,5 @@
 import { useRouter } from "next/dist/client/router";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useAuth } from "../lib/auth";
 import { updateUser } from "../lib/signupComplete";
 
@@ -11,11 +11,17 @@ export default function OnBoarding() {
   });
 
   const router = useRouter();
-
+  const { currentUser } = useAuth();
   const handleChange = (e) => {
     setUserObject({ ...userObject, [e.target.name]: e.target.value });
   };
 
+  useEffect(() => {
+    if (!currentUser) {
+      router.push("/");
+    }
+  }, [router, currentUser]);
+
   const handleSubmit = async (e) => {
     e.preventDefault();
     let tagsToBeSent = [];
@@ -35,11 +41,12 @@ export default function OnBoarding() {
             Full Name
           </label>
           <input
-            className="rounded-lg p-2"
+            className="rounded-lg p-2 focus:outline-none"
             name="fullName"
             value={userObject.fullName}
             onChange={handleChange}
             required
+            placeholder="Full Name"
           />
         </div>
         <div className="my-5">
@@ -62,11 +69,12 @@ export default function OnBoarding() {
             <option value="express">Express</option>
           </select> */}
           <input
-            className="rounded-lg p-2"
+            className="rounded-lg p-2 focus:outline-none"
             name="tags"
             value={userObject.tags}
             onChange={handleChange}
             required
+            placeholder="Enter , separated values"
           />
         </div>
         <div className="my-5">
@@ -74,11 +82,12 @@ export default function OnBoarding() {
             Username
           </label>
           <input
-            className="rounded-lg p-2"
+            className="rounded-lg p-2 focus:outline-none"
             name="username"
             value={userObject.username}
             onChange={handleChange}
             required
+            placeholder="Username"
           />
         </div>
 
diff --git a/web/pages/posts/edit.js b/web/pages/posts/edit.js
index b79f1a7..002218d 100644
--- a/web/pages/posts/edit.js
+++ b/web/pages/posts/edit.js
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "react-hot-toast";
 import ReactMarkdown from "react-markdown";
@@ -7,6 +7,7 @@ import { atomDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
 import { searchUsers } from "../../lib/connection";
 import { useAuth } from "../../lib/auth";
 import { supabase } from "../../lib/supabase";
+import { useRouter } from "next/dist/client/router";
 
 function PostDisplay() {
   const { register, handleSubmit, reset, watch, formState } = useForm({
@@ -14,6 +15,7 @@ function PostDisplay() {
   });
 
   const currentUser = useAuth();
+  const router = useRouter();
 
   const [preview, setPreview] = useState(false);
 
@@ -39,8 +41,17 @@ function PostDisplay() {
     toast.success("Created Post successfully");
   };
 
+  useEffect(() => {
+    if (!currentUser) {
+      router.push("/");
+    }
+  }, [currentUser, router]);
+
   return (
     <div>
+      <h1 className="text-5xl text-center font-bold font-mono text-white my-10">
+        Create Post
+      </h1>
       <form onSubmit={handleSubmit(updatePost)} className="">
         {preview && (
           <div className="flex flex-col items-center">
@@ -128,14 +139,14 @@ function PostDisplay() {
           <div className="w-2/3 flex flex-row">
             <button
               type="submit"
-              className="bg-primary-solid m-3 p-3 w-1/2 rounded-lg shadow-sm"
+              className="bg-primary-solid m-3 p-3 w-1/2 rounded-lg shadow-sm text-white"
               disabled={!isValid || !isDirty}
             >
               Save Changes
             </button>
             <button
               type="button"
-              className=" bg-primary-solid m-3 p-3 w-1/2 rounded-lg shadow-sm"
+              className=" bg-primary-solid m-3 p-3 w-1/2 rounded-lg shadow-sm text-white"
               onClick={() => setPreview(!preview)}
             >
               {preview ? "Edit" : "Preview"}
diff --git a/web/pages/profile.js b/web/pages/profile.js
index d3e8612..3bded46 100644
--- a/web/pages/profile.js
+++ b/web/pages/profile.js
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useAuth } from "../lib/auth";
-import { getCurrentUser, signOut } from "../lib/connection";
+import { getCurrentUser, searchUsers, signOut } from "../lib/connection";
 import Image from "next/image";
 import { useRouter } from "next/dist/client/router";
 
@@ -10,16 +10,23 @@ export default function Profile() {
   const router = useRouter();
 
   useEffect(() => {
-    if (currentUser)
-      getCurrentUser(currentUser.email).then((user) => {
-        setThisUser(user);
+    if (currentUser) {
+      searchUsers(currentUser.email).then((res) => {
+        if (res == -1) {
+          router.push("/onboarding");
+        } else {
+          getCurrentUser(currentUser.email).then((user) => {
+            setThisUser(user);
+          });
+        }
       });
+    }
     console.log(currentUser);
-  }, [currentUser]);
+  }, [currentUser, router]);
 
   return (
     <div className="flex justify-center">
-      <div className="mt-40 w-5/12 flex p-10 bg-gradient-to-br from-primary-start to-primary-end rounded-lg shadow-lg">
+      <div className="mt-40 md:w-9/12 w-8/12 xl:w-1/2 flex p-10 bg-gradient-to-br from-primary-start to-primary-end rounded-lg shadow-lg">
         {thisUser ? (
           <>
             <Image
@@ -35,36 +42,47 @@ export default function Profile() {
             />
             <div className="ml-10 w-full">
               <div className="flex justify-between">
-                <h1 className="text-4xl font-mono font-semibold">
-                  {thisUser.fullName}
-                </h1>
-                <button
-                  onClick={() => {
-                    signOut().then(() => {
-                      router.push("/splash");
-                    });
-                  }}
-                  className="bg-gradient-to-tr from-secondary-start to-secondary-end shadow-xl hover:bg-opacity-70 text-white font-bold font-mono py-2 px-10 rounded-lg"
-                >
-                  Log Out
-                </button>
-              </div>
-              <div className="flex justify-between mt-4">
-                <h1 className="text-md mt-1 font-bold opacity-80">
-                  @{thisUser.username}
-                </h1>
-                <button
-                  onClick={() => {
-                    router.push("/posts/edit");
-                  }}
-                  className="bg-gradient-to-tr from-secondary-start to-secondary-end shadow-xl hover:bg-opacity-70 text-white font-bold font-mono py-2 px-9 rounded-lg"
-                >
-                  New Post
-                </button>
+                <div>
+                  <h1 className="text-4xl font-mono font-semibold">
+                    {thisUser.fullName}
+                  </h1>
+                  <h1 className="text-md mt-1 font-bold opacity-80">
+                    @{thisUser.username}
+                  </h1>
+                  <h1 className="text-md mt-1 font-bold opacity-80">
+                    {thisUser.email}
+                  </h1>
+                </div>
+
+                <div>
+                  <button
+                    onClick={() => {
+                      router.push("/posts/edit");
+                    }}
+                    className="block mt-5 bg-gradient-to-tr from-secondary-start to-secondary-end shadow-xl hover:bg-opacity-70 text-white font-bold font-mono py-2 px-9 rounded-lg"
+                  >
+                    New Post
+                  </button>
+                  <button
+                    onClick={() => {
+                      router.push("/edituser");
+                    }}
+                    className="block mt-5 bg-gradient-to-tr from-secondary-start to-secondary-end shadow-xl hover:bg-opacity-70 text-white font-bold font-mono py-2 px-8 rounded-lg"
+                  >
+                    Edit User
+                  </button>
+                  <button
+                    onClick={() => {
+                      signOut().then(() => {
+                        router.push("/splash");
+                      });
+                    }}
+                    className="block mt-5 bg-gradient-to-tr from-danger-start to-danger-end shadow-xl hover:bg-opacity-70 text-white font-bold font-mono py-2 px-10 rounded-lg"
+                  >
+                    Log Out
+                  </button>
+                </div>
               </div>
-              <h1 className="text-md mt-1 font-light opacity-80">
-                {thisUser.email}
-              </h1>
               <div className="mt-4">
                 {thisUser.tags.map((tag, i) => {
                   if (i < 4)
diff --git a/web/pages/splash.js b/web/pages/splash.js
index c351a49..e87c135 100644
--- a/web/pages/splash.js
+++ b/web/pages/splash.js
@@ -26,44 +26,23 @@ export default function Splash() {
         </h1>
         <br />
         <div className="flex items-center justify-center mt-20">
-          <p className="text-xl font-mono font-light w-8/12 text-left mr-20 text-white">
+          <p className="text-2xl font-mono font-semibold w-8/12 text-left mr-20 text-white bg-gradient-to-br from-secondary-start to-secondary-end px-20 py-14 rounded-lg drop-shadow-lg shadow-inner">
             Here in Develove, you can meet and hangout with developers from all
-            around the world. Excepteur tempor voluptate aute irure nulla
-            nostrud laboris incididunt officia. Ex tempor consectetur mollit
-            consectetur anim officia commodo reprehenderit dolor et eu
-            consectetur ad aliqua. Mollit amet Lorem excepteur proident nostrud
-            pariatur adipisicing. Minim amet eu fugiat ut sint proident esse
-            nulla. Laborum tempor irure dolor est elit ullamco occaecat laborum
-            reprehenderit nostrud voluptate eiusmod culpa. Laboris sunt ad ex
-            adipisicing mollit mollit minim laborum enim do dolore do eu sint.
+            around the world.
           </p>
           <Image src="/earth.svg" alt="Earth" height={400} width={400} />
         </div>
         <div className="flex items-center justify-center mt-20">
           <Image src="/search.svg" alt="Earth" height={400} width={400} />
-          <p className="text-xl font-mono font-light w-8/12 text-right ml-20 text-white">
+          <p className="text-2xl font-mono font-semibold w-8/12 text-left ml-20 text-white bg-gradient-to-br from-secondary-start to-secondary-end px-20 py-14 rounded-lg drop-shadow-lg shadow-inner">
             Search them up using the interactive map, or shoot them a DM. You
-            might get lucky! Excepteur tempor voluptate aute irure nulla nostrud
-            laboris incididunt officia. Ex tempor consectetur mollit consectetur
-            anim officia commodo reprehenderit dolor et eu consectetur ad
-            aliqua. Mollit amet Lorem excepteur proident nostrud pariatur
-            adipisicing. Minim amet eu fugiat ut sint proident esse nulla.
-            Laborum tempor irure dolor est elit ullamco occaecat laborum
-            reprehenderit nostrud voluptate eiusmod culpa. Laboris sunt ad ex
-            adipisicing mollit mollit minim laborum enim do dolore do eu sint.
+            might get lucky!
           </p>
         </div>
         <div className="flex items-center justify-center my-20">
-          <p className="text-xl font-mono font-light w-8/12 text-left mr-20 text-white">
+          <p className="text-2xl font-mono font-semibold w-8/12 text-left mr-20 text-white bg-gradient-to-br from-secondary-start to-secondary-end px-20 py-14 rounded-lg drop-shadow-lg shadow-inner">
             Meet people tailored to your interests, build hype, and new friends
-            using Develove. Excepteur tempor voluptate aute irure nulla nostrud
-            laboris incididunt officia. Ex tempor consectetur mollit consectetur
-            anim officia commodo reprehenderit dolor et eu consectetur ad
-            aliqua. Mollit amet Lorem excepteur proident nostrud pariatur
-            adipisicing. Minim amet eu fugiat ut sint proident esse nulla.
-            Laborum tempor irure dolor est elit ullamco occaecat laborum
-            reprehenderit nostrud voluptate eiusmod culpa. Laboris sunt ad ex
-            adipisicing mollit mollit minim laborum enim do dolore do eu sint.
+            using Develove.
           </p>
           <Image src="/tastes.svg" alt="Earth" height={400} width={400} />
         </div>
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 90a2fba..77d066d 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -15,6 +15,10 @@ module.exports = {
         end: "#282828",
         solid: "#2D2D2D",
       },
+      danger: {
+        start: "#EE5B5B",
+        end: "#BB3A3A",
+      },
       white: "#FFFFFF",
       black: "#000000",
       accentGray: "#1F1F1F",