style stuff

client/app/globals.css

@@ -210,6 +210,16 @@
     box-shadow: 0 0 0 2px var(--primary);
     outline: none;
   }
+
+  /* Hide scrollbars */
+  .scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+  
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
 }
 
 

client/app/page.tsx

@@ -9,6 +9,7 @@ import {
   InputOTPSlot,
 } from "@/components/ui/input-otp";
 import { Card, CardContent } from "@/components/ui/card";
+import { Heart } from "lucide-react";
 import { ThemeProvider } from "next-themes";
 import {
   VSCODE_THEMES,
@@ -17,12 +18,17 @@ import {
   saveThemeToCookie,
   getThemeFromCookie,
 } from "@/lib/themes";
+import { LegalFooter } from "@/components/Footer";
+import { DMCAModalComponent } from "@/components/DMCAModalComponent";
+import { DisclaimerModalComponent } from "@/components/DisclaimerModalComponent";
 
 const Home = () => {
   const router = useRouter();
   const [newRoomCode, setNewRoomCode] = useState("");
   const [currentThemeIndex, setCurrentThemeIndex] = useState(0);
   const [isClient, setIsClient] = useState(false);
+  const [isDisclaimerOpen, setIsDisclaimerOpen] = useState(false);
+  const [isDMCAOpen, setIsDMCAOpen] = useState(false);
 
   const nextTheme = useCallback(() => {
     setCurrentThemeIndex((prevIndex) => {
@@ -34,18 +40,6 @@ const Home = () => {
     });
   }, []);
 
-  const prevTheme = useCallback(() => {
-    setCurrentThemeIndex((prevIndex) => {
-      const newIndex = prevIndex === 0
-        ? VSCODE_THEMES.length - 1
-        : prevIndex - 1;
-      const theme = VSCODE_THEMES[newIndex];
-      applyTheme(theme);
-      saveThemeToCookie(theme.id);
-      return newIndex;
-    });
-  }, []);
-
   useEffect(() => {
     setIsClient(true);
 
@@ -70,10 +64,7 @@ const Home = () => {
 
     // Simple keyboard navigation
     const handleKeyPress = (e: KeyboardEvent) => {
-      if (e.key === "ArrowLeft") {
-        e.preventDefault();
-        prevTheme();
-      } else if (e.key === "ArrowRight") {
+      if (e.key === "ArrowRight") {
         e.preventDefault();
         nextTheme();
       }
@@ -83,7 +74,7 @@ const Home = () => {
     return () => {
       window.removeEventListener("keydown", handleKeyPress);
     };
-  }, [nextTheme, prevTheme]);
+  }, [nextTheme]);
 
   useEffect(() => {
     const joinRoom = () => {
@@ -115,41 +106,23 @@ const Home = () => {
   return (
     <div className="relative min-h-screen flex items-center justify-center bg-background dark:bg-background ui-font">
       <Card className="relative z-10 max-w-md min-w-96 backdrop-blur-sm shadow-lg bg-card/0 bg-opacity-0 dark:bg-card/70 border border-border dark:border-border  p-6 flex flex-col items-center">
-        {/* Theme Slider - Simple Version */}
-        <div className="w-full mb-6">
-          <div className="flex items-center justify-between bg-card rounded-lg p-3 border">
-            <button
-              onClick={prevTheme}
-              className="p-1 rounded hover:bg-muted transition-colors"
-              aria-label="Previous theme"
-            >
-              ←
-            </button>
-
-            <div className="text-center flex-1 mx-4">
-              <div className="text-sm font-medium text-foreground">
-                {currentTheme.name}
-              </div>
-              <div className="text-xs text-muted-foreground">
-                {currentThemeIndex + 1} of {VSCODE_THEMES.length}
-              </div>
-            </div>
-
-            <button
-              onClick={nextTheme}
-              className="p-1 rounded hover:bg-muted transition-colors"
-              aria-label="Next theme"
-            >
-              →
-            </button>
-          </div>
-        </div>
-
         <div className="flex flex-col items-center">
-          <h1 className="text-6xl font-bold text-foreground mb-4">
+          <h1 className="text-8xl translate-x-1.5 font-bold text-foreground mb-4">
             Osborne
           </h1>
         </div>
+
+        {/* Theme Switcher - Pill Button */}
+        <div className="mb-12">
+          <button
+            onClick={nextTheme}
+            className="px-4 min-w-36 py-2 bg-muted hover:bg-muted/80 rounded-full text-sm font-medium text-foreground transition-colors border border-border/50 hover:border-border"
+            aria-label="Switch to next theme"
+          >
+            {currentTheme.name}
+          </button>
+        </div>
+
         <CardContent className="flex flex-col items-center space-y-4 ui-font">
           <InputOTP
             value={newRoomCode}
@@ -174,8 +147,38 @@ const Home = () => {
           >
             Create Room
           </Button>
+
+          {/* Attribution */}
+          <div className="mt-6 pt-4 border-t border-border/50">
+            <p className="text-sm text-muted-foreground text-center">
+              made with <Heart className="inline w-4 h-4 text-red-500 mx-1" />{" "}
+              by{" "}
+              <a
+                href="https://webark.in"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-primary hover:underline font-medium"
+              >
+                WebArk
+              </a>
+            </p>
+          </div>
         </CardContent>
       </Card>
+      <LegalFooter
+        onDisclaimerOpen={() => setIsDisclaimerOpen(true)}
+        onDMCAOpen={() => setIsDMCAOpen(true)}
+      />
+
+      {/* Modals */}
+      <DisclaimerModalComponent
+        isOpen={isDisclaimerOpen}
+        onClose={() => setIsDisclaimerOpen(false)}
+      />
+      <DMCAModalComponent
+        isOpen={isDMCAOpen}
+        onClose={() => setIsDMCAOpen(false)}
+      />
     </div>
   );
 };

client/app/room/page.tsx

@@ -21,7 +21,7 @@ import {
 } from "lucide-react";
 import { Skeleton } from "@/components/ui/skeleton";
 import { CommentsPanel } from "@/components/RightPanel";
-import { CodeEditor, CodeEditorRef } from "@/components/CodeEditor";
+import { CodeEditor, CodeEditorRef } from "@/components/Editor";
 import { LeftPanel } from "@/components/LeftPanel";
 import {
   getThemeById,
@@ -34,6 +34,10 @@ import debounce from "lodash/debounce";
 import dotenv from "dotenv";
 import { JetBrains_Mono } from "next/font/google";
 import { ThemeProvider } from "next-themes";
+import { LegalFooter } from "@/components/Footer";
+import { ContentWarningModal } from "@/components/ContentWarningModal";
+import { DMCAModalComponent } from "@/components/DMCAModalComponent";
+import { DisclaimerModalComponent } from "@/components/DisclaimerModalComponent";
 
 dotenv.config();
 
@@ -222,6 +226,8 @@ const Room = () => {
   const [rightPanelForced, setRightPanelForced] = useState(false);
   const [popupMessage, setPopupMessage] = useState<{text: string; type?: 'default' | 'warning'} | null>(null);
   const [isMobile, setIsMobile] = useState(false);
+  const [isDisclaimerOpen, setIsDisclaimerOpen] = useState(false);
+  const [isDMCAOpen, setIsDMCAOpen] = useState(false);
   
   // Detect mobile screen size
   useEffect(() => {
@@ -1076,6 +1082,25 @@ const Room = () => {
           </div>
         </div>
       )}
+
+      {/* Content Warning Modal */}
+      <ContentWarningModal />
+
+      {/* Legal Footer */}
+      <LegalFooter 
+        onDisclaimerOpen={() => setIsDisclaimerOpen(true)}
+        onDMCAOpen={() => setIsDMCAOpen(true)}
+      />
+      
+      {/* Modals */}
+      <DisclaimerModalComponent 
+        isOpen={isDisclaimerOpen} 
+        onClose={() => setIsDisclaimerOpen(false)} 
+      />
+      <DMCAModalComponent 
+        isOpen={isDMCAOpen} 
+        onClose={() => setIsDMCAOpen(false)} 
+      />
     </div>
   );
 };

client/components/ContentWarningModal.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+
+export const ContentWarningModal = () => {
+  const [showWarning, setShowWarning] = useState(false);
+
+  useEffect(() => {
+    // Check if user has already acknowledged the warning
+    const hasAcknowledged = localStorage.getItem('content-warning-acknowledged');
+    if (!hasAcknowledged) {
+      setShowWarning(true);
+    }
+  }, []);
+
+  const handleAcknowledge = () => {
+    localStorage.setItem('content-warning-acknowledged', 'true');
+    setShowWarning(false);
+  };
+
+  if (!showWarning) return null;
+
+  return (
+    <div className="fixed inset-0 bg-background/80 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+      <Card className="max-w-md">
+        <CardHeader>
+          <CardTitle className="text-center text-lg">⚠️ Content Disclaimer</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4 text-sm">
+          <div className="text-center">
+            <p className="mb-3">
+              <strong>This is a public collaborative text editor.</strong>
+            </p>
+            <p className="mb-3">
+              Users can upload and share any type of content. We do not monitor, 
+              review, or control user-generated content and are not responsible for 
+              anything shared in these rooms.
+            </p>
+            <p className="mb-4 font-semibold text-yellow-600 dark:text-yellow-400">
+              Proceed at your own discretion and use appropriate judgment when 
+              viewing or sharing content.
+            </p>
+          </div>
+          <Button 
+            onClick={handleAcknowledge}
+            className="w-full"
+          >
+            I Understand - Continue
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};

client/components/DMCAModal.tsx

@@ -0,0 +1,224 @@
+"use client";
+
+import { useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+
+export const DMCAComponent = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      {/* DMCA Button */}
+      <Button
+        variant="link"
+        size="sm"
+        onClick={() => setIsOpen(true)}
+        className="text-xs underline p-0 h-auto text-muted-foreground"
+      >
+        DMCA Notice & Copyright Policy
+      </Button>
+
+      {/* DMCA Modal */}
+      {isOpen && (
+        <div className="fixed inset-0 bg-background/80 backdrop-blur-sm z-50 flex items-center justify-center p-4 overflow-auto">
+          <Card className="max-w-4xl w-full max-h-[90vh] flex flex-col mx-auto my-auto">
+            <CardHeader className="flex-shrink-0 sticky top-0 bg-card z-10 border-b">
+              <CardTitle className="flex items-center justify-between">
+                DMCA Copyright Policy & Takedown Notice
+                <Button variant="outline" size="sm" onClick={() => setIsOpen(false)}>
+                  ✕
+                </Button>
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-6 text-sm flex-1 overflow-y-auto scrollbar-hide">
+              {/* Introduction */}
+              <section>
+                <p className="mb-4">
+                  Osborne respects the intellectual property rights of others and expects users 
+                  to do the same. In accordance with the Digital Millennium Copyright Act (DMCA), 
+                  we will respond to valid takedown notices for copyrighted material.
+                </p>
+              </section>
+
+              {/* DMCA Takedown Process */}
+              <section>
+                <h3 className="text-lg font-semibold mb-3">Filing a DMCA Takedown Notice</h3>
+                <p className="mb-3">
+                  If you believe that content on Osborne infringes your copyright, you may 
+                  submit a DMCA takedown notice. Your notice must include all of the following:
+                </p>
+                <div className="space-y-2 pl-4">
+                  <p>
+                    <strong>1. Identification of the copyrighted work:</strong> Describe the 
+                    copyrighted work that you claim has been infringed, or if multiple works 
+                    are involved, provide a representative list.
+                  </p>
+                  <p>
+                    <strong>2. Identification of the infringing material:</strong> Identify 
+                    the specific content that is allegedly infringing, including the room code, 
+                    specific text, files, or other content, and provide enough detail for us 
+                    to locate it.
+                  </p>
+                  <p>
+                    <strong>3. Your contact information:</strong> Include your name, mailing 
+                    address, telephone number, and email address.
+                  </p>
+                  <p>
+                    <strong>4. Good faith statement:</strong> Include the following statement: 
+                    &quot;I have a good faith belief that use of the copyrighted material described 
+                    above is not authorized by the copyright owner, its agent, or the law.&quot;
+                  </p>
+                  <p>
+                    <strong>5. Accuracy statement:</strong> Include the following statement: 
+                    &quot;I swear, under penalty of perjury, that the information in this 
+                    notification is accurate and that I am the copyright owner or am authorized 
+                    to act on behalf of the owner of an exclusive right that is allegedly infringed.&quot;
+                  </p>
+                  <p>
+                    <strong>6. Your signature:</strong> Provide your physical or electronic signature.
+                  </p>
+                </div>
+              </section>
+
+              {/* Contact Information */}
+              <section>
+                <h3 className="text-lg font-semibold mb-3">DMCA Agent Contact</h3>
+                <div className="bg-muted p-4 rounded-lg">
+                  <p className="mb-2">
+                    <strong>DMCA Agent:</strong> [Your Name or Designated Agent]
+                  </p>
+                  <p className="mb-2">
+                    <strong>Email:</strong> dmca@[your-domain].com
+                  </p>
+                  <p className="mb-2">
+                    <strong>Mailing Address:</strong><br />
+                    [Your Name/Company]<br />
+                    [Street Address]<br />
+                    [City, State ZIP Code]<br />
+                    [Country]
+                  </p>
+                  <p className="text-xs text-muted-foreground mt-3">
+                    Please note: Only DMCA takedown notices should be sent to this contact. 
+                    Other inquiries will not receive a response.
+                  </p>
+                </div>
+              </section>
+
+              {/* Counter-Notification */}
+              <section>
+                <h3 className="text-lg font-semibold mb-3">Counter-Notification Process</h3>
+                <p className="mb-3">
+                  If you believe your content was removed in error, you may file a 
+                  counter-notification under Section 512(g)(3) of the DMCA. Your 
+                  counter-notification must include:
+                </p>
+                <div className="space-y-2 pl-4">
+                  <p>
+                    <strong>1.</strong> Your physical or electronic signature
+                  </p>
+                  <p>
+                    <strong>2.</strong> Identification of the content that was removed 
+                    and its location before removal
+                  </p>
+                  <p>
+                    <strong>3.</strong> A statement under penalty of perjury that you 
+                    have a good faith belief the content was removed due to mistake or 
+                    misidentification
+                  </p>
+                  <p>
+                    <strong>4.</strong> Your name, address, and telephone number
+                  </p>
+                  <p>
+                    <strong>5.</strong> A statement consenting to jurisdiction in your 
+                    district or the district where the service provider is located
+                  </p>
+                </div>
+              </section>
+
+              {/* Safe Harbor and Liability */}
+              <section>
+                <h3 className="text-lg font-semibold mb-3">Safe Harbor Protection</h3>
+                <div className="space-y-3">
+                  <p>
+                    <strong>Service Provider Status:</strong> Osborne qualifies as a service 
+                    provider under the DMCA safe harbor provisions. We do not pre-screen, 
+                    monitor, or exercise editorial control over user-generated content.
+                  </p>
+                  <p>
+                    <strong>No Knowledge of Infringement:</strong> We have no actual knowledge 
+                    of infringing activity and are not aware of facts or circumstances from 
+                    which infringing activity is apparent.
+                  </p>
+                  <p>
+                    <strong>Expeditious Removal:</strong> Upon receiving a valid DMCA takedown 
+                    notice, we will expeditiously remove or disable access to the allegedly 
+                    infringing content.
+                  </p>
+                  <p>
+                    <strong>No Financial Benefit:</strong> We do not receive a financial 
+                    benefit directly attributable to infringing activity when we have the 
+                    right and ability to control such activity.
+                  </p>
+                </div>
+              </section>
+
+              {/* Response Timeline */}
+              <section>
+                <h3 className="text-lg font-semibold mb-3">Response Timeline</h3>
+                <div className="space-y-2">
+                  <p>
+                    <strong>Takedown Notices:</strong> We will respond to valid DMCA takedown 
+                    notices within 24-48 hours of receipt.
+                  </p>
+                  <p>
+                    <strong>Counter-Notifications:</strong> Counter-notifications will be 
+                    forwarded to the original complainant within 10 business days, and content 
+                    may be restored 10-14 business days after forwarding unless the complainant 
+                    files a court action.
+                  </p>
+                  <p>
+                    <strong>Invalid Notices:</strong> Notices that do not substantially comply 
+                    with DMCA requirements may not be processed.
+                  </p>
+                </div>
+              </section>
+
+              {/* Repeat Offender Policy */}
+              <section>
+                <h3 className="text-lg font-semibold mb-3">Repeat Offender Policy</h3>
+                <p>
+                  In appropriate circumstances, Osborne will terminate users who are repeat 
+                  infringers. We may also, at our sole discretion, limit access to the service 
+                  and/or terminate accounts of users who infringe any intellectual property 
+                  rights of others, whether or not there is any repeat infringement.
+                </p>
+              </section>
+
+              {/* False Claims Warning */}
+              <section>
+                <h3 className="text-lg font-semibold mb-3">False Claims Warning</h3>
+                <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 p-4 rounded-lg">
+                  <p className="text-yellow-800 dark:text-yellow-200">
+                    <strong>Important:</strong> Under Section 512(f) of the DMCA, any person 
+                    who knowingly materially misrepresents that content is infringing may be 
+                    subject to liability for damages. Do not submit false claims.
+                  </p>
+                </div>
+              </section>
+
+              {/* Footer */}
+              <div className="border-t pt-4 text-center text-muted-foreground">
+                <p>Last Updated: {new Date().toLocaleDateString()}</p>
+                <p className="mt-2 text-xs">
+                  This DMCA policy is designed to comply with the Digital Millennium Copyright Act 
+                  and protect both content creators and service providers.
+                </p>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+    </>
+  );
+};

client/components/DMCAModalComponent.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+
+interface DMCAModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const DMCAModalComponent = ({ isOpen, onClose }: DMCAModalProps) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-background/80 backdrop-blur-sm z-[9999] flex items-center justify-center p-4 overflow-auto">
+      <Card className="max-w-4xl w-full max-h-[90vh] flex flex-col mx-auto my-auto">
+        <CardHeader className="flex-shrink-0 sticky top-0 bg-card z-10 border-b">
+          <CardTitle className="flex items-center justify-between">
+            DMCA Copyright Policy & Takedown Notice
+            <Button variant="outline" size="sm" onClick={onClose}>
+              ✕
+            </Button>
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="flex-1 overflow-auto scrollbar-hide p-6">
+          <div className="space-y-6 text-sm leading-relaxed">
+            <section>
+              <h3 className="font-semibold text-base mb-3">Digital Millennium Copyright Act (DMCA) Notice</h3>
+              <p>
+                We respect the intellectual property rights of others and expect our users to do the same. 
+                In accordance with the Digital Millennium Copyright Act of 1998 (&quot;DMCA&quot;), we will respond 
+                expeditiously to claims of copyright infringement committed using our service.
+              </p>
+            </section>
+
+            <section>
+              <h3 className="font-semibold text-base mb-3">Notification of Infringement</h3>
+              <p className="mb-3">
+                If you believe that your copyrighted work has been copied in a way that constitutes copyright 
+                infringement and is accessible via our service, please notify our copyright agent as set forth below.
+              </p>
+              <p className="mb-3">For your complaint to be valid under the DMCA, you must provide the following information:</p>
+              <ul className="list-disc pl-6 space-y-2">
+                <li>A physical or electronic signature of a person authorized to act on behalf of the copyright owner</li>
+                <li>Identification of the copyrighted work claimed to have been infringed</li>
+                <li>Identification of the material that is claimed to be infringing and information reasonably sufficient to permit us to locate the material</li>
+                <li>Information reasonably sufficient to permit us to contact you, including your address, telephone number, and email address</li>
+                <li>A statement that you have a good faith belief that use of the material is not authorized by the copyright owner, its agent, or the law</li>
+                <li>A statement that the information in the notification is accurate, and under penalty of perjury, that you are authorized to act on behalf of the copyright owner</li>
+              </ul>
+            </section>
+
+            <section>
+              <h3 className="font-semibold text-base mb-3">Copyright Agent Contact Information</h3>
+              <div className="bg-muted p-4 rounded-md">
+                <p><strong>Email:</strong> copyright@webark.in</p>
+                <p><strong>Subject Line:</strong> DMCA Takedown Notice - Osborne Platform</p>
+              </div>
+            </section>
+
+            <section>
+              <h3 className="font-semibold text-base mb-3">Counter-Notification</h3>
+              <p className="mb-3">
+                If you believe that your material has been removed or disabled by mistake or misidentification, 
+                you may file a counter-notification with us by providing the following information:
+              </p>
+              <ul className="list-disc pl-6 space-y-2">
+                <li>Your physical or electronic signature</li>
+                <li>Identification of the material that has been removed or disabled and the location where it appeared before removal</li>
+                <li>A statement under penalty of perjury that you have a good faith belief that the material was removed as a result of mistake or misidentification</li>
+                <li>Your name, address, telephone number, and email address</li>
+                <li>A statement that you consent to the jurisdiction of the federal court in your district</li>
+              </ul>
+            </section>
+
+            <section>
+              <h3 className="font-semibold text-base mb-3">Repeat Infringer Policy</h3>
+              <p>
+                We have adopted a policy of terminating, in appropriate circumstances and at our sole discretion, 
+                users who are deemed to be repeat infringers. We may also limit access to our service and/or 
+                terminate accounts of users who infringe any intellectual property rights of others.
+              </p>
+            </section>
+
+            <section>
+              <h3 className="font-semibold text-base mb-3">User-Generated Content</h3>
+              <p>
+                Users are solely responsible for the content they upload, share, or collaborate on through our platform. 
+                We do not pre-screen user content but reserve the right to remove content that violates our terms 
+                or applicable laws, including copyrighted material.
+              </p>
+            </section>
+
+            <section>
+              <h3 className="font-semibold text-base mb-3">Safe Harbor Compliance</h3>
+              <p>
+                This service qualifies for safe harbor protections under Section 512 of the DMCA. We act as a 
+                service provider and do not have actual knowledge of infringing activity on our system. Upon 
+                receiving proper notification of claimed infringement, we will expeditiously remove or disable 
+                access to the allegedly infringing material.
+              </p>
+            </section>
+
+            <section>
+              <h3 className="font-semibold text-base mb-3">Processing Timeline</h3>
+              <ul className="list-disc pl-6 space-y-2">
+                <li>Valid DMCA notices will be processed within 24-48 hours of receipt</li>
+                <li>The alleged infringing content will be removed or access disabled pending investigation</li>
+                <li>Users will be notified of takedown actions taken against their content</li>
+                <li>Counter-notifications will be processed within 10-14 business days as required by law</li>
+              </ul>
+            </section>
+
+            <section className="border-t pt-4">
+              <p className="text-xs text-muted-foreground">
+                <strong>Last Updated:</strong> October 31, 2025<br/>
+                This DMCA policy is subject to change. Users will be notified of significant changes through our platform.
+              </p>
+            </section>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};

client/components/DisclaimerModal.tsx

@@ -0,0 +1,199 @@
+"use client";
+
+import { useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+
+export const DisclaimerComponent = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      {/* Disclaimer Button */}
+      <Button
+        variant="link"
+        size="sm"
+        onClick={() => setIsOpen(true)}
+        className="text-xs underline p-0 h-auto text-muted-foreground"
+      >
+        View Full Legal Terms & Disclaimers
+      </Button>
+
+      {/* Disclaimer Modal */}
+      {isOpen && (
+        <div className="fixed inset-0 bg-background/80 backdrop-blur-sm z-50 flex items-center justify-center p-4 overflow-auto">
+          <Card className="max-w-4xl w-full max-h-[90vh] flex flex-col mx-auto my-auto">
+            <CardHeader className="flex-shrink-0 sticky top-0 bg-card z-10 border-b">
+              <CardTitle className="flex items-center justify-between">
+                Legal Terms & Disclaimers
+                <Button variant="outline" size="sm" onClick={() => setIsOpen(false)}>
+                  ✕
+                </Button>
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-6 text-sm flex-1 overflow-y-auto scrollbar-hide">
+              {/* Terms of Service */}
+              <section>
+                <h3 className="text-lg font-semibold mb-3">Terms of Service</h3>
+                <div className="space-y-3">
+                  <p>
+                    <strong>1. Acceptance of Terms:</strong> By accessing or using Osborne (&quot;the Service&quot;), 
+                    you agree to be bound by these Terms of Service. If you do not agree to these terms, 
+                    you may not use the Service.
+                  </p>
+                  <p>
+                    <strong>2. Service Description:</strong> Osborne is a real-time collaborative text editor 
+                    that allows users to create and join rooms for collaborative editing. The Service is 
+                    provided &quot;as is&quot; without warranty of any kind.
+                  </p>
+                  <p>
+                    <strong>3. User Responsibilities:</strong> You are solely responsible for all content 
+                    you upload, share, or transmit through the Service. You agree not to use the Service 
+                    for any illegal, harmful, or inappropriate purposes.
+                  </p>
+                  <p>
+                    <strong>4. Content Ownership:</strong> You retain ownership of your content. However, 
+                    by using the Service, you grant us a non-exclusive, royalty-free license to host, 
+                    store, and transmit your content as necessary to provide the Service.
+                  </p>
+                  <p>
+                    <strong>5. Prohibited Conduct:</strong> You agree not to upload, share, or transmit 
+                    content that is illegal, harmful, threatening, abusive, defamatory, obscene, or 
+                    otherwise objectionable.
+                  </p>
+                  <p>
+                    <strong>6. Service Availability:</strong> We do not guarantee that the Service will 
+                    be available at all times or that it will be error-free. We may modify, suspend, 
+                    or discontinue the Service at any time without notice.
+                  </p>
+                </div>
+              </section>
+
+              {/* Disclaimer */}
+              <section>
+                <h3 className="text-lg font-semibold mb-3">Disclaimer of Liability</h3>
+                <div className="space-y-3">
+                  <p>
+                    <strong>1. User-Generated Content:</strong> The Service allows users to upload and 
+                    share content. We do not monitor, review, or control user-generated content and 
+                    are not responsible for any content uploaded by users.
+                  </p>
+                  <p>
+                    <strong>2. No Warranty:</strong> THE SERVICE IS PROVIDED &quot;AS IS&quot; AND &quot;AS AVAILABLE&quot; 
+                    WITHOUT WARRANTIES OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO 
+                    WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, AND NON-INFRINGEMENT.
+                  </p>
+                  <p>
+                    <strong>3. Limitation of Liability:</strong> TO THE MAXIMUM EXTENT PERMITTED BY LAW, 
+                    WE SHALL NOT BE LIABLE FOR ANY INDIRECT, INCIDENTAL, SPECIAL, CONSEQUENTIAL, OR 
+                    PUNITIVE DAMAGES, OR ANY LOSS OF PROFITS OR REVENUES, WHETHER INCURRED DIRECTLY 
+                    OR INDIRECTLY, OR ANY LOSS OF DATA, USE, OR OTHER INTANGIBLE LOSSES.
+                  </p>
+                  <p>
+                    <strong>4. Third-Party Content:</strong> We are not responsible for content uploaded 
+                    by third parties. Users upload content at their own risk. We do not endorse, 
+                    support, or guarantee the accuracy or reliability of any user-generated content.
+                  </p>
+                  <p>
+                    <strong>5. Security:</strong> While we implement reasonable security measures, we 
+                    cannot guarantee the security of data transmitted through the Service. Users 
+                    transmit data at their own risk.
+                  </p>
+                  <p>
+                    <strong>6. Indemnification:</strong> You agree to indemnify and hold us harmless 
+                    from any claims, damages, losses, or expenses arising from your use of the Service 
+                    or violation of these terms.
+                  </p>
+                </div>
+              </section>
+
+              {/* Copyright and DMCA */}
+              <section>
+                <h3 className="text-lg font-semibold mb-3">Copyright & Intellectual Property</h3>
+                <div className="space-y-3">
+                  <p>
+                    <strong>1. Respect for Intellectual Property:</strong> Users must respect the 
+                    intellectual property rights of others. Do not upload content that infringes 
+                    on copyrights, trademarks, or other intellectual property rights.
+                  </p>
+                  <p>
+                    <strong>2. DMCA Compliance:</strong> We respond to valid DMCA takedown notices. 
+                    If you believe your copyrighted work has been infringed, please contact us with 
+                    appropriate documentation.
+                  </p>
+                  <p>
+                    <strong>3. Safe Harbor:</strong> We qualify for safe harbor protections under 
+                    applicable copyright laws as we are a service provider that hosts user-generated 
+                    content without prior review or knowledge of its contents.
+                  </p>
+                  <p>
+                    <strong>4. Content Removal:</strong> We reserve the right to remove any content 
+                    that we believe, in our sole discretion, violates these terms or applicable laws.
+                  </p>
+                  <p>
+                    <strong>5. User License:</strong> By uploading content, you represent that you 
+                    have the right to upload such content and grant others the ability to view and 
+                    collaborate on such content through the Service.
+                  </p>
+                </div>
+              </section>
+
+              {/* Data and Privacy */}
+              <section>
+                <h3 className="text-lg font-semibold mb-3">Data and Privacy</h3>
+                <div className="space-y-3">
+                  <p>
+                    <strong>1. Data Collection:</strong> We collect minimal data necessary to provide 
+                    the Service. We do not sell or share personal information with third parties 
+                    except as necessary to operate the Service.
+                  </p>
+                  <p>
+                    <strong>2. Content Storage:</strong> Content uploaded to the Service may be 
+                    temporarily stored to enable collaboration. We make no guarantees about data 
+                    persistence or backup.
+                  </p>
+                  <p>
+                    <strong>3. No Monitoring:</strong> We do not actively monitor user content or 
+                    communications. Any moderation is reactive and based on reports or automated systems.
+                  </p>
+                </div>
+              </section>
+
+              {/* General Provisions */}
+              <section>
+                <h3 className="text-lg font-semibold mb-3">General Provisions</h3>
+                <div className="space-y-3">
+                  <p>
+                    <strong>1. Changes to Terms:</strong> We may update these terms at any time. 
+                    Continued use of the Service constitutes acceptance of updated terms.
+                  </p>
+                  <p>
+                    <strong>2. Governing Law:</strong> These terms are governed by the laws of the 
+                    jurisdiction where the service operator resides, without regard to conflict 
+                    of law provisions.
+                  </p>
+                  <p>
+                    <strong>3. Severability:</strong> If any provision of these terms is found 
+                    unenforceable, the remaining provisions will remain in effect.
+                  </p>
+                  <p>
+                    <strong>4. Contact:</strong> For questions about these terms or to report 
+                    violations, contact the service administrator.
+                  </p>
+                </div>
+              </section>
+
+              <div className="border-t pt-4 text-center text-muted-foreground">
+                <p>Last Updated: {new Date().toLocaleDateString()}</p>
+                <p className="mt-2 font-semibold">
+                  BY USING THIS SERVICE, YOU ACKNOWLEDGE THAT YOU HAVE READ, UNDERSTOOD, 
+                  AND AGREE TO BE BOUND BY THESE TERMS.
+                </p>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+    </>
+  );
+};

client/components/DisclaimerModalComponent.tsx

@@ -0,0 +1,159 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+
+interface DisclaimerModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const DisclaimerModalComponent = ({ isOpen, onClose }: DisclaimerModalProps) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-background/80 backdrop-blur-sm z-[9999] flex items-center justify-center p-4 overflow-auto">
+      <Card className="max-w-4xl w-full max-h-[90vh] flex flex-col mx-auto my-auto">
+        <CardHeader className="flex-shrink-0 sticky top-0 bg-card z-10 border-b">
+          <CardTitle className="flex items-center justify-between">
+            Legal Terms & Disclaimers
+            <Button variant="outline" size="sm" onClick={onClose}>
+              ✕
+            </Button>
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="flex-1 overflow-auto scrollbar-hide p-6">
+          <div className="space-y-6 text-sm leading-relaxed">
+            <section>
+              <h3 className="font-semibold text-base mb-3">Terms of Service & User Agreement</h3>
+              <p>
+                By accessing and using this collaborative text editing service (&quot;Osborne&quot;), you acknowledge 
+                that you have read, understood, and agree to be bound by these terms and conditions. 
+                If you do not agree to these terms, please do not use our service.
+              </p>
+            </section>
+
+            <section>
+              <h3 className="font-semibold text-base mb-3">Service Description</h3>
+              <p>
+                Osborne is a real-time collaborative text editing platform that allows multiple users to 
+                simultaneously edit documents, share code, and collaborate on text-based projects. The service 
+                is provided &quot;as is&quot; without warranties of any kind.
+              </p>
+            </section>
+
+            <section>
+              <h3 className="font-semibold text-base mb-3">User Content & Liability Disclaimer</h3>
+              <p className="mb-3">
+                <strong>IMPORTANT:</strong> Users are solely responsible for all content they create, upload, 
+                share, or collaborate on through our platform. We do not monitor, review, or control user-generated content.
+              </p>
+              <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 p-4 rounded-md">
+                <h4 className="font-semibold mb-2">Content Liability Waiver</h4>
+                <ul className="list-disc pl-5 space-y-1">
+                  <li>We are not responsible for any content created or shared by users</li>
+                  <li>We do not endorse, verify, or guarantee the accuracy of user content</li>
+                  <li>Users assume full legal responsibility for their content and actions</li>
+                  <li>We reserve the right to remove content that violates our terms or applicable laws</li>
+                </ul>
+              </div>
+            </section>
+
+            <section>
+              <h3 className="font-semibold text-base mb-3">Privacy & Data Handling</h3>
+              <p className="mb-3">Your privacy is important to us. Here&apos;s how we handle your data:</p>
+              <ul className="list-disc pl-6 space-y-2">
+                <li><strong>Document Content:</strong> Stored temporarily for collaboration; users control persistence</li>
+                <li><strong>No Personal Data Collection:</strong> We don&apos;t require registration or collect personal information</li>
+                <li><strong>Session Data:</strong> Room codes and collaborative sessions are temporary</li>
+                <li><strong>No Tracking:</strong> We don&apos;t use analytics or tracking cookies</li>
+              </ul>
+            </section>
+
+            <section>
+              <h3 className="font-semibold text-base mb-3">Acceptable Use Policy</h3>
+              <div className="space-y-3">
+                <div>
+                  <h4 className="font-medium text-green-700 dark:text-green-400">✓ Permitted Uses:</h4>
+                  <ul className="list-disc pl-6 space-y-1 text-muted-foreground">
+                    <li>Collaborative document editing and code sharing</li>
+                    <li>Educational and professional projects</li>
+                    <li>Open source development and documentation</li>
+                    <li>Creative writing and content creation</li>
+                  </ul>
+                </div>
+                <div>
+                  <h4 className="font-medium text-red-700 dark:text-red-400">✗ Prohibited Uses:</h4>
+                  <ul className="list-disc pl-6 space-y-1 text-muted-foreground">
+                    <li>Illegal activities or content that violates applicable laws</li>
+                    <li>Harassment, hate speech, or discriminatory content</li>
+                    <li>Copyrighted material without proper authorization</li>
+                    <li>Malicious code, viruses, or security threats</li>
+                    <li>Spam, phishing, or fraudulent activities</li>
+                  </ul>
+                </div>
+              </div>
+            </section>
+
+            <section>
+              <h3 className="font-semibold text-base mb-3">Service Availability & Technical Disclaimers</h3>
+              <div className="bg-muted p-4 rounded-md space-y-2">
+                <p><strong>No Uptime Guarantees:</strong> Service availability is not guaranteed; planned and unplanned outages may occur.</p>
+                <p><strong>Data Loss Risk:</strong> Users should maintain backups; we&apos;re not liable for any data loss or corruption.</p>
+                <p><strong>Beta Software:</strong> This service may contain bugs, errors, or incomplete features.</p>
+                <p><strong>No Support Obligation:</strong> Technical support is provided on a best-effort basis.</p>
+              </div>
+            </section>
+
+            <section>
+              <h3 className="font-semibold text-base mb-3">Limitation of Liability</h3>
+              <p>
+                TO THE MAXIMUM EXTENT PERMITTED BY LAW, WE SHALL NOT BE LIABLE FOR ANY INDIRECT, INCIDENTAL, 
+                SPECIAL, CONSEQUENTIAL, OR PUNITIVE DAMAGES, INCLUDING BUT NOT LIMITED TO LOSS OF PROFITS, 
+                DATA, OR USE, ARISING OUT OF OR RELATING TO YOUR USE OF THE SERVICE.
+              </p>
+            </section>
+
+            <section>
+              <h3 className="font-semibold text-base mb-3">Intellectual Property</h3>
+              <p className="mb-3">
+                Users retain ownership of their original content. By using our service, users grant us a 
+                limited license to host, store, and facilitate collaboration on their content solely for 
+                the purpose of providing the service.
+              </p>
+              <p>
+                The Osborne platform, its code, design, and functionality are protected by intellectual 
+                property laws and remain the property of WebArk and its licensors.
+              </p>
+            </section>
+
+            <section>
+              <h3 className="font-semibold text-base mb-3">Termination</h3>
+              <p>
+                We reserve the right to terminate or suspend access to our service at any time, without 
+                prior notice, for conduct that we believe violates these terms or is harmful to other 
+                users, us, or third parties.
+              </p>
+            </section>
+
+            <section>
+              <h3 className="font-semibold text-base mb-3">Governing Law</h3>
+              <p>
+                These terms shall be interpreted and governed in accordance with applicable laws. 
+                Any disputes shall be resolved through appropriate legal channels.
+              </p>
+            </section>
+
+            <section className="border-t pt-4">
+              <p className="text-xs text-muted-foreground">
+                <strong>Last Updated:</strong> October 31, 2025<br/>
+                These terms are subject to change. Continued use of the service constitutes acceptance of any modifications.
+                For questions or concerns, contact: legal@webark.in
+              </p>
+            </section>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};

client/components/Footer.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+interface LegalFooterProps {
+  onDisclaimerOpen: () => void;
+  onDMCAOpen: () => void;
+}
+
+export const LegalFooter = ({ onDisclaimerOpen, onDMCAOpen }: LegalFooterProps) => {
+  return (
+    <>
+      {/* Legal Notice Footer */}
+      <div className="fixed bottom-0 left-0 right-0 bg-background/90 backdrop-blur-sm border-t border-border p-4 z-50">
+        <div className="max-w-4xl mx-auto text-center text-xs text-muted-foreground">
+          <p className="mb-2">
+            By using this service, you agree to our Terms of Service and acknowledge our disclaimers.
+            User uploaded content is not monitored or endorsed by us.
+          </p>
+          <div className="flex flex-wrap gap-4 justify-center">
+            <button
+              onClick={onDisclaimerOpen}
+              style={{
+                background: 'none',
+                border: 'none',
+                textDecoration: 'underline',
+                cursor: 'pointer',
+                fontSize: '0.75rem',
+                padding: '0',
+                height: 'auto',
+                color: 'hsl(var(--muted-foreground))'
+              }}
+            >
+              View Full Legal Terms & Disclaimers
+            </button>
+            <button
+              onClick={onDMCAOpen}
+              style={{
+                background: 'none',
+                border: 'none',
+                textDecoration: 'underline',
+                cursor: 'pointer',
+                fontSize: '0.75rem',
+                padding: '0',
+                height: 'auto',
+                color: 'hsl(var(--muted-foreground))'
+              }}
+            >
+              DMCA Notice & Copyright Policy
+            </button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};

client/lib/themes.ts

@@ -23,48 +23,6 @@ export interface ThemeConfig {
 }
 
 export const VSCODE_THEMES: ThemeConfig[] = [
-  {
-    id: 'one-dark-pro',
-    name: 'One Dark Pro',
-    type: 'dark',
-    colors: {
-      background: 'hsl(220, 13%, 18%)',
-      foreground: 'hsl(220, 9%, 55%)',
-      card: 'hsl(220, 13%, 20%)',
-      cardForeground: 'hsl(220, 9%, 55%)',
-      popover: 'hsl(220, 13%, 20%)',
-      popoverForeground: 'hsl(220, 9%, 55%)',
-      border: 'hsl(220, 13%, 25%)',
-      primary: 'hsl(187, 47%, 55%)',
-      primaryForeground: 'hsl(220, 13%, 18%)',
-      muted: 'hsl(220, 13%, 22%)',
-      mutedForeground: 'hsl(220, 9%, 40%)',
-      accent: 'hsl(220, 13%, 22%)',
-      accentForeground: 'hsl(220, 9%, 55%)',
-      destructive: 'hsl(355, 65%, 65%)',
-      destructiveForeground: 'hsl(220, 13%, 18%)',
-    }
-  },
-  {
-    id: 'dracula',
-    name: 'Dracula Official',
-    type: 'dark',
-    colors: {
-      background: 'hsl(231, 15%, 18%)',
-      foreground: 'hsl(60, 30%, 96%)',
-      card: 'hsl(232, 14%, 20%)',
-      cardForeground: 'hsl(60, 30%, 96%)',
-      border: 'hsl(231, 11%, 27%)',
-      primary: 'hsl(265, 89%, 78%)',
-      primaryForeground: 'hsl(231, 15%, 18%)',
-      muted: 'hsl(232, 14%, 22%)',
-      mutedForeground: 'hsl(233, 15%, 41%)',
-      accent: 'hsl(232, 14%, 22%)',
-      accentForeground: 'hsl(60, 30%, 96%)',
-      destructive: 'hsl(0, 100%, 67%)',
-      destructiveForeground: 'hsl(231, 15%, 18%)',
-    }
-  },
   {
     id: 'github-dark',
     name: 'GitHub Dark',
@@ -146,8 +104,8 @@ export const VSCODE_THEMES: ThemeConfig[] = [
     }
   },
   {
-    id: 'monokai-pro',
-    name: 'Monokai Pro',
+    id: 'monokai',
+    name: 'Monokai',
     type: 'dark',
     colors: {
       background: 'hsl(60, 3%, 15%)',
@@ -227,7 +185,7 @@ export const VSCODE_THEMES: ThemeConfig[] = [
   },
   {
     id: 'light-plus',
-    name: 'Light+ (default light)',
+    name: 'Light+',
     type: 'light',
     colors: {
       background: 'hsl(0, 0%, 100%)',
@@ -266,8 +224,8 @@ export const VSCODE_THEMES: ThemeConfig[] = [
     }
   },
   {
-    id: 'one-dark-pro',
-    name: 'One Dark Pro',
+    id: 'one-dark',
+    name: 'One Dark',
     type: 'dark',
     colors: {
       background: 'hsl(220, 13%, 18%)',

client/package-lock.json

@@ -9652,7 +9652,6 @@
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
       "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }