diff --git a/app/(protected)/dashboard/info-card.tsx b/app/(protected)/dashboard/info-card.tsx
index f0bcaa3..cca0379 100644
--- a/app/(protected)/dashboard/info-card.tsx
+++ b/app/(protected)/dashboard/info-card.tsx
@@ -16,7 +16,7 @@ export async function DNSInfoCard({ userId }: { userId: string }) {
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
         <CardTitle className="text-sm font-medium">
           <Link
-            className="font-semibold text-slate-500 duration-500 group-hover:text-cyan-500 group-hover:underline"
+            className="font-semibold text-slate-500 duration-500 group-hover:text-blue-500 group-hover:underline"
             href="/dashboard/records"
           >
             DNS Records
@@ -48,7 +48,7 @@ export async function UrlsInfoCard({ userId }: { userId: string }) {
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
         <CardTitle className="text-sm font-medium">
           <Link
-            className="font-semibold text-slate-500 duration-500 group-hover:text-cyan-500 group-hover:underline"
+            className="font-semibold text-slate-500 duration-500 group-hover:text-blue-500 group-hover:underline"
             href="/dashboard/urls"
           >
             Short URLs
diff --git a/app/(protected)/dashboard/page.tsx b/app/(protected)/dashboard/page.tsx
index 73b5ee4..a9b4899 100644
--- a/app/(protected)/dashboard/page.tsx
+++ b/app/(protected)/dashboard/page.tsx
@@ -22,12 +22,15 @@ export default async function DashboardPage() {
 
   return (
     <>
-      <DashboardHeader heading="Dashboard" />
+      <DashboardHeader
+        heading="Dashboard"
+        text="𝐖𝐑.𝐃𝐎 Beta Launching Now! 🎉"
+      />
       <div className="flex flex-col gap-5">
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-3 xl:grid-cols-3">
-          <div className="group relative mb-4 h-full w-full shrink-0 origin-left overflow-hidden rounded-lg border bg-gray-200/50 p-4 text-left duration-500 before:absolute before:right-1 before:top-1 before:z-[2] before:h-12 before:w-12 before:rounded-full before:bg-violet-500 before:blur-lg before:duration-500 after:absolute after:right-8 after:top-3 after:z-[2] after:h-20 after:w-20 after:rounded-full after:bg-rose-300 after:blur-lg after:duration-500 hover:border-cyan-600 hover:decoration-2 hover:duration-500 hover:before:-bottom-8 hover:before:right-12 hover:before:blur hover:before:[box-shadow:_20px_20px_20px_30px_#a21caf] hover:after:-right-8 group-hover:before:duration-500 group-hover:after:duration-500 dark:bg-primary-foreground md:max-w-[350px]">
-            <h1 className="mb-7 text-xl font-bold duration-500 group-hover:text-cyan-500">
-              Try free trail
+          <div className="group relative mb-4 h-full w-full shrink-0 origin-left overflow-hidden rounded-lg border bg-gray-50/70 p-4 text-left duration-500 before:absolute before:right-1 before:top-1 before:z-[2] before:h-12 before:w-12 before:rounded-full before:bg-violet-500 before:blur-lg before:duration-500 after:absolute after:right-8 after:top-3 after:z-[2] after:h-20 after:w-20 after:rounded-full after:bg-rose-300 after:blur-lg after:duration-500 hover:border-cyan-600 hover:decoration-2 hover:duration-500 hover:before:-bottom-8 hover:before:right-12 hover:before:blur hover:before:[box-shadow:_20px_20px_20px_30px_#a21caf] hover:after:-right-8 group-hover:before:duration-500 group-hover:after:duration-500 dark:bg-primary-foreground md:max-w-[350px]">
+            <h1 className="mb-7 text-lg font-bold duration-500 group-hover:text-blue-500">
+              Free Records & URLs
             </h1>
             <p className="text-sm">
               Learn more from{" "}
@@ -36,7 +39,7 @@ export default async function DashboardPage() {
                 href="/docs"
                 target="_blank"
               >
-                document.
+                documents.
               </Link>{" "}
             </p>
           </div>
diff --git a/app/(protected)/dashboard/records/record-list.tsx b/app/(protected)/dashboard/records/record-list.tsx
index 211d36d..32e1888 100644
--- a/app/(protected)/dashboard/records/record-list.tsx
+++ b/app/(protected)/dashboard/records/record-list.tsx
@@ -32,6 +32,12 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import StatusDot from "@/components/dashboard/status-dot";
 import { FormType, RecordForm } from "@/components/forms/record-form";
 import { EmptyPlaceholder } from "@/components/shared/empty-placeholder";
@@ -42,14 +48,14 @@ export interface RecordListProps {
 
 function TableColumnSekleton({ className }: { className?: string }) {
   return (
-    <TableRow className="grid grid-cols-3 items-center sm:grid-cols-6">
+    <TableRow className="grid grid-cols-3 items-center sm:grid-cols-7">
       <TableCell className="col-span-1">
         <Skeleton className="h-5 w-24" />
       </TableCell>
       <TableCell className="col-span-1">
         <Skeleton className="h-5 w-24" />
       </TableCell>
-      <TableCell className="col-span-1 hidden sm:inline-block">
+      <TableCell className="col-span-2 hidden sm:inline-block">
         <Skeleton className="h-5 w-24" />
       </TableCell>
       <TableCell className="col-span-1 hidden sm:inline-block">
@@ -133,14 +139,14 @@ export default function UserRecordsList({ user }: RecordListProps) {
           )}
           <Table>
             <TableHeader>
-              <TableRow className="grid grid-cols-3 items-center sm:grid-cols-6">
+              <TableRow className="grid grid-cols-3 items-center sm:grid-cols-7">
                 <TableHead className="col-span-1 flex items-center font-bold">
                   Type
                 </TableHead>
                 <TableHead className="col-span-1 flex items-center font-bold">
                   Name
                 </TableHead>
-                <TableHead className="col-span-1 hidden items-center font-bold sm:flex">
+                <TableHead className="col-span-2 hidden items-center font-bold sm:flex">
                   Content
                 </TableHead>
                 <TableHead className="col-span-1 hidden items-center font-bold sm:flex">
@@ -163,15 +169,24 @@ export default function UserRecordsList({ user }: RecordListProps) {
                 </>
               ) : data && data.length > 0 ? (
                 data.map((record) => (
-                  <TableRow className="grid animate-fade-in grid-cols-3 items-center animate-in sm:grid-cols-6">
+                  <TableRow className="grid animate-fade-in grid-cols-3 items-center animate-in sm:grid-cols-7">
                     <TableCell className="col-span-1">
                       <Badge className="text-xs" variant="outline">
                         {record.type}
                       </Badge>
                     </TableCell>
-                    <TableCell className="col-span-1">{record.name}</TableCell>
-                    <TableCell className="col-span-1 hidden sm:inline-block">
-                      {record.content}
+                    <TableCell className="col-span-1">
+                      {record.name.endsWith(".wr.do")
+                        ? record.name.slice(0, -6)
+                        : record.name}
+                    </TableCell>
+                    <TableCell className="col-span-2 hidden truncate text-nowrap sm:inline-block">
+                      <TooltipProvider>
+                        <Tooltip delayDuration={200}>
+                          <TooltipTrigger>{record.content}</TooltipTrigger>
+                          <TooltipContent>{record.content}</TooltipContent>
+                        </Tooltip>
+                      </TooltipProvider>
                     </TableCell>
                     <TableCell className="col-span-1 hidden sm:inline-block">
                       {
diff --git a/components/layout/dashboard-sidebar.tsx b/components/layout/dashboard-sidebar.tsx
index ba3c1ad..4aebf0c 100644
--- a/components/layout/dashboard-sidebar.tsx
+++ b/components/layout/dashboard-sidebar.tsx
@@ -72,9 +72,9 @@ export function DashboardSidebar({ links }: DashboardSidebarProps) {
               <div className="flex h-14 items-center p-4 lg:h-[60px]">
                 {/* {isSidebarExpanded ? <ProjectSwitcher /> : null} */}
                 {isSidebarExpanded && (
-                  <h1 className="font-satoshi text-xl font-bold">
+                  <Link href="/" className="font-satoshi text-xl font-bold">
                     {siteConfig.name}
-                  </h1>
+                  </Link>
                 )}
                 <Button
                   variant="ghost"
@@ -172,6 +172,36 @@ export function DashboardSidebar({ links }: DashboardSidebarProps) {
               {/* <div className="mt-auto xl:p-4">
                 {isSidebarExpanded ? <UpgradeCard /> : null}
               </div> */}
+              <p className="mx-3 mb-3 mt-auto font-mono text-xs text-muted-foreground/70">
+                &copy; 2024{" "}
+                <Link
+                  href={siteConfig.links.github}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="font-medium text-primary underline underline-offset-2"
+                >
+                  oiov
+                </Link>
+                . <br /> Built with{" "}
+                <Link
+                  href="https://nextjs.org?ref=wrdo"
+                  target="_blank"
+                  rel="noreferrer"
+                  className="font-medium text-primary underline underline-offset-2"
+                >
+                  Nextjs
+                </Link>{" "}
+                &{" "}
+                <Link
+                  href="https://www.cloudflare.com?ref=wrdo"
+                  target="_blank"
+                  rel="noreferrer"
+                  className="font-medium text-primary underline underline-offset-2"
+                >
+                  Cloudflare
+                </Link>
+                .
+              </p>
             </div>
           </aside>
         </ScrollArea>
diff --git a/components/layout/navbar.tsx b/components/layout/navbar.tsx
index e5cfc33..411f318 100644
--- a/components/layout/navbar.tsx
+++ b/components/layout/navbar.tsx
@@ -17,6 +17,8 @@ import { ModalContext } from "@/components/modals/providers";
 import { Icons } from "@/components/shared/icons";
 import MaxWidthWrapper from "@/components/shared/max-width-wrapper";
 
+import { ModeToggle } from "./mode-toggle";
+
 interface NavBarProps {
   scroll?: boolean;
   large?: boolean;
@@ -98,6 +100,7 @@ export function NavBar({ scroll = false }: NavBarProps) {
             </div>
           ) : null}
 
+          <ModeToggle />
           {session ? (
             <Link
               href={session.user.role === "ADMIN" ? "/admin" : "/dashboard"}
diff --git a/components/layout/site-footer.tsx b/components/layout/site-footer.tsx
index e19a1f4..29e11bb 100644
--- a/components/layout/site-footer.tsx
+++ b/components/layout/site-footer.tsx
@@ -48,7 +48,7 @@ export function SiteFooter({ className }: React.HTMLAttributes<HTMLElement>) {
             >
               oiov
             </Link>
-            . Built with{" "}
+            . <br className="block sm:hidden" /> Built with{" "}
             <Link
               href="https://nextjs.org?ref=wrdo"
               target="_blank"
diff --git a/components/sections/hero-landing.tsx b/components/sections/hero-landing.tsx
index 148378f..522c5dd 100644
--- a/components/sections/hero-landing.tsx
+++ b/components/sections/hero-landing.tsx
@@ -16,7 +16,7 @@ export default async function HeroLanding() {
             "px-4",
           )}
         >
-          <span className="mr-3">🎉</span> WR.DO Beta Launching Now!
+          <span className="mr-3">🎉</span> 𝐖𝐑.𝐃𝐎 Beta Launching Now!
         </Link>
 
         <h1 className="text-balance font-satoshi text-[40px] font-black leading-[1.15] tracking-tight sm:text-5xl md:text-6xl md:leading-[1.15]">
diff --git a/components/sections/preview-landing.tsx b/components/sections/preview-landing.tsx
index 0de06bd..37a7ed0 100644
--- a/components/sections/preview-landing.tsx
+++ b/components/sections/preview-landing.tsx
@@ -1,5 +1,5 @@
-import darkPreview from "@/public/_static/images/dark-preview.jpg";
-import lightPreview from "@/public/_static/images/light-preview.jpg";
+import darkPreview from "@/public/_static/images/dark-preview.png";
+import lightPreview from "@/public/_static/images/light-preview.png";
 
 import BlurImage from "@/components/shared/blur-image";
 import MaxWidthWrapper from "@/components/shared/max-width-wrapper";
diff --git a/public/_static/images/dark-preview.jpg b/public/_static/images/dark-preview.jpg
deleted file mode 100644
index 530edf3..0000000
Binary files a/public/_static/images/dark-preview.jpg and /dev/null differ
diff --git a/public/_static/images/dark-preview.png b/public/_static/images/dark-preview.png
new file mode 100644
index 0000000..82c5f38
Binary files /dev/null and b/public/_static/images/dark-preview.png differ
diff --git a/public/_static/images/light-preview.jpg b/public/_static/images/light-preview.jpg
deleted file mode 100644
index 6044f3c..0000000
Binary files a/public/_static/images/light-preview.jpg and /dev/null differ
diff --git a/public/_static/images/light-preview.png b/public/_static/images/light-preview.png
new file mode 100644
index 0000000..b630ce0
Binary files /dev/null and b/public/_static/images/light-preview.png differ