diff --git a/app/AudioRecorder(not yet).tsx b/app/backend/AudioRecorder(not yet).tsx
similarity index 100%
rename from app/AudioRecorder(not yet).tsx
rename to app/backend/AudioRecorder(not yet).tsx
diff --git a/app/InputBackend.tsx b/app/backend/InputBackend.tsx
similarity index 94%
rename from app/InputBackend.tsx
rename to app/backend/InputBackend.tsx
index 78be6bb..a00ceeb 100644
--- a/app/InputBackend.tsx
+++ b/app/backend/InputBackend.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
-import InputFrontend from './InputFrontend';
-import ConversationFrontend from './ConversationFrontend';
+import InputFrontend from '../components/InputFrontend';
+import ConversationFrontend from '../components/ConversationFrontend';
 import { Mistral } from '@mistralai/mistralai';
 
 
diff --git a/app/InputOutputHandler.tsx b/app/backend/InputOutputHandler.tsx
similarity index 95%
rename from app/InputOutputHandler.tsx
rename to app/backend/InputOutputHandler.tsx
index 2bbe5b0..cee1d44 100644
--- a/app/InputOutputHandler.tsx
+++ b/app/backend/InputOutputHandler.tsx
@@ -1,7 +1,7 @@
 "use client"
 import React, { useEffect, useRef, useState } from "react";
-import ConversationFrontend from "./ConversationFrontend";
-import InputFrontend from "./InputFrontend";
+import ConversationFrontend from "../components/ConversationFrontend";
+import InputFrontend from "../components/InputFrontend";
 
 const handleMicClick = () => {
   console.log('Mic clicked!');
diff --git a/app/ProcessAPI.js b/app/backend/ProcessAPI.js
similarity index 100%
rename from app/ProcessAPI.js
rename to app/backend/ProcessAPI.js
diff --git a/app/ProcessMemory.tsx b/app/backend/ProcessMemory.tsx
similarity index 100%
rename from app/ProcessMemory.tsx
rename to app/backend/ProcessMemory.tsx
diff --git a/app/AI.tsx b/app/components/AI.tsx
similarity index 69%
rename from app/AI.tsx
rename to app/components/AI.tsx
index b391683..e1d244b 100644
--- a/app/AI.tsx
+++ b/app/components/AI.tsx
@@ -1,6 +1,6 @@
 // AI.tsx
 import React from 'react';
-import InputOutputBackend from './InputOutputHandler';
+import InputOutputBackend from '../backend/InputOutputHandler';
 
 const AI: React.FC = () => {
   return (
diff --git a/app/ConversationFrontend.tsx b/app/components/ConversationFrontend.tsx
similarity index 100%
rename from app/ConversationFrontend.tsx
rename to app/components/ConversationFrontend.tsx
diff --git a/app/Documentation.tsx b/app/components/Documentation.tsx
similarity index 100%
rename from app/Documentation.tsx
rename to app/components/Documentation.tsx
diff --git a/app/Faq.tsx b/app/components/Faq.tsx
similarity index 100%
rename from app/Faq.tsx
rename to app/components/Faq.tsx
diff --git a/app/Header.tsx b/app/components/Header.tsx
similarity index 100%
rename from app/Header.tsx
rename to app/components/Header.tsx
diff --git a/app/History.tsx b/app/components/History.tsx
similarity index 100%
rename from app/History.tsx
rename to app/components/History.tsx
diff --git a/app/InputFrontend.tsx b/app/components/InputFrontend.tsx
similarity index 100%
rename from app/InputFrontend.tsx
rename to app/components/InputFrontend.tsx
diff --git a/app/Login.tsx b/app/components/Login.tsx
similarity index 100%
rename from app/Login.tsx
rename to app/components/Login.tsx
diff --git a/app/Models.tsx b/app/components/Models.tsx
similarity index 100%
rename from app/Models.tsx
rename to app/components/Models.tsx
diff --git a/app/Settings.tsx b/app/components/Settings.tsx
similarity index 100%
rename from app/Settings.tsx
rename to app/components/Settings.tsx
diff --git a/app/layout.tsx b/app/layout.tsx
index da488bb..994a18a 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,4 +1,4 @@
-import Header from "./Header";
+import Header from "./components/Header";
 
 
 export const metadata = {
diff --git a/app/page.tsx b/app/page.tsx
index 54dccc1..f8dcbd3 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,11 +1,11 @@
 "use client";
 import React, { useState, useEffect, useRef } from 'react';
-import Header from './Header';
-import AI from './AI';
-import FAQ from './Faq'; // Ensure the import path is correct
-import Documentation from './Documentation'; // Ensure the import path is correct
-import History from './History';
-import Models from './Models';
+import Header from './components/Header';
+import AI from './components/AI';
+import FAQ from './components/Faq'; // Ensure the import path is correct
+import Documentation from './components/Documentation'; // Ensure the import path is correct
+import History from './components/History';
+import Models from './components/Models';
 import './styles/master.css';
 
 const LandingPage: React.FC = () => {