diff --git a/app/components/Credits.tsx b/app/components/Credits.tsx
new file mode 100644
index 0000000..6af40d0
--- /dev/null
+++ b/app/components/Credits.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+
+const Credits: React.FC = () => {
+  return (
+    <div className="credits-container">
+      <section id="credits" className="credits-section">
+        <h1 className="title">Credits</h1>
+
+        <h2 className="subtitle">Icons</h2>
+        <p className="paragraph">
+          This project utilizes the following icon resources:
+        </p>
+        <a
+          href="https://www.svgrepo.com/author/Solar%20Icons/"
+          className="credit-btn"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Solar Icons
+        </a>
+        <a
+          href="https://www.svgrepo.com/author/Dazzle%20UI/"
+          className="credit-btn"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Dazzle UI
+        </a>
+
+        <h2 className="subtitle">Fonts</h2>
+        <p className="paragraph">
+          The fonts used in this project are provided by:
+        </p>
+        <a
+          href="https://github.com/itfoundry/Poppins"
+          className="credit-btn"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Poppins
+        </a>
+        <a
+          href="https://openfontlicense.org"
+          className="credit-btn"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Inconsolata, Merriweather, Noto Sans, Noto Serif, Playfair Display, Bangers, Caveat, Frederika the Great, Sofadi One, Zilla Slab Highlight
+        </a>
+        <a
+          href="http://www.apache.org/licenses/LICENSE-2.0"
+          className="credit-btn"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Roboto, Rock Salt
+        </a>
+        <a
+          href="https://ubuntu.com/legal/font-licence"
+          className="credit-btn"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Ubuntu
+        </a>
+      </section>
+    </div>
+  );
+};
+
+export default Credits;
diff --git a/app/components/Header.tsx b/app/components/Header.tsx
index 6316306..5b74d00 100644
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -1,26 +1,25 @@
-// Header.tsx
 import React, { useState } from 'react';
 import Login from './Login';
 
 interface HeaderProps {
-  onViewChange: (view: 'AI' | 'FAQ' | 'Documentation') => void;
+  onViewChange: (view: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => void; // Include 'Credits'
   showDivs: boolean;
   toggleDivs: () => void;
   showHistoryModelsToggle: boolean;
-  showToggle: boolean; // Add this prop
+  showToggle: boolean;
 }
 
 const Header: React.FC<HeaderProps> = ({ onViewChange, showDivs, toggleDivs, showHistoryModelsToggle, showToggle }) => {
-  const [menuOpen, setMenuOpen] = useState(false)
-  
-  const toggleMenu = () => {
-    setMenuOpen(!menuOpen)
-  }
+  const [menuOpen, setMenuOpen] = useState(false);
 
-  const buttonClicked = (page: "AI" | "Documentation" | "FAQ") => {
-    onViewChange(page)
-    toggleMenu()
-  }
+  const toggleMenu = () => {
+    setMenuOpen(!menuOpen);
+  };
+
+  const buttonClicked = (page: "AI" | "Documentation" | "FAQ" | "Credits") => { // Add 'Credits' to the options here
+    onViewChange(page);
+    toggleMenu();
+  };
 
   return (
     <>
@@ -30,17 +29,19 @@ const Header: React.FC<HeaderProps> = ({ onViewChange, showDivs, toggleDivs, sho
           <span></span>
           <span></span>
         </div>
-        <nav className={`nav-links ${menuOpen ? "active":""}`}>
-            <button onClick={() => buttonClicked("FAQ")} className="nav-btn">FAQ</button>
-            <button onClick={() => buttonClicked("Documentation")} className="nav-btn">Documentation</button>
-            {showToggle && showHistoryModelsToggle && (
-              <button onClick={toggleDivs} className="nav-btn">
-                {showDivs ? 'Hide History/Models' : 'Show History/Models'}
-              </button>
-            )}
-          </nav>
+        <nav className={`nav-links ${menuOpen ? "active" : ""}`}>
+        <button onClick={() => buttonClicked("AI")} className="nav-btn">Chat</button>
+          <button onClick={() => buttonClicked("FAQ")} className="nav-btn">FAQ</button>
+          <button onClick={() => buttonClicked("Documentation")} className="nav-btn">Documentation</button>
+          <button onClick={() => buttonClicked("Credits")} className="nav-btn">Credits</button> {/* Add Credits tab */}
+          {showToggle && showHistoryModelsToggle && (
+            <button onClick={toggleDivs} className="nav-btn">
+              {showDivs ? 'Hide History/Models' : 'Show History/Models'}
+            </button>
+          )}
+        </nav>
         <button onClick={() => onViewChange('AI')} className="header-button header-logo">
-          
+          {/* AI logo or text */}
         </button>
         <div className="login-button">
           <Login /> 
diff --git a/app/components/Models.tsx b/app/components/Models.tsx
index ee6739b..9d1bf92 100644
--- a/app/components/Models.tsx
+++ b/app/components/Models.tsx
@@ -1,85 +1,103 @@
-// Models.tsx
-import React from 'react';
+import React, { useState } from 'react';
 
 const Models: React.FC = () => {
+  const [selectedModel, setSelectedModel] = useState<string>('Offline Fast');
+
+  const modelOptions = [
+    'Offline Fast',
+    'Offline Fast (FOSS)',
+    'Offline Slow',
+    'Offline Slow (FOSS)',
+    'Online (La Plateforme)',
+    'Online (FOSS) (La Plateforme)',
+    'Online Cheap (OpenAI)',
+    'Online Expensive (OpenAI)',
+    'Online Cheap (Anthropic)',
+    'Online Expensive (Anthropic)',
+    'Online Cheap (Google)',
+    'Online Expensive (Google)',
+  ];
+
+  const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    setSelectedModel(event.target.value);
+  };
+
+  const isOfflineModel = (model: string) => {
+    return model.includes('Offline');
+  };
+
   return (
     <div className="model-background">
       <div className="models">
         <div className="titel">
           <h1>Different AI models</h1>
         </div>
-        <form action="">
-          <div className="grid">
-            <button className="code-model model-box">
-              <div className="overlay">
-                <h3>Code</h3>
-                <img src="/img/wifi.svg" alt="Wi-Fi" />
-              </div>
-            </button>
-            <button className="math-model model-box">
-              <div className="overlay">
-                <h3>Math</h3>
-                <img src="/img/nowifi.svg" alt="No Wi-Fi" />
-              </div>
-            </button>
-            <button className="language-model model-box">
-              <div className="overlay">
-                <h3>Language</h3>
-              </div>
-            </button>
-            <button className="default-model model-box">
-              <div className="overlay">
-                <h3>Default</h3>
-              </div>
-            </button>
-            {/* Example Models */}
-            <button className="default-model model-box">
-              <div className="overlay">
-                <h3>Default</h3>
-              </div>
-            </button>
-            <button className="default-model model-box">
-              <div className="overlay">
-                <h3>Default</h3>
-              </div>
-            </button>
-            <button className="default-model model-box">
-              <div className="overlay">
-                <h3>Default</h3>
-              </div>
-            </button>
-            <button className="default-model model-box">
-              <div className="overlay">
-                <h3>Default</h3>
-              </div>
-            </button>
-            <button className="default-model model-box">
-              <div className="overlay">
-                <h3>Default</h3>
-              </div>
-            </button>
-            <button className="default-model model-box">
-              <div className="overlay">
-                <h3>Default</h3>
-              </div>
-            </button>
-            <button className="default-model model-box">
-              <div className="overlay">
-                <h3>Default</h3>
-              </div>
-            </button>
-            <button className="default-model model-box">
-              <div className="overlay">
-                <h3>Default</h3>
-              </div>
-            </button>
-            <button className="default-model model-box">
-              <div className="overlay">
-                <h3>Default</h3>
-              </div>
-            </button>
-          </div>
-        </form>
+        <div className="model-dropdown">
+          <label htmlFor="model-select">Select AI Model:</label>
+          <select id="model-select" value={selectedModel} onChange={handleModelChange}>
+            {modelOptions.map((model) => (
+              <option key={model} value={model}>
+                {model}
+              </option>
+            ))}
+          </select>
+        </div>
+        <div className="grid">
+          <button className="code-model model-box">
+            <div className="overlay">
+              <h3>Code</h3>
+              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
+            </div>
+          </button>
+          <button className="math-model model-box">
+            <div className="overlay">
+              <h3>Math</h3>
+              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
+            </div>
+          </button>
+          <button className="language-model model-box">
+            <div className="overlay">
+              <h3>Language</h3>
+              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
+            </div>
+          </button>
+          <button className="character-model model-box">
+            <div className="overlay">
+              <h3>Character</h3>
+              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
+            </div>
+          </button>
+          <button className="financial-model model-box">
+            <div className="overlay">
+              <h3>Character</h3>
+              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
+            </div>
+          </button>
+          <button className="weather-model model-box">
+            <div className="overlay">
+              <h3>Character</h3>
+              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
+            </div>
+          </button>
+          <button className="time-planner-model model-box">
+            <div className="overlay">
+              <h3>Character</h3>
+              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
+            </div>
+          </button>
+          <button className="image-model model-box">
+            <div className="overlay">
+              <h3>Character</h3>
+              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
+            </div>
+          </button>
+          <button className="default-model model-box">
+            <div className="overlay"> 
+              <h3>Character</h3>
+              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
+            </div>
+          </button>
+        </div>
       </div>
     </div>
   );
diff --git a/app/page.tsx b/app/page.tsx
index f8dcbd3..387bb1a 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -6,11 +6,12 @@ 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 Credits from './components/Credits';
 import './styles/master.css';
 
 const LandingPage: React.FC = () => {
   const [showDivs, setShowDivs] = useState(true);
-  const [view, setView] = useState<'AI' | 'FAQ' | 'Documentation'>('AI');
+  const [view, setView] = useState<'AI' | 'FAQ' | 'Documentation' | 'Credits'>('AI'); // Added 'Credits' here
   const conversationRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -42,7 +43,7 @@ const LandingPage: React.FC = () => {
     setShowDivs(prevState => !prevState);
   };
 
-  const handleViewChange = (view: 'AI' | 'FAQ' | 'Documentation') => {
+  const handleViewChange = (view: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => { // Added 'Credits' here as well
     setView(view);
     if (view !== 'AI') {
       setShowDivs(false);
@@ -70,6 +71,7 @@ const LandingPage: React.FC = () => {
         {view === 'AI' && <AI />}
         {view === 'FAQ' && <FAQ />}
         {view === 'Documentation' && <Documentation />}
+        {view === 'Credits' && <Credits />} {/* Now Credits will render properly */}
       </div>
     </div>
   );
diff --git a/app/styles/Login.css b/app/styles/Login.css
index 579d780..610ce75 100644
--- a/app/styles/Login.css
+++ b/app/styles/Login.css
@@ -15,7 +15,7 @@
 
 /* Popup content box */
 .popup-content {
-    background: var(--popup-background-color); /* Use variable for background color */
+    background-color: var(--popup-background-color); /* Use variable for background color */
     color: var(--popup-text-color); /* Use variable for text color */
     padding: 30px;
     border-radius: 10px;
diff --git a/app/styles/container.css b/app/styles/container.css
index e281216..854c997 100644
--- a/app/styles/container.css
+++ b/app/styles/container.css
@@ -1,7 +1,6 @@
 /* container.css */
 .container,
 .content {
-    padding-top: 10vh;
     display: flex;
     height: 100vh;
     width: 100vw;
@@ -10,6 +9,7 @@
 }
 
 .left-panel {
+    margin-top: 10vh;
     width: 25vw; /* Adjust as needed */
     transition: width 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; /* Smooth transitions for all properties */
     background-color: var(--left-panel-background-color); /* Use variable for background color */
@@ -25,6 +25,7 @@
 }
 
 .conversation-container {
+    margin-top: 10vh;
     flex: 1;
     transition: margin-left 0.3s ease; /* Smooth margin adjustment */
     background-color: var(--conversation-background-color); /* Use variable for background color */
diff --git a/app/styles/credit.css b/app/styles/credit.css
new file mode 100644
index 0000000..fb28dc3
--- /dev/null
+++ b/app/styles/credit.css
@@ -0,0 +1,52 @@
+/* Styling for the credits container */
+.credits-container {
+    padding: 2rem;
+  }
+  
+  .credits-section {
+    max-width: 900px;
+    height: 80vh;
+    margin: 0 auto;
+    background: var(--doc-background-color); /* Use variable for background */
+    padding: 2rem;
+    border-radius: 8px;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+    overflow-y: scroll;
+  }
+  
+  .title {
+    font-size: 2rem;
+    color: var(--doc-title-color); /* Use variable for title color */
+    margin-bottom: 1.5rem;
+  }
+  
+  .subtitle {
+    font-size: 1.5rem;
+    color: var(--doc-subtitle-color); /* Use variable for subtitle color */
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+  }
+  
+  .paragraph {
+    font-size: 1rem;
+    color: var(--doc-paragraph-color); /* Use variable for paragraph color */
+    margin-bottom: 1.5rem;
+    line-height: 1.6;
+  }
+  
+  /* Styling for the credit buttons */
+  .credit-btn {
+    display: inline-block;
+    padding: 10px 15px;
+    margin: 10px 5px;
+    background-color: var(--button-background-color); /* Button background */
+    color: var(--button-text-color); /* Button text */
+    text-decoration: none;
+    border-radius: 5px;
+    transition: background-color 0.3s ease;
+  }
+  
+  .credit-btn:hover {
+    background-color: var(--button-hover-background-color); /* Button hover */
+  }
+  
\ No newline at end of file
diff --git a/app/styles/header.css b/app/styles/header.css
index 34dec85..d085746 100644
--- a/app/styles/header.css
+++ b/app/styles/header.css
@@ -11,10 +11,31 @@ header{
 }
 
 .hamburger{
+    position: absolute;
     display: none;
+    flex-direction: column;
+    cursor: pointer;
 }
 
-.hamburger.open:nth-child(1)
+.hamburger span{
+    width: 25px;
+    height: 3px;
+    background-color: white;
+    margin: 4px;
+    transition: 0.3s;
+}
+
+.hamburger.open span:nth-child(1){
+    transform: rotate(45deg) translate(5px, 10px);
+}
+.hamburger.open span:nth-child(2){
+    opacity: 0;
+}
+.hamburger.open span:nth-child(3){
+    transform: rotate(-45deg) translate(5px, -10px);
+}
+
+
 
 .nav-links{
     position: absolute;
@@ -45,7 +66,6 @@ header{
     position: absolute;
     top: 2.5vh;
     right: 1vw;
-    justify-self: flex-end;
     padding: 10px 20px;
     background-color: var(--input-button-color);
     color: var(--text-color);
diff --git a/app/styles/master.css b/app/styles/master.css
index af2caee..3bfc49c 100644
--- a/app/styles/master.css
+++ b/app/styles/master.css
@@ -15,4 +15,5 @@
 @import './Login.css';
 @import './Settings.css';
 @import './fonts.css';
+@import './credit.css';
 @import './responsive.css';
diff --git a/app/styles/models.css b/app/styles/models.css
index c53d14b..2c2d91e 100644
--- a/app/styles/models.css
+++ b/app/styles/models.css
@@ -1,7 +1,7 @@
 .model-background {
     grid-column: 1 / 2;
     grid-row: 2 / 5;
-    overflow-y: auto;
+    overflow-y: scroll;
     background-color: var(--models-background-color); /* Ensure this variable is defined */
     border-radius: 2em;
     padding: 1em;
@@ -11,24 +11,9 @@
 }
 
 .models {
-    grid-column: 1 / 2;
-    grid-row: 2 / 5;
-    overflow-y: auto;
-    background-color: var(--models-background-color); /* Ensure this variable is defined */
-    border-radius: 2em;
-    padding: 1em;
-    height: 100%;
-    box-sizing: border-box;
-    overflow: hidden;
-    overflow-y: scroll;
-}
-
-.models form {
-    padding-right: 10px;
-    padding-left: 10px;
     display: flex;
-    align-items: center;
-    justify-content: center;
+    flex-direction: column;
+    height: 100%;
 }
 
 .models .titel {
@@ -39,15 +24,21 @@
     font-size: 0.7em;
 }
 
+.model-dropdown {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 1em; /* Space between dropdown and models */
+}
+
+.model-dropdown label {
+    margin-right: 0.5em; /* Space between label and dropdown */
+}
+
 .grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 1.5vh;
-    width: fit-content;
-}
-
-.grid h3 {
-    font-size: large;
+    width: 100%; /* Ensure grid takes full width */
 }
 
 .model-box {
@@ -60,6 +51,7 @@
     position: relative;
     height: 18vh;
     width: 18vh;
+    margin: auto; /* Center each model box in the grid cell */
 }
 
 .overlay {
@@ -73,11 +65,10 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: 300%;
+    font-size: x-large;
     transition: opacity 0.5s ease;
     pointer-events: none;
     opacity: 0;
-    font-size: xx-large;
 }
 
 .overlay img {
@@ -94,6 +85,7 @@
     opacity: 1;
 }
 
+/* Model background styles */
 .code-model {
     background-image: url(/img/code.jpg);
     background-repeat: no-repeat;
@@ -102,7 +94,7 @@
 
 .math-model {
     background-image: url(/img/math.jpg);
-    background-color: var(--background-color); /* Use variable for background color */
+    background-color: var(--background-color);
     background-position: center;
     background-repeat: no-repeat;
     background-size: contain;
@@ -110,7 +102,47 @@
 
 .language-model {
     background-image: url(/img/language.jpg);
-    background-color: #72cce4; /* Use variable for background color */
+    background-color: #72cce4;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+}
+
+.character-model {
+    background-image: url(/img/character.jpg);
+    background-color: #72cce4;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+}
+
+.financial-model {
+    background-image: url(/img/financial.jpg);
+    background-color: #72cce4;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+}
+
+.weather-model {
+    background-image: url(/img/weather.jpg);
+    background-color: #72cce4;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+}
+
+.time-planner-model {
+    background-image: url(/img/time.jpg);
+    background-color: #72cce4;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+}
+
+.image-model {
+    background-image: url(/img/image.jpg);
+    background-color: #72cce4;
     background-repeat: no-repeat;
     background-size: contain;
     background-position: center;
@@ -122,3 +154,33 @@
     background-size: cover;
     background-position: center;
 }
+
+.model-dropdown {
+    display: flex;
+    flex-direction: column; /* Stack label and dropdown */
+    align-items: center; /* Center the content */
+    margin-bottom: 1em; /* Space between dropdown and models */
+}
+
+.model-dropdown label {
+    margin-bottom: 0.5em; /* Space between label and dropdown */
+    font-size: large; /* Increase font size for visibility */
+    color: var(--text-color); /* Use variable for text color */
+}
+
+#model-select {
+    padding: 0.5em; /* Padding for better touch targets */
+    border-radius: 5px; /* Rounded corners */
+    border: 1px solid var(--input-border-color); /* Border color */
+    background-color: var(--input-background-color); /* Background color */
+    color: var(--text-color); /* Text color */
+    font-size: medium; /* Font size for dropdown */
+    cursor: pointer; /* Cursor change on hover */
+    transition: background-color 0.3s ease, border 0.3s ease; /* Smooth transition */
+}
+
+#model-select:hover {
+    background-color: var(--button-hover-background-color); /* Change background on hover */
+    border-color: var(--button-background-color); /* Change border color on hover */
+}
+
diff --git a/app/styles/responsive.css b/app/styles/responsive.css
index f09edeb..bcf54af 100644
--- a/app/styles/responsive.css
+++ b/app/styles/responsive.css
@@ -104,16 +104,38 @@
     color: var(--user-message-text-color); /* Use variable for button text color */
   }
 
-  .login-button button{
-    margin: 20px 0;
+  .header-login-button{
+    position: absolute;
+    top: 3.5vh;
+    right: 5vw;
   } 
 
   .hamburger.open{
     margin-top: 0.5vh;
+    padding-left: 1vw;
   }
 
   .nav-links{
-    position: fixed;
+    display: none;
+    position: absolute;
+    top: 10vh;
+    left: 0;
+    background-color: var(--burger-menu-background-color);
+    width: 100%;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 10px;
+    height: fit-content;
+  }
+
+  .nav-links.active{
+    display: flex;
+  }
+
+  .nav-btn{
+    width: 100%;
+    text-align: left;
+    padding: 10px;
   }
   
   .hamburger {
diff --git a/app/styles/variables.css b/app/styles/variables.css
index 928e21d..50847a8 100644
--- a/app/styles/variables.css
+++ b/app/styles/variables.css
@@ -29,6 +29,7 @@
     --faq-item-text-color: #333; /* Text color for FAQ items */
     --faq-item-hover-background-color: #e0e0e0; /* Hover background color for FAQ items */
 
+    --popup-background-color: #8B9635
     --pop-up-text: #000; /* Text color for pop-ups */
     --input-border-color: #8B9635; /* Input border color */
     --font-family: 'Poppins', 'sans-serif';/* Default font family */
diff --git a/public/fonts/comic-sans-but-better/Noto_Sans_Duployan/NotoSansDuployan-Bold.ttf b/public/fonts/comic-sans-but-better/Noto_Sans_Duployan/NotoSansDuployan-Bold.ttf
deleted file mode 100644
index 597a66d..0000000
Binary files a/public/fonts/comic-sans-but-better/Noto_Sans_Duployan/NotoSansDuployan-Bold.ttf and /dev/null differ
diff --git a/public/fonts/comic-sans-but-better/Noto_Sans_Duployan/NotoSansDuployan-Regular.ttf b/public/fonts/comic-sans-but-better/Noto_Sans_Duployan/NotoSansDuployan-Regular.ttf
deleted file mode 100644
index ab18d49..0000000
Binary files a/public/fonts/comic-sans-but-better/Noto_Sans_Duployan/NotoSansDuployan-Regular.ttf and /dev/null differ
diff --git a/public/fonts/comic-sans-but-better/Noto_Sans_Duployan/OFL.txt b/public/fonts/comic-sans-but-better/Noto_Sans_Duployan/OFL.txt
deleted file mode 100644
index f17aa55..0000000
--- a/public/fonts/comic-sans-but-better/Noto_Sans_Duployan/OFL.txt
+++ /dev/null
@@ -1,93 +0,0 @@
-Copyright 2022 The Noto Project Authors (https://github.com/notofonts/duployan)
-
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-This license is copied below, and is also available with a FAQ at:
-https://openfontlicense.org
-
-
------------------------------------------------------------
-SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
------------------------------------------------------------
-
-PREAMBLE
-The goals of the Open Font License (OFL) are to stimulate worldwide
-development of collaborative font projects, to support the font creation
-efforts of academic and linguistic communities, and to provide a free and
-open framework in which fonts may be shared and improved in partnership
-with others.
-
-The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded, 
-redistributed and/or sold with any software provided that any reserved
-names are not used by derivative works. The fonts and derivatives,
-however, cannot be released under any other type of license. The
-requirement for fonts to remain under this license does not apply
-to any document created using the fonts or their derivatives.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this license and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Reserved Font Name" refers to any names specified as such after the
-copyright statement(s).
-
-"Original Version" refers to the collection of Font Software components as
-distributed by the Copyright Holder(s).
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting -- in part or in whole -- any of the components of the
-Original Version, by changing formats or by porting the Font Software to a
-new environment.
-
-"Author" refers to any designer, engineer, programmer, technical
-writer or other person who contributed to the Font Software.
-
-PERMISSION & CONDITIONS
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of the Font Software, to use, study, copy, merge, embed, modify,
-redistribute, and sell modified and unmodified copies of the Font
-Software, subject to the following conditions:
-
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
-
-TERMINATION
-This license becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
-OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/public/fonts/comic-sans-but-better/Noto_Sans_Lycian/NotoSansLycian-Regular.ttf b/public/fonts/comic-sans-but-better/Noto_Sans_Lycian/NotoSansLycian-Regular.ttf
deleted file mode 100644
index 249761c..0000000
Binary files a/public/fonts/comic-sans-but-better/Noto_Sans_Lycian/NotoSansLycian-Regular.ttf and /dev/null differ
diff --git a/public/fonts/comic-sans-but-better/Noto_Sans_Lycian/OFL.txt b/public/fonts/comic-sans-but-better/Noto_Sans_Lycian/OFL.txt
deleted file mode 100644
index ffd0f28..0000000
--- a/public/fonts/comic-sans-but-better/Noto_Sans_Lycian/OFL.txt
+++ /dev/null
@@ -1,93 +0,0 @@
-Copyright 2012 Google Inc. All Rights Reserved.
-
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-This license is copied below, and is also available with a FAQ at:
-https://openfontlicense.org
-
-
------------------------------------------------------------
-SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
------------------------------------------------------------
-
-PREAMBLE
-The goals of the Open Font License (OFL) are to stimulate worldwide
-development of collaborative font projects, to support the font creation
-efforts of academic and linguistic communities, and to provide a free and
-open framework in which fonts may be shared and improved in partnership
-with others.
-
-The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded, 
-redistributed and/or sold with any software provided that any reserved
-names are not used by derivative works. The fonts and derivatives,
-however, cannot be released under any other type of license. The
-requirement for fonts to remain under this license does not apply
-to any document created using the fonts or their derivatives.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this license and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Reserved Font Name" refers to any names specified as such after the
-copyright statement(s).
-
-"Original Version" refers to the collection of Font Software components as
-distributed by the Copyright Holder(s).
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting -- in part or in whole -- any of the components of the
-Original Version, by changing formats or by porting the Font Software to a
-new environment.
-
-"Author" refers to any designer, engineer, programmer, technical
-writer or other person who contributed to the Font Software.
-
-PERMISSION & CONDITIONS
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of the Font Software, to use, study, copy, merge, embed, modify,
-redistribute, and sell modified and unmodified copies of the Font
-Software, subject to the following conditions:
-
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
-
-TERMINATION
-This license becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
-OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/public/img/character.jpg b/public/img/character.jpg
new file mode 100644
index 0000000..b9363db
Binary files /dev/null and b/public/img/character.jpg differ
diff --git a/public/img/financial.jpg b/public/img/financial.jpg
new file mode 100644
index 0000000..f6513d7
Binary files /dev/null and b/public/img/financial.jpg differ
diff --git a/public/img/image.jpg b/public/img/image.jpg
new file mode 100644
index 0000000..6cbc53d
Binary files /dev/null and b/public/img/image.jpg differ
diff --git a/public/img/time.jpg b/public/img/time.jpg
new file mode 100644
index 0000000..6db57ad
Binary files /dev/null and b/public/img/time.jpg differ
diff --git a/public/img/weather.jpg b/public/img/weather.jpg
new file mode 100644
index 0000000..c921471
Binary files /dev/null and b/public/img/weather.jpg differ