diff --git a/.env b/.env
new file mode 100644
index 0000000..f1d46f2
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+NEXT_PUBLIC_API_KEY='sk-proj-axckbga92Xzt6DpWIIMBT3BlbkFJkZNo1QegEYwwd45bUcNe'
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 4346f99..4309b5f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,67 +1,180 @@
 "use client";
 import "regenerator-runtime/runtime";
-import Image from "next/image";
-import { IconVolume,IconFileUpload } from '@tabler/icons-react';
+import React, { useState, ChangeEvent } from "react";
+import {
+  IconCopy,
+  IconStar,
+  IconThumbDown,
+  IconThumbUp,
+  IconVolume,
+} from "@tabler/icons-react";
+import SpeechRecognitionComponent from "@/components/Speech Recognition/SpeechRecognition";
+import TextArea from "@/components/Inputs/TextArea";
+import FileUpload from "@/components/Inputs/FileUpload";
+import LinkPaste from "@/components/Inputs/LinkPaste";
+import LanguageSelector from "@/components/Inputs/LanguageSelector";
+import useTranslate from "@/hooks/useTranslate";
+import { rtfToText } from "@/utils/rtfToText";
 
+import SvgDecorations from "@/components/SvgDecorations";
+import CategoryLinks from "@/components/categoryLinks";
 
-import React, {useState,ChangeEvent} from "react";
-import TextArea from '@/components/Inputs/TextArea';
-import SpeechRecognitionComponent from '@/components/Speech Recognition/SpeechRecognition';
+const Home: React.FC = () => {
+  const [sourceText, setSourceText] = useState<string>("");
+  const [copied, setCopied] = useState<boolean>(false);
+  const [favorite, setFavorite] = useState<boolean>(false);
+  const [languages] = useState<string[]>([
+    "English",
+    "Spanish",
+    "French",
+    "German",
+    "Chinese",
+  ]);
+  const [selectedLanguage, setSelectedLanguage] = useState<string>("Spanish");
 
-export default function Home() {
+  const targetText = useTranslate(sourceText, selectedLanguage);
 
-  const [sourceText,setSourceText]=useState<string>("");
-  const handleAudioPlayback = (text:string) =>{
-    const utterance=new SpeechSynthesisUtterance(text);
+  const handleFileUpload = (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = () => {
+        const rtfContent = reader.result as string;
+        const text = rtfToText(rtfContent);
+        setSourceText(text);
+      };
+      reader.readAsText(file);
+    }
+  };
+
+  const handleLinkPaste = async (e: ChangeEvent<HTMLInputElement>) => {
+    const link = e.target.value;
+    try {
+      const response = await fetch(link);
+      const data = await response.text();
+      setSourceText(data);
+    } catch (error) {
+      console.error("Error fetching link content:", error);
+    }
+  };
+
+  const handleCopyToClipboard = () => {
+    navigator.clipboard.writeText(targetText);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const handleLike = () => {
+    // Implement like logic
+  };
+
+  const handleDislike = () => {
+    // Implement dislike logic
+  };
+
+  const handleFavorite = () => {
+    setFavorite(!favorite);
+    if (!favorite) {
+      localStorage.setItem("favoriteTranslation", targetText);
+    } else {
+      localStorage.removeItem("favoriteTranslation");
+    }
+  };
+
+  const handleAudioPlayback = (text: string) => {
+    const utterance = new SpeechSynthesisUtterance(text);
     window.speechSynthesis.speak(utterance);
   };
-  return <div>
+
+  return (
     <div className="h-[50rem] w-full dark:bg-black bg-white  dark:bg-grid-white/[0.2] bg-grid-black/[0.2] relative flex items-center justify-center">
-      <div className="absolute pointer-events-none inset-0 flex items-center justify-center dark:bg-black bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]"></div>
+      <div className="absolute pointer-events-none inset-0 flex items-center justify-center bg-black [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]"></div>
+
       <div className="relative overflow-hidden h-screen">
-        <div className="max-w-[85rem] mx-auto px-4 sm:px-6 py-10 sm:py-24">
+        <div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 py-10 sm:py-24">
           <div className="text-center">
-             <h1
-             className="text-4xl sm:text-6xl font-bold text-neutral-200"
-             >Chit<span className="text-[#f87315]">
-              Chat</span></h1>
-              <p className="mt-3 text-neutral-400">
-                ChitChat: Bridging voices , connecting worlds 
-              </p>
-
-            <div className="mt-7 sm:mt-12 max-auto max-w-3xl relative">
-              <div className="grid gap-4 md:grid-cols-4-grid-cols-1">
-                <div className="relative z-10 flex flex-col space-x-3 border rounded-lg shadow-lg bg-neutral-900 border-neutral-700 shadow-gray-900/20">
+            <h1 className="text-4xl sm:text-6xl font-bold  text-neutral-200">
+              Chit<span className="text-[#f87315]">Chat</span>
+            </h1>
+
+            <p className="mt-3 text-neutral-400">
+              ChitChat: Bridging Voices, Connecting Worlds.
+            </p>
+
+            <div className="mt-7 sm:mt-12 mx-auto max-w-3xl relative">
+              <div className="grid gap-4 md:grid-cols-2 grid-cols-1">
+                <div className="relative z-10 flex flex-col space-x-3 p-3  border rounded-lg shadow-lg  bg-neutral-900 border-neutral-700 shadow-gray-900/20">
                   <TextArea
-                  id="source-language"
-                  value={sourceText}
-                  onChange={(e:ChangeEvent<HTMLTextAreaElement>)=>(
-                    setSourceText(e.target.value)
-                  )}
-                  placeholder="Source Language"
+                    id="source-language"
+                    value={sourceText}
+                    onChange={(e: ChangeEvent<HTMLTextAreaElement>) =>
+                      setSourceText(e.target.value)
+                    }
+                    placeholder="Source Language"
                   />
                   <div className="flex flex-row justify-between w-full">
                     <span className="cursor-pointer flex space-x-2 flex-row">
-                      <SpeechRecognitionComponent 
-                      setSourceText={setSourceText}
+                      <SpeechRecognitionComponent
+                        setSourceText={setSourceText}
                       />
-                      <IconVolume 
-                      size={22}
-                      onClick={() => handleAudioPlayback(sourceText)}
+                      <IconVolume
+                        size={22}
+                        onClick={() => handleAudioPlayback(sourceText)}
                       />
-                      {/* <IconFileUpload
-                      size={22}
-                      onClick={()=> handleFileUpload()}
-                      /> */}
+                      <FileUpload handleFileUpload={handleFileUpload} />
+                      <LinkPaste handleLinkPaste={handleLinkPaste} />
+                    </span>
+                    <span className="text-sm pr-4">
+                      {sourceText.length} / 2000
                     </span>
+                  </div>
+                </div>
 
+                <div className="relative z-10 flex flex-col space-x-3 p-3  border rounded-lg shadow-lg  bg-neutral-900 border-neutral-700 shadow-gray-900/20">
+                  <TextArea
+                    id="target-language"
+                    value={targetText}
+                    onChange={() => {}}
+                    placeholder="Target Language"
+                  />
+                  <div className="flex flex-row justify-between w-full">
+                    <span className="cursor-pointer flex items-center space-x-2 flex-row">
+                      <LanguageSelector
+                        selectedLanguage={selectedLanguage}
+                        setSelectedLanguage={setSelectedLanguage}
+                        languages={languages}
+                      />
+                      <IconVolume
+                        size={22}
+                        onClick={() => handleAudioPlayback(targetText)}
+                      />
+                    </span>
+                    <div className="flex flex-row items-center space-x-2 pr-4 cursor-pointer">
+                      <IconCopy size={22} onClick={handleCopyToClipboard} />
+                      {copied && (
+                        <span className="text-xs text-green-500">Copied!</span>
+                      )}
+                      <IconThumbUp size={22} onClick={handleLike} />
+                      <IconThumbDown size={22} onClick={handleDislike} />
+                      <IconStar
+                        size={22}
+                        onClick={handleFavorite}
+                        className={favorite ? "text-yellow-500" : ""}
+                      />
+                    </div>
                   </div>
                 </div>
               </div>
+
+              <SvgDecorations />
             </div>
+
+            <CategoryLinks />
           </div>
         </div>
       </div>
     </div>
-  </div>
-}
+  );
+};
+
+export default Home;
\ No newline at end of file
diff --git a/src/components/Inputs/FileUpload.jsx b/src/components/Inputs/FileUpload.jsx
index 490acf7..aaa35f4 100644
--- a/src/components/Inputs/FileUpload.jsx
+++ b/src/components/Inputs/FileUpload.jsx
@@ -1,11 +1,18 @@
 import React from "react";
-import {IconPaperclip} from "@tabler/icons-react";
+import { IconPaperclip } from "@tabler/icons-react";
 
-const FileUpload = ({handleFileUpload}) =>{
+const FileUpload = ({ handleFileUpload }) => {
+  return (
     <label htmlFor="file-upload" className="cursor-pointer">
-        <IconPaperclip size={22}/>
-        <input id="file-upload" type="file" onChange={handleFileUpload} className="hidden" />
+      <IconPaperclip size={22} />
+      <input
+        id="file-upload"
+        type="file"
+        onChange={handleFileUpload}
+        className="hidden"
+      />
     </label>
-}
+  );
+};
 
-export default FileUpload;
\ No newline at end of file
+export default FileUpload;
diff --git a/src/components/Inputs/LanguageSelector.jsx b/src/components/Inputs/LanguageSelector.jsx
index a045e14..d3b74ab 100644
--- a/src/components/Inputs/LanguageSelector.jsx
+++ b/src/components/Inputs/LanguageSelector.jsx
@@ -2,6 +2,7 @@ import React from "react";
 import { IconLanguage } from "@tabler/icons-react";
 
 const LanguageSelector = ({selectedLanguage, setSelectedLanguage,languages})=>{
+    return(
     <span className="cursor-pointer rounded-full space-x-1 pl-2 bg-black flex items-center flex-row">
         <IconLanguage size={20}/>
         <select
@@ -9,14 +10,15 @@ const LanguageSelector = ({selectedLanguage, setSelectedLanguage,languages})=>{
             onChange={(e)=> setSelectedLanguage(e.target.value)}
             className="bg-black flex flex-row rounded-full py-1 text-white"
         >
-            {language.map((language)=>{
-                <option key={language} value={language}>
-                    {language}
+            {languages.map((languages)=>{
+                <option key={languages} value={languages}>
+                    {languages}
                 </option>
             })}
         </select>
 
     </span>
+    )
 }
 
 
diff --git a/src/components/Inputs/LinkPaste.jsx b/src/components/Inputs/LinkPaste.jsx
index 276a791..78c43a3 100644
--- a/src/components/Inputs/LinkPaste.jsx
+++ b/src/components/Inputs/LinkPaste.jsx
@@ -1,14 +1,18 @@
 import React from "react";
-import {IconLink} from "tabler/icons-react";
+import { IconLink } from "@tabler/icons-react";
 
-const LinkPaste = ({handleLinkPaste}) =>{
+const LinkPaste = ({ handleLinkPaste }) => {
+  return (
     <label htmlFor="link-input" className="cursor-pointer">
-        <IconLink size={21}/>
-        <input type="text" id="link-input"
+      <IconLink size={21} />
+      <input
+        type="text"
+        id="link-input"
         className="hidden"
         onChange={handleLinkPaste}
-        />
+      />
     </label>
-}
+  );
+};
 
 export default LinkPaste;
diff --git a/src/components/SvgDecorations.tsx b/src/components/SvgDecorations.tsx
index e69de29..f75d0a7 100644
--- a/src/components/SvgDecorations.tsx
+++ b/src/components/SvgDecorations.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+
+const SvgDecorations: React.FC = () => {
+  return (
+    <>
+      <div className="hidden z-[200] md:block absolute top-0 end-0 -translate-y-12 translate-x-20">
+        <svg
+          className="w-16 h-auto text-orange-500"
+          width="121"
+          height="135"
+          viewBox="0 0 121 135"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M5 16.4754C11.7688 27.4499 21.2452 57.3224 5 89.0164"
+            stroke="currentColor"
+            strokeWidth="10"
+            strokeLinecap="round"
+          />
+          <path
+            d="M33.6761 112.104C44.6984 98.1239 74.2618 57.6776 83.4821 5"
+            stroke="currentColor"
+            strokeWidth="10"
+            strokeLinecap="round"
+          />
+          <path
+            d="M50.5525 130C68.2064 127.495 110.731 117.541 116 78.0874"
+            stroke="currentColor"
+            strokeWidth="10"
+            strokeLinecap="round"
+          />
+        </svg>
+      </div>
+      <div className="hidden md:block absolute bottom-0 start-0 translate-y-10 -translate-x-32">
+        <svg
+          className="w-40 h-auto text-cyan-500"
+          width="347"
+          height="188"
+          viewBox="0 0 347 188"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M4 82.4591C54.7956 92.8751 30.9771 162.782 68.2065 181.385C112.642 203.59 127.943 78.57 122.161 25.5053C120.504 2.2376 93.4028 -8.11128 89.7468 25.5053C85.8633 61.2125 130.186 199.678 180.982 146.248L214.898 107.02C224.322 95.4118 242.9 79.2851 258.6 107.02C274.299 134.754 299.315 125.589 309.861 117.539L343 93.4426"
+            stroke="currentColor"
+            strokeWidth="7"
+            strokeLinecap="round"
+          />
+        </svg>
+      </div>
+    </>
+  );
+};
+
+export default SvgDecorations;
\ No newline at end of file
diff --git a/src/hooks/useTranslate.jsx b/src/hooks/useTranslate.jsx
index c9a1288..996bd82 100644
--- a/src/hooks/useTranslate.jsx
+++ b/src/hooks/useTranslate.jsx
@@ -1,3 +1,48 @@
-import {useEffect,useState} from "react";
-import {OpenAI} from 'openai';
- 
\ No newline at end of file
+import { useEffect, useState } from "react";
+import { OpenAI } from "openai";
+
+const openai = new OpenAI({
+  apiKey: process.env.NEXT_PUBLIC_API_KEY,
+  dangerouslyAllowBrowser: true,
+});
+
+const useTranslate = (sourceText, selectedLanguage) => {
+  const [targetText, setTargetText] = useState("");
+
+  useEffect(() => {
+    const handleTranslate = async (sourceText) => {
+      try {
+        const response = await openai.chat.completions.create({
+          model: "gpt-4o",
+          messages: [
+            {
+              role: "user",
+              content: `You will be provided with a sentence. This sentence: 
+              ${sourceText}. Your tasks are to:
+              - Detect what language the sentence is in
+              - Translate the sentence into ${selectedLanguage}
+              Do not return anything other than the translated sentence.`,
+            },
+          ],
+        });
+
+        const data = response.choices[0].message.content;
+        setTargetText(data);
+      } catch (error) {
+        console.error("Error translating text:", error);
+      }
+    };
+
+    if (sourceText.trim()) {
+      const timeoutId = setTimeout(() => {
+        handleTranslate(sourceText);
+      }, 500); // Adjust the delay as needed
+
+      return () => clearTimeout(timeoutId);
+    }
+  }, [sourceText, selectedLanguage]);
+
+  return targetText;
+};
+
+export default useTranslate;
\ No newline at end of file
diff --git a/src/utils/rtfToText.js b/src/utils/rtfToText.js
new file mode 100644
index 0000000..0adeaea
--- /dev/null
+++ b/src/utils/rtfToText.js
@@ -0,0 +1,28 @@
+export function rtfToText(rtf) {
+    const rtfRegex = /\\([a-z]+)(-?\d+)? ?|[{}]|\\'([0-9a-fA-F]{2})|([^\\{}]+)/g;
+    let match;
+    let output = [];
+    let stack = [];
+  
+    while ((match = rtfRegex.exec(rtf)) !== null) {
+      if (match[0] === "{") {
+        stack.push(output.length);
+      } else if (match[0] === "}") {
+        output.splice(stack.pop(), 0);
+      } else if (match[0][0] === "\\") {
+        if (match[1] === "par" || match[1] === "line") {
+          output.push("\n");
+        } else if (match[1] === "tab") {
+          output.push("\t");
+        } else if (match[1] === "uc") {
+          // Unicode character count to skip
+          rtfRegex.lastIndex += Number(match[2]);
+        } else if (match[1] === "'") {
+          output.push(String.fromCharCode(parseInt(match[3], 16)));
+        }
+      } else {
+        output.push(match[0]);
+      }
+    }
+    return output.join("");
+  }
\ No newline at end of file