diff --git a/.gitignore b/.gitignore
index 7836f13f..25a25f4c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,4 +12,5 @@ node_modules
 localhost-key.pem
 localhost.pem
 /app/embeddingBatch.ts
-/docs/secretvariables.md
\ No newline at end of file
+/docs/secretvariables.md
+memo.md
\ No newline at end of file
diff --git a/app/components/CommentCard.tsx b/app/components/CommentCard.tsx
index 16d5b7a3..c0db482d 100644
--- a/app/components/CommentCard.tsx
+++ b/app/components/CommentCard.tsx
@@ -1,10 +1,9 @@
-// CommentCard.tsx
-import clockIcon from "~/src/assets/clock_icon.svg";
-import thumb_up from "~/src/assets/thumb_up.svg";
-import thumb_down from "~/src/assets/thumb_down.svg";
 import { useState } from "react";
 import CommentInputBox from "./CommentInputBox";
 import { useSubmit } from "@remix-run/react";
+import ClockIcon from "./icons/ClockIcon";
+import ThumbsUpIcon from "./icons/ThumbsUpIcon";
+import ThumbsDownIcon from "./icons/ThumbsDownIcon";
 
 interface CommentCardProps {
   commentId: number;
@@ -96,33 +95,37 @@ export default function CommentCard({
   }
 
   return (
-    <div className="bg-white p-4 mb-4" style={{ marginLeft }}>
+    <div className="bg-base-100 p-4 mb-4" style={{ marginLeft }}>
       <div className="flex items-center">
-        <p className="text-green-900 font-bold mr-4">{commentAuthor}</p>
-        <img src={clockIcon} alt="Comment Date" className="h-5 w-5 mr-2" />
-        <p className="text-gray-600 text-sm">{formattedCommentDate}</p>
+        <p className="text-green-700 font-bold mr-4">{commentAuthor}</p>
+        <ClockIcon  />
+        <p className="text-sm ml-2">{formattedCommentDate}</p>
       </div>
       <p className="mt-2 whitespace-pre-wrap">{commentContent}</p>
       <div className="flex items-center mt-4">
         <button
-          className={`flex items-center mr-4 bg-gray-200 rounded-md px-2 py-2 ${
+          className={`flex items-center mr-4 bg-inherit rounded-md px-2 py-2 border ${
             isLiked ? "text-blue-500 fonr-bold" : ""
           }`}
           onClick={() => (onCommentVote(commentId, "like"), setIsCommentLikeButtonPushed(true))}
           disabled={isCommentLikeButtonPushed || isLiked}
         >
-          <img src={thumb_up} alt="Like" className="h-5 w-5 mr-2" />
+          <ThumbsUpIcon />
+          <p className="ml-2">
           {likesCount}
+          </p>
         </button>
         <button
-          className={`flex items-center bg-gray-200 rounded-md px-2 py-2 ${
+          className={`flex items-center bg-inherit rounded-md px-2 py-2 border ${
             isDisliked ? "text-red-500 font-bold" : ""
           }`}
           onClick={() => (onCommentVote(commentId, "dislike"), setIsCommentDislikeButtonPushed(true))}
           disabled={isCommentDislikeButtonPushed || isDisliked}
         >
-          <img src={thumb_down} alt="Dislike" className="h-5 w-5 mr-2" />
+          <ThumbsDownIcon />
+          <p className="ml-2">
           {dislikesCount}
+          </p>
         </button>
       </div>
     <button
diff --git a/app/components/CommentInputBox.tsx b/app/components/CommentInputBox.tsx
index 6192b1b5..868f3840 100644
--- a/app/components/CommentInputBox.tsx
+++ b/app/components/CommentInputBox.tsx
@@ -50,7 +50,7 @@ export default function CommentInputBox({
         type="submit"
         className={`px-4 py-2 mx-1 w-full ${
           isCommentOpen
-            ? "bg-blue-500 text-white"
+            ? "bg-primary text-white"
             : "bg-gray-200 text-gray-500 cursor-not-allowed"
         } rounded`}
         disabled={!isCommentOpen}
diff --git a/app/components/CommentShowCard.tsx b/app/components/CommentShowCard.tsx
index 79a45400..c67e4d2f 100644
--- a/app/components/CommentShowCard.tsx
+++ b/app/components/CommentShowCard.tsx
@@ -1,6 +1,6 @@
 import { NavLink } from "@remix-run/react";
-import commentIcon from "~/src/assets/comment_icon.svg";
-import articleIcon from "~/src/assets/article_icon.svg";
+import CommentIcon from "./icons/CommentIcon";
+import ArticleIcon from "./icons/ArticleIcon";
 
 interface CommentShowCardProps {
   commentContent: string;
@@ -30,19 +30,23 @@ export default function CommentShowCard({
   }).replace(/\//g, "-");
 
   return (
-      <div className="bg-white border-2 rounded-lg p-4 mb-4">
+      <div className="bg-base-100 border-2 rounded-lg p-4 mb-4">
           <div className="flex justify-between items-center mb-2">
-              <p className="text-gray-600 text-sm comment-timestamp">{formattedCommentDate}</p>
-              <span className="text-lg font-bold text-gray-800 comment-author">{commentAuthor}</span>
+              <p className="text-base-content text-sm comment-timestamp">{formattedCommentDate}</p>
+              <span className="text-lg font-bold text-base-content comment-author">{commentAuthor}</span>
           </div>
-          <div className="flex items-center mb-2">
-              <img src={commentIcon} alt="Comment icon" className="h-5 w-5 mr-2" />
-              <p className="text-gray-700 comment-content">{commentContent}</p>
+          <div className="grid grid-cols-[auto_1fr] gap-2 mb-2 items-center">
+              <div className="w-6 h-6">
+                  <CommentIcon />
+              </div>
+              <p className="text-base-content comment-content">{commentContent}</p>
           </div>
-          <div className="flex items-center">
-              <img src={articleIcon} alt="Article icon" className="h-5 w-5 mr-2" />
-              <NavLink to={`/archives/${postId}`} className="text-xl font-bold text-blue-600 underline underline-offset-4 decoration-blue-700 post-title">{dimPosts.postTitle}</NavLink>
+          <div className="grid grid-cols-[auto_1fr] gap-2 items-center">
+              <div className="w-6 h-6">
+                  <ArticleIcon />
+              </div>
+              <NavLink to={`/archives/${postId}`} className="text-xl font-bold text-info underline underline-offset-4 post-title">{dimPosts.postTitle}</NavLink>
           </div>
       </div>
   );
-}
+}
\ No newline at end of file
diff --git a/app/components/PostCard.tsx b/app/components/PostCard.tsx
index 3de8d14a..ccb87c64 100644
--- a/app/components/PostCard.tsx
+++ b/app/components/PostCard.tsx
@@ -1,10 +1,10 @@
 import { NavLink } from "@remix-run/react";
 import parse from "html-react-parser";
 import TagCard from "./TagCard";
-import articleIcon from "~/src/assets/article_icon.svg";
-import tagIcon from "~/src/assets/tag_icon.svg";
-import thumbUpIcon from "~/src/assets/thumb_up.svg";
-import thumbDownIcon from "~/src/assets/thumb_down.svg";
+import ArticleIcon from "./icons/ArticleIcon";
+import TagIcon from "./icons/TagIcon";
+import ThumbsUpIcon from "./icons/ThumbsUpIcon";
+import ThumbsDownIcon from "./icons/ThumbsDownIcon";
 
 interface PostCardProps {
     postId: number;
@@ -46,20 +46,20 @@ export default function PostCard({
     });
 
     return (
-        <div className="bg-white border-2 rounded-lg p-4 mb-4">
+        <div className="bg-base-100 border-2 rounded-lg p-4 mb-4">
             <div className="flex justify-between items-center mb-2">
-                <p className="text-gray-600 text-sm post-timestamp">{formattedPostDate}</p>
+                <p className="text-base-content text-sm post-timestamp">{formattedPostDate}</p>
             </div>
-            <div className="flex items-center mb-2">
-                <img src={articleIcon} alt="Article icon" className="h-5 w-5 mr-2" />
-                <NavLink to={`/archives/${postId}`} className="text-xl font-bold text-blue-600 hover:underline underline underline-offset-4 decoration-blue-700 post-title">{postTitle}</NavLink>
+            <div className="grid grid-cols-[auto_1fr] gap-2 mb-2 items-center">
+                <ArticleIcon/>
+                <NavLink to={`/archives/${postId}`} className="text-xl font-bold text-info underline underline-offset-4 post-title">{postTitle}</NavLink>
             </div>
             {highLightedText && (
-                <p className="text-gray-700">{parse(highLightedText)}</p>
+                <p className="neutral-content">{parse(highLightedText)}</p>
             )}
-            <div className="mt-2 flex items-center">
-                <img src={tagIcon} alt="Tag icon" className="h-5 w-5 mr-2" />
-                <div className="flex flex-wrap">
+            <div className="grid grid-cols-[auto_1fr] gap-2 mt-2 items-center">
+                <TagIcon/>
+                <div className="flex flex-wrap items-center">
                     {tagNames && tagNames.map((tag, index) => (
                         <span key={index} className="inline-block text-sm font-semibold mr-1 mb-1">
                             <TagCard tagName={tag} />
@@ -69,14 +69,14 @@ export default function PostCard({
             </div>
             <div className="flex items-center mt-2">
                 <div className="flex items-center mr-4">
-                    <img src={thumbUpIcon} alt="Thumb up" className="h-5 w-5 text-blue-500" />
-                    <span className="text-sm text-gray-600 ml-1">{countLikes}</span>
+                    <ThumbsUpIcon/>
+                    <span className="text-sm text-base-content ml-1">{countLikes}</span>
                 </div>
                 <div className="flex items-center">
-                    <img src={thumbDownIcon} alt="Thumb down" className="h-5 w-5 text-red-500" />
-                    <span className="text-sm text-gray-600 ml-1">{countDislikes}</span>
+                    <ThumbsDownIcon/>
+                    <span className="text-sm text-base-content ml-1">{countDislikes}</span>
                 </div>
             </div>
         </div>
     );
-}
+}
\ No newline at end of file
diff --git a/app/components/SubmitFormComponents/ClearLocalStorageButton.tsx b/app/components/SubmitFormComponents/ClearLocalStorageButton.tsx
index c1573926..ef9d6d8f 100644
--- a/app/components/SubmitFormComponents/ClearLocalStorageButton.tsx
+++ b/app/components/SubmitFormComponents/ClearLocalStorageButton.tsx
@@ -18,7 +18,7 @@ const ClearLocalStorageButton = ({ clearInputs }: ClearLocalStorageButtonProps)
       <H3>入力内容をクリア</H3>
       <p>入力内容をクリアします。</p>
       <button
-        className="inline-flex items-center px-4 py-2 my-4 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+        className="inline-flex items-center px-4 py-2 my-4 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-primary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
         onClick={() => setShowModal(true)}
         type='button'
       >
@@ -27,13 +27,13 @@ const ClearLocalStorageButton = ({ clearInputs }: ClearLocalStorageButtonProps)
 
       {showModal && (
         <div className="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
+          <div className="fixed inset-0 bg-base-200 bg-opacity-75 transition-opacity"></div>
           <div className="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-            <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
-              <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+            <div className="inline-block align-bottom bg-base-200 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
+              <div className="bg-base-200 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                 <div className="sm:flex sm:items-start">
                   <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                    <h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">
+                    <h3 className="text-lg leading-6 font-medium" id="modal-title">
                       確認
                     </h3>
                     <div className="mt-2">
@@ -44,17 +44,17 @@ const ClearLocalStorageButton = ({ clearInputs }: ClearLocalStorageButtonProps)
                   </div>
                 </div>
               </div>
-              <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+              <div className="bg-base-200 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                 <button
                   type="button"
-                  className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-blue-500 text-base font-medium text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+                  className="mt-3 w-full inline-flex justify-center rounded-md shadow-sm px-4 py-2 bg-warning text-base font-medium text-black focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
                   onClick={handleClearLocalStorage}
                 >
                   はい
                 </button>
                 <button
                   type="button"
-                  className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+                  className="mt-3 w-full inline-flex justify-center rounded-md shadow-sm px-4 py-2 bg-white text-base font-medium text-black hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
                   onClick={() => setShowModal(false)}
                 >
                   いいえ
diff --git a/app/components/SubmitFormComponents/DynamicTextInput.tsx b/app/components/SubmitFormComponents/DynamicTextInput.tsx
index 9ffa6177..f1810ee4 100644
--- a/app/components/SubmitFormComponents/DynamicTextInput.tsx
+++ b/app/components/SubmitFormComponents/DynamicTextInput.tsx
@@ -29,7 +29,7 @@ const DynamicTextInput: React.FC<DynamicTextInputProps> = ({
 
   return (
     <div className="mb-8">
-      {description && <p className="text-gray-600 mb-4">{description}</p>}
+      {description && <p className="mb-4">{description}</p>}
       <Form className="space-y-4">
         {parentComponentStateValues.map((value, index) => (
           <div key={`input-${index}`} className="flex items-center space-x-2">
@@ -38,7 +38,7 @@ const DynamicTextInput: React.FC<DynamicTextInputProps> = ({
               id={`input-${index}`}
               value={value}
               onChange={(e) => handleInputChange(index, e.target.value)}
-              className="flex-grow px-3 py-2 text-gray-700 border rounded-lg focus:outline-none"
+              className="flex-grow px-3 py-2 border rounded-lg focus:outline-none"
             />
             <button
               type="button"
diff --git a/app/components/SubmitFormComponents/Preview.tsx b/app/components/SubmitFormComponents/Preview.tsx
index 28426fa8..1e3c4db4 100644
--- a/app/components/SubmitFormComponents/Preview.tsx
+++ b/app/components/SubmitFormComponents/Preview.tsx
@@ -18,38 +18,38 @@ const Preview: React.FC<PreviewProps> = ({
   selectedType,
 }) => {
   return (
-    <div className="bg-white p-6 rounded-lg shadow-md">
+    <div className="bg-base-300 p-6 rounded-lg shadow-md">
       <div>
         <h1 className="text-3xl font-bold mb-4">プレビュー</h1>
-        <p className="text-gray-600 mb-6">入力した内容を確認します</p>
+        <p className="mb-6">入力した内容を確認します</p>
         <table className="w-full border-collapse border border-gray-300">
           <tbody>
             <tr>
-              <th className="bg-gray-100 p-2 border border-gray-300">Who(誰が)</th>
+              <th className="bg-base-200 p-2 border border-gray-300">Who(誰が)</th>
               <td className="p-2 border border-gray-300">{situationValues.who}</td>
             </tr>
             <tr>
-              <th className="bg-gray-100 p-2 border border-gray-300">When(いつ)</th>
+              <th className="bg-base-200 p-2 border border-gray-300">When(いつ)</th>
               <td className="p-2 border border-gray-300">{situationValues.when}</td>
             </tr>
             <tr>
-              <th className="bg-gray-100 p-2 border border-gray-300">Where(どこで)</th>
+              <th className="bg-base-200 p-2 border border-gray-300">Where(どこで)</th>
               <td className="p-2 border border-gray-300">{situationValues.where}</td>
             </tr>
             <tr>
-              <th className="bg-gray-100 p-2 border border-gray-300">Why(なぜ)</th>
+              <th className="bg-base-200 p-2 border border-gray-300">Why(なぜ)</th>
               <td className="p-2 border border-gray-300">{situationValues.why}</td>
             </tr>
             <tr>
-              <th className="bg-gray-100 p-2 border border-gray-300">What(何を)</th>
+              <th className="bg-base-200 p-2 border border-gray-300">What(何を)</th>
               <td className="p-2 border border-gray-300">{situationValues.what}</td>
             </tr>
             <tr>
-              <th className="bg-gray-100 p-2 border border-gray-300">How(どうした)</th>
+              <th className="bg-base-200 p-2 border border-gray-300">How(どうした)</th>
               <td className="p-2 border border-gray-300">{situationValues.how}</td>
             </tr>
             <tr>
-              <th className="bg-gray-100 p-2 border border-gray-300">Then(どうなった)</th>
+              <th className="bg-base-200 p-2 border border-gray-300">Then(どうなった)</th>
               <td className="p-2 border border-gray-300">{situationValues.then}</td>
             </tr>
           </tbody>
@@ -58,7 +58,7 @@ const Preview: React.FC<PreviewProps> = ({
         <h4 className="text-xl font-bold mt-8 mb-4">前提条件</h4>
         <ul className="list-disc list-inside mb-6">
           {assumptionValues.map((value, index) => (
-            <li key={index} className="text-gray-700">{value}</li>
+            <li key={index}>{value}</li>
           ))}
         </ul>
 
@@ -67,14 +67,14 @@ const Preview: React.FC<PreviewProps> = ({
             <h3 className="text-2xl font-bold mt-8 mb-4">健常行動ブレイクポイント</h3>
             <ul className="list-disc list-inside mb-6">
               {reflectionValues.map((value, index) => (
-                <li key={index} className="text-gray-700">{value}</li>
+                <li key={index}>{value}</li>
               ))}
             </ul>
 
             <h3 className="text-2xl font-bold mt-8 mb-4">どうすればよかったか</h3>
             <ul className="list-disc list-inside mb-6">
               {counterFactualReflectionValues.map((value, index) => (
-                <li key={index} className="text-gray-700">{value}</li>
+                <li key={index}>{value}</li>
               ))}
             </ul>
           </>
@@ -83,14 +83,14 @@ const Preview: React.FC<PreviewProps> = ({
             <h3 className="text-2xl font-bold mt-8 mb-4">なぜやってよかったのか</h3>
             <ul className="list-disc list-inside mb-6">
               {reflectionValues.map((value, index) => (
-                <li key={index} className="text-gray-700">{value}</li>
+                <li key={index}>{value}</li>
               ))}
             </ul>
 
             <h3 className="text-2xl font-bold mt-8 mb-4">やらなかったらどうなっていたか</h3>
             <ul className="list-disc list-inside mb-6">
               {counterFactualReflectionValues.map((value, index) => (
-                <li key={index} className="text-gray-700">{value}</li>
+                <li key={index}>{value}</li>
               ))}
             </ul>
           </>
@@ -99,7 +99,7 @@ const Preview: React.FC<PreviewProps> = ({
         <h3 className="text-2xl font-bold mt-8 mb-4">備考</h3>
         <ul className="list-disc list-inside">
           {noteValues.map((value, index) => (
-            <li key={index} className="text-gray-700">{value}</li>
+            <li key={index}>{value}</li>
           ))}
         </ul>
       </div>
diff --git a/app/components/SubmitFormComponents/SituationInput.tsx b/app/components/SubmitFormComponents/SituationInput.tsx
index aa3d67bf..730af4a1 100644
--- a/app/components/SubmitFormComponents/SituationInput.tsx
+++ b/app/components/SubmitFormComponents/SituationInput.tsx
@@ -117,7 +117,7 @@ const SituationInput = ({
           <div key={index} className="mb-4">
             <label
               htmlFor={data.key}
-              className="block text-gray-700 font-bold mb-2"
+              className="block font-bold mb-2"
             >
               {data.description}
             </label>
@@ -127,7 +127,7 @@ const SituationInput = ({
               value={parentComponentStateValues[data.key] || ""}
               rows={data.rows}
               onChange={(e) => handleInputChange(data.key, e.target.value)}
-              className="w-full px-3 py-2 text-gray-700 border rounded-lg focus:outline-none"
+              className="w-full px-3 py-2 text-base-content border rounded-lg focus:outline-none placeholder-slate-500"
             />
           </div>
         ))}
diff --git a/app/components/SubmitFormComponents/StaticTextInput.tsx b/app/components/SubmitFormComponents/StaticTextInput.tsx
index 0b730100..d52b86c4 100644
--- a/app/components/SubmitFormComponents/StaticTextInput.tsx
+++ b/app/components/SubmitFormComponents/StaticTextInput.tsx
@@ -33,7 +33,7 @@ function StaticTextInput({
             placeholder={placeholder}
             value={parentComponentStateValues[i] || ""}
             onChange={(e) => handleInputChange(i, e.target.value)}
-            className={`w-full px-3 py-2 text-gray-700 border rounded-lg focus:outline-none ${title}-${i}`}
+            className={`w-full px-3 py-2 placeholder-slate-500 border rounded-lg focus:outline-none ${title}-${i}`}
             rows={4}
           />
         </div>
@@ -45,7 +45,7 @@ function StaticTextInput({
   return (
     <div className="mb-8">
       {title && <h3 className="text-2xl font-bold mb-4">{title}</h3>}
-      {description && <p className="text-gray-600 mb-4">{description}</p>}
+      {description && <p className="mb-4">{description}</p>}
       <Form className="space-y-4">{renderTextInputs()}</Form>
     </div>
   );
diff --git a/app/components/SubmitFormComponents/TagCreateBox.tsx b/app/components/SubmitFormComponents/TagCreateBox.tsx
index 0e1fb0ce..1510010b 100644
--- a/app/components/SubmitFormComponents/TagCreateBox.tsx
+++ b/app/components/SubmitFormComponents/TagCreateBox.tsx
@@ -26,7 +26,7 @@ const TagCreateBox: React.FC<TagCreateBoxProps> = ({ handleTagCreated, handleTag
     <div className="mb-8">
       <h3 className="text-2xl font-bold mb-4">タグ作成</h3>
       <div className="mb-4">
-        <label htmlFor="tagInput" className="block text-gray-700 font-bold mb-2">
+        <label htmlFor="tagInput" className="block font-bold mb-2">
           新しいタグを入力してください
         </label>
         <input
@@ -35,7 +35,7 @@ const TagCreateBox: React.FC<TagCreateBoxProps> = ({ handleTagCreated, handleTag
           value={tagInput}
           onChange={handleTagInputChange}
           placeholder="タグを入力..."
-          className="w-full px-3 py-2 text-gray-700 border rounded-lg focus:outline-none tag-create-box-input"
+          className="w-full px-3 py-2 placeholder-slate-500 border rounded-lg focus:outline-none tag-create-box-input"
         />
       </div>
       <button
diff --git a/app/components/SubmitFormComponents/TagPreviewBox.tsx b/app/components/SubmitFormComponents/TagPreviewBox.tsx
index 8c342bc3..ddf784bc 100644
--- a/app/components/SubmitFormComponents/TagPreviewBox.tsx
+++ b/app/components/SubmitFormComponents/TagPreviewBox.tsx
@@ -9,7 +9,7 @@ const TagPreviewBox: React.FC<TagPreviewBoxProps> = ({ selectedTags, createdTags
   return (
     <div className="mb-8">
       <h3 className="text-2xl font-bold mb-4">選択したタグ</h3>
-      <p className="text-gray-600 mb-4">以下のタグを付与します。</p>
+      <p className="mb-4">以下のタグを付与します。</p>
       <div className="flex flex-wrap">
         {selectedTags.map(tag => (
           <span key={tag} className="inline-block bg-blue-500 text-white rounded-full px-3 py-1 text-sm font-semibold mr-2 mb-2">
diff --git a/app/components/SubmitFormComponents/TagSelectionBox.tsx b/app/components/SubmitFormComponents/TagSelectionBox.tsx
index 631837ce..a0347924 100644
--- a/app/components/SubmitFormComponents/TagSelectionBox.tsx
+++ b/app/components/SubmitFormComponents/TagSelectionBox.tsx
@@ -45,13 +45,13 @@ const TagSelectionBox = ({
     return (
         <div className="mb-8">
             <h3 className="text-2xl font-bold mb-4">タグ選択</h3>
-            <p className="text-gray-600 mb-4">タグを選択してください。</p>
+            <p className="mb-4">タグを選択してください。</p>
             <input
                 type="text"
                 value={searchText}
                 onChange={e => setSearchText(e.target.value)}
                 placeholder="タグを検索..."
-                className="w-full px-3 py-2 text-gray-700 border rounded-lg focus:outline-none mb-4"
+                className="w-full px-3 py-2 placeholder-slate-500 border rounded-lg focus:outline-none mb-4"
             />
             <div className="flex space-x-2 mb-4">
                 <button
diff --git a/app/components/SubmitFormComponents/UserExplanation.tsx b/app/components/SubmitFormComponents/UserExplanation.tsx
index be3e0aea..4c71fe58 100644
--- a/app/components/SubmitFormComponents/UserExplanation.tsx
+++ b/app/components/SubmitFormComponents/UserExplanation.tsx
@@ -9,7 +9,7 @@ const UserExplanation = () => {
                 <li>このフォームは、健常者エミュレータ事例集への投稿を促進するために作成されました。</li>
                 <li>上から順にフォームへ入力することにより、過去の経験を整理することが可能です。</li>
                 <li>入力した内容は端末内に保存されます。途中で入力を止めた場合でも、後から再開できます。</li>
-                <li>投稿ボタンを押した時点で、以下の利用規約および<NavLink to="/privacyPolicy" className="text-blue-600 underline underline-offset-4">プライバシーポリシー・免責事項</NavLink>に同意したこととみなします。</li>
+                <li>投稿ボタンを押した時点で、以下の利用規約および<NavLink to="/privacyPolicy" className="text-info underline underline-offset-4">プライバシーポリシー・免責事項</NavLink>に同意したこととみなします。</li>
             </ul>
             <H2>利用規約</H2>
             <ul>
diff --git a/app/components/TagCard.tsx b/app/components/TagCard.tsx
index 20d0e34d..de68a5f8 100644
--- a/app/components/TagCard.tsx
+++ b/app/components/TagCard.tsx
@@ -9,7 +9,7 @@ export default function TagCard({
 }: TagCardProps) {
     return (
         <div className="rounded-md p-0.5 mb-0.5">
-            <NavLink to={`/tags/${tagName}`} className="text-lg font-bold text-blue-700 underline underline-offset-4 decoration-blue-700 post-tag">{tagName}</NavLink>
+            <NavLink to={`/tags/${tagName}`} className="text-lg font-bold text-info underline underline-offset-4 post-tag">{tagName}</NavLink>
         </div>
     );
 }
\ No newline at end of file
diff --git a/app/components/ThemeSwitcher.tsx b/app/components/ThemeSwitcher.tsx
new file mode 100644
index 00000000..acbd336e
--- /dev/null
+++ b/app/components/ThemeSwitcher.tsx
@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react";
+
+export default function ThemeSwitcher() {
+
+
+  const [nowTheme, setNowTheme] = useState<string>()
+
+  useEffect(() => {
+    if (window.localStorage.getItem("theme") === null){
+      const initialTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+      window.localStorage.setItem("theme", initialTheme);
+    }
+    const theme = window.localStorage.getItem("theme") || "dark";
+    setNowTheme(theme);
+    document.querySelector("html")?.setAttribute("data-theme", theme);
+  }, []);
+
+  const toggleTheme = () => {
+    const newTheme = nowTheme == "dark" ? "light" : "dark";
+    console.log(newTheme);
+    window.localStorage.setItem("theme", newTheme);
+    setNowTheme(newTheme);
+    document.querySelector("html")?.setAttribute("data-theme", newTheme);
+  };
+
+  return (
+    <label className="flex cursor-pointer gap-2">
+        {}
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/></svg>
+      <input type="checkbox" checked={nowTheme == "dark"} onChange={toggleTheme} className="toggle theme-controller"/>
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
+    </label>
+  );
+}
\ No newline at end of file
diff --git a/app/components/icons/ArrowBackIcon.tsx b/app/components/icons/ArrowBackIcon.tsx
new file mode 100644
index 00000000..8e99e8db
--- /dev/null
+++ b/app/components/icons/ArrowBackIcon.tsx
@@ -0,0 +1,7 @@
+export default function ArrowBackIcon() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+        <path d="m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z"/>
+        </svg>
+    )
+}
\ No newline at end of file
diff --git a/app/components/icons/ArrowForwardIcon.tsx b/app/components/icons/ArrowForwardIcon.tsx
new file mode 100644
index 00000000..29dd4f80
--- /dev/null
+++ b/app/components/icons/ArrowForwardIcon.tsx
@@ -0,0 +1,7 @@
+export default function ArrowForwardIcon() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+            <path d="M400-80 0-480l400-400 71 71-329 329 329 329-71 71Z"/>
+        </svg>
+    )
+}
\ No newline at end of file
diff --git a/app/components/icons/ArticleIcon.tsx b/app/components/icons/ArticleIcon.tsx
new file mode 100644
index 00000000..f7a98259
--- /dev/null
+++ b/app/components/icons/ArticleIcon.tsx
@@ -0,0 +1,7 @@
+export default function ArticleIcon() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+            <path d="M280-280h280v-80H280v80Zm0-160h400v-80H280v80Zm0-160h400v-80H280v80Zm-80 480q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Z"/>
+        </svg>
+    )
+}
diff --git a/app/components/icons/ClockIcon.tsx b/app/components/icons/ClockIcon.tsx
new file mode 100644
index 00000000..4a958de4
--- /dev/null
+++ b/app/components/icons/ClockIcon.tsx
@@ -0,0 +1,7 @@
+export default function ClockIcon() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+            <path d="M480-120q-138 0-240.5-91.5T122-440h82q14 104 92.5 172T480-200q117 0 198.5-81.5T760-480q0-117-81.5-198.5T480-760q-69 0-129 32t-101 88h110v80H120v-240h80v94q51-64 124.5-99T480-840q75 0 140.5 28.5t114 77q48.5 48.5 77 114T840-480q0 75-28.5 140.5t-77 114q-48.5 48.5-114 77T480-120Zm112-192L440-464v-216h80v184l128 128-56 56Z"/>
+        </svg>
+    )
+ }
\ No newline at end of file
diff --git a/app/components/icons/CommentIcon.tsx b/app/components/icons/CommentIcon.tsx
new file mode 100644
index 00000000..f15dbbe1
--- /dev/null
+++ b/app/components/icons/CommentIcon.tsx
@@ -0,0 +1,7 @@
+export default function CommentIcon() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+            <path d="M240-400h320v-80H240v80Zm0-120h480v-80H240v80Zm0-120h480v-80H240v80ZM80-80v-720q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H240L80-80Zm126-240h594v-480H160v525l46-45Zm-46 0v-480 480Z"/>
+        </svg>
+    )
+}
\ No newline at end of file
diff --git a/app/components/icons/DonationIcon.tsx b/app/components/icons/DonationIcon.tsx
new file mode 100644
index 00000000..930bfde3
--- /dev/null
+++ b/app/components/icons/DonationIcon.tsx
@@ -0,0 +1,7 @@
+export default function DonationIcon() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+            <path d="M160-240v-320 13-173 480Zm556 100L576-280q-13-13-18.5-28t-5.5-30q0-32 23-57t59-25q28 0 44 13t38 35q20-20 36.5-34t45.5-14q37 0 59.5 25.5T880-337q0 15-6 30t-18 27L716-140ZM160-640h640v-80H160v80Zm303 480H160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v213q-35-25-76.5-39T716-560q-57 0-107.5 21.5T520-480H160v240h279q3 21 9 41t15 39Z"/>
+        </svg>
+    )
+}
\ No newline at end of file
diff --git a/app/components/icons/GuidelineIcon.tsx b/app/components/icons/GuidelineIcon.tsx
new file mode 100644
index 00000000..955cafe9
--- /dev/null
+++ b/app/components/icons/GuidelineIcon.tsx
@@ -0,0 +1,7 @@
+export default function GuidelineIcon() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+            <path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-640v560h560v-560h-80v280l-100-60-100 60v-280H200Zm0 560v-560 560Z"/>
+        </svg>
+    )
+}
\ No newline at end of file
diff --git a/app/components/icons/HomeIcon.tsx b/app/components/icons/HomeIcon.tsx
new file mode 100644
index 00000000..16ca444d
--- /dev/null
+++ b/app/components/icons/HomeIcon.tsx
@@ -0,0 +1,7 @@
+export default function HomeIcon() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+            <path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z"/>
+        </svg>
+    )
+}
\ No newline at end of file
diff --git a/app/components/icons/LoginIcon.tsx b/app/components/icons/LoginIcon.tsx
new file mode 100644
index 00000000..158e3e06
--- /dev/null
+++ b/app/components/icons/LoginIcon.tsx
@@ -0,0 +1,7 @@
+export default function LoginIcon() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+            <path d="M480-120v-80h280v-560H480v-80h280q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H480Zm-80-160-55-58 102-102H120v-80h327L345-622l55-58 200 200-200 200Z"/>
+        </svg>
+    )
+}
\ No newline at end of file
diff --git a/app/components/icons/LogoutIcon.tsx b/app/components/icons/LogoutIcon.tsx
new file mode 100644
index 00000000..a2a144d4
--- /dev/null
+++ b/app/components/icons/LogoutIcon.tsx
@@ -0,0 +1,7 @@
+export default function LogoutIcon() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+            <path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h280v80H200Zm440-160-55-58 102-102H360v-80h327L585-622l55-58 200 200-200 200Z"/>
+        </svg>
+    )
+}
\ No newline at end of file
diff --git a/app/components/icons/MenuIcon.tsx b/app/components/icons/MenuIcon.tsx
new file mode 100644
index 00000000..43cf291a
--- /dev/null
+++ b/app/components/icons/MenuIcon.tsx
@@ -0,0 +1,7 @@
+export default function MenuIcon() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+            <path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/>
+        </svg>
+    )
+}
\ No newline at end of file
diff --git a/app/components/icons/PostIcon.tsx b/app/components/icons/PostIcon.tsx
new file mode 100644
index 00000000..6d4423b6
--- /dev/null
+++ b/app/components/icons/PostIcon.tsx
@@ -0,0 +1,7 @@
+export default function PostIcon() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+            <path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h360v80H200v560h560v-360h80v360q0 33-23.5 56.5T760-120H200Zm120-160v-80h320v80H320Zm0-120v-80h320v80H320Zm0-120v-80h320v80H320Zm360-80v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80Z"/>
+        </svg>
+    )
+}
\ No newline at end of file
diff --git a/app/components/icons/RandomIcon.tsx b/app/components/icons/RandomIcon.tsx
new file mode 100644
index 00000000..021e7ea3
--- /dev/null
+++ b/app/components/icons/RandomIcon.tsx
@@ -0,0 +1,7 @@
+export default function RandomIcon() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+            <path d="M560-160v-80h104L537-367l57-57 126 126v-102h80v240H560Zm-344 0-56-56 504-504H560v-80h240v240h-80v-104L216-160Zm151-377L160-744l56-56 207 207-56 56Z"/>
+        </svg>
+    )
+}
\ No newline at end of file
diff --git a/app/components/icons/SearchIcon.tsx b/app/components/icons/SearchIcon.tsx
new file mode 100644
index 00000000..0b76877f
--- /dev/null
+++ b/app/components/icons/SearchIcon.tsx
@@ -0,0 +1,7 @@
+export default function SearchIcon() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+            <path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/>
+        </svg>
+    )
+}
\ No newline at end of file
diff --git a/app/components/icons/SignupIcon.tsx b/app/components/icons/SignupIcon.tsx
new file mode 100644
index 00000000..6d4e0f1a
--- /dev/null
+++ b/app/components/icons/SignupIcon.tsx
@@ -0,0 +1,7 @@
+export default function SignupIcon() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+            <path d="M720-400v-120H600v-80h120v-120h80v120h120v80H800v120h-80Zm-360-80q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM40-160v-112q0-34 17.5-62.5T104-378q62-31 126-46.5T360-440q66 0 130 15.5T616-378q29 15 46.5 43.5T680-272v112H40Zm80-80h480v-32q0-11-5.5-20T580-306q-54-27-109-40.5T360-360q-56 0-111 13.5T140-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T440-640q0-33-23.5-56.5T360-720q-33 0-56.5 23.5T280-640q0 33 23.5 56.5T360-560Zm0-80Zm0 400Z"/>
+        </svg>
+    )
+}
\ No newline at end of file
diff --git a/app/components/icons/TagIcon.tsx b/app/components/icons/TagIcon.tsx
new file mode 100644
index 00000000..c2934238
--- /dev/null
+++ b/app/components/icons/TagIcon.tsx
@@ -0,0 +1,7 @@
+export default function TagIcon() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+            <path d="M570-104q-23 23-57 23t-57-23L104-456q-11-11-17.5-26T80-514v-286q0-33 23.5-56.5T160-880h286q17 0 32 6.5t26 17.5l352 353q23 23 23 56.5T856-390L570-104Zm-57-56 286-286-353-354H160v286l353 354ZM260-640q25 0 42.5-17.5T320-700q0-25-17.5-42.5T260-760q-25 0-42.5 17.5T200-700q0 25 17.5 42.5T260-640ZM160-800Z"/>
+        </svg>
+    )
+}
\ No newline at end of file
diff --git a/app/components/icons/ThumbsDownIcon.tsx b/app/components/icons/ThumbsDownIcon.tsx
new file mode 100644
index 00000000..a4109450
--- /dev/null
+++ b/app/components/icons/ThumbsDownIcon.tsx
@@ -0,0 +1,7 @@
+export default function ThumbsDownIcon() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+            <path d="M240-840h440v520L400-40l-50-50q-7-7-11.5-19t-4.5-23v-14l44-174H120q-32 0-56-24t-24-56v-80q0-7 2-15t4-15l120-282q9-20 30-34t44-14Zm360 80H240L120-480v80h360l-54 220 174-174v-406Zm0 406v-406 406Zm80 34v-80h120v-360H680v-80h200v520H680Z"/>
+        </svg>
+    )
+}
\ No newline at end of file
diff --git a/app/components/icons/ThumbsUpIcon.tsx b/app/components/icons/ThumbsUpIcon.tsx
new file mode 100644
index 00000000..887c8daa
--- /dev/null
+++ b/app/components/icons/ThumbsUpIcon.tsx
@@ -0,0 +1,7 @@
+export default function ThumbsUpIcon() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+            <path d="M720-120H280v-520l280-280 50 50q7 7 11.5 19t4.5 23v14l-44 174h258q32 0 56 24t24 56v80q0 7-2 15t-4 15L794-168q-9 20-30 34t-44 14Zm-360-80h360l120-280v-80H480l54-220-174 174v406Zm0-406v406-406Zm-80-34v80H160v360h120v80H80v-520h200Z"/>
+        </svg>
+    )
+}
\ No newline at end of file
diff --git a/app/components/icons/TopIcon.tsx b/app/components/icons/TopIcon.tsx
new file mode 100644
index 00000000..e5e4a0a9
--- /dev/null
+++ b/app/components/icons/TopIcon.tsx
@@ -0,0 +1,10 @@
+export default function TopIcon() {
+    return (
+        <svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M20.9 103.16H23.08V118.9H20.9V103.16ZM17.1 107.28H27.46V109.02H17.1V107.28ZM17.66 115.34H27.08V117.08H17.66V115.34ZM18.16 112.62H26.58V114.36H18.16V112.62ZM13.4 104.62H16.18V106.54H13.4V104.62ZM14.42 110.12H16.62V111.86H14.42V110.12ZM15.64 104.62H15.92L16.26 104.54L17.76 104.92C16.94 107.2 15.66 110.26 14.6 112.68L12.64 112.22C13.72 109.82 15.02 106.56 15.64 104.86V104.62ZM16.04 110.12H16.42L16.8 110.08L18.06 110.28C17.66 115.92 16.38 119.66 13.68 121.76C13.4 121.24 12.8 120.4 12.36 119.98C14.54 118.44 15.74 114.88 16.04 110.46V110.12ZM14.54 113.1C15.62 118.36 18.18 119.4 21.96 119.42C22.88 119.42 26.48 119.42 27.62 119.36C27.3 119.88 26.98 120.9 26.86 121.52H21.84C17.06 121.52 14.18 120.14 12.74 113.62L14.54 113.1ZM18.4 104.64H26.46V111.68H18.4V109.94H24.44V106.38H18.4V104.64ZM11.8 103.08L13.94 103.72C12.9 107.04 11.18 110.64 9.28 112.94C9.12 112.38 8.56 110.98 8.22 110.36C9.7 108.56 11.02 105.84 11.8 103.08ZM10.44 108.86L12.5 106.8L12.54 106.84V121.78H10.44V108.86ZM36.98 112.92H39.46V121.8H36.98V112.92ZM34.96 110.48V111.72H40.92V110.48H34.96ZM32.66 108.78H43.38V113.42H32.66V108.78ZM30.74 114.62H44.2V116.76H33.16V120.92H30.74V114.62ZM43.06 114.62H45.52V118.74C45.52 119.82 45.3 120.44 44.5 120.78C43.7 121.12 42.62 121.14 41.18 121.14C41.06 120.48 40.72 119.56 40.4 118.96C41.3 119 42.38 119 42.66 119C42.96 118.98 43.06 118.92 43.06 118.7V114.62ZM36.72 103H39.2V106.68H36.72V103ZM29.4 105.76H46.66V110.6H44.28V107.82H31.7V110.6H29.4V105.76ZM31 104L33.18 103.14C33.76 103.78 34.36 104.66 34.64 105.28L32.34 106.3C32.12 105.66 31.54 104.68 31 104ZM42.7 103.16L45.28 103.94C44.56 104.78 43.84 105.56 43.28 106.08L41.26 105.36C41.76 104.74 42.36 103.82 42.7 103.16ZM48.98 109.08H66.98V111.2H48.98V109.08ZM50.72 105.18H62.16V107.26H50.72V105.18ZM54.24 116.06H63.18V117.86H54.24V116.06ZM54.24 119.2H63.18V121.22H54.24V119.2ZM55.44 103.02H57.8V110.26H55.44V103.02ZM64.24 103.6L66.3 104.66C62.38 110.12 56.28 114.14 49.8 116.52C49.52 116 48.8 115 48.36 114.52C54.86 112.44 60.74 108.62 64.24 103.6ZM52.9 112.8H64.7V121.74H62.2V114.76H55.3V121.82H52.9V112.8ZM70.76 106.04C71.28 106.12 72.12 106.18 72.66 106.18H83.56C84.16 106.18 84.86 106.12 85.42 106.04V108.8C84.84 108.74 84.14 108.7 83.56 108.7H72.66C72.12 108.7 71.28 108.74 70.76 108.8V106.04ZM76.54 118.36V107.58H79.32V118.36H76.54ZM69.48 116.72C70.12 116.82 70.84 116.88 71.44 116.88H84.64C85.34 116.88 85.98 116.78 86.5 116.72V119.6C85.94 119.54 85.1 119.52 84.64 119.52H71.44C70.86 119.52 70.14 119.54 69.48 119.6V116.72ZM93.68 104.34C96.32 104.66 102.08 105.84 104.6 106.72L103.58 109.2C101.24 108.34 95.58 107.08 92.76 106.72L93.68 104.34ZM92.78 109.72C95.64 110.2 100.72 111.3 103.22 112.16L102.24 114.66C99.96 113.78 94.82 112.62 91.84 112.14L92.78 109.72ZM91.74 115.46C95.18 115.98 101.32 117.42 104.08 118.44L102.98 120.94C100.28 119.84 93.94 118.46 90.74 117.96L91.74 115.46ZM123.16 110.48C123.08 110.74 123 111.1 122.98 111.32C122.78 112.72 122.1 117.26 121.86 118.7H119.1C119.36 117.38 119.96 113.52 120.06 112.18C119.1 112.18 115.22 112.18 114.64 112.18C114.02 112.18 113.22 112.22 112.64 112.26V109.62C113.18 109.7 114.1 109.76 114.62 109.76C115.64 109.76 118.8 109.76 119.76 109.76C120.16 109.76 120.98 109.68 121.24 109.54L123.16 110.48ZM110.82 117.72C111.34 117.78 112.1 117.84 112.78 117.84C113.98 117.84 122.3 117.84 123.28 117.84C123.78 117.84 124.72 117.8 125.24 117.74V120.32C124.82 120.3 123.84 120.28 123.32 120.28C122.28 120.28 113.8 120.28 112.78 120.28C112.08 120.28 111.56 120.3 110.82 120.34V117.72ZM131.509 119.22C131.729 118.72 131.769 118.38 131.769 117.92C131.769 116.4 131.769 109.3 131.769 107.06C131.769 106.32 131.649 105.36 131.529 104.8H134.669C134.569 105.56 134.489 106.3 134.489 107.06C134.489 109.28 134.489 115.94 134.489 117.46C137.749 116.54 142.209 113.98 144.769 110.84L146.189 113.12C143.449 116.38 139.289 118.78 134.569 120.32C134.309 120.4 133.869 120.54 133.389 120.86L131.509 119.22ZM149.429 110.74C150.169 110.8 151.609 110.88 152.649 110.88C155.009 110.88 161.609 110.88 163.389 110.88C164.329 110.88 165.209 110.78 165.749 110.74V113.9C165.269 113.88 164.249 113.78 163.409 113.78C161.589 113.78 155.009 113.78 152.649 113.78C151.529 113.78 150.189 113.84 149.429 113.9V110.74ZM176.169 110.64C178.629 112.06 182.329 114.62 184.189 116.1L182.269 118.38C180.529 116.74 176.729 113.94 174.389 112.46L176.169 110.64ZM185.589 107.24C185.349 107.62 185.089 108.18 184.909 108.68C184.309 110.52 183.089 113.08 181.289 115.3C179.409 117.64 176.849 119.88 173.029 121.32L170.709 119.32C174.889 118.02 177.269 115.92 178.989 113.92C180.329 112.34 181.569 110.04 181.949 108.48H175.189L176.109 106.22H181.809C182.429 106.22 183.089 106.12 183.549 105.98L185.589 107.24ZM178.969 104.16C178.489 104.86 177.969 105.78 177.729 106.2C176.389 108.62 173.829 111.68 170.949 113.66L168.809 112C172.309 109.84 174.149 107.1 175.169 105.36C175.469 104.88 175.889 103.96 176.069 103.26L178.969 104.16ZM196.309 103.02H198.749V119.52C198.749 120.7 198.449 121.18 197.689 121.52C196.909 121.82 195.829 121.86 194.129 121.86C194.009 121.3 193.629 120.46 193.329 119.98C194.289 120.02 195.469 120 195.809 120C196.189 119.98 196.309 119.86 196.309 119.52V103.02ZM188.809 104.32H206.409V106.22H188.809V104.32ZM193.149 108.54V109.5H201.989V108.54H193.149ZM190.869 107.02H204.449V111.02H190.869V107.02ZM190.369 111.9H204.789V119.72H202.349V113.54H190.369V111.9ZM188.349 114.38H206.869V116.2H188.349V114.38ZM190.209 117.14H203.649V118.88H190.209V117.14ZM213.829 103.9H220.949V106H213.829V103.9ZM215.849 108.16H219.249V110.24H215.189L215.849 108.16ZM214.609 113.66L215.629 111.86C216.429 112.4 217.429 113.2 217.889 113.74L216.829 115.76C216.389 115.16 215.409 114.28 214.609 113.66ZM220.809 105.34H222.929V117.06H220.809V105.34ZM224.169 103.4H226.389V119.08C226.389 120.36 226.149 120.98 225.429 121.36C224.689 121.74 223.569 121.82 221.989 121.82C221.889 121.18 221.569 120.14 221.249 119.48C222.349 119.52 223.369 119.52 223.729 119.52C224.049 119.5 224.169 119.4 224.169 119.08V103.4ZM215.309 104.64L217.589 104.96C217.009 108.62 215.969 112.98 213.749 115.58C213.429 115.1 212.769 114.3 212.329 113.9C214.189 111.66 214.989 107.7 215.309 104.64ZM218.349 108.16H218.769L219.149 108.08L220.529 108.5C219.809 115.02 217.709 119.56 214.629 121.8C214.309 121.26 213.589 120.32 213.129 119.96C216.009 118 217.789 114.12 218.349 108.62V108.16ZM211.789 103.04L214.009 103.7C212.869 107.2 211.029 110.98 208.989 113.36C208.789 112.78 208.209 111.4 207.829 110.78C209.449 108.88 210.929 105.96 211.789 103.04ZM210.209 108.54L212.349 106.4L212.409 106.44V121.78H210.209V108.54ZM228.569 115.32H246.649V117.24H228.569V115.32ZM232.409 107.88H244.529V109.44H232.409V107.88ZM232.409 110.28H244.549V111.84H232.409V110.28ZM231.929 105.18H245.529V107.06H231.929V105.18ZM236.909 106.36H239.209V113.38H236.909V106.36ZM236.349 114.04H238.749V121.78H236.349V114.04ZM236.169 116.12L237.969 117C235.909 119.04 232.469 120.8 229.429 121.68C229.089 121.08 228.409 120.2 227.889 119.7C230.929 119.06 234.389 117.66 236.169 116.12ZM239.009 116.06C240.729 117.58 244.109 118.98 247.109 119.64C246.609 120.12 245.949 121 245.609 121.58C242.589 120.72 239.229 118.96 237.189 116.96L239.009 116.06ZM237.909 103.02L240.609 103.34C239.969 104.54 239.249 105.66 238.689 106.44L236.569 106.02C237.069 105.16 237.629 103.92 237.909 103.02ZM232.789 102.98L235.249 103.46C233.909 105.8 232.149 108.1 229.689 110.08C229.309 109.54 228.529 108.8 227.989 108.46C230.229 106.84 231.869 104.74 232.789 102.98ZM230.849 106.4H233.129V112.7H246.109V114.52H230.849V106.4Z"/>
+            <path d="M80.492 142.436H84.716V143.768H80.492V142.436ZM80.6 145.868H84.584V147.188H80.6V145.868ZM80.204 150.032C81.368 149.768 83.108 149.3 84.764 148.844L84.956 150.104C83.444 150.56 81.812 151.028 80.564 151.4L80.204 150.032ZM86.516 145.268V146.012H89.672V145.268H86.516ZM86.516 147.116V147.848H89.672V147.116H86.516ZM86.516 143.444V144.176H89.672V143.444H86.516ZM85.184 142.268H91.076V149.036H85.184V142.268ZM88.208 148.508H89.588V151.388C89.588 151.748 89.624 151.784 89.816 151.784C89.9 151.784 90.212 151.784 90.32 151.784C90.524 151.784 90.572 151.592 90.596 150.392C90.872 150.608 91.448 150.836 91.808 150.92C91.688 152.564 91.352 153.02 90.476 153.02C90.26 153.02 89.768 153.02 89.564 153.02C88.448 153.02 88.208 152.612 88.208 151.4V148.508ZM86.084 148.856H87.488C87.308 150.908 86.792 152.36 84.128 153.164C83.984 152.804 83.624 152.252 83.336 151.976C85.616 151.4 85.928 150.38 86.084 148.856ZM81.944 142.964H83.336V150.02L81.944 150.224V142.964ZM97.244 141.824H98.72V143.744H97.244V141.824ZM92.852 142.868H103.136V145.448H101.648V144.128H94.28V145.448H92.852V142.868ZM93.92 145.076H102.164V146.24H93.92V145.076ZM92.756 148.88H103.304V150.128H92.756V148.88ZM94.112 146.96H101.924V148.124H94.112V146.96ZM98.708 149.132C99.416 150.716 100.976 151.592 103.472 151.856C103.172 152.156 102.8 152.732 102.62 153.116C99.872 152.672 98.336 151.532 97.412 149.396L98.708 149.132ZM97.208 144.392H98.66V147.728C98.66 149.84 97.784 151.904 93.416 153.08C93.26 152.768 92.84 152.216 92.528 151.916C96.68 150.968 97.208 149.324 97.208 147.716V144.392ZM104.432 144.704H115.592V146.096H104.432V144.704ZM106.916 150.932H115.16V152.312H106.916V150.932ZM109.88 147.992H112.964V149.336H109.88V147.992ZM106.16 142.172H107.648V153.08H106.16V142.172ZM109.28 141.92H110.732V149.828H109.28V141.92ZM112.34 142.04H113.792V149.804H112.34V142.04ZM119.168 145.316V146.192H124.832V145.316H119.168ZM119.168 143.384V144.236H124.832V143.384H119.168ZM117.728 142.22H126.332V147.344H117.728V142.22ZM123.644 146.588C124.436 147.668 125.996 148.556 127.676 148.976C127.352 149.264 126.92 149.828 126.716 150.2C124.952 149.624 123.392 148.472 122.432 147.032L123.644 146.588ZM120.368 146.576L121.64 147.068C120.668 148.46 119.048 149.636 117.344 150.248C117.128 149.888 116.696 149.348 116.384 149.06C118.004 148.604 119.576 147.656 120.368 146.576ZM119.516 148.772H121.004V149.6C121.004 150.752 120.656 152.288 118.256 153.164C118.064 152.804 117.584 152.264 117.272 151.988C119.276 151.34 119.516 150.32 119.516 149.552V148.772ZM121.268 142.808H122.72V146.768H121.268V142.808ZM123.176 148.796H124.676V153.044H123.176V148.796ZM135.092 143.78C134.924 145.004 134.684 146.408 134.264 147.824C133.544 150.248 132.512 151.736 131.204 151.736C129.86 151.736 128.756 150.26 128.756 148.232C128.756 145.472 131.168 143.096 134.276 143.096C137.24 143.096 139.124 145.16 139.124 147.788C139.124 150.308 137.576 152.096 134.552 152.564L133.64 151.148C134.108 151.088 134.444 151.028 134.768 150.956C136.292 150.584 137.492 149.492 137.492 147.728C137.492 145.844 136.316 144.5 134.24 144.5C131.696 144.5 130.304 146.576 130.304 148.088C130.304 149.3 130.784 149.888 131.24 149.888C131.756 149.888 132.212 149.12 132.716 147.5C133.064 146.372 133.328 144.992 133.448 143.732L135.092 143.78ZM145.676 142.424C145.592 142.76 145.484 143.3 145.424 143.564C145.256 144.38 144.956 145.844 144.632 147.068C144.2 148.748 143.396 151.196 142.736 152.624L141.068 152.06C141.776 150.848 142.688 148.34 143.144 146.66C143.444 145.532 143.72 144.212 143.804 143.504C143.864 143.06 143.876 142.568 143.84 142.28L145.676 142.424ZM142.616 144.224C144.08 144.224 145.772 143.996 147.332 143.624V145.124C145.844 145.472 143.96 145.676 142.604 145.676C142.016 145.676 141.572 145.652 141.152 145.628L141.104 144.128C141.728 144.2 142.124 144.224 142.616 144.224ZM146.384 146.06C147.056 145.988 147.92 145.94 148.7 145.94C149.384 145.94 150.104 145.976 150.8 146.048L150.776 147.488C150.164 147.416 149.432 147.332 148.712 147.332C147.884 147.332 147.14 147.368 146.384 147.464V146.06ZM147.032 149.072C146.948 149.42 146.876 149.804 146.876 150.068C146.876 150.596 147.224 150.992 148.52 150.992C149.324 150.992 150.152 150.908 151.004 150.752L150.944 152.276C150.272 152.372 149.468 152.444 148.508 152.444C146.48 152.444 145.4 151.76 145.4 150.548C145.4 149.984 145.508 149.408 145.604 148.94L147.032 149.072ZM160.388 142.592C160.28 142.928 160.172 143.516 160.1 143.804C159.596 145.928 158.816 148.424 157.664 149.876C156.56 151.268 155.792 151.892 154.688 151.892C153.692 151.892 152.78 151.052 152.78 149.504C152.78 147.896 153.704 146.18 155.108 145.28C156.392 144.452 157.604 144.152 158.888 144.152C161.36 144.152 163.136 145.82 163.136 148.316C163.136 150.86 161.324 152.324 158.816 152.708L157.904 151.316C160.544 151.088 161.576 149.744 161.576 148.244C161.576 146.612 160.46 145.484 158.732 145.484C157.484 145.484 156.512 145.94 155.672 146.552C154.736 147.212 154.184 148.388 154.184 149.372C154.184 149.96 154.436 150.332 154.856 150.332C155.48 150.332 156.14 149.564 156.764 148.616C157.688 147.26 158.384 145.052 158.636 143.576C158.696 143.228 158.732 142.724 158.72 142.436L160.388 142.592ZM155.324 142.988C155.384 143.396 155.48 143.792 155.576 144.14C155.948 145.484 156.584 147.32 157.136 148.184C157.544 148.832 158.108 149.588 158.672 150.116L157.448 151.088C156.98 150.56 156.62 150.104 156.236 149.492C155.504 148.424 154.784 146.504 154.232 144.728C154.1 144.308 153.956 143.924 153.74 143.492L155.324 142.988ZM169.364 143.612C170.84 143.816 173.24 143.756 174.524 143.6V145.148C173.06 145.292 170.876 145.292 169.376 145.148L169.364 143.612ZM170.324 148.736C170.228 149.144 170.18 149.432 170.18 149.744C170.18 150.284 170.648 150.608 171.872 150.608C172.94 150.608 173.828 150.512 174.872 150.284L174.908 151.904C174.128 152.06 173.156 152.144 171.8 152.144C169.736 152.144 168.74 151.4 168.74 150.176C168.74 149.696 168.812 149.228 168.956 148.616L170.324 148.736ZM167.516 142.808C167.432 143.06 167.276 143.672 167.228 143.888C167.06 144.68 166.64 147.08 166.64 148.28C166.64 148.52 166.652 148.82 166.688 149.06C166.868 148.652 167.06 148.244 167.24 147.836L167.984 148.424C167.636 149.432 167.24 150.728 167.12 151.364C167.084 151.544 167.048 151.808 167.048 151.928C167.06 152.06 167.06 152.264 167.072 152.432L165.692 152.516C165.452 151.7 165.224 150.236 165.224 148.604C165.224 146.792 165.584 144.776 165.716 143.84C165.764 143.516 165.824 143.06 165.836 142.676L167.516 142.808Z"/>
+    <line x1="8" y1="131.5" x2="248" y2="131.5" stroke="currentColor"/>
+</svg>
+
+)
+}
\ No newline at end of file
diff --git a/app/routes/_layout._index.tsx b/app/routes/_layout._index.tsx
index a67a9deb..c979c834 100644
--- a/app/routes/_layout._index.tsx
+++ b/app/routes/_layout._index.tsx
@@ -176,7 +176,7 @@ export default function Feed() {
     return (
         <>
         <H1>トップページ</H1>
-        <p>サイトの詳細に関しては<NavLink to="/readme" className="text-blue-600 underline underline-offset-4">サイト説明</NavLink>をご覧ください</p>
+        <p>サイトの詳細に関しては<NavLink to="/readme" className="text-info underline underline-offset-4">サイト説明</NavLink>をご覧ください</p>
         <div>
             <div className="latest-posts">
                 <H2>最新の投稿</H2>
@@ -193,7 +193,7 @@ export default function Feed() {
                 ))}
                 <NavLink
                     to="/feed?p=2"
-                    className="rounded-md block w-full px-4 py-2 text-center text-white bg-blue-500 hover:bg-blue-600"
+                    className="rounded-md block w-full px-4 py-2 text-center text-white bg-primary"
                 >
                 最新の投稿を見る
                 </NavLink>
@@ -213,7 +213,7 @@ export default function Feed() {
                 ))}
                 <NavLink
                     to="/feed?p=2&likeFrom=24&likeTo=0"
-                    className="rounded-md block w-full px-4 py-2 text-center text-white bg-blue-500 hover:bg-blue-600"
+                    className="rounded-md block w-full px-4 py-2 text-center text-white bg-primary"
                 >
                 最近いいねされた投稿を見る
                 </NavLink>
diff --git a/app/routes/_layout.archives.$postId.tsx b/app/routes/_layout.archives.$postId.tsx
index 090cb3f9..693df013 100644
--- a/app/routes/_layout.archives.$postId.tsx
+++ b/app/routes/_layout.archives.$postId.tsx
@@ -4,19 +4,19 @@ import { prisma } from "~/modules/db.server";
 import CommentCard from "~/components/CommentCard";
 import parser from "html-react-parser";
 import TagCard from "~/components/TagCard";
-import clockIcon from "~/src/assets/clock_icon.svg";
-import tagIcon from "~/src/assets/tag_icon.svg";
 import { useState } from "react";
 import { getClientIPAddress } from "remix-utils/get-client-ip-address";
-import thumb_up from "~/src/assets/thumb_up.svg";
-import thumb_down from "~/src/assets/thumb_down.svg";
 import { commitSession, getSession, isAdminLogin } from "~/modules/session.server";
 import { supabase } from "~/modules/supabase.server";
 import { H1, H2 } from "~/components/Headings";
-import arrowForwardIcon from "~/src/assets/arrow_forward.svg";
-import arrowBackIcon from "~/src/assets/arrow_back.svg";
 import CommentInputBox from "~/components/CommentInputBox";
 import ShareButtons from "~/components/ShareButtons";
+import ArrowBackIcon from "~/components/icons/ArrowBackIcon";
+import ClockIcon from "~/components/icons/ClockIcon";
+import TagIcon from "~/components/icons/TagIcon";
+import ThumbsUpIcon from "~/components/icons/ThumbsUpIcon";
+import ThumbsDownIcon from "~/components/icons/ThumbsDownIcon";
+import ArrowForwardIcon from "~/components/icons/ArrowForwardIcon";
 
 
 export async function loader({ request }:LoaderFunctionArgs){
@@ -242,10 +242,13 @@ export default function Component() {
     <>
       <div>
         <H1>{postContent && postContent.postTitle}</H1>
-        
-        <p className="flex my-1">
-            <img src={clockIcon} alt="Post date" className="h-5 w-5 mr-2 mt-0.5" />
-            {postContent && new Date(postContent.postDateGmt).toLocaleString("ja-JP", {
+        <div>
+          <div className="grid grid-cols-[auto_1fr] gap-2 my-1 items-center">
+            <div className="w-6 h-6">
+              <ClockIcon />
+            </div>
+            <p>
+              {postContent && new Date(postContent.postDateGmt).toLocaleString("ja-JP", {
                 year: "numeric",
                 month: "2-digit",
                 day: "2-digit",
@@ -253,40 +256,47 @@ export default function Component() {
                 minute: "2-digit",
                 second: "2-digit",
                 hourCycle: "h23",
-            }).replace(/\//g, "-")}
-        </p>
-        <div className="flex justify-start items-center mb-2">
-          <img src={tagIcon} alt="Tag icon" className="h-5 w-5 mr-2" />
-          <div>
+              }).replace(/\//g, "-")}
+            </p>
+          </div>
+          <div className="grid grid-cols-[auto_1fr] gap-2 mb-2 items-center">
+            <div className="w-6 h-6">
+              <TagIcon />
+            </div>
+            <div>
               {sortedTagNames && sortedTagNames.map((tag) => (
-                  <span key={tag.dimTag.tagName} className="inline-block text-sm font-semibold text-gray-500 mr-1">
-                      <TagCard tagName={tag.dimTag.tagName} />
-                  </span>
-                  
+                <span key={tag.dimTag.tagName} className="inline-block text-sm font-semibold text-gray-500 mr-1">
+                  <TagCard tagName={tag.dimTag.tagName} />
+                </span>
               ))}
+            </div>
           </div>
         </div>
         <div className="flex items-center p-2 rounded">
           <button
-            className={`flex items-center mr-4 bg-gray-200 rounded-md px-2 py-2 ${
+            className={`flex items-center mr-4 bg-inherit rounded-md px-2 py-2 border ${
               isLiked ? "text-blue-500 font-bold" : ""
             } post-like-button`}
             onClick={() => handleVoteOnClient("like")}
             disabled={isPageLikeButtonPushed || isLiked}
             type="submit"
           >
-            <img src={thumb_up} alt="Like" className="h-5 w-5 mr-2 post-like-count" />
+            <ThumbsUpIcon />
+            <p className="ml-2">
             {postContent?.countLikes}
+            </p>
           </button>
           <button
-            className={`flex items-center bg-gray-200 rounded-md px-2 py-2 ${
+            className={`flex items-center bg-inherit rounded-md px-2 py-2 border ${
               isDisliked ? "text-red-500 font-bold" : ""
             } post-dislike-button`}
             onClick={() => handleVoteOnClient("dislike")}
             disabled={isPageDislikeButtonPushed || isDisliked}
           >
-            <img src={thumb_down} alt="Dislike" className="h-5 w-5 mr-2 post-dislike-count" />
+            <ThumbsDownIcon />
+            <p className="ml-2">
             {postContent?.countDislikes}
+            </p>
           </button>
         </div>
         <div className="postContent">
@@ -295,7 +305,7 @@ export default function Component() {
         <div className="my-6">
           <NavLink
             to={`/archives/edit/${postContent?.postId}`}
-            className="bg-blue-500 text-white rounded px-4 py-2 mx-1 my-20"
+            className="bg-primary text-white rounded px-4 py-2 mx-1 my-20"
           >
             編集する
           </NavLink>
@@ -307,7 +317,7 @@ export default function Component() {
               <li key={post.post_id} className="my-2">
                 <NavLink
                   to={`/archives/${post.post_id}`}
-                  className="text-blue-700 underline underline-offset-4"
+                  className="text-info underline underline-offset-4"
                 >
                   {post.post_title}
                 </NavLink>
@@ -318,10 +328,10 @@ export default function Component() {
         <div className="flex flex-col md:flex-row justify-between items-center my-20">
           {nextPost ? (
             <div className="flex items-center mb-4 md:mb-0">
-              <img src={arrowForwardIcon} alt="Next post" className="h-5 w-5 mr-2" />
+              <ArrowForwardIcon />
               <NavLink
                 to={`/archives/${nextPost.postId}`}
-                className="text-blue-700 underline underline-offset-4"
+                className="text-info underline underline-offset-4"
               >
                 {nextPost.postTitle}
               </NavLink>
@@ -331,11 +341,11 @@ export default function Component() {
             <div className="flex items-center">
               <NavLink
                 to={`/archives/${prevPost.postId}`}
-                className="text-blue-700 underline underline-offset-4 mr-2"
+                className="text-info underline underline-offset-4 mr-2"
               >
                 {prevPost.postTitle}
               </NavLink>
-              <img src={arrowBackIcon} alt="Previous post" className="h-5 w-5" />
+              <ArrowBackIcon  />
             </div>
           ): <div></div>}
         </div>
diff --git a/app/routes/_layout.archives.edit.$postId.tsx b/app/routes/_layout.archives.edit.$postId.tsx
index 5c42e014..e2821999 100644
--- a/app/routes/_layout.archives.edit.$postId.tsx
+++ b/app/routes/_layout.archives.edit.$postId.tsx
@@ -241,7 +241,7 @@ export default function EditPost() {
                   type="text"
                   value={tagInputValue}
                   onChange={handleTagInputChange}
-                  className="border border-gray-300 rounded-l px-4 py-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 edit-tag-search-input"
+                  className="border border-gray-300 rounded-l px-4 py-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 edit-tag-search-input placeholder-slate-500"
                   placeholder="タグを検索"
                 />
               </div>
@@ -290,7 +290,7 @@ export default function EditPost() {
             <input type="hidden" name="postContent" value={markdownContent} />
             <button
               type="submit"
-              className="rounded-md block w-full px-4 py-2 text-center text-white bg-blue-500 hover:bg-blue-600 edit-post-submit-button"
+              className="rounded-md block w-full px-4 py-2 text-center text-white bg-primary edit-post-submit-button"
               disabled={navigation.state === "submitting"}
             >
               変更を保存する
diff --git a/app/routes/_layout.feed.tsx b/app/routes/_layout.feed.tsx
index 7d573b8a..38b5bc5e 100644
--- a/app/routes/_layout.feed.tsx
+++ b/app/routes/_layout.feed.tsx
@@ -170,8 +170,8 @@ export default function Feed() {
               value="sortByNew"
               className={`px-4 py-2 mr-2 ${
                 !likeFromHour
-                  ? "bg-blue-500 text-white"
-                  : "bg-white text-blue-500 border border-blue-500"
+                  ? "bg-base-200 text-base-content border-4 border-info  focus:outline-info"
+                  : "bg-base-200 text-base-content focus:outline-info"
               } rounded`}
             >
               新着順
@@ -182,8 +182,8 @@ export default function Feed() {
               value="sortByLikes"
               className={`px-4 py-2 ${
                 likeFromHour
-                  ? "bg-blue-500 text-white"
-                  : "bg-white text-blue-500 border border-blue-500"
+                  ? "bg-base-200 text-base-content border-4 border-info  focus:outline-info"
+                  : "bg-base-200 text-base-content focus:outline-info"
               } rounded`}
             >
               いいね順
@@ -216,7 +216,7 @@ export default function Feed() {
             className={`px-2 py-2 mx-1 ${
               currentPage === 1
                 ? "bg-gray-200 text-gray-500 cursor-not-allowed"
-                : "bg-blue-500 text-white"
+                : "bg-primary text-white"
             } rounded feed-goto-first-page`}
           >
             最初
@@ -229,12 +229,12 @@ export default function Feed() {
             className={`px-2 py-2 mx-1 ${
               currentPage === 1
                 ? "bg-gray-200 text-gray-500 cursor-not-allowed"
-                : "bg-blue-500 text-white"
+                : "bg-primary text-white"
             } rounded feed-goto-back-page`}
           >
             前へ
           </button>
-          <span className="px-2 py-2 mx-1 bg-white text-blue-500 rounded">
+          <span className="px-2 py-2 mx-1 rounded">
             {currentPage} / {totalPages}
           </span>
           <button
@@ -245,7 +245,7 @@ export default function Feed() {
             className={`px-2 py-2 mx-1 ${
               currentPage === totalPages
                 ? "bg-gray-200 text-gray-500 cursor-not-allowed"
-                : "bg-blue-500 text-white"
+                : "bg-primary text-white"
             } rounded feed-goto-next-page`}
           >
             次へ
@@ -258,7 +258,7 @@ export default function Feed() {
             className={`px-2 py-2 mx-1 ${
               currentPage === totalPages
                 ? "bg-gray-200 text-gray-500 cursor-not-allowed"
-                : "bg-blue-500 text-white"
+                : "bg-primary text-white"
             } rounded feed-goto-last-page`}
           >
             最後
diff --git a/app/routes/_layout.forgotPassword.tsx b/app/routes/_layout.forgotPassword.tsx
index cc5d8189..129aa8b4 100644
--- a/app/routes/_layout.forgotPassword.tsx
+++ b/app/routes/_layout.forgotPassword.tsx
@@ -36,10 +36,10 @@ export default function ForgotPassword() {
     return (
         <div className="flex justify-center items-center h-screen">
             <div className="w-full max-w-md">
-                <Form method="post" className="bg-white rounded px-8 pt-6 pb-8 mb-4">
+                <Form method="post" className="rounded px-8 pt-6 pb-8 mb-4">
                     <H1>パスワードをリセットする</H1>
                     <div className="mb-4">
-                        <label htmlFor="email" className="block text-gray-700 text-sm font-bold mb-2">
+                        <label htmlFor="email" className="block text-sm font-bold mb-2">
                             メールアドレス:
                         </label>
                         <input
@@ -48,7 +48,7 @@ export default function ForgotPassword() {
                             type="text"
                             value={email}
                             onChange={(e) => setEmail(e.target.value)}
-                            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                            className="shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
                         />
                     </div>
                     {actionData?.status === 200 && (
@@ -64,13 +64,13 @@ export default function ForgotPassword() {
                         <button
                             type="submit"
                             disabled={!email}
-                            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline disabled:opacity-50"
+                            className="bg-primary text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline disabled:opacity-50"
                         >
                             リセットリクエストを送信
                         </button>
                         <Link
                             to="/login"
-                            className="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800 underline underline-offset-4"
+                            className="inline-block align-baseline font-bold text-sm text-info underline underline-offset-4"
                         >
                             ログインはこちら
                         </Link>
diff --git a/app/routes/_layout.freeStylePost.tsx b/app/routes/_layout.freeStylePost.tsx
index 2bfbd76c..0836883e 100644
--- a/app/routes/_layout.freeStylePost.tsx
+++ b/app/routes/_layout.freeStylePost.tsx
@@ -10,6 +10,7 @@ import { prisma } from "~/modules/db.server";
 import { marked } from 'marked';
 import { ActionFunctionArgs } from "@remix-run/node";
 import { createEmbedding } from "~/modules/embedding.server";
+import ClearLocalStorageButton from "~/components/SubmitFormComponents/ClearLocalStorageButton";
 
 interface Tag {
     tagName: string;
@@ -82,12 +83,6 @@ export default function FreeStylePost() {
         setIsValidUser(isValidUser);
     };
 
-    const [showConfirmation, setShowConfirmation] = useState(false);
-
-    const handleClearInputs = () => {
-        setShowConfirmation(true);
-    };
-
     const handleConfirmClear = () => {
         setTitle('');
         setMarkdownContent('');
@@ -95,12 +90,8 @@ export default function FreeStylePost() {
         window.localStorage.removeItem('titleFS');
         window.localStorage.removeItem('markdownContentFS');
         window.localStorage.removeItem('selectedTags');
-        setShowConfirmation(false);
     };
 
-    const handleCancelClear = () => {
-        setShowConfirmation(false);
-    };
 
     const isButtonDisabled = !title || !markdownContent || !isValidUser;
 
@@ -112,20 +103,14 @@ export default function FreeStylePost() {
                     <H1>自由記述投稿</H1>
                     <p>テンプレートを利用しない、自由形式の記事投稿が可能です。</p>
                     <Form method="post">
-                    <button
-                            type="button"
-                            onClick={handleClearInputs}
-                            className="inline-flex items-center px-4 py-2 my-4 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-                        >
-                            入力内容をクリア
-                    </button>
+                    <ClearLocalStorageButton clearInputs={handleConfirmClear} />
                     <H2>記事タイトル</H2>
                     <input
                         type="text"
                         value={title}
                         onChange={(e) => handleTitleChange(e.target.value)}
                         placeholder="記事タイトルを入力..."
-                        className="w-full px-3 py-2 text-gray-700 border rounded-lg focus:outline-none mb-4"
+                        className="w-full px-3 py-2 placeholder-slate-500 border rounded-lg focus:outline-none mb-4"
                     />
                     {!title && <p className="text-red-500">タイトルを入力してください。</p>}
                     <H2>記事本文</H2>
@@ -144,7 +129,7 @@ export default function FreeStylePost() {
                         className={`rounded-md block w-full px-4 py-2 text-center text-white my-4 ${
                         isButtonDisabled
                             ? 'bg-gray-400 cursor-not-allowed'
-                            : 'bg-blue-500 hover:bg-blue-600'
+                            : 'bg-primary'
                         }`}
                         disabled={isButtonDisabled}
                     >
@@ -154,48 +139,6 @@ export default function FreeStylePost() {
                     <input type="hidden" name="markdownContent" value={markdownContent} />
                     <input type="hidden" name="selectedTags" value={selectedTags.join(',')} />
                     </Form>
-                    {showConfirmation && (
-                        <div className="fixed z-10 inset-0 overflow-y-auto">
-                            <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-                                <div className="fixed inset-0 transition-opacity">
-                                    <div className="absolute inset-0 bg-gray-500 opacity-75"></div>
-                                </div>
-                                <span className="hidden sm:inline-block sm:align-middle sm:h-screen"></span>&#8203;
-                                <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
-                                    <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-                                        <div className="sm:flex sm:items-start">
-                                            <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                                                <h3 className="text-lg leading-6 font-medium text-gray-900">
-                                                    入力内容のクリア
-                                                </h3>
-                                                <div className="mt-2">
-                                                    <p className="text-sm text-gray-500">
-                                                        本当に入力内容をクリアしますか？この操作は元に戻せません。
-                                                    </p>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
-                                        <button
-                                            type="button"
-                                            onClick={handleConfirmClear}
-                                            className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
-                                        >
-                                            はい
-                                        </button>
-                                        <button
-                                            type="button"
-                                            onClick={handleCancelClear}
-                                            className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
-                                        >
-                                            戻る
-                                        </button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    )}
                 </div>
             )}
         </ClientOnly>
diff --git a/app/routes/_layout.login.tsx b/app/routes/_layout.login.tsx
index 6eca5429..db6aa429 100644
--- a/app/routes/_layout.login.tsx
+++ b/app/routes/_layout.login.tsx
@@ -47,11 +47,11 @@ export default function Login() {
     return (
         <div className="flex justify-center items-center h-screen">
             <div className="w-full max-w-md">
-                <Form method="post" className="bg-white rounded px-8 pt-6 pb-8 mb-4">
+                <Form method="post" className="rounded px-8 pt-6 pb-8 mb-4">
                     <H1>ログイン</H1>
                     <p>記事の編集にはログインが必要です</p>
                     <div className="my-4">
-                        <label htmlFor="email" className="block text-gray-700 text-sm font-bold mb-2">
+                        <label htmlFor="email" className="block text-base-content text-sm font-bold mb-2">
                             メールアドレス:
                         </label>
                         <input
@@ -60,11 +60,11 @@ export default function Login() {
                             type="text"
                             value={email}
                             onChange={(e) => setEmail(e.target.value)}
-                            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                            className="shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
                         />
                     </div>
                     <div className="mb-6">
-                        <label htmlFor="password" className="block text-gray-700 text-sm font-bold mb-2">
+                        <label htmlFor="password" className="block text-base-content text-sm font-bold mb-2">
                             パスワード:
                         </label>
                         <input
@@ -73,33 +73,33 @@ export default function Login() {
                             type="password"
                             value={password}
                             onChange={(e) => setPassword(e.target.value)}
-                            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                            className="shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
                         />
                     </div>
                     {actionData?.status === 400 && (
-                        <p className="text-red-500 text-xs italic mb-4">{actionData.message}</p>
+                        <p className="text-error-content text-xs italic mb-4">{actionData.message}</p>
                     )}
                     {actionData?.status === 500 && (
-                        <p className="text-red-500 text-xs italic mb-4">{actionData.message}</p>
+                        <p className="text-error-content text-xs italic mb-4">{actionData.message}</p>
                     )}
                     <div className="flex justify-between items-start">
                         <button
                         type="submit"
                         disabled={!email || !password}
-                        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded focus:outline-none focus:shadow-outline disabled:opacity-50"
+                        className="bg-primary font-bold py-2 px-2 rounded focus:outline-none focus:shadow-outline disabled:opacity-50 text-white"
                         >
                         ログイン
                         </button>
                         <div className="flex flex-col items-end">
                             <Link
                                 to="/signup"
-                                className="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800 underline underline-offset-4 my-2"
+                                className="inline-block align-baseline font-bold text-sm text-info underline underline-offset-4 my-2"
                             >
                                 ユーザー登録はこちら
                             </Link>
                             <Link
                                 to="/forgotPassword"
-                                className="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800 underline underline-offset-4"
+                                className="inline-block align-baseline font-bold text-sm text-info underline underline-offset-4"
                             >
                                 パスワードを忘れた方はこちら
                             </Link>
diff --git a/app/routes/_layout.post.tsx b/app/routes/_layout.post.tsx
index 94471efb..04d8e745 100644
--- a/app/routes/_layout.post.tsx
+++ b/app/routes/_layout.post.tsx
@@ -167,7 +167,7 @@ export default function Component() {
         <UserExplanation />
         <br></br>
         <NavLink
-            className="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800 underline underline-offset-4"
+            className="inline-block align-baseline font-bold text-sm text-info underline underline-offset-4"
             to="/freeStylePost"
         >自由投稿フォームに移動</NavLink>
         <ClearLocalStorageButton clearInputs={clearInputs}/>
diff --git a/app/routes/_layout.resetPassword.tsx b/app/routes/_layout.resetPassword.tsx
index dfdbd128..1cb3afce 100644
--- a/app/routes/_layout.resetPassword.tsx
+++ b/app/routes/_layout.resetPassword.tsx
@@ -48,11 +48,11 @@ export default function ResetPassword() {
             <div className="w-full max-w-md">
                 <Form
                     method="post"
-                    className="bg-white rounded px-8 pt-6 pb-8 mb-4"
+                    className="rounded px-8 pt-6 pb-8 mb-4"
                     >
                     <H1>新しいパスワードを設定</H1>
                     <div className="mb-4">
-                        <label htmlFor="password" className="block text-gray-700 text-sm font-bold mb-2">
+                        <label htmlFor="password" className="block text-sm font-bold mb-2">
                             新しいパスワード:
                         </label>
                         <input
@@ -61,7 +61,7 @@ export default function ResetPassword() {
                             type="password"
                             value={password}
                             onChange={handlePasswordChange}
-                            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                            className="shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
                         />
                         {passwordError && (
                             <p className="text-red-500 text-xs italic">{passwordError}</p>
@@ -80,13 +80,13 @@ export default function ResetPassword() {
                         <button
                             type="submit"
                             disabled={isDisabled}
-                            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline disabled:opacity-50"
+                            className="bg-primary font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline disabled:opacity-50"
                         >
                             パスワードを更新
                         </button>
                     </div>
                 </Form>
-                <NavLink to="/login" className="block text-center text-blue-500 hover:text-blue-700 mt-4">
+                <NavLink to="/login" className="block text-center text-info mt-4">
                     ログイン画面に戻る
                 </NavLink>
             </div>
diff --git a/app/routes/_layout.search.tsx b/app/routes/_layout.search.tsx
index afd4125b..549bda24 100644
--- a/app/routes/_layout.search.tsx
+++ b/app/routes/_layout.search.tsx
@@ -392,7 +392,7 @@ export default function SearchPage() {
           <select
             value={currentSearchType}
             onChange={(e) => setCurrentSearchType(e.target.value as SearchType)}
-            className="border border-gray-300 rounded px-4 py-2 mb-4 md:mb-0 md:mr-4 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full md:w-auto"
+            className=" rounded px-4 py-2 mb-4 md:mb-0 md:mr-4 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full md:w-auto border-2 border-secondary"
           >
             <option value="tag">タグ検索</option>
             <option value="fullText">全文検索</option>
@@ -404,12 +404,12 @@ export default function SearchPage() {
                 type="text"
                 value={tagInputValue}
                 onChange={handleTagInputChange}
-                className="border border-gray-300 rounded px-4 py-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 mb-2 md:mb-0 md:w-5/6"
+                className="placeholder-slate-500 rounded px-4 py-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 mb-2 md:mb-0 md:w-5/6 border-2 border-secondary"
                 placeholder="タグを入力"
               />
               <button
                 type="submit"
-                className="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded mt-2 md:mt-0 md:ml-2 w-full md:w-auto"
+                className="bg-primary text-white px-6 py-2 rounded mt-2 md:mt-0 md:ml-2 w-full md:w-auto"
                 name="action"
                 value="firstSearch"
               >
@@ -425,12 +425,12 @@ export default function SearchPage() {
                 name="q"
                 defaultValue={queryText}
                 onChange={(e) => setQueryText(e.target.value)}
-                className="border border-gray-300 rounded px-4 py-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 mb-2 md:mb-0 md:w-5/6"
+                className="rounded px-4 py-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 mb-2 md:mb-0 md:w-5/6 placeholder-slate-500 border-2 border-secondary"
                 placeholder="検索キーワードを入力"
               />
               <button
               type="submit"
-              className="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded mt-2 md:mt-0 md:ml-2 w-full md:w-auto"
+              className="bg-primary text-white px-6 py-2 rounded mt-2 md:mt-0 md:ml-2 w-full md:w-auto"
               name="action"
               value="firstSearch"
               >
@@ -446,12 +446,12 @@ export default function SearchPage() {
             name="title"
             defaultValue={titleText}
             onChange={(e) => setTitleText(e.target.value)}
-            className="border border-gray-300 rounded px-4 py-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 mb-2 md:mb-0 md:w-5/6"
+            className="placeholder-slate-500 rounded px-4 py-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 mb-2 md:mb-0 md:w-5/6 border-2 border-secondary"
             placeholder="タイトルを入力"
             />
             <button
               type="submit"
-              className="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded mt-2 md:mt-0 md:ml-2 w-full md:w-auto"
+              className="bg-primary text-white px-6 py-2 rounded mt-2 md:mt-0 md:ml-2 w-full md:w-auto"
               name="action"
               value="firstSearch"
             >
@@ -468,7 +468,7 @@ export default function SearchPage() {
             {tagSuggestions.map((tag) => (
               <li
               key={tag.tagName+tag.count}
-              className="px-4 py-2 cursor-pointer hover:bg-gray-100 tag-select"
+              className="px-4 py-2 hover:border-2 hover:border-info tag-select"
               onClick={() => handleTagSelect(tag.tagName)}
               >
               {tag.tagName} ({tag.count})
@@ -521,7 +521,8 @@ export default function SearchPage() {
         value="firstPage"
         disabled={pageNumber === 1}
         className={`px-2 py-2 mx-1 ${pageNumber === 1?
-          "bg-gray-200 text-gray-500 cursor-not-allowed": "bg-blue-500 text-white"}
+          "bg-gray-200 text-gray-500 cursor-not-allowed":
+          "bg-primary text-white"}
           rounded search-go-to-first-page`}
         >
         最初
@@ -533,12 +534,12 @@ export default function SearchPage() {
         disabled={pageNumber === 1}
         className={`px-2 py-2 mx-1 ${pageNumber === 1?
         "bg-gray-200 text-gray-500 cursor-not-allowed":
-        "bg-blue-500 text-white"}
+        "bg-primary text-white"}
         rounded search-go-to-previous-page`}
         >
         前へ
       </button>
-      <span className="px-4 py-2 mx-1 bg-white text-blue-500 rounded">
+      <span className="px-4 py-2 mx-1">
       {pageNumber} / {totalPages}
       </span>
       <button
@@ -547,7 +548,7 @@ export default function SearchPage() {
       value="nextPage"
       disabled={pageNumber === totalPages}
       className={`px-2 py-2 mx-1 ${pageNumber === totalPages? "bg-gray-200 text-gray-500 cursor-not-allowed":
-      "bg-blue-500 text-white"}
+      "bg-primary text-white"}
       rounded search-go-to-next-page`}
         >
         次へ
@@ -558,7 +559,7 @@ export default function SearchPage() {
       value="lastPage"
       disabled={pageNumber === totalPages}
       className={`px-2 py-2 mx-1 ${pageNumber === totalPages? "bg-gray-200 text-gray-500 cursor-not-allowed":
-      "bg-blue-500 text-white"}
+      "bg-primary text-white"}
       rounded search-go-to-last-page`}
         >
         最後
diff --git a/app/routes/_layout.signup.tsx b/app/routes/_layout.signup.tsx
index cc9624a1..27d44eb9 100644
--- a/app/routes/_layout.signup.tsx
+++ b/app/routes/_layout.signup.tsx
@@ -97,7 +97,7 @@ export default function Component() {
         <div className="mb-4">
           <label
             htmlFor="username"
-            className="block mb-2 font-bold text-gray-700"
+            className="block mb-2 font-bold text-base-content"
           >
             ユーザー名:
           </label>
@@ -105,7 +105,7 @@ export default function Component() {
             type="text"
             id="username"
             name="username"
-            className={`w-full px-3 py-2 text-gray-700 border rounded-md focus:outline-none ${
+            className={`w-full px-3 py-2 text-base-content border rounded-md focus:outline-none ${
               userName ? "focus:border-blue-500" : "border-red-500"
             }`}
             value={userName}
@@ -117,14 +117,14 @@ export default function Component() {
           )}
         </div>
         <div className="mb-4">
-          <label htmlFor="email" className="block mb-2 font-bold text-gray-700">
+          <label htmlFor="email" className="block mb-2 font-bold text-base-content">
             メールアドレス:
           </label>
           <input
             type="email"
             id="email"
             name="email"
-            className={`w-full px-3 py-2 text-gray-700 border rounded-md focus:outline-none ${
+            className={`w-full px-3 py-2 text-base-content border rounded-md focus:outline-none ${
               email ? "focus:border-blue-500" : "border-red-500"
             }`}
             value={email}
@@ -138,7 +138,7 @@ export default function Component() {
         <div className="mb-6">
           <label
             htmlFor="password"
-            className="block mb-2 font-bold text-gray-700"
+            className="block mb-2 font-bold text-base-content"
           >
             パスワード:
           </label>
@@ -146,7 +146,7 @@ export default function Component() {
             type="password"
             id="password"
             name="password"
-            className={`w-full px-3 py-2 text-gray-700 border rounded-md focus:outline-none ${
+            className={`w-full px-3 py-2 text-base-content border rounded-md focus:outline-none ${
               password ? "focus:border-blue-500" : "border-red-500"
             }`}
             value={password}
@@ -161,7 +161,7 @@ export default function Component() {
           <button
             type="submit"
             className={`px-4 py-2 font-bold text-white rounded-md focus:outline-none ${
-              isDisabled ? "bg-gray-400 cursor-not-allowed" : "bg-blue-500 hover:bg-blue-600"
+              isDisabled ? "bg-gray-400 cursor-not-allowed" : "bg-primary"
             }`}
             disabled={isDisabled || isRegistering}
           >
@@ -170,8 +170,8 @@ export default function Component() {
         </div>
       </Form>
       {isRegistering && (
-        <div className="fixed top-0 left-0 w-full h-full flex items-center justify-center bg-gray-500 bg-opacity-50">
-          <div className="bg-white p-8 rounded-md">
+        <div className="fixed top-0 left-0 w-full h-full flex items-center justify-center bg-base-200 bg-opacity-50">
+          <div className="bg-base-300 p-8 rounded-md">
             {actionData?.status === 200 ? (
               <div>
                 <p className="text-green-500 mb-4">{actionData.message}</p>
diff --git a/app/routes/_layout.support.tsx b/app/routes/_layout.support.tsx
index 76515ef2..55036d8a 100644
--- a/app/routes/_layout.support.tsx
+++ b/app/routes/_layout.support.tsx
@@ -11,8 +11,8 @@ export default function BeSponsor() {
           <p>暗黙知を共有できる場所を作るためには、サーバー代をはじめとしたある程度の金銭が必要です。現在、健常者エミュレータ事例集の運営には以下のコストがかかっています。</p>
           <br></br>
           <ul className="list-disc list-inside text-center">
-            <li><a href="https://supabase.com/pricing" className='text-blue-600 underline underline-offset-4'>Supabase Pro Plan</a>: $25/月</li>
-            <li><a href="https://vercel.com/pricing" className='text-blue-600 underline underline-offset-4'>Vercel Pro Plan</a> : $20/月</li>
+            <li><a href="https://supabase.com/pricing" className='text-info underline underline-offset-4'>Supabase Pro Plan</a>: $25/月</li>
+            <li><a href="https://vercel.com/pricing" className='text-info underline underline-offset-4'>Vercel Pro Plan</a> : $20/月</li>
             <li>ドメイン代(Cloudflare) : $10.11/年</li>
           </ul>
           <br></br>
@@ -20,7 +20,7 @@ export default function BeSponsor() {
           <button className="mt-8 w-full">
             <NavLink to ="https://buy.stripe.com/8wM3cG2Diemj5Qk5kk"
               role="link"
-              className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-8 rounded-md block w-full">サポートする
+              className="bg-primary text-white font-bold py-2 px-8 rounded-md block w-full">サポートする
             </NavLink>
           </button>
           <div className="text-center mt-6">
diff --git a/app/routes/_layout.tsx b/app/routes/_layout.tsx
index f01ab6c4..698bc4ca 100644
--- a/app/routes/_layout.tsx
+++ b/app/routes/_layout.tsx
@@ -1,19 +1,20 @@
 import { Outlet, useLoaderData } from "@remix-run/react";
 import { NavLink } from "react-router-dom";
 import { useState } from "react";
-import homeIcon from "~/src/assets/home_icon.svg";
-import randomIcon from "~/src/assets/random_icon.svg";
-import postIcon from "~/src/assets/post_icon.svg";
-import searchIcon from "~/src/assets/search_icon.svg";
-import menuIcon from "~/src/assets/menu_icon.svg";
-import donationIcon from "~/src/assets/donation_icon.svg";
-import guidelineIcon from "~/src/assets/guideline_icon.svg";
-import loginIcon from "~/src/assets/login_icon.svg";
-import logoutIcon from "~/src/assets/logout_icon.svg";
-import signupIcon from "~/src/assets/signup_icon.svg";
 import { LoaderFunctionArgs, json } from "@remix-run/node";
 import { getSession } from "~/modules/session.server";
-import topLogo from "~/src/assets/top_logo.svg";
+import ThemeSwitcher from "~/components/ThemeSwitcher";
+import HomeIcon from "~/components/icons/HomeIcon";
+import RandomIcon from "~/components/icons/RandomIcon";
+import PostIcon from "~/components/icons/PostIcon";
+import SearchIcon from "~/components/icons/SearchIcon";
+import DonationIcon from "~/components/icons/DonationIcon";
+import GuidelineIcon from "~/components/icons/GuidelineIcon";
+import LogoutIcon from "~/components/icons/LogoutIcon";
+import SignupIcon from "~/components/icons/SignupIcon";
+import LoginIcon from "~/components/icons/LoginIcon";
+import MenuIcon from "~/components/icons/MenuIcon";
+import TopIcon from "~/components/icons/TopIcon";
 
 export async function loader({ request }: LoaderFunctionArgs){
   const session = await getSession(request.headers.get("Cookie"));
@@ -30,36 +31,36 @@ export default function Component() {
   const { isLoggedIn } = useLoaderData<typeof loader>();
 
   const navItems = [
-    { to: "/", icon: homeIcon, text: "トップ" },
-    { to: "/random", icon: randomIcon, text: "ランダム" },
-    { to: "/post", icon: postIcon, text: "投稿する" },
-    { to: "/search", icon: searchIcon, text: "検索する" },
+    { to: "/", icon: HomeIcon, text: "トップ" },
+    { to: "/random", icon: RandomIcon, text: "ランダム" },
+    { to: "/post", icon: PostIcon, text: "投稿する" },
+    { to: "/search", icon: SearchIcon, text: "検索する" },
   ];
 
   const menuItems = [
-    { to: "/support", text: "サポートする", icon: donationIcon },
-    { to: "/readme", text: "サイト説明", icon: guidelineIcon },
+    { to: "/support", text: "サポートする", icon: DonationIcon },
+    { to: "/readme", text: "サイト説明", icon: GuidelineIcon },
     ...(isLoggedIn
       ? [
-          { to: "/logout", text: "ログアウト", icon: logoutIcon },
+          { to: "/logout", text: "ログアウト", icon: LogoutIcon },
         ]
       : [
-          { to: "/signup", text: "サインアップ", icon: signupIcon },
-          { to: "/login", text: "ログイン", icon: loginIcon },
+          { to: "/signup", text: "サインアップ", icon: SignupIcon },
+          { to: "/login", text: "ログイン", icon: LoginIcon },
         ]),
   ];
 
-  const renderNavItem = (item: { to: string; icon: string; text: string }): JSX.Element => (
+  const renderNavItem = (item: { to: string; icon: React.ComponentType; text: string }): JSX.Element => (
     <NavLink
       key={item.to}
       to={item.to}
       className={({ isActive }) =>
-        `flex flex-col items-center justify-center text-gray-700 hover:text-blue-500 ${
+        `flex flex-col items-center justify-center text-base-content ${
           isActive ? "text-blue-500 font-bold" : ""
         }`
       }
     >
-      <img src={item.icon} alt={item.text} className="w-6 h-6 md:w-8 md:h-8 mx-8" />
+      <item.icon />
       <p className="text-xs md:text-sm">{item.text}</p>
     </NavLink>
   );
@@ -70,17 +71,17 @@ export default function Component() {
       <div className="mx-4 mb-32 md:mt-32 md:mx-20 lg:mx-40 xl:mx-80 2xl:mx-96">
         <Outlet />
       </div>
-      <nav className="fixed py-4 bottom-0 bg-white shadow-inner md:fixed md:top-0 md:w-full w-full md:bottom-auto">
-        <ul className="flex justify-between">
+      <nav className="fixed py-4 bottom-0 bg-base-100 shadow-inner md:fixed md:top-0 md:w-full w-full md:bottom-auto md:px-10">
+        <ul className="flex justify-between items-center mx-4">
           {navItems.map((item) => (
             <li key={item.to}>{renderNavItem(item)}</li>
           ))}
           <li className="md:hidden">
             <button
               onClick={() => setIsMenuOpen(!isMenuOpen)}
-              className="flex flex-col items-center justify-center text-gray-700 hover:text-blue-500"
+              className="flex flex-col items-center justify-center hover:text-blue-500"
             >
-              <img src={menuIcon} alt="Menu" className="w-6 h-6 mx-8" />
+              <MenuIcon />
               <p className="text-xs">メニュー</p>
             </button>
           </li>
@@ -89,30 +90,38 @@ export default function Component() {
               {renderNavItem(item)}
             </li>
           ))}
+          <li className="hidden md:block md:mr-3">
+            <ThemeSwitcher />
+          </li>
         </ul>
       </nav>
       {isMenuOpen && (
-        <div className="fixed inset-0 bg-white z-40 md:hidden">
-          <button
-            onClick={() => setIsMenuOpen(false)}
-            className="absolute top-4 right-4 text-gray-700 hover:text-blue-500"
-          >
-            閉じる
-          </button>
-          <ul className="mt-16">
+        <div className="fixed inset-0 bg-base-100 z-40 md:hidden">
+          <div className="flex justify-between p-4">
+            <ThemeSwitcher />
+            <button
+              onClick={() => setIsMenuOpen(false)}
+              className="ml-4"
+            >
+              閉じる
+            </button>
+          </div>
+          <ul className="mt-8">
             {menuItems.map((item) => (
               <li key={item.to}>
                 <NavLink
                   to={item.to}
                   className={({ isActive }) =>
-                    `block px-4 py-2 text-gray-700 hover:text-blue-500 ${
+                    `block px-4 py-2 ${
                       isActive ? "text-blue-500 font-bold" : ""
                     }`
                   }
                   onClick={() => setIsMenuOpen(false)}
                 >
-                  <img src={item.icon} alt={item.text} className="inline-block mr-2 w-6 h-6" />
+                  <div className="flex">
+                  {item.icon()}
                   {item.text}
+                  </div>
                 </NavLink>
               </li>
             ))}
@@ -120,38 +129,38 @@ export default function Component() {
         </div>
       )}
     </div>
-    <footer className="bg-gray-100 py-8 md:pb-0">
+    <footer className="bg-base-100 py-8 md:pb-0">
     <div className="container mx-auto px-4">
       <div className="flex justify-center items-center">
-        <img src={topLogo} alt="Top Logo" className="h-auto w-48 mr-2" />
+        <TopIcon />
         <div className="flex flex-col space-y-2 ml-2">
           <NavLink
             to="https://www.twitter.com/messages/compose?recipient_id=1249916069344473088"
-            className="text-gray-700 hover:text-blue-500"
+            className="text-base-content"
           >
             管理人に連絡
           </NavLink>
           <NavLink
             to="/readme"
-            className="text-gray-700 hover:text-blue-500"
+            className="text-base-content"
           >
             サイト説明
           </NavLink>
           <NavLink
             to="/privacyPolicy"
-            className="text-gray-700 hover:text-blue-500"
+            className="text-base-content"
           >
             プライバシー・ポリシー/免責事項
           </NavLink>
           <NavLink
             to="/support"
-            className="text-gray-700 hover:text-blue-500"
+            className="text-base-content"
           >
             寄付する
           </NavLink>
         </div>
       </div>
-      <p className="text-gray-600 text-center mt-4 pb-16 mb:pb-0">&copy; {new Date().getFullYear()} All rights reserved.</p>
+      <p className="text-base-content text-center mt-4 pb-16 mb:pb-0">&copy; {new Date().getFullYear()} All rights reserved.</p>
     </div>
   </footer>
   </>
diff --git a/app/src/assets/arrow_back.svg b/app/src/assets/arrow_back.svg
deleted file mode 100644
index 2ce68012..00000000
--- a/app/src/assets/arrow_back.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z"/></svg>
\ No newline at end of file
diff --git a/app/src/assets/arrow_forward.svg b/app/src/assets/arrow_forward.svg
deleted file mode 100644
index ae00f141..00000000
--- a/app/src/assets/arrow_forward.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M400-80 0-480l400-400 71 71-329 329 329 329-71 71Z"/></svg>
\ No newline at end of file
diff --git a/app/src/assets/article_icon.svg b/app/src/assets/article_icon.svg
deleted file mode 100644
index 1265c26d..00000000
--- a/app/src/assets/article_icon.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M280-280h280v-80H280v80Zm0-160h400v-80H280v80Zm0-160h400v-80H280v80Zm-80 480q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Z"/></svg>
\ No newline at end of file
diff --git a/app/src/assets/clock_icon.svg b/app/src/assets/clock_icon.svg
deleted file mode 100644
index 2d8124b4..00000000
--- a/app/src/assets/clock_icon.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-120q-138 0-240.5-91.5T122-440h82q14 104 92.5 172T480-200q117 0 198.5-81.5T760-480q0-117-81.5-198.5T480-760q-69 0-129 32t-101 88h110v80H120v-240h80v94q51-64 124.5-99T480-840q75 0 140.5 28.5t114 77q48.5 48.5 77 114T840-480q0 75-28.5 140.5t-77 114q-48.5 48.5-114 77T480-120Zm112-192L440-464v-216h80v184l128 128-56 56Z"/></svg>
\ No newline at end of file
diff --git a/app/src/assets/comment_icon.svg b/app/src/assets/comment_icon.svg
deleted file mode 100644
index 4d910a87..00000000
--- a/app/src/assets/comment_icon.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M240-400h320v-80H240v80Zm0-120h480v-80H240v80Zm0-120h480v-80H240v80ZM80-80v-720q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H240L80-80Zm126-240h594v-480H160v525l46-45Zm-46 0v-480 480Z"/></svg>
\ No newline at end of file
diff --git a/app/src/assets/dark_mode_icon.svg b/app/src/assets/dark_mode_icon.svg
deleted file mode 100644
index 43a797e8..00000000
--- a/app/src/assets/dark_mode_icon.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z"/></svg>
\ No newline at end of file
diff --git a/app/src/assets/donation_icon.svg b/app/src/assets/donation_icon.svg
deleted file mode 100644
index 7f52c87f..00000000
--- a/app/src/assets/donation_icon.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M160-240v-320 13-173 480Zm556 100L576-280q-13-13-18.5-28t-5.5-30q0-32 23-57t59-25q28 0 44 13t38 35q20-20 36.5-34t45.5-14q37 0 59.5 25.5T880-337q0 15-6 30t-18 27L716-140ZM160-640h640v-80H160v80Zm303 480H160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v213q-35-25-76.5-39T716-560q-57 0-107.5 21.5T520-480H160v240h279q3 21 9 41t15 39Z"/></svg>
\ No newline at end of file
diff --git a/app/src/assets/guideline_icon.svg b/app/src/assets/guideline_icon.svg
deleted file mode 100644
index fcd12d9a..00000000
--- a/app/src/assets/guideline_icon.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-640v560h560v-560h-80v280l-100-60-100 60v-280H200Zm0 560v-560 560Z"/></svg>
\ No newline at end of file
diff --git a/app/src/assets/home_icon.svg b/app/src/assets/home_icon.svg
deleted file mode 100644
index d700ddea..00000000
--- a/app/src/assets/home_icon.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z"/></svg>
\ No newline at end of file
diff --git a/app/src/assets/light_mode_icon.svg b/app/src/assets/light_mode_icon.svg
deleted file mode 100644
index 8e4e9d0d..00000000
--- a/app/src/assets/light_mode_icon.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Zm326-268Z"/></svg>
\ No newline at end of file
diff --git a/app/src/assets/login_icon.svg b/app/src/assets/login_icon.svg
deleted file mode 100644
index 49c0f547..00000000
--- a/app/src/assets/login_icon.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-120v-80h280v-560H480v-80h280q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H480Zm-80-160-55-58 102-102H120v-80h327L345-622l55-58 200 200-200 200Z"/></svg>
\ No newline at end of file
diff --git a/app/src/assets/logout_icon.svg b/app/src/assets/logout_icon.svg
deleted file mode 100644
index 48814535..00000000
--- a/app/src/assets/logout_icon.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h280v80H200Zm440-160-55-58 102-102H360v-80h327L585-622l55-58 200 200-200 200Z"/></svg>
\ No newline at end of file
diff --git a/app/src/assets/menu_icon.svg b/app/src/assets/menu_icon.svg
deleted file mode 100644
index 2f427e91..00000000
--- a/app/src/assets/menu_icon.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>
\ No newline at end of file
diff --git a/app/src/assets/mypage_icon.svg b/app/src/assets/mypage_icon.svg
deleted file mode 100644
index d700ddea..00000000
--- a/app/src/assets/mypage_icon.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z"/></svg>
\ No newline at end of file
diff --git a/app/src/assets/post_icon.svg b/app/src/assets/post_icon.svg
deleted file mode 100644
index 3a5e9356..00000000
--- a/app/src/assets/post_icon.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h360v80H200v560h560v-360h80v360q0 33-23.5 56.5T760-120H200Zm120-160v-80h320v80H320Zm0-120v-80h320v80H320Zm0-120v-80h320v80H320Zm360-80v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80Z"/></svg>
\ No newline at end of file
diff --git a/app/src/assets/random_icon.svg b/app/src/assets/random_icon.svg
deleted file mode 100644
index 4a311794..00000000
--- a/app/src/assets/random_icon.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M560-160v-80h104L537-367l57-57 126 126v-102h80v240H560Zm-344 0-56-56 504-504H560v-80h240v240h-80v-104L216-160Zm151-377L160-744l56-56 207 207-56 56Z"/></svg>
\ No newline at end of file
diff --git a/app/src/assets/search_icon.svg b/app/src/assets/search_icon.svg
deleted file mode 100644
index ef0d0521..00000000
--- a/app/src/assets/search_icon.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>
\ No newline at end of file
diff --git a/app/src/assets/signup_icon.svg b/app/src/assets/signup_icon.svg
deleted file mode 100644
index 39b592bf..00000000
--- a/app/src/assets/signup_icon.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M720-400v-120H600v-80h120v-120h80v120h120v80H800v120h-80Zm-360-80q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM40-160v-112q0-34 17.5-62.5T104-378q62-31 126-46.5T360-440q66 0 130 15.5T616-378q29 15 46.5 43.5T680-272v112H40Zm80-80h480v-32q0-11-5.5-20T580-306q-54-27-109-40.5T360-360q-56 0-111 13.5T140-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T440-640q0-33-23.5-56.5T360-720q-33 0-56.5 23.5T280-640q0 33 23.5 56.5T360-560Zm0-80Zm0 400Z"/></svg>
\ No newline at end of file
diff --git a/app/src/assets/tag_icon.svg b/app/src/assets/tag_icon.svg
deleted file mode 100644
index a90881f3..00000000
--- a/app/src/assets/tag_icon.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M570-104q-23 23-57 23t-57-23L104-456q-11-11-17.5-26T80-514v-286q0-33 23.5-56.5T160-880h286q17 0 32 6.5t26 17.5l352 353q23 23 23 56.5T856-390L570-104Zm-57-56 286-286-353-354H160v286l353 354ZM260-640q25 0 42.5-17.5T320-700q0-25-17.5-42.5T260-760q-25 0-42.5 17.5T200-700q0 25 17.5 42.5T260-640ZM160-800Z"/></svg>
\ No newline at end of file
diff --git a/app/src/assets/thumb_down.svg b/app/src/assets/thumb_down.svg
deleted file mode 100644
index ec52e22f..00000000
--- a/app/src/assets/thumb_down.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M240-840h440v520L400-40l-50-50q-7-7-11.5-19t-4.5-23v-14l44-174H120q-32 0-56-24t-24-56v-80q0-7 2-15t4-15l120-282q9-20 30-34t44-14Zm360 80H240L120-480v80h360l-54 220 174-174v-406Zm0 406v-406 406Zm80 34v-80h120v-360H680v-80h200v520H680Z"/></svg>
\ No newline at end of file
diff --git a/app/src/assets/thumb_up.svg b/app/src/assets/thumb_up.svg
deleted file mode 100644
index af1265d0..00000000
--- a/app/src/assets/thumb_up.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M720-120H280v-520l280-280 50 50q7 7 11.5 19t4.5 23v14l-44 174h258q32 0 56 24t24 56v80q0 7-2 15t-4 15L794-168q-9 20-30 34t-44 14Zm-360-80h360l120-280v-80H480l54-220-174 174v406Zm0-406v406-406Zm-80-34v80H160v360h120v80H80v-520h200Z"/></svg>
\ No newline at end of file
diff --git a/app/src/assets/top_logo.svg b/app/src/assets/top_logo.svg
deleted file mode 100644
index d30b4ef8..00000000
--- a/app/src/assets/top_logo.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M20.9 103.16H23.08V118.9H20.9V103.16ZM17.1 107.28H27.46V109.02H17.1V107.28ZM17.66 115.34H27.08V117.08H17.66V115.34ZM18.16 112.62H26.58V114.36H18.16V112.62ZM13.4 104.62H16.18V106.54H13.4V104.62ZM14.42 110.12H16.62V111.86H14.42V110.12ZM15.64 104.62H15.92L16.26 104.54L17.76 104.92C16.94 107.2 15.66 110.26 14.6 112.68L12.64 112.22C13.72 109.82 15.02 106.56 15.64 104.86V104.62ZM16.04 110.12H16.42L16.8 110.08L18.06 110.28C17.66 115.92 16.38 119.66 13.68 121.76C13.4 121.24 12.8 120.4 12.36 119.98C14.54 118.44 15.74 114.88 16.04 110.46V110.12ZM14.54 113.1C15.62 118.36 18.18 119.4 21.96 119.42C22.88 119.42 26.48 119.42 27.62 119.36C27.3 119.88 26.98 120.9 26.86 121.52H21.84C17.06 121.52 14.18 120.14 12.74 113.62L14.54 113.1ZM18.4 104.64H26.46V111.68H18.4V109.94H24.44V106.38H18.4V104.64ZM11.8 103.08L13.94 103.72C12.9 107.04 11.18 110.64 9.28 112.94C9.12 112.38 8.56 110.98 8.22 110.36C9.7 108.56 11.02 105.84 11.8 103.08ZM10.44 108.86L12.5 106.8L12.54 106.84V121.78H10.44V108.86ZM36.98 112.92H39.46V121.8H36.98V112.92ZM34.96 110.48V111.72H40.92V110.48H34.96ZM32.66 108.78H43.38V113.42H32.66V108.78ZM30.74 114.62H44.2V116.76H33.16V120.92H30.74V114.62ZM43.06 114.62H45.52V118.74C45.52 119.82 45.3 120.44 44.5 120.78C43.7 121.12 42.62 121.14 41.18 121.14C41.06 120.48 40.72 119.56 40.4 118.96C41.3 119 42.38 119 42.66 119C42.96 118.98 43.06 118.92 43.06 118.7V114.62ZM36.72 103H39.2V106.68H36.72V103ZM29.4 105.76H46.66V110.6H44.28V107.82H31.7V110.6H29.4V105.76ZM31 104L33.18 103.14C33.76 103.78 34.36 104.66 34.64 105.28L32.34 106.3C32.12 105.66 31.54 104.68 31 104ZM42.7 103.16L45.28 103.94C44.56 104.78 43.84 105.56 43.28 106.08L41.26 105.36C41.76 104.74 42.36 103.82 42.7 103.16ZM48.98 109.08H66.98V111.2H48.98V109.08ZM50.72 105.18H62.16V107.26H50.72V105.18ZM54.24 116.06H63.18V117.86H54.24V116.06ZM54.24 119.2H63.18V121.22H54.24V119.2ZM55.44 103.02H57.8V110.26H55.44V103.02ZM64.24 103.6L66.3 104.66C62.38 110.12 56.28 114.14 49.8 116.52C49.52 116 48.8 115 48.36 114.52C54.86 112.44 60.74 108.62 64.24 103.6ZM52.9 112.8H64.7V121.74H62.2V114.76H55.3V121.82H52.9V112.8ZM70.76 106.04C71.28 106.12 72.12 106.18 72.66 106.18H83.56C84.16 106.18 84.86 106.12 85.42 106.04V108.8C84.84 108.74 84.14 108.7 83.56 108.7H72.66C72.12 108.7 71.28 108.74 70.76 108.8V106.04ZM76.54 118.36V107.58H79.32V118.36H76.54ZM69.48 116.72C70.12 116.82 70.84 116.88 71.44 116.88H84.64C85.34 116.88 85.98 116.78 86.5 116.72V119.6C85.94 119.54 85.1 119.52 84.64 119.52H71.44C70.86 119.52 70.14 119.54 69.48 119.6V116.72ZM93.68 104.34C96.32 104.66 102.08 105.84 104.6 106.72L103.58 109.2C101.24 108.34 95.58 107.08 92.76 106.72L93.68 104.34ZM92.78 109.72C95.64 110.2 100.72 111.3 103.22 112.16L102.24 114.66C99.96 113.78 94.82 112.62 91.84 112.14L92.78 109.72ZM91.74 115.46C95.18 115.98 101.32 117.42 104.08 118.44L102.98 120.94C100.28 119.84 93.94 118.46 90.74 117.96L91.74 115.46ZM123.16 110.48C123.08 110.74 123 111.1 122.98 111.32C122.78 112.72 122.1 117.26 121.86 118.7H119.1C119.36 117.38 119.96 113.52 120.06 112.18C119.1 112.18 115.22 112.18 114.64 112.18C114.02 112.18 113.22 112.22 112.64 112.26V109.62C113.18 109.7 114.1 109.76 114.62 109.76C115.64 109.76 118.8 109.76 119.76 109.76C120.16 109.76 120.98 109.68 121.24 109.54L123.16 110.48ZM110.82 117.72C111.34 117.78 112.1 117.84 112.78 117.84C113.98 117.84 122.3 117.84 123.28 117.84C123.78 117.84 124.72 117.8 125.24 117.74V120.32C124.82 120.3 123.84 120.28 123.32 120.28C122.28 120.28 113.8 120.28 112.78 120.28C112.08 120.28 111.56 120.3 110.82 120.34V117.72ZM131.509 119.22C131.729 118.72 131.769 118.38 131.769 117.92C131.769 116.4 131.769 109.3 131.769 107.06C131.769 106.32 131.649 105.36 131.529 104.8H134.669C134.569 105.56 134.489 106.3 134.489 107.06C134.489 109.28 134.489 115.94 134.489 117.46C137.749 116.54 142.209 113.98 144.769 110.84L146.189 113.12C143.449 116.38 139.289 118.78 134.569 120.32C134.309 120.4 133.869 120.54 133.389 120.86L131.509 119.22ZM149.429 110.74C150.169 110.8 151.609 110.88 152.649 110.88C155.009 110.88 161.609 110.88 163.389 110.88C164.329 110.88 165.209 110.78 165.749 110.74V113.9C165.269 113.88 164.249 113.78 163.409 113.78C161.589 113.78 155.009 113.78 152.649 113.78C151.529 113.78 150.189 113.84 149.429 113.9V110.74ZM176.169 110.64C178.629 112.06 182.329 114.62 184.189 116.1L182.269 118.38C180.529 116.74 176.729 113.94 174.389 112.46L176.169 110.64ZM185.589 107.24C185.349 107.62 185.089 108.18 184.909 108.68C184.309 110.52 183.089 113.08 181.289 115.3C179.409 117.64 176.849 119.88 173.029 121.32L170.709 119.32C174.889 118.02 177.269 115.92 178.989 113.92C180.329 112.34 181.569 110.04 181.949 108.48H175.189L176.109 106.22H181.809C182.429 106.22 183.089 106.12 183.549 105.98L185.589 107.24ZM178.969 104.16C178.489 104.86 177.969 105.78 177.729 106.2C176.389 108.62 173.829 111.68 170.949 113.66L168.809 112C172.309 109.84 174.149 107.1 175.169 105.36C175.469 104.88 175.889 103.96 176.069 103.26L178.969 104.16ZM196.309 103.02H198.749V119.52C198.749 120.7 198.449 121.18 197.689 121.52C196.909 121.82 195.829 121.86 194.129 121.86C194.009 121.3 193.629 120.46 193.329 119.98C194.289 120.02 195.469 120 195.809 120C196.189 119.98 196.309 119.86 196.309 119.52V103.02ZM188.809 104.32H206.409V106.22H188.809V104.32ZM193.149 108.54V109.5H201.989V108.54H193.149ZM190.869 107.02H204.449V111.02H190.869V107.02ZM190.369 111.9H204.789V119.72H202.349V113.54H190.369V111.9ZM188.349 114.38H206.869V116.2H188.349V114.38ZM190.209 117.14H203.649V118.88H190.209V117.14ZM213.829 103.9H220.949V106H213.829V103.9ZM215.849 108.16H219.249V110.24H215.189L215.849 108.16ZM214.609 113.66L215.629 111.86C216.429 112.4 217.429 113.2 217.889 113.74L216.829 115.76C216.389 115.16 215.409 114.28 214.609 113.66ZM220.809 105.34H222.929V117.06H220.809V105.34ZM224.169 103.4H226.389V119.08C226.389 120.36 226.149 120.98 225.429 121.36C224.689 121.74 223.569 121.82 221.989 121.82C221.889 121.18 221.569 120.14 221.249 119.48C222.349 119.52 223.369 119.52 223.729 119.52C224.049 119.5 224.169 119.4 224.169 119.08V103.4ZM215.309 104.64L217.589 104.96C217.009 108.62 215.969 112.98 213.749 115.58C213.429 115.1 212.769 114.3 212.329 113.9C214.189 111.66 214.989 107.7 215.309 104.64ZM218.349 108.16H218.769L219.149 108.08L220.529 108.5C219.809 115.02 217.709 119.56 214.629 121.8C214.309 121.26 213.589 120.32 213.129 119.96C216.009 118 217.789 114.12 218.349 108.62V108.16ZM211.789 103.04L214.009 103.7C212.869 107.2 211.029 110.98 208.989 113.36C208.789 112.78 208.209 111.4 207.829 110.78C209.449 108.88 210.929 105.96 211.789 103.04ZM210.209 108.54L212.349 106.4L212.409 106.44V121.78H210.209V108.54ZM228.569 115.32H246.649V117.24H228.569V115.32ZM232.409 107.88H244.529V109.44H232.409V107.88ZM232.409 110.28H244.549V111.84H232.409V110.28ZM231.929 105.18H245.529V107.06H231.929V105.18ZM236.909 106.36H239.209V113.38H236.909V106.36ZM236.349 114.04H238.749V121.78H236.349V114.04ZM236.169 116.12L237.969 117C235.909 119.04 232.469 120.8 229.429 121.68C229.089 121.08 228.409 120.2 227.889 119.7C230.929 119.06 234.389 117.66 236.169 116.12ZM239.009 116.06C240.729 117.58 244.109 118.98 247.109 119.64C246.609 120.12 245.949 121 245.609 121.58C242.589 120.72 239.229 118.96 237.189 116.96L239.009 116.06ZM237.909 103.02L240.609 103.34C239.969 104.54 239.249 105.66 238.689 106.44L236.569 106.02C237.069 105.16 237.629 103.92 237.909 103.02ZM232.789 102.98L235.249 103.46C233.909 105.8 232.149 108.1 229.689 110.08C229.309 109.54 228.529 108.8 227.989 108.46C230.229 106.84 231.869 104.74 232.789 102.98ZM230.849 106.4H233.129V112.7H246.109V114.52H230.849V106.4Z" fill="black"/>
-<path d="M80.492 142.436H84.716V143.768H80.492V142.436ZM80.6 145.868H84.584V147.188H80.6V145.868ZM80.204 150.032C81.368 149.768 83.108 149.3 84.764 148.844L84.956 150.104C83.444 150.56 81.812 151.028 80.564 151.4L80.204 150.032ZM86.516 145.268V146.012H89.672V145.268H86.516ZM86.516 147.116V147.848H89.672V147.116H86.516ZM86.516 143.444V144.176H89.672V143.444H86.516ZM85.184 142.268H91.076V149.036H85.184V142.268ZM88.208 148.508H89.588V151.388C89.588 151.748 89.624 151.784 89.816 151.784C89.9 151.784 90.212 151.784 90.32 151.784C90.524 151.784 90.572 151.592 90.596 150.392C90.872 150.608 91.448 150.836 91.808 150.92C91.688 152.564 91.352 153.02 90.476 153.02C90.26 153.02 89.768 153.02 89.564 153.02C88.448 153.02 88.208 152.612 88.208 151.4V148.508ZM86.084 148.856H87.488C87.308 150.908 86.792 152.36 84.128 153.164C83.984 152.804 83.624 152.252 83.336 151.976C85.616 151.4 85.928 150.38 86.084 148.856ZM81.944 142.964H83.336V150.02L81.944 150.224V142.964ZM97.244 141.824H98.72V143.744H97.244V141.824ZM92.852 142.868H103.136V145.448H101.648V144.128H94.28V145.448H92.852V142.868ZM93.92 145.076H102.164V146.24H93.92V145.076ZM92.756 148.88H103.304V150.128H92.756V148.88ZM94.112 146.96H101.924V148.124H94.112V146.96ZM98.708 149.132C99.416 150.716 100.976 151.592 103.472 151.856C103.172 152.156 102.8 152.732 102.62 153.116C99.872 152.672 98.336 151.532 97.412 149.396L98.708 149.132ZM97.208 144.392H98.66V147.728C98.66 149.84 97.784 151.904 93.416 153.08C93.26 152.768 92.84 152.216 92.528 151.916C96.68 150.968 97.208 149.324 97.208 147.716V144.392ZM104.432 144.704H115.592V146.096H104.432V144.704ZM106.916 150.932H115.16V152.312H106.916V150.932ZM109.88 147.992H112.964V149.336H109.88V147.992ZM106.16 142.172H107.648V153.08H106.16V142.172ZM109.28 141.92H110.732V149.828H109.28V141.92ZM112.34 142.04H113.792V149.804H112.34V142.04ZM119.168 145.316V146.192H124.832V145.316H119.168ZM119.168 143.384V144.236H124.832V143.384H119.168ZM117.728 142.22H126.332V147.344H117.728V142.22ZM123.644 146.588C124.436 147.668 125.996 148.556 127.676 148.976C127.352 149.264 126.92 149.828 126.716 150.2C124.952 149.624 123.392 148.472 122.432 147.032L123.644 146.588ZM120.368 146.576L121.64 147.068C120.668 148.46 119.048 149.636 117.344 150.248C117.128 149.888 116.696 149.348 116.384 149.06C118.004 148.604 119.576 147.656 120.368 146.576ZM119.516 148.772H121.004V149.6C121.004 150.752 120.656 152.288 118.256 153.164C118.064 152.804 117.584 152.264 117.272 151.988C119.276 151.34 119.516 150.32 119.516 149.552V148.772ZM121.268 142.808H122.72V146.768H121.268V142.808ZM123.176 148.796H124.676V153.044H123.176V148.796ZM135.092 143.78C134.924 145.004 134.684 146.408 134.264 147.824C133.544 150.248 132.512 151.736 131.204 151.736C129.86 151.736 128.756 150.26 128.756 148.232C128.756 145.472 131.168 143.096 134.276 143.096C137.24 143.096 139.124 145.16 139.124 147.788C139.124 150.308 137.576 152.096 134.552 152.564L133.64 151.148C134.108 151.088 134.444 151.028 134.768 150.956C136.292 150.584 137.492 149.492 137.492 147.728C137.492 145.844 136.316 144.5 134.24 144.5C131.696 144.5 130.304 146.576 130.304 148.088C130.304 149.3 130.784 149.888 131.24 149.888C131.756 149.888 132.212 149.12 132.716 147.5C133.064 146.372 133.328 144.992 133.448 143.732L135.092 143.78ZM145.676 142.424C145.592 142.76 145.484 143.3 145.424 143.564C145.256 144.38 144.956 145.844 144.632 147.068C144.2 148.748 143.396 151.196 142.736 152.624L141.068 152.06C141.776 150.848 142.688 148.34 143.144 146.66C143.444 145.532 143.72 144.212 143.804 143.504C143.864 143.06 143.876 142.568 143.84 142.28L145.676 142.424ZM142.616 144.224C144.08 144.224 145.772 143.996 147.332 143.624V145.124C145.844 145.472 143.96 145.676 142.604 145.676C142.016 145.676 141.572 145.652 141.152 145.628L141.104 144.128C141.728 144.2 142.124 144.224 142.616 144.224ZM146.384 146.06C147.056 145.988 147.92 145.94 148.7 145.94C149.384 145.94 150.104 145.976 150.8 146.048L150.776 147.488C150.164 147.416 149.432 147.332 148.712 147.332C147.884 147.332 147.14 147.368 146.384 147.464V146.06ZM147.032 149.072C146.948 149.42 146.876 149.804 146.876 150.068C146.876 150.596 147.224 150.992 148.52 150.992C149.324 150.992 150.152 150.908 151.004 150.752L150.944 152.276C150.272 152.372 149.468 152.444 148.508 152.444C146.48 152.444 145.4 151.76 145.4 150.548C145.4 149.984 145.508 149.408 145.604 148.94L147.032 149.072ZM160.388 142.592C160.28 142.928 160.172 143.516 160.1 143.804C159.596 145.928 158.816 148.424 157.664 149.876C156.56 151.268 155.792 151.892 154.688 151.892C153.692 151.892 152.78 151.052 152.78 149.504C152.78 147.896 153.704 146.18 155.108 145.28C156.392 144.452 157.604 144.152 158.888 144.152C161.36 144.152 163.136 145.82 163.136 148.316C163.136 150.86 161.324 152.324 158.816 152.708L157.904 151.316C160.544 151.088 161.576 149.744 161.576 148.244C161.576 146.612 160.46 145.484 158.732 145.484C157.484 145.484 156.512 145.94 155.672 146.552C154.736 147.212 154.184 148.388 154.184 149.372C154.184 149.96 154.436 150.332 154.856 150.332C155.48 150.332 156.14 149.564 156.764 148.616C157.688 147.26 158.384 145.052 158.636 143.576C158.696 143.228 158.732 142.724 158.72 142.436L160.388 142.592ZM155.324 142.988C155.384 143.396 155.48 143.792 155.576 144.14C155.948 145.484 156.584 147.32 157.136 148.184C157.544 148.832 158.108 149.588 158.672 150.116L157.448 151.088C156.98 150.56 156.62 150.104 156.236 149.492C155.504 148.424 154.784 146.504 154.232 144.728C154.1 144.308 153.956 143.924 153.74 143.492L155.324 142.988ZM169.364 143.612C170.84 143.816 173.24 143.756 174.524 143.6V145.148C173.06 145.292 170.876 145.292 169.376 145.148L169.364 143.612ZM170.324 148.736C170.228 149.144 170.18 149.432 170.18 149.744C170.18 150.284 170.648 150.608 171.872 150.608C172.94 150.608 173.828 150.512 174.872 150.284L174.908 151.904C174.128 152.06 173.156 152.144 171.8 152.144C169.736 152.144 168.74 151.4 168.74 150.176C168.74 149.696 168.812 149.228 168.956 148.616L170.324 148.736ZM167.516 142.808C167.432 143.06 167.276 143.672 167.228 143.888C167.06 144.68 166.64 147.08 166.64 148.28C166.64 148.52 166.652 148.82 166.688 149.06C166.868 148.652 167.06 148.244 167.24 147.836L167.984 148.424C167.636 149.432 167.24 150.728 167.12 151.364C167.084 151.544 167.048 151.808 167.048 151.928C167.06 152.06 167.06 152.264 167.072 152.432L165.692 152.516C165.452 151.7 165.224 150.236 165.224 148.604C165.224 146.792 165.584 144.776 165.716 143.84C165.764 143.516 165.824 143.06 165.836 142.676L167.516 142.808Z" fill="black"/>
-<line x1="8" y1="131.5" x2="248" y2="131.5" stroke="black"/>
-</svg>
diff --git a/app/tailwind.css b/app/tailwind.css
index 74b5db9d..4c37dc27 100644
--- a/app/tailwind.css
+++ b/app/tailwind.css
@@ -7,15 +7,15 @@ h1 {
 }
 
 .postContent h3, .markdownEditorPreview h3 {
-  @apply text-xl font-bold mb-6 mt-10 border-b border-gray-800 pb-2;
+  @apply text-xl font-bold mb-6 mt-10 border-b border-base-content pb-2;
 }
 
 .postContent h4, .markdownEditorPreview h4 {
-  @apply text-lg font-bold mb-4 mt-10 border-b border-gray-800 pb-2;
+  @apply text-lg font-bold mb-4 mt-10 border-b border-base-content pb-2;
 }
 
 .postContent h5, .markdownEditorPreview h5 {
-  @apply text-lg font-bold mb-4 mt-10 border-b border-gray-800 pb-2; 
+  @apply text-lg font-bold mb-4 mt-10 border-b border-base-content pb-2; 
 }
 
 .postContent table, .markdownEditorPreview table {
@@ -43,10 +43,14 @@ h1 {
 }
 
 .postContent a, .markdownEditorPreview a{
-  @apply text-blue-600 underline underline-offset-4;
+  @apply text-info underline underline-offset-4;
 }
 
 .markdownEditorPreview th {
-  @apply bg-gray-100 text-left font-semibold 
+  @apply bg-inherit text-left font-normal 
 
+}
+
+svg {
+  @apply fill-current;
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 27a8e76d..3686968a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -40,6 +40,7 @@
         "@typescript-eslint/eslint-plugin": "^6.7.4",
         "@typescript-eslint/parser": "^6.7.4",
         "autoprefixer": "^10.4.19",
+        "daisyui": "^4.10.2",
         "eslint": "^8.38.0",
         "eslint-import-resolver-typescript": "^3.6.1",
         "eslint-plugin-import": "^2.28.1",
@@ -3877,6 +3878,16 @@
         }
       ]
     },
+    "node_modules/css-selector-tokenizer": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz",
+      "integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "fastparse": "^1.1.2"
+      }
+    },
     "node_modules/css-what": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
@@ -3910,6 +3921,34 @@
       "resolved": "https://registry.npmjs.org/csv-parse/-/csv-parse-5.5.5.tgz",
       "integrity": "sha512-erCk7tyU3yLWAhk6wvKxnyPtftuy/6Ak622gOO7BCJ05+TYffnPCJF905wmOQm+BpkX54OdAl8pveJwUdpnCXQ=="
     },
+    "node_modules/culori": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/culori/-/culori-3.3.0.tgz",
+      "integrity": "sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==",
+      "dev": true,
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      }
+    },
+    "node_modules/daisyui": {
+      "version": "4.10.2",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.10.2.tgz",
+      "integrity": "sha512-eCWS1W/JPyxW9IvlgW5m0R6rp9ZhRsBTW37rvEUthckkjsV04u8XipV519OoccSA46ixhSJa3q7XLI1WUFtRCA==",
+      "dev": true,
+      "dependencies": {
+        "css-selector-tokenizer": "^0.8",
+        "culori": "^3",
+        "picocolors": "^1",
+        "postcss-js": "^4"
+      },
+      "engines": {
+        "node": ">=16.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/daisyui"
+      }
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -5373,6 +5412,12 @@
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
       "dev": true
     },
+    "node_modules/fastparse": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
+      "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
+      "dev": true
+    },
     "node_modules/fastq": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
diff --git a/package.json b/package.json
index f311566e..8adcd279 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "@typescript-eslint/eslint-plugin": "^6.7.4",
     "@typescript-eslint/parser": "^6.7.4",
     "autoprefixer": "^10.4.19",
+    "daisyui": "^4.10.2",
     "eslint": "^8.38.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.28.1",
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 7f1da930..3bacb504 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -12,6 +12,29 @@ export default {
       "lg" : "16px",
     }
   },
-  plugins: [],
+  plugins: [require("daisyui")],
+  daisyui: {
+    themes: [
+      {
+        light: {
+          // eslint-disable-next-line @typescript-eslint/no-var-requires
+          ...require("daisyui/src/theming/themes")["light"],
+          primary: "#0017C1",
+          secondary: "#264AF4",
+          tertiary: "#00118F",
+          info: "#00118F"
+        },
+      },
+      {
+        dark: {
+          // eslint-disable-next-line @typescript-eslint/no-var-requires
+          ...require("daisyui/src/theming/themes")["dark"],
+          primary: "#0017C1",
+          secondary: "#264AF4",
+          tertiary: "#00118F",
+        },
+      },
+    ],
+  }
 } satisfies Config