diff --git a/cache/solidity-files-cache.json b/cache/solidity-files-cache.json
new file mode 100644
index 0000000..8448463
--- /dev/null
+++ b/cache/solidity-files-cache.json
@@ -0,0 +1,14 @@
+{
+  "_format": "ethers-rs-sol-cache-3",
+  "paths": {
+    "artifacts": "out",
+    "build_infos": "out/build-info",
+    "sources": "src",
+    "tests": "test",
+    "scripts": "script",
+    "libraries": [
+      "lib"
+    ]
+  },
+  "files": {}
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 7f58dcb..3916edf 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
 		"@types/react-dom": "^18.0.0",
 		"axios": "^1.5.0",
 		"dompurify": "^3.0.5",
+		"lodash": "^4.17.21",
 		"lottie-web": "^5.12.2",
 		"openai": "^4.6.0",
 		"openai-fetch": "^1.6.3",
@@ -22,6 +23,7 @@
 		"react-dom": "^18.2.0",
 		"react-markdown": "^8.0.7",
 		"react-scripts": "5.0.1",
+		"tailwindcss": "^3.3.5",
 		"typescript": "^4.4.2",
 		"web-vitals": "^2.1.0"
 	},
diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index 8ea1444..0000000
--- a/src/App.css
+++ /dev/null
@@ -1,87 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=San+Francisco+Pro:wght@400;600&display=swap');
-
-.App {
-  display: flex;
-  justify-content: center; /* Adjusted to flex-start to allow content to start from the top */
-  align-items: center;
-  min-height: 100vh; /* Adjusted to min-height to allow the content to grow beyond the viewport height */
-  background-color: #f0f0f0;
-  font-family: 'San Francisco Pro', sans-serif;
-  padding-top: 20px; /* Added padding at the top to give some space */
-}
-
-.rectangle {
-  width: 90%;
-  max-width: 400px;
-  max-height: 80vh; /* Set a max-height to allow for scrolling */
-  overflow-y: auto; /* Allow vertical scrolling */
-  background-color: #fff;
-  border-radius: 25px;
-  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.05);
-  padding: 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  text-align: center;
-  margin: 20px;
-}
-
-.text-input {
-  padding: 14px;
-  border-radius: 14px;
-  border: 1px solid #e5e5e5;
-  font-size: 16px;
-  width: 100%;
-  box-sizing: border-box;
-  outline: none;
-  -webkit-appearance: none;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.output-window {
-  padding: 0px;
-  border-radius: 14px;
-  overflow-y: auto;
-  word-break: break-word;
-  text-align: left;
-  border-color: #373738;
-  color: #e5e5e5;
-}
-
-
-/* Smoothing out input field for iOS */
-.text-input:focus {
-  border-color: #007aff;
-}
-
-/* Dark mode styles for iOS */
-@media (prefers-color-scheme: dark) {
-  .App {
-    background-color: #000;
-  }
-
-  .rectangle {
-    background-color: #1c1c1e;
-  }
-
-  .text-input{
-    background-color: #2c2c2e;
-    border-color: #373738;
-    color: #e5e5e5;
-  }
-  .text-input{
-    animation: fadeIn 2s ease-in-out; /* Fade-in effect on load */
-  }
-
-  .text-input:focus {
-    border-color: #0a84ff;
-  }
-}
diff --git a/src/App.tsx b/src/App.tsx
index f5c15d3..313a9b6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,7 +2,6 @@
 
 import React, { useEffect, useState } from 'react';
 import lottie from 'lottie-web';
-import './App.css';
 import { OpenAIClient } from 'openai-fetch';
 import DOMpurify from 'dompurify';
 
@@ -10,9 +9,44 @@ const client = new OpenAIClient({
 	apiKey: process.env.REACT_APP_OPENAI_API_KEY,
 });
 
+interface User {
+	name: string;
+	email: string;
+	location: string;
+  }
+
+// Define the UserInfoTab component here or import it if it's in a separate file
+const UserInfoTab: React.FC<{ user: User }> = ({ user }) => {
+	// State to track if the extra information is visible
+	const [isInfoVisible, setIsInfoVisible] = useState(false);
+  
+	// Function to toggle the visibility of the extra information
+	const toggleInfo = () => {
+	  setIsInfoVisible(!isInfoVisible);
+	};
+  
+	return (
+	  <div className="absolute top-0 left-0 mt-4 ml-4 p-4 bg-white shadow-md rounded-lg max-w-xs">
+		<div className="flex items-center space-x-4">
+		  {/* Make the name a button to toggle the extra information */}
+		  <button onClick={toggleInfo} className="text-lg font-semibold focus:outline-none">
+			{user.name}
+		  </button>
+		</div>
+		{/* Conditionally render the extra information based on isInfoVisible */}
+		{isInfoVisible && (
+		  <div className="mt-3">
+			<p className="text-gray-600"><strong>Email:</strong> {user.email}</p>
+			<p className="text-gray-600"><strong>Location:</strong> {user.location}</p>
+		  </div>
+		)}
+	  </div>
+	);
+  };
+
 function App() {
 	const [output, setOutput] = useState('');
-	const [promptOutput, setPromptOutput] = useState('');
+	const [promptOutput, setPromptOutput] = useState<string[]>();
 	const [placeholder, setPlaceholder] = useState('');
 	const [htmlContent, setHtmlContent] = useState('');
 	const [value, setValue] = useState('');
@@ -23,6 +57,9 @@ function App() {
 
 	const [suggestedRecipes, setSuggestedRecipes] = useState<string[]>([]);
 
+	
+	  
+
 	interface Coords {
 		latitude: number;
 		longitude: number;
@@ -94,6 +131,12 @@ function App() {
 		await handleGetLocation();
 	};
 
+	// Sample user object that matches the User interface
+	const user: User = {
+			name: 'Jane Doe',
+			email: 'jane.doe@example.com',
+			location: 'New York',
+ 	};
 	const handleKeyDown = (e: { key: string }) => {
 		if (e.key === 'Enter') {
 			lottie.loadAnimation({
@@ -119,28 +162,14 @@ function App() {
                     - Recipe only, with no additional comments.
                     - Include a description and historical background of the dish at the end.
                   2. **Styling**:
-                    - Enclose everything in a styled \`div\` with inline CSS for HTML rendering.
-                    - Use a professional style optimized for mobile viewing.
-                    - Create distinct sections for different parts of the content.
-                  3. **Colors**:
-                    - Main colors: #B0DF94, #F9C6C5, #BCDEF2, #FAEF86, #1C1C1E.
-                    - Light text against dark backgrounds.
-                    - Avoid using green or pink for the text.
-                  4. **Typography**:
-                    - Introduce an interesting font.
-                    - Include a large title in its own styled container.
-                    - Align all text to the left. including list elements
-                    - prefer dark text
-                    - wrap text in titles
-                    5. **Container**:
-                    - Use styled containers for individual ingredients, instructions, etc., and a grouped container for each section.
-                    - Rounded corners.
-                    - Scrollable.
-                    - Apply transparency to the main colors for containers to look smooth.
-                    - Add colored rounded boxes round each title, only around the title, and around the group.
-                  Ensure that the styles only affect elements within the div. Thank you.
+                    - separate each section by using an '@' delimiter.
                   `;
-
+		console.log(query);
+		const guidelines = 'vegan, no meat, healthy'
+		const querys = [
+			`Provide 5 recipe names for this users profile ${guidelines}. Limit to approximately 10 tokens, and provide all the recipe names in one json object`,
+			`Please provide a recipe for ${output}, ${guidelines ? `that conforms to these restrictions: ${guidelines}`: ''} in as few tokens as possible, give me just the ingredients in json format.`,
+		]
 		try {
 			let response = await client.createChatCompletion({
 				model: 'gpt-3.5-turbo',
@@ -152,13 +181,13 @@ function App() {
 					},
 					{
 						role: 'user',
-						content: query,
+						content: querys[0],
 					},
 				],
 			});
-
-			setPromptOutput(response.message.content!);
-			setHtmlContent(response.message.content!);
+			console.log(response);
+			let recipes = JSON.parse(response.message.content!);
+			setPromptOutput(recipes);
 			lottie.destroy('loading');
 		} catch (error) {
 			console.error('Error:', error);
@@ -242,6 +271,8 @@ function App() {
 
 	return (
 		<div className="App">
+			{/* Include the UserInfoTab component and pass the user object as a prop */}
+			<UserInfoTab user={user} />
 			<div className="rectangle">
 				<div id="animation" style={{ width: '100%', height: '100%' }}></div>
 				<div className="output-window">
@@ -257,6 +288,8 @@ function App() {
 						className="text-input"
 					/>
 				</div>
+				{/* <h1 className="text-3xl font-bold underline text-white ">Hello world!</h1> */}
+
 				<>
 					<div id="loading" style={{ width: '100%', height: '100%' }}></div>
 
@@ -264,8 +297,16 @@ function App() {
 						<>
 							<div
 								style={{ overflow: 'auto', maxHeight: '500px' }}
-								dangerouslySetInnerHTML={{ __html: htmlContent }}
-							></div>
+							>
+								<>
+								{promptOutput ? (<a> {promptOutput[0]} </a>) : <></>}
+								{promptOutput ? (<a> {promptOutput[1]} </a>) : <></>}
+								{promptOutput ? (<a> {promptOutput[2]} </a>) : <></>}
+								{promptOutput ? (<a> {promptOutput[3]} </a>) : <></>}
+								{promptOutput ? (<a> {promptOutput[4]} </a>) : <></>}
+								{promptOutput ? (<a> {promptOutput[5]} </a>) : <></>}
+								</>
+							</div>
 							{/* <ReactMarkdown className="output-window">
                 {promptOutput.toString()}
               </ReactMarkdown> */}
diff --git a/src/index.css b/src/index.css
index ec2585e..6c47448 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -11,3 +15,89 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+.App {
+  display: flex;
+  justify-content: center; /* Adjusted to flex-start to allow content to start from the top */
+  align-items: center;
+  min-height: 100vh; /* Adjusted to min-height to allow the content to grow beyond the viewport height */
+  background-color: #f0f0f0;
+  font-family: 'San Francisco Pro', sans-serif;
+  padding-top: 20px; /* Added padding at the top to give some space */
+}
+
+.rectangle {
+  width: 90%;
+  max-width: 400px;
+  max-height: 80vh; /* Set a max-height to allow for scrolling */
+  overflow-y: auto; /* Allow vertical scrolling */
+  background-color: #fff;
+  border-radius: 25px;
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.05);
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  text-align: center;
+  margin: 20px;
+}
+
+.text-input {
+  padding: 14px;
+  border-radius: 14px;
+  border: 1px solid #e5e5e5;
+  font-size: 16px;
+  width: 100%;
+  box-sizing: border-box;
+  outline: none;
+  -webkit-appearance: none;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.output-window {
+  padding: 0px;
+  border-radius: 14px;
+  overflow-y: auto;
+  word-break: break-word;
+  text-align: left;
+  border-color: #373738;
+  color: #e5e5e5;
+}
+
+
+/* Smoothing out input field for iOS */
+.text-input:focus {
+  border-color: #007aff;
+}
+
+/* Dark mode styles for iOS */
+@media (prefers-color-scheme: dark) {
+  .App {
+    background-color: #000;
+  }
+
+  .rectangle {
+    background-color: #1c1c1e;
+  }
+
+  .text-input{
+    background-color: #2c2c2e;
+    border-color: #373738;
+    color: #e5e5e5;
+  }
+  .text-input{
+    animation: fadeIn 2s ease-in-out; /* Fade-in effect on load */
+  }
+
+  .text-input:focus {
+    border-color: #0a84ff;
+  }
+}
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..43e294d
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{js,jsx,ts,tsx,html,css}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+
diff --git a/yarn.lock b/yarn.lock
index 17b51c6..00e683a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4664,7 +4664,7 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-glob@^3.2.12, fast-glob@^3.2.9:
+fast-glob@^3.2.12, fast-glob@^3.2.9, fast-glob@^3.3.0:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.1.tgz#784b4e897340f3dbbef17413b3f11acf03c874c4"
   integrity sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==
@@ -6290,6 +6290,11 @@ jiti@^1.18.2:
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.20.0.tgz#2d823b5852ee8963585c8dd8b7992ffc1ae83b42"
   integrity sha512-3TV69ZbrvV6U5DfQimop50jE9Dl6J8O1ja1dvBbMba/sZ3YBEQqJ2VZRoQPVnhlzjNtU1vaXRZVrVjU4qtm8yA==
 
+jiti@^1.19.1:
+  version "1.21.0"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.0.tgz#7c97f8fe045724e136a397f7340475244156105d"
+  integrity sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -9298,6 +9303,34 @@ tailwindcss@^3.0.2:
     resolve "^1.22.2"
     sucrase "^3.32.0"
 
+tailwindcss@^3.3.5:
+  version "3.3.5"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.5.tgz#22a59e2fbe0ecb6660809d9cc5f3976b077be3b8"
+  integrity sha512-5SEZU4J7pxZgSkv7FP1zY8i2TIAOooNZ1e/OGtxIEv6GltpoiXUqWvLy89+a10qYTB1N5Ifkuw9lqQkN9sscvA==
+  dependencies:
+    "@alloc/quick-lru" "^5.2.0"
+    arg "^5.0.2"
+    chokidar "^3.5.3"
+    didyoumean "^1.2.2"
+    dlv "^1.1.3"
+    fast-glob "^3.3.0"
+    glob-parent "^6.0.2"
+    is-glob "^4.0.3"
+    jiti "^1.19.1"
+    lilconfig "^2.1.0"
+    micromatch "^4.0.5"
+    normalize-path "^3.0.0"
+    object-hash "^3.0.0"
+    picocolors "^1.0.0"
+    postcss "^8.4.23"
+    postcss-import "^15.1.0"
+    postcss-js "^4.0.1"
+    postcss-load-config "^4.0.1"
+    postcss-nested "^6.0.1"
+    postcss-selector-parser "^6.0.11"
+    resolve "^1.22.2"
+    sucrase "^3.32.0"
+
 tapable@^1.0.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"